HTML入门笔记1

InnerXuan
180 阅读8分钟

HTML5概述

万维网www

World Wide Web 其实等于 URL + HTTP +HTML

万维网的发明人 Tim Berner-Lee

  • 自己写了第一个浏览器
  • 自己写了第一个服务器
  • 用自己写的浏览器访问了自己写的服务器
  • 发明了WWW,同时发明了HTML,HTTP和URL

内容共享是互联网的本质

我们应该学习那些知识呢？

  • 如何制作出网页
  • 域名知识
  • HTTP服务器知识
  • HTML知识

万维网是基于互联网，实现了输入网址，呈现网页的功能

最早的HTML诞生于Tim Berner-Lee 的Html Tag文章

HTML的权威资料

MDN网址

什么是H5?

  • 狭义的H5 : 即最新版本的HTML5
  • 广义的H5: 即HTML5和CSS3其他

HTML5技术合集

  • 新标签，新属性
  • 新的媒体通信技术：WebSockets,WebRTC等
  • 离线存储技术：LocalStorage,断网检测
  • 多媒体技术：视频，音频
  • 图像技术：Canvas,SVG,WebGl
  • Web增强技术：History API ,全屏
  • 设备相关技术：摄像头.触摸屏
  • 新的样式技术：CSS3的新的Flex.Grid布局方式

正确的学习方法

  • 把所有标签用嘴巴读一遍，了解其内容
  • 全部忘掉，只记住div和span
  • 开始学习CSS
  • 找一个页面，仿写
  • 发现有更合适的标签，就改用更合适的
  • 继续写页面

学习过程

  • COPY 抄文档，抄老师的代码
  • RUN 放在自己的机器上运行
  • Modify加入一点自己的想法，然后重新运行

一旦有一面试官问你一个英文是什么意思，你就直接翻译成英文

HTML的语法结构是怎么样的？

tip:学变态，不学常态

<!DOCTYPE=HTML> 
表名这个是HTML文档
<tag attr=value></tag>
最常见的一种方式
value其实中间是可以加空格的
<tag attr></tag>
比如
<input type="checkbox" checked>
要改为checked="false"其实是无效的
<tag att=value>
  比如link标签

注意点是

标签它不区分大小写 注释 ctrl + / 组合

如何纠错？

1.VSCode 颜色提示 2.WebStorm颜色提示 3.使用HTML5检验器

WebStorm与VSCode性能比较

WebStorm开启项目10秒以上
要求电脑4G内存以上
但是对于大型项目来说WebStorm和VSCode的性能区别不大

如何使用HTML5检验器?

yarn global add node-w3c-validator

node-w3c-validator -i 相对路径

在那里查资料好？

Google关键词后面加MDN
w3school跟W3C没有任何关系
不推荐使用W3Chool有一些是错误的 MDN是一个很多人维护的社区

html5常用标签

介绍一个常用的VSCode 插件

prettier ，当鼠标离开之后，自动格式化

介绍二个强大的在线编辑器

js bin

具有代码分享的功能,ctrl+s之后,点击share，或复制上面的url，就可以分享代码给你的小伙伴。

codesandbox.io

一个美观高大上的代码编辑器,保存后,复制url，同样可以分享代码 且是一个高仿的VSCode,快捷功能齐全

HTML起手式

在VSCode中 !+Tab即可生成代码骨架

<!DOCTYPE html>----------------------- 声明文档类型为HTML
<html lang="en">----------------------------- lang表示language en英文可以改为zh-en

<head>
    <meta charset="UTF-8"> ---------------------------字符编码为utf-8不要更改
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> ------------------------视口标签，不可以缩放，兼容手机
     <meta http-equiv="X-UA-Compatible" content="ie=edge"> --------------------------------使用IE浏览器时候，必须升级到最新版本
    <title>Document</title>---------------------------------标题
</head>

<body>
   
</body>

</html>

章节标签

表示文章/书的层级
标题：h1-h6
章节：section
文章：article
段落:p
头部:header
尾部:footer
主要内容: main
旁支内容:main
划分 div

代码演示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>章节标签</title>
</head>

