HTML5

刘文奇 5/11/2019 html

# 一、初始 HTML

# 1. 基本介绍

超文本标记语言（英语：Hyper Text Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

HTML常与CSS、JavaScript 一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。

网页浏览器可以读取HTML文件，并将其渲染成可视化网页。

HTML 负责展现网页的内容
CSS 层叠样式表，负责以什么样的样式展现网页的内容，比如字体的大小和颜色，背景图片和内容放在什么位置。
JavaScript 负责用户和网页内容的交互，就是让网页内容动起来。

维护HTML和CSS标准的组织是万维网联盟（W3C） (opens new window)

# 2. 标记

HTML标记包含标签（及其属性）、基于字符的数据类型、字符引用和实体引用等几个关键部分。

HTML标签是最常见的，通常成对出现，比如<h1>与 </h1>。这些成对出现的标签中，第一个标签是开始标签，第二个标签是结束标签。两个标签之间为元素的内容，有些标签没有内容，如 <img>, 这个稍后会介绍。

HTML另一个重要组成部分为文档类型声明这会告诉浏览器改用哪一种标准来渲染。

下面是一个经典的Hello World程序的例子，一个用于比较编程语言、脚本语言和标记语言的不同之处的通用测试。这个例子用9行代码写成：

<!DOCTYPE html>
<html>
  <head>
    <title>这是标题</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>

1
2
3
4
5
6
7
8
9

文档标记类型<!DOCTYPE html>用于表示这是一个 HTML5 类型的文档。

<html>和</html>之间的文本用于描述整个网页部分。

<body>和</body>之间的文本是你真正能在页面上看到的内容，即浏览器的窗口内容。

<title>这是标题</title>定义了浏览器的页面标题，就是在浏览器每个标签上展现的内容。

# 3. HTML 文档总体结构

<!DOCTYPE html>
<!--
 我是 HTML 语言中的注释,可以单行，
 也可以多行。
-->
<!--设置页面的语言： 英文。中文把 en 换成 zh-CN -->
<html lang="en">   <!--网页开始-->
   <head>          <!--网页头开始-->   
       <title>溜不溜</title> <!--页面标题-->
       <meta charset="UTF-8"/>
   </head>         <!--网页头结束-->
   <body>          <!--网页体开始-->
       <!--页面正文标签开始-->
       <div>
        页面正文内容  
       </div>
       <!--页面正文标签结束-->

    </body>        <!--网页体结束-->
</html>           <!--网页结束-->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 4. HTML5 语法

实际上是沿用了之前的 html 语法，只是做的更加简单、更加人性化。

不区分大小写（规范化建议小写）
支持布尔值 <input type="text" required="true">
属性的值可以省略引号（规范化考虑，建议使用双引号）

  <div class=c1></div>
  <!--等同于-->
  <div class="c1"></div>

1
2
3

# 5. 标签和元素的关系

HTML文档由嵌套的HTML元素构成。它们用HTML标签表示，包含于尖括号中，如 <div>。

在一般情况下，一个元素由一对标签表示：开始标签<p>与结束标签 </p>。元素如果含有文本内容，就被放在这两个标签之间。

<p>我是段落标签，用来表示一段文字</p>

在开始与结束标签之间也可以嵌套另外的标签元素，包括标签与文本的混合。这些嵌套的标签是父与子的关系。

<p>
    我是段落标签<a>我是 a 标签，可以被点击，
    点我</a>
</p>

1
2
3
4

# 6. 标签分类

# a. 从书写方式分，标签分为:

自闭合标签
自闭合标签，只有一个大于号和小于号组合而成，后面的反斜线可以有，也可以没有。建议都有。

<meta/>
<img/>

1
2

主动闭合标签

主动闭合标签都是成对儿出现的,并且后面的必须加反斜线 /,以表名此标签内容结束。

<div>主动闭合标签</div>

# b. 从元素(标签) 在页面中所占据的位置空间来分，可分为：

块级元素

在整个页面上，无论自己内容的多少，自己都会独占一行。

内联标签，不独占一行，只占据自己宽度大小的空间