<body>
    <header>头部导航栏</header>
    <main>
        <h1>主体区</h1>
        <section>
            <h2>第一章</h2>
            <p>第一张的内容第一张的内容第一张的内容第一张的内容第一张的内容第一张的内容第一张的内容第一张的内容第一张的内容第一张的内容</p>
            <section>
                <h3>1.1</h3>
                <article>
                    <p>1.1内容1.1内容1.1内容1.1内容1.1内容1.1内容1.1内容1.1内容1.1内容</p>
                </article>
                <h3>1.2</h3>
                <article>
                    <p>1.2内容1.2内容1.2内容1.2内容1.2内容1.2内容1.2内容1.2内容1.2内容1.2内容</p>
                </article>
            </section>

        </section>



    </main>
    <aside>
        旁支导航栏
        <div>一</div>
        <div>1.1</div>
        <div>1.2</div>
    </aside>
    <footer>&copy;xuansining版权所有</footer>
</body>

</html>

浏览器中输出

全局属性

  • class 类,方便css选择
  • contenteditable 是否可编辑
  • hidden 隐藏 ,与block相对
  • id 万不得已不要用，并不能保证它的唯一性
  • style 样式，
  • tabindex 用来控制Tab键的操作,tabindex=整数,tab按顺序切换，特殊：tabindex=0,最后执行，tabindex=-1,tab永远访问不到
  • title 鼠标放上去显示完整内容，尤其是做了文本省略的时候
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>章节标签</title>
    <style>
        .main {
            border: 1px solid #ccc;
            background-color: black;
            color: white;
        }

        .tip {
            border: 1px solid #ccc;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div tabindex="1" class="tip"
        title="让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑">
        让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑让头部可编辑
    </div>
    <header contenteditable tabindex="2">头部导航栏</header>
    <main class="main" tabindex="3">
        <h1>主体区</h1>
        <section>
            <h2>第一章</h2>
            <p>第一张的内容第一张的内容第一张的内容第一张的内容第一张的内容第一张的内容第一张的内容第一张的内容第一张的内容第一张的内容</p>
            <section>
                <h3>1.1</h3>
                <article>
                    <p>1.1内容1.1内容1.1内容1.1内容1.1内容1.1内容1.1内容1.1内容1.1内容</p>
                </article>
                <h3>1.2</h3>
                <article>
                    <p>1.2内容1.2内容1.2内容1.2内容1.2内容1.2内容1.2内容1.2内容1.2内容1.2内容</p>
                </article>
            </section>

        </section>



    </main>
    <aside tabindex="4">
        旁支导航栏
        <div>一</div>
        <div>1.1</div>
        <div>1.2</div>
    </aside>
    <footer tabindex="5">&copy;xuansining版权所有</footer>
</body>

</html>

浏览器

默认样式

为什么会有默认样式呢？

因为html出现的时候，css还没有出现
我们在开发过程中,基本不使用默认的样式 一般会做初始化

内容标签

ol+li有序列表 ol order list
li list item
ul+li无序列表
ul unordered list
dl + dt + dd描述列表
dl description list
dt description term
dd description data
pre
保留空格 回车
code
代码片段,一般用pre包裹code hr
分割线
br
换行
a
anchor 链接，锚
em
语气强调
strong
内容强调
quote
引用
blockquote
引用块

代码演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ol>
        <li>WWW</li>
        <li>Tim Lee</li>
        <li>jack</li>
    </ol>

    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>

    <dl>
        <dt>head</dt>
        <dd>descriptions</dd>
        <dd>descriptions</dd>
        <dd>descriptions</dd>
    </dl>

    <pre>

        <code>
              public static void main(String args[]){
                    System.out.println("hello world")
              }
        </code>
    </pre>
    <hr>
    <span>欧阳修 三上</span><br>
    <span>马上,厕上，卧上</span>

    <div>
        <em>考试的重点是</em>: <strong>Javascript</strong>
    </div>
    <quote>
        在子在川上曰：逝者如斯
    </quote>

    <blockquote>
        在子在川上曰：逝者如斯
        在子在川上曰：逝者如斯
        在子在川上曰：逝者如斯

    </blockquote>
</body>


</html>

浏览器效果

参考：饥人谷资料

avatar
文章
阅读
粉丝