HTML5 源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>标签分类</title>
  <style>
    .c1{
      border: 2px solid red;
      background-color:thistle;
      font-size: 20px;
    }
    .c2{
      border: 2px solid rgb(47, 28, 99);
      background-color:rgb(138, 179, 127);
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="c1">我就是霸道，这一行都是我的地盘</div>
  <a href="" class="c2">左青龙</a>
  <span class="c2">我最好说话了，是兄弟站在我的两边</span>
  <a href="" class="c2">右白虎</a>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

常见块级标签有：

<div></div>
<p></p>

<h1></h1>
到
<h6></h6>

<ul></ul>
<table></table>

1
2
3
4
5
6
7
8
9

常用的内联标签有：

<a href="#"></a>   <i></i>   <span></span>

# 7. 认识标签的属性

几乎在所有的标签中都可以针对标签的种类，设置自身的属性；如：

<a class="widget-controls">

这里 class 就是这个 a 标签的属性名，这个属性叫做类属性。

widget-controls 是属性的值，也就是类的名字，规范要求用双引号包裹起来。在一个HTML文本中同一个类的名字可给多个标签使用。

具体有哪些属性，下面会针对不同的标签来说明。

# 二. HTML元素之间的关系结构

了解一些浏览器的工作原理是很重要的。以下面这段 HTML 为例：

<div>
  <h1>My title</h1>
  Some text content
  <!-- TODO: Add tagline -->
</div>

1
2
3
4
5

当浏览器读到这些代码时，它会建立一个“DOM 节点”树 (opens new window)来保持追踪所有内容，如同你会画一张家谱树来追踪家庭成员的发展一样。

上述 HTML 对应的 DOM 节点树如下图所示：

每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样，每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。

# 三、标签及其属性详解

先下面从一下几个部分对标签分别进行介绍

结构标签
头部标签
功能标签
- 文本文字
- 超链接
- 多媒体 (html5 中新增)
- 表单

# 1. 结构标签

在前面第 1.3 小节 HTML 文档总体结构 中，已经介绍了总体结构标签，这里就不再赘述。

在这里注意是说一下 HTML5 中心增的结构标签，就是有语义化的标签。

也可以是说是一看到标签名称，就知道是啥意思。

结构化标签

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 让 html5 的语义化标签在 IE8 及其一下版本的支持 -->
  <!--[if lte IE 8]>
      <script src="./html5shiv.js"></script>
  <![endif]-->
</head>
<body>
 <header>
   <div>Logo</div>
   <nav>
     <a href="index.html">首页</a>
     <a href="#">发现</a>
     <a href="#">关注</a>
     <a href="#">消息</a>
     <a href="#">个人中心</a>
   </nav>
 </header>

 <section>
   <article>
    <h3>标题党1</h3>
    <p>The article element represents a complete, or self-contained,
      composition in a document, page, application, or site and that is,
       in principle, independently distributable or reusable, e.g.
       in syndication. This could be a forum post,
       a magazine or newspaper article, a blog entry,
       a user-submitted comment, an interactive widget or gadget,
       or any other independent item of content.
       Each article should be identified, typically by including
        a heading (h1–h6 element) as a child of the article element.
    </p>
   </article>
 </section>
 <section>
    <article>
        <h3>标题党2</h3>
        <p>The article element represents a complete, or self-contained,
          composition in a document, page, application, or site and that is,
           in principle, independently distributable or reusable, e.g.
           in syndication. This could be a forum post,
           a magazine or newspaper article, a blog entry,
           a user-submitted comment, an interactive widget or gadget,
           or any other independent item of content.
           Each article should be identified, typically by including
            a heading (h1–h6 element) as a child of the article element.
        </p>
       </article>
 </section>
 <section>
    <article>
        <h3>标题党3</h3>
        <p>The article element represents a complete, or self-contained,
          composition in a document, page, application, or site and that is,
           in principle, independently distributable or reusable, e.g.
           in syndication. This could be a forum post,
           a magazine or newspaper article, a blog entry,
           a user-submitted comment, an interactive widget or gadget,
           or any other independent item of content.
           Each article should be identified, typically by including
            a heading (h1–h6 element) as a child of the article element.
        </p>
       </article>
 </section>
 <footer>表示底部，一般放置版权信息等</footer>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

# 2. 头部标签及其属性

就是在 <head></head> 标签中定义的标签。

网页标题图标 shark.ico

# 源数据 `meta`

<!--设置整个页面的字符集编码-->
<meta charset="UTF-8">

<!--主要是针对移动设备而进行优化显示效果的, 后面会有更详细的解释-->
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>


<!--设置用最新的 IE 引擎去渲染HTML,这是为了兼容IE浏览器-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<!--设置头部图标-->
<link rel="shortcut icon" href="https://upload-images.jianshu.io/upload_images/11414906-1e684e513643a190.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" sizes="16x16"/>

<!--刷新,下面是定义每30秒刷新一次这个页面-->
<meta http-equiv="Refresh" Content="30"/>

<!-- 禁用浏览器缓存 -->
<meta http-equiv="pragma" content="no-cache"/>

<!--设置页面在打开几秒后跳转到目标URL-->
<!--<meta http-equiv="Refresh" Content="5; URL=http://www.qfedu.com"/>-->

<!--设置关键字，用于在搜索引擎上通过这些关键字进行搜索时，能够搜索到这个网址-->
<meta name="keywords" content="鲨鱼,千锋，云计算，python， 运维开发， Vue"/>

<!--设置网址的描述性信息-->
<meta name="description" content="网站的简单介绍信息，描述了网站的主要功能、业务范围，等信息"/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 3. 功能标签

# a. 盒子标签 `div`

首先它是一个块级元素的标签。

div 标签通常作为一个盒子或者说容器，可以把其他的标签放在里面，在 html5 之前通常用于网页的布局。

  <div class="header">网页头部</div>
  <div class="conntet">网页内容</div>
  <div class="footer">网页底部</div>

1
2
3

现在大部分情况下只是作为一个盒子容器，存放其他功能标签。

 <div>
   姓名<input type="text">
  </div>
 <div>
   年龄<input type="text">
 </div>
 <div>
   地址<input type="text">
 </div>

1
2
3
4
5
6
7
8
9

# b. 文本文字

h1 到 h6 块元素，主动封闭，用于书写标题内容，字体有大变小。

h5 中新增了 hgroup 标签，假如网页上出现了连续的 h 标签，可以把这些标题标签放到 hgroup 中。

<hgroup>
    <h1>标题一</h1>
    <h2>标题二</h2>
<hgroup>

1
2
3
4

p 表示文章中的一个段落, 块级元素

<p>段落内容一</p>
<p>段落内容二</p>

1
2

span

    <span>
      我也是比较纯洁的标签，没有太多的限制，比较有利于进行CSS的修饰，同时我是内联标签 
    </span>
    <span>我是不会换行的，同时我是内联标签</span>

1
2
3
4

换行标签：<br>可以在内联标签中或者在一个块标签内换行

其实几乎所有的成对儿出现的标签内都可以写文字内容。

# c.多媒体

示例图片 妹子meizi.jpg

img 图片

    <img src="https://upload-images.jianshu.io/upload_images/11414906-c60bbc1ca98d9924.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
         alt="小姐姐跑了"
         title="犀利的眼神"/>

1
2
3
4

src 　　图片文件的本地绝对或者相对路径，通常情况下都是一个 url 地址；

alt 　　假如图片不能显示，则显示这里的文字,跳转功能不受影响；

title 　当鼠标放在这个图片上时，会出现的内容

audio 音频播放， h5 新增

  <audio src="music/隔壁老樊 - 多想在平庸的生活拥抱你.flac"  controls loop>无法播放，浏览器不支持</audio>
<br/>
<audio src="https://vipkshttps0.wiz.cn/ks/attachment/download/9d341970-76bb-11e9-8499-f9054e49814b/3dad2926-67e8-4cac-9131-4a0db35dda35/0a863399-01c6-4b0d-b63d-e040e7e44a10?clientType=web&clientVersion=3.0.0&apiVersion=10&lang=zh-cn"
           controls
          loop></audio>

1
2
3
4
5

上面示例中的视频容量稍大，根据网速，需要等待几分钟

src 指定文件地址或 url

controls 显示播放控件

loop 循环播放

video 视频播放， h5 新增

    <div>
        <video src="video/我曾.mp4"
          width="800" height="680"
          loop
          autoplay
          muted
          controls="controls">
          对不起！ 您的浏览器不支持，请升级
        </video>
    </div>

1
2
3
4
5
6
7
8
9
10
11

autoplay 是自动播放，谷歌浏览器不支持

解决办法同时加上 muted 属性，但是默认是静音状态

# d. 超链接

a 标签，同时它是一个内联标签

可以设置跳转,就是在页面上点击它，会跳转到目标页面（称为重定向）或者同页面的另一个标签处（称为锚）

   <a href="http://www.baidu.com" target="_blank">新标签打开百度</a>
  
<!--锚,可以跳到同一个页面的其他标签的位置，需要指定 id-->
   <a href="#p100">跳到 id 为 p100 的标签位置</a>

<!--设置点击一个图片进行跳转-->
<p>点击下方图片进行跳转</p>
<a href="http://www.qfedu.com/">
     <img src="https://upload-images.jianshu.io/upload_images/11414906-c60bbc1ca98d9924.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
         alt="色即是空"
         title="犀利的眼神"/>
</a>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

href 指定跳转到地址

targe ="_blank" 是在一个新的标签页面打开跳转到目标页面, 默认是在当前页面跳转。

# e. 表单和表单中的元素

重点讲解

form 用于向后台服务端提交数据，比如注册时候的注册信息等。块级元素，使用频率较高，重点掌握。

 <form action="http://192.168.56.128/index/"
       method="POST"
       enctype="multipart/form-data">
  姓名： <input type="text" >
 </form>

1
2
3
4
5

action 把 input 标签的数据提交到哪儿，通常是一个 url
method 把 input 标签的数据提交的方法：
GET 方法, 把提交的内容放到请求的 url 地址后面，数据被封装在请求头中，后台接收到的数据内会是一个字典的形式
POST 方法,把提交的数据放到请求体中，后台接收到的数据也是一个字典的形式
enctype="mutipart/form-data" 是提交文件或图片专用的属性

form 标签中通常会有如下标签，用于获取用户输入的信息。

input 输入普通文本，内联元素

input 用于设置提交表单数据，用于前端用户和后台交互，这个标签也是内联标签。很重要，必须掌握。

    <form action="http://www.qfedu.com" method="GET">
        <input type="text" name="user_name" placeholder="输入用户名" required /><br/>
        <input type="submit"/>
    </form>

1
2
3
4

# type 定义输入内容的类型
- text 是普通的文本输入框
- password 密码输入框，输入的内容在输入框中看到的是小圆点
- submit 提交按钮
# name 定义一个 key
# value 可以定义一个默认值值
最终后台接收到的数据应该是这种形式: {"user_name": "shark"}

input 提交文件

上传文件/图片，一定要在form标签开头出设置属性:enctype="multipart/form-data"

<div>
    <input name="submit_file" type="file"/>
</div>

1
2
3

input 单选框

实现方式把 type 属性的值设置为 radio ，并把 name 属性的值设置为相同，就可以实现互斥，这种情况下只能选一个。

单选框

        <div>
            性别：<input type="radio" name="gender" value="1"checked="checked"/>男
            <input type="radio" name="gender" value="2" />女 <br>
        </div>

1
2
3
4

checked="checked" 设定选中。

value 的值会被提交到后台服务器，比如上例选择了男 , 后台收到的数据会是： {"gender": "1"}

input 实现多选框,

多选框

        <div>
            <input type="checkbox" name="cls_name" value="11" checked="checked"/>千锋云计算好程序员
            <input type="checkbox" name="cls_name" value="12"/>千锋云计算就业班
            <input type="checkbox" name="cls_name" value="13" checked="checked"/>千锋网络安全班
        </div>

1
2
3
4
5

select 下拉框

<div>
    <!--单选-->
    选择你所在的城市：<br/>
    <select name="city">
        <option value="bj">北京</option>
        <!--selected 设定默认值,不设定默认是在代码中第一个出现的-->
        <option value="sh" selected="default">上海</option>
        <option value="zz">郑州</option>
    </select><br>
    <!--多选-->
    城市，按住ctrl键可多选：<br/>
    <select name="multi_city" multiple>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="zz" selected="selected">郑州</option>
    </select>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

textarea 提交多行文本

页面上显示一个边框，里面的有默认的内容，鼠标拉动边框的边缘，可以改变其大小

<div>
    <textarea name="submit_text">默认内容</textarea>
</div>

1
2
3

input 关于提交到类型

<input type="submit" value="Submit提交"/>
<input type="button" value="Button提交"/>
<input type="reset" value="重置"/>

1
2
3

submit 点击后会把 form 便签中的所有以上提到的数据提交到后台。

button 点击后不会通过 form 提交到后台，通常会绑定一个 javascript 事件。

# HTML5 中也新增了 `input` 标签的属性(自修)

    姓名: <input type="text" name="name" id="" required="true"/> <br/><br/> 

    邮箱: <input type="email" name="user_email" /> <br/><br/>

    网址: <input type="url" name="url" /> <br/><br/>

    日期: <input type="datetime-local" name="date_local" /> <br/><br/>

    时间: <input type="time" name="t" id="input-time"> <br/><br/>

    数字: <input type="number" name="nub" min="2" max="10"/> <br/><br/>

    搜索: <input type="search" name="s" id="input-search"> <br/><br/>

1
2
3
4
5
6
7
8
9
10
11
12
13

# f. 列表

ul 和 ol 用于在页面中呈现出一个列表，块级元素。

    <h3>以 点 标识的菜单</h3>
        <ul>
            <li>菜单一</li>
            <li>菜单二</li>
        </ul>

    <h3>有序列表 </h3>
        <ol>
            <li>菜单一</li>
            <li>菜单二</li>
        </ol>
        <ol>
            <li>菜单一</li>
            <li>菜单二</li>
        </ol>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# h. 表格

table 用于呈现一个表格，块级标签，使用频率较高，重点掌握。

 <h3>表格</h3>
   
    <!--border="1" 表格最外边的边框线,粗细是 1 (基本是最小的了，只接受整数)-->
    <table border="1">
        <!-- thead table head的缩写，表头的意思-->
        <thead>
            <tr>
                <th>序号</th>
                <th>主机名</th>
                <th>端口号</th>
            </tr>
        </thead>
        <!--tbody 表的主体-->
        <tbody>
            <!--第一行-->
            <tr>
                <td>1</td>
                <td>host1.com</td>
                <td>80</td>
            </tr>
            <!--第二行-->
            <tr>
                <td>2</td>
                <td>host2.com</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# j. `label` + `input` 触发获取焦点

当在页面上用鼠标点击 lanbel标签定义的内容时（这里是：用户名），输入框就会被自动选中

<label for="inputUser">用户名</label>
<input id="inputUser" type="text"/>

1
2

刘文奇

Choose mode

HTML5

HTML5

# 一、初始 HTML

# 1. 基本介绍

# 2. 标记

# 3. HTML 文档总体结构

# 4. HTML5 语法

# 5. 标签和元素的关系

# 6. 标签分类

# a. 从书写方式分，标签分为:

# b. 从元素(标签) 在页面中所占据的位置空间来分，可分为：

# 7. 认识标签的属性

# 二. HTML元素之间的关系结构

# 三、标签及其属性详解

# 1. 结构标签

# 2. 头部标签及其属性

# 源数据 `meta`

# 3. 功能标签

# a. 盒子标签 `div`

# b. 文本文字

# c.多媒体

# d. 超链接

# e. 表单和表单中的元素

# `type` 定义输入内容的类型

# name 定义一个 key

# value 可以定义一个默认值值

# HTML5 中也新增了 `input` 标签的属性(自修)

# f. 列表

# h. 表格

# j. `label` + `input` 触发获取焦点

刘文奇

HTML5

HTML5

# 一、初始 HTML

# 1. 基本介绍

# 2. 标记

# 3. HTML 文档总体结构

# 4. HTML5 语法

# 5. 标签和元素的关系

# 6. 标签分类

# a. 从书写方式分，标签分为:

# b. 从元素(标签) 在页面中所占据的位置空间来分，可分为：

# 7. 认识标签的属性

# 二. HTML元素之间的关系结构

# 三、 标签及其属性详解

# 1. 结构标签

# 2. 头部标签及其属性

# 源数据 meta

# 3. 功能标签

# a. 盒子标签 div

# b. 文本文字

# c.多媒体

# d. 超链接

# e. 表单和表单中的元素

# type 定义输入内容的类型

# name 定义一个 key

# value 可以定义一个默认值值

# HTML5 中也新增了 input 标签的属性(自修)

# f. 列表

# h. 表格

# j. label + input 触发获取焦点

# 三、标签及其属性详解

# 源数据 `meta`

# a. 盒子标签 `div`

# `type` 定义输入内容的类型

# HTML5 中也新增了 `input` 标签的属性(自修)

# j. `label` + `input` 触发获取焦点