HTML 5 学习笔记

HTML 入门

HTML 是什么？

HTML的全称是Hyper Text Mark Language，译为 “超文本标记语言”。

与普通文本相比，HTML除了有文字，还可以拥有图片、音乐、视频、表格等各种内容。

在HTML中插入内容都需要使用 “标记” 来插入，因此针对文字、图片、视频等等不同的内容拥有不同的 “标记”，专业用语称为 “标签”，也可以称为 “元素”。

初识HTML 标签

标签又称为“元素”，是HTML组成的基本单位。

例如，

1
<marquee> 认真学习，能够忘我 </marquee>

这就是一句html代码，其中使用了marquee的标签，使得其包含的文字有一定的特性。

  • <marquee>称为这个元素的起始标签，</marquee>称为这个元素的结束标签。
  • 标签有单标签、双标签之分，像上面那种标签就属于双标签；单标签，例如<input>。
  • 标签的字母不区分大小写，但推荐使用小写。

标签的属性

例如，给上述示例中的标签增加一些属性，为标签提供一些附加信息

1
2
<marquee loop="3" bgcolor="green"  > 认真学习，能够忘我 </marquee>
<input type="password">

从上述代码中，可以看出如何给标签增加属性了，

其中bgcolor为属性名称，green为属性值，意为 背景颜色 = 绿色 。

标签的属性写在标签的起始标签中，或者是单标签。

至于有多少标签，每种标签有哪些属性可以使用HTML5 标准手册进行查询。

这里分享常用的在线权威——参考手册

[1] [MDN在线手册]（https://developer.mozilla.org/zh-CN/docs/Learn/HTML）

注意

  1. 不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写，后面会详细

总结）。

  1. 属性名、属性值不能乱写，都是W3C规定好的。
  2. 属性名、属性值，都不区分大小写，但推荐小写。
  3. 双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号。
  4. 标签中不要出现同名属性，否则后写的会失效，例如：
1
<input type="text" type="password">

HTML的基本组成结构

下面是一串标准的HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html> 
    <head>
        <title> 网站名称 </title>
    </head>

    <body>
            锄禾日当午
            汗滴禾下土
            谁知盘中餐
            粒粒皆辛苦
    </body>

</html>
  1. 想要呈现在网页中的内容写在 body 标签中。
  2. head 标签中的内容不会出现在网页中。
  3. head 标签中的 title 标签可以指定网页的标题。
  4. <!DOCTYPE html>是HTML5的文档声明，意在告诉浏览器，我是使用HTML5的语法。文档声明必须要在文档的第一行，且在<html>标签的外面。

网页开发的基本工具——VScode

1、安装好VScode

2、安装插件

  • 中文插件——让软件界面语言设置成中文。搜索“简体中文”即可安装。
  • 图标插件——让VScode打开的文件夹内文件图标更优美。vscode-icons
  • html及时预览插件——LivePreview

LivePreview的使用与设置

安装后，在vscode编辑html文件的窗口中，右键，会看到显示预览，点击即可及时看见渲染后的网页。

进入插件的设置页面，将LivePreview的刷新频率设置成on changes to save files。

因为插件默认的设置是：只要文件一修改，立马刷新页面显示刚刚的修改效果，这种有点耗费资源。

当修改成on changes to save files后，只有修改文件并保存之后，插件才会开始刷新页面。有利于节约电脑的性能资源。

常用快捷键

  • ctrl + Enter 直接增加下一空行。（即使鼠标光标在上一行的文字中间也没事）

  • ctrl + shift + k 删除鼠标光标所在的一行（即使鼠标没有选中这一行的任何内容）

  • shift + Alt + ↓ 向下复制光标所在行的内容。

  • tab键可用于鼠标选中内容后，按下tab向右缩进；shift + tab 键可以向左缩进。

在html文件中，输入英文感叹号!，再按下回车键，即可快速在vscode中生成HTML的标准结构。

当然也可以输入html:5再按下回车，也能生成HTML标准结构。

代码注释

  1. 特点

注释的内容会被浏览器自动忽略，但源代码中依然可见。

  1. 作用

给代码进行必要的解释说明，防止时间久了，自己忘了。下次再看代码的时候能快速掌握整个逻辑思路。

  1. 代码格式

    1
    2
    3
    4
    5
    <!-- 下面的文字只能滚动3次 -->
    <marquee loop="3">认真学习，可以忘我</marquee> 

    <!-- 注释里面的文字是可以换行的，
    本段文字就是全部被注释了 -->

  2. 注意——注释是不能嵌套的，下面是错误的例子。

1
2
3
4
<!--
我是一段注释
<!-- 我是一段注释 -->
-->

字符编码

  1. 计算机操作数据
    • 存储数据的时候，要对数据进行“编码”
    • 读取数据的时候，要对数据进行“解码”
  2. 在进行编码、解码时要使用同一套规则，称之为字符集。
  3. 常见的字符集有
  1. ASCII：大小写字母、数字、一些符号，共计128个。
  2. ISO 8859-1 ：在ASCII基础上，扩充了一些希腊字符，共计256个。
  3. GB2312：在上述基础上继续扩充，收录了6763个常用汉字、682个字符。
  4. GBK：收录了汉字和符号达到2000+，支持繁体中文。
  5. UTF-8：万国码，包含世界上所有语言的文字与符号。常用！
  1. 使用的规则

存储

你在保存数据的时候，你选择的字符集一定要包含支持你这些数据的文字和符号。

否则：无法储存，数据丢失！

读取

你保存数据用什么方式，读取的时候就用什么方式。

否则：数据错乱，俗称“乱码”。

此时，你只需要重新修改对应的解码方式，仍然能看到正确的内容。

  1. 总结
    • 为保证所有的输入，都能正常存储和读取，现在几乎全都采用： UFT-8 编码。
    • 为了让浏览器能渲染html文件时，能正确显示字符，可以使用meta标签的charset属性，指定浏览器使用特定的字符集。
1
2
3
<head>
    <meta charset="UTF-8" />
</head>

meta属于一种标签，他有两种写法

  • 自闭和写法，即在一个标签内完成起始与结束。<meta charset="UTF-8" />
  • 单标签写法。<meta charset="UTF-8" >

在HTML5中，自闭合的使用是推荐的做法，因为它有助于保持代码的一致性和简洁性、有助于避免某些历史浏览器的解析错误。

虽然加不加斜杠在现代浏览器中通常不会有太大区别，但为了遵循HTML5标准和最佳实践，建议使用 <meta charset="UTF-8" />

HTML设置网站的语言

  1. 主要作用
  • 让浏览器能显示对应的翻译提示。
  • 有利于搜索引擎优化。

  1. 代码写法

    1
    <html lang="zh-CN" >

  2. lang属性的编写规则
    语言—国家/地区

  • zh-CN 中文-中国大陆（简体中文）
  • zh-TW 中文-台湾（繁体中文）
  • zh 中文
  • en-US 英语-美国
  • en-GB 英语-英国

其他国家的语言简写，可以网络搜索/询问AI。

HTML标签

排版标签

标签名 标签含义 单/双标签
h1~h6 标题、大纲文本 双
p 段落 双
div 无含义，可以包含一系列标签，可以认为div用于标签的分组，将来可用于批量修改样式以及布局。 双
  1. h1最好只写一个，h2~h6可以正常使用。
  2. h1~h6不能嵌套使用。例如h1中不能嵌套h2。
  3. p标签里面不能嵌套h标签、p标签、div标签。

语义化标签

  • 定义：用特定的标签表示特定的含义。

  • 原则：标签的默认效果不重要（后期可以使用CSS随意修改效果），语义最重要。

举例，h1表示文章的标题，是本片网页的重点。而其带来的效果（字体变大、粗并不重要，因为后期可以使用CSS自定义修改）。

  • 为什么要强调标签的语义化
    • 代码结构清晰，可读性强
    • 有利于SEO优化（有利于搜索引擎爬虫，别人很容易搜索到你的网站）
    • 方便设备解析（例如屏幕阅读器、盲人阅读器）。

块级元素与行内元素

  1. 块级元素：独占一行（排版标签都是块级元素）。
  2. 行内元素：不独占一行（例如input，后期还会学习更多）。
  3. 使用规则

[1] 块级元素什么都能写。

[2] 行内元素可以写行内元素，但不能写块级元素。

[3]一些特殊规则

  • h1~h6不能相互嵌套。
  • p中不要写块级元素。

文本标签

常用

  1. 用于包裹：词汇、短语等。
  2. 通常写在排版标签内。
  3. 文本标签都是行内元素。
  4. 排版标签更宏观（常用于大段的文字），文本标签更微观（词汇、短语）。
标签名 标签语义 单/双标签
em 着重阅读的内容 双
strong 十分重要的内容 双
span 没有语义，用于包裹短语的通用容器。 双

div与span的区别：

div常用于大段文字包裹；span用于行内词语包括。

不常用

  1. 这些不常用的文本标签，编码时不用过于纠结（酌情而定，不用也没毛病）。
  2. blockquote 与 address 是块级元素，其他的文本标签，都是行内元素。
  3. 有些语义感不强的标签，我们很少使用，例如：
    small 、 b 、 u 、 q 、 blockquote
  4. HTML标签太多了！记住那些：重要的、语义感强的标签即可；截止目前，有这些：
    h1~h6 、 p 、 div 、 em 、 strong 、 span
标签名 标签语义 单/双标签
cite 作品标题（书籍、电影、歌曲等） 双
dfn 特殊术语、专属词汇 双
del与ins 分别表示：删除的文本、插入的文本 双
sub与sup 下标文字、上标文字 双
code 一段代码 双
samp 从正常的上下文中，将某些内容提取出来，例如：标识设备输出 双
kbd 键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中 双
abbr 缩写，最好配合上 title 属性 双
bdo 更改文本方向，要配合 dir 属性，可选值: ltr （默认值）、rtl 双
var 标记变量，可以与 code 标签一起使用 双
small 附属细则，例如：包括版权、法律文本。—— 很少使用 双
b 摘要中的关键字、评论中的产品名称。—— 很少使用 双
i 本意是：人物的思想活动、所说的话等等。现在多用于：呈现字体图标（后面要讲的内容）。 双
u 与正常内容有反差文本，例如：错的单词、不合适的描述等。——很少使用 双
q 短引用 —— 很少使用 双
blockquote 长引用 —— 很少使用 双
address 地址信息 双

图片标签

1. 基本使用

代码格式

1
<img width="200" height="300" src="xxx.jpg" alt="这里是描述图片内容" >

width：图片的宽度，单位是像素px，例如：200px或200

heght：图片高度。

src：图片路径（也称：图片的地址）

alt：图片描述

注意事项

1、width和height是可选属性，如果不添加该属性，则默认显示图片的原始大小。

如果只修改图片的宽或者是只修改高，则默认是按比例放大或缩小。

尽量不同时修改图片的宽和高，可能会造成比例失调。

2、img是行内元素。

3、alt属性的作用

  • 搜索引擎通过alt属性的值，可以知道图片的内容。——最主要的作用
  • 当图片无法展示的时候，浏览器就会展示alt的值。
  • 盲人阅读器会朗读alt属性的值。

2. 路径的分类

  • 相对路径

以当前路径为参考点，去建立图片的路径

①引用与html文件在同一文件夹下的图片：怪兽.jpg

1
2
3
<img src="怪兽.jpg" >
<!-- 上述代码还可以写成下面这样 -->
<img src="./怪兽.jpg" >

②引用html文件所在文件夹的子文件夹picture中的图片：怪兽.jpg

1
<img src="./picture/怪兽.jpg">

③引用html文件所在文件夹的上一个文件夹中的子文件夹picture里面的图片：怪兽.jpg

1
<img src="../picture/怪兽.jpg">

总结

./ 同一个文件夹。（这个也可以不写，例如第一个例子。）

/下一个文件夹

../ 上一个文件夹，可以使用多次表示连续返回上一层级。

  • 绝对路径

    • 本地绝对路径（很少使用）

      E:/a/b/c/奥特曼.jpg

    • 网络绝对路径

http://www.atguigu.com/images/index_new/logo.png

3. 常见图片的格式

图片格式 扩展名 概述 优点 缺点 使用场景
jpg 扩展名为 .jpg 或 .jpeg 是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了） 支持的颜色丰富、占用空间较小 不支持透明背景、不支持动态图 对图片细节没有极高要求的场景，例如：网站的产品宣传图等 。—— 该格式网页中很常见。
png .png 无损的压缩格式，能够更高质量的保存图片 支持的颜色丰富、支持透明背景 占用空间略大、不支持动态图 ①想让图片有透明背景；②想更高质量的呈现图片；例如 ：公司logo图、重要配图等。
bmp .bmp 不进行压缩的一种格式，在最大程度上保留图片更多的细节 支持的颜色丰富、保留的细节更多 占用空间极大、不支持透明背景、不支持动态图 对图片细节要求极高的场景，例如：一些大型游戏中的图片 。（网页中很少使用）
gif .gif 仅支持256种颜色，色彩呈现不是很完整 支持简单透明背景、支持动态图 支持的颜色较少 网页中的动态图片
webp .webp 谷歌推出的一种格式，专门用来在网页中呈现图片. 具备上述几种格式的优点 但兼容性不太好，一旦使用务必要解决兼容性问题。 网页中的各种图片。【未来网页中图片的主流趋势】
base64 一串特殊的文本 使用一些工具或者在线网站，把图片进行 base64 编码，形成一串文本。 把base64直接作为 img 标签的 src 属性的值即可。 不受文件位置的影响，可以与网站同时显示，没有请求与接受的延迟。 一些较小的图片，或者需要和网页一起加载的图片。

图片的格式非常多，上面这些，只是一些常见的、我们前端人员常接触到的。

超链接

主要作用：从当前页面进行跳转，可以实现：

  • 跳转到指定页面
  • 跳转到指定文件（也可以触发下载）
  • 跳转到页面锚点位置
  • 唤起指定应用
标签名 语义 常用属性 单/双标签
a 超链接 href：要跳转的目标
target：控制跳转时如何打开页面，常用值如下：
_self ：本窗口打开
_blank：新窗口打开
id：元素的唯一标识，可用于设置锚点。
 双

1、跳转到指定页面

1
2
3
4
5
6
<!-- 跳转到其他网页 -->
<a href="www.baidu.com" target="_blank" >百度官网</a>

<!-- 跳转到本地网页 -->
<a href="./测试.html" target="_blank" >去看测试网页</a>

注意

1、代码中的多个空格、多个回车，都会被浏览器解析成一个空格。

2、虽然a是行内元素，但是a元素可以包含除它自身外的任何元素！

2、跳转到文件

1
2
3
4
5
6
7
8
9
10
11
<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg">看自拍</a>
<a href="./resource/小电影.mp4">看小电影</a>
<a href="./resource/小姐姐.gif">看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>

<!-- 浏览器不能打开的文件，会自动触发下载 -->
<a href="./resource/内部资源.zip">内部资源</a>

<!-- 强制触发下载 -->
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>

注意1：若浏览器无法打开文件，则会引导用户下载。

注意2：若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称。

3、跳转到页面的锚定位置

什么是锚点？—— 网页中的一个标记点。

具体的使用方式

  • 第一步：设置锚点
1
2
3
4
5
<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>

<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>
  1. 具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点。
  2. name 和 id 都是区分大小写的，且 id 最好别是数字开头。

推荐使用id进行锚定。

  • 第二步：跳转锚点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>

<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>

<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>

<!-- 刷新本页面 -->
<a href="">刷新本页面</a>

<!-- 执行一段js,如果还不知道执行什么，可以留空，javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>

4、打开指定应用

通过a标签可以唤起设备上的应用程序。

1
2
3
4
5
6
7
8
<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>

<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>

<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>

列表

有序列表 ol

有序列表 “ordered list” ，因此在html中使用ol来定义有序列表。

有序列表：有顺序或者侧重顺序的列表。

1
2
3
4
5
6
<h2>要把大象放冰箱总共分几步</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>

无序列表 ul

无序列表 “unordered list”，因此在html中使用ul来定义无序列表。

无序列表：无顺序或者不侧重顺序的列表。

1
2
3
4
5
6
7
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>上海</li>
<li>西安</li>
<li>武汉</li>
</ul>

注意

无论是有序列表还是无序列表，每一个项目都要使用li标签来进行标记。

li标签最好是写在ol、ul中，不要单独使用。

自定义列表 dl

所谓自定义列表，就是一个包含术语名称以及术语描述的列表。

一个 dl 就是一个自定义列表，一个 dt 就是一个术语名称，一个 dd 就是术语描述（可以有多个）。

自定义列表 “denifition list” dl

术语名称 “denifition title” dt

属于描述 “denifition description” dd

1
2
3
4
5
6
7
8
9
10
<h2>如何高效的学习？</h2>
<dl>
<dt>做好笔记</dt>
<dd>笔记是我们以后复习的一个抓手</dd>
<dd>笔记可以是电子版，也可以是纸质版</dd>
<dt>多加练习</dt>
<dd>只有敲出来的代码，才是自己的</dd>
<dt>别怕出错</dt>
<dd>错很正常，改正后并记住，就是经验</dd>
</dl>

列表嵌套

列表中的某一项内容，又包含了一个列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<h2>我喜欢吃的食物</h2>
<ul>
    <li>粉条</li>
    <li>
        <span>水果</span>
        <ol>
            <li>菠萝</li>
            <li>葡萄</li>
            <li>芒果</li>
            <li>西瓜</li>
        </ol>
    </li>
    <li>
        <span>汤类</span>
        <ul>
            <li>西红柿蛋汤</li>
            <li>紫菜蛋花汤</li>
            <li>茶树菇排骨汤</li>
        </ul>
    </li>
    <li>炒菜</li>
</ul>

表格

  1. 基本结构

一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。

  1. 表格涉及到的标签

table：表格

caption：表格标题

thead：表格头部

tbody：表格主体

tfoot：表格脚注

tr：每一行。 t代表table，r代表row（行）。

th：表格头部中的每一个单元格。 t代表table，h代表head。

td：表格主体、脚注中的单元格。t代表table，d代表data。

  1. 示例代码
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
<!-- 这里是一个表格 -->
<table border="2">
    <!-- 表格标题 -->
    <caption>学生信息</caption>
    <!-- 表格头部 -->
    <thead>
        <tr>  <!-- tr表示每一行 -->
            <th>姓名</th>  
            <!-- th表示表格头部的每一个单元格 -->
            <th>性别</th>
            <th>年龄</th>
            <th>民族</th>
            <th>政治面貌</th>
        </tr>
    </thead>

    <!-- 表格主体 -->
    <tbody>
        <tr>
            <td>张三</td>  <!-- td代表表格主体和脚注的每一个单元格 -->
            <td>男</td>
            <td>18</td>
            <td>汉族</td>
            <td>团员</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>20</td>
            <td>满族</td>
            <td>群众</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>19</td>
            <td>回族</td>
            <td>党员</td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>女</td>
            <td>21</td>
            <td>壮族</td>
            <td>团员</td>
        </tr>
    </tbody>

    <!-- 表格脚注 -->
    <tfoot>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>共计：4人</td>
    </tfoot>
</table>

表格常用属性

后期主要使用CSS调节表格的属性，这里只是了解即可，不强制要求记忆，反正后期也能查笔记，不用记没事。

标签名 语义 常用属性
table 表格 width：设置表格宽度。
height：设置表格的最小高度，表格最终高度可能会更大。
border：设置表格外边框的宽度。
cellspacing：设置单元格之间的距离。
thead 表格头部 height
align：设置单元格的水平对齐方式，可选值：left、center、right
valign：设置单元格的垂直对齐方式，可选值：top、middle、bottom
tbody 表格主体 常用属性与thead相同
tr 行 常用属性与thead相同
tfoot 表格脚注 常用属性与thead相同
td 普通单元格 width：设置单元格的宽度，同列所有单元格都受其影响。
height：设置单元格的高度，同行所有单元格全都受到影响。
align：设置单元格水平对齐方式。
valign：设置单元格垂直对齐方式。
rowspan：指定要跨的行数。
colspan：指定要跨的列数。
th 表格头部的单元格 常用属性与td相同。

注意

1、<table>元素的border属性可以控制表格的最外侧边框，但border不能修改单元格的边框宽度。后期靠CSS可以修改每一个单元格的宽度。

2、默认情况下，每列的宽度，得看这一列单元格最长的那个文字。

3、给某个th或者td设置了宽度之后，他们所在的那一列宽度就确定了。

4、给出某个th或者td设置了高度之后，他们所在的那一行的高度就确定了。

表格的跨行与跨列

跨行与跨列针对的是表格中单元格的属性。

让我们再一起复习一遍表格的组成：

表格table由四大部分组成：标题caption、表格头部thead、表格主体tbody、表格脚注tfoot。

表格中的每一行tr

表格中的单元格有两类：标题中的格子th、主体和脚注中的格子td。

表格的列数就是由这一行tr中存在多少个单元格（th或td）决定的。

因此表格的跨行与跨列操作的就是th或td的属性。

rowspan：指定要跨的行数。 row意为“行”，span有跨度的含义。

colspan：指定要跨的列数。 column意为”列”，这里取“col”做前缀，span意思同上。

编写一个如图所示的课程表，代码如下

代码示例

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格的跨行与跨列</title>
</head>
<body>
    <table border="1" cellspacing="0">
        <caption>课程表</caption>
            <thead>
                <th>项目</th>
                <th colspan="5">上课</th>
                <th colspan="2">活动与休息</th>
            </thead>
            <tbody>
                <tr>
                    <td>星期</td>
                    <td>星期一</td>
                    <td>星期二</td>
                    <td>星期三</td>
                    <td>星期四</td>
                    <td>星期五</td>
                    <td>星期六</td>
                    <td>星期日</td>
                </tr>
                <tr>
                    <td rowspan="4">上午</td>
                    <td>3-2</td>
                    <td>3-3</td>
                    <td>3-4</td>
                    <td>3-5</td>
                    <td>3-6</td>
                    <td>3-7</td>
                    <td rowspan="4">休息</td>
                </tr>
                <tr>
                    <td>4-1</td>
                    <td>4-2</td>
                    <td>4-3</td>
                    <td>4-4</td>
                    <td>4-5</td>
                    <td>4-6</td>
                </tr>
                <tr>
                    <td>5-1</td>
                    <td>5-2</td>
                    <td>5-3</td>
                    <td>5-4</td>
                    <td>5-5</td>
                    <td>5-6</td>

                </tr>
                <tr>
                    <td>6-1</td>
                    <td>6-2</td>
                    <td>6-3</td>
                    <td>6-4</td>
                    <td>6-5</td>
                    <td>6-6</td>
                </tr>
                <tr>
                    <td colspan="8" align="center">午 休</td>
                </tr>
                <tr>
                    <td rowspan="2">下午</td>
                    <td>7-2</td>
                    <td>7-3</td>
                    <td>7-4</td>
                    <td>7-5</td>
                    <td>7-6</td>
                    <td>7-7</td>
                    <td rowspan="2">休息</td>
                </tr>
                <tr>
                    <td>8-1</td>
                    <td>8-2</td>
                    <td>8-3</td>
                    <td>8-4</td>
                    <td>8-5</td>
                    <td>8-6</td>
                </tr>
            </tbody>

    </table>
</body>
</html>

常用标签补充

标签名 含义 单/双标签
br 换行 单
hr 分割线 单
per 按原文输出（在源码中所见即所得，不会自动修改文字间的缩进） 双

注意

1、不要使用br标签来增大段落之间的空行，应当使用p标签，或者使用CSS来修改段间距margin。

2、<hr>的属性是分割文本，如果只是想画一条水平线，可以使用CSS完成。

表单

基本结构

标签名 语义 常用属性 单/双标签
form 表单 action：用于指定表单的提交地址。
target：用于控制表单提交后，如何打开页面。_self：本窗口打开。_blank：新窗口打开。
method：用于控制表单的提交方式，常用的方式有两种，post或get。
 双
input 输入框 type：设置输入框的类型，常用的值是text，表示普通文本。
name：用于指定提交数据的名字。
 单
botton 按钮 表单中的按钮，type的默认值是提交表单submit。当然也有其他的属性，后面会学。 双

例子如下：

1
2
3
4
<form action="https://www.baidu.com/s" target="_blank" method="get">
    <input type="text" name="wd">
    <button>去百度搜索</button>
</form>

上述代码中，跳转的网址是百度规定的，method也是百度规定的，name的值还是百度规定的，因为咱们用的是它的服务器，向它发送请求，想得到他的数据，只能按照他规定来。

常用的表单控件

①文本输入框

1
<input type="text">

常用属性如下：

name属性：用于提交表单时，表示数据的名称。

value属性：输入框的默认显示值。

maxlength属性：用于规定输入框最大可输入长度。

②密码输入框

1
<input type="password">

与本文输入框在外观上最明显的区别是用户输入的值不是明文显示，而是用一个小黑点代替。

常用属性如下：

name属性：数据的名称。

maxlength属性：输入框的最大可输入长度。

③单选框

1
2
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男

常用属性如下：

name属性：数据的名称，如果想做到单选的效果，必须把一组选项（多个radio）的name属性值保持一致，这样子浏览器才能之别他们是同一组单选框。

value属性：提交的数据值。

checked属性：让该单选按钮默认被选中。

④复选框

1
2
3
4
<input type="checkbox" name="subject" value="math">数学
<input type="checkbox" name="subject" value="chemistry">化学
<input type="checkbox" name="subject" value="biology">生物
<input type="checkbox" name="subject" value="physics">物理

常用属性如下：

name属性：数据的名称。

value属性：提交的数据值。

checked属性：让该复选框默认被选中。

⑤隐藏域**

1
<input type="hidden" name="tag" value="666">

用户不可见的一个输入区域，作用是： 提交表单的时候，携带一些固定的数据。

name 属性：指定数据的名称。

value 属性：指定的是真正提交的数据。

⑥提交按钮**

这里有两种写法：一种是input1标签， 另一种是使用button标签。

1
<input type="submit" value="提交">
1
<button>提交</button>

第二种写法与下面这种写法是一样的，因为在表单form中，button默认属性就是提交submit。

1
<botton type="submit">提交</botton>

注意：
button标签在表单中，其type属性默认就是submit。
button不要指定name属性。
input标签编写的按钮，使用value属性指定按钮文字。

⑦重置按钮

1
2
3
<input type="reset" value="点我重置">
<!-- 下面给出另一种写法 -->
<button type="reset">点我重置</button>

注意：
button不要指定name属性。
input标签编写的按钮，使用value属性指定按钮文字。

⑧普通按钮

1
2
<input type="botton" value="普通按钮">
<button type="botton">普通按钮</button>

想在表单中插入普通按钮，其type属性值必须为button，若不写type属性，其默认值就是submit，那么这个按钮就会成为提交按钮，而不是普通按钮了。

⑨文本域

1
<textarea name="msg" rows="22" cols="3">我是文本域</textarea>

常用属性如下：

1、rows属性：指定文本域默认显示的行数，会影响文本域的高度。

2、cols属性：指定默认显示的列数，会影响文本域的宽度。

3、不能编写type属性，其他的属性与普通文本输入框一致。

⑩下拉框

1
2
3
4
5
6
<select name="homeland">
    <option value="黑">黑龙江</option>
    <option value="赣" selected>江西</option>
    <option value="粤">广东</option>
    <option value="皖">安徽</option>
</select>

常用属性及注意事项：

1、name属性：指定数据的名称。

2、option标签如果设置了value属性，则提交表单时上传的就是value的值；如果没有value属性，则提交时默认上传的就是option中间的文字。

（建议设置value属性，因为option中间的文字是展示给用户看的，有时候会比较长，我们手动设置value属性，这样子最后提交时可以只提交简短的自定义value值，有利于传输速度。）

3、option标签中设置了selected属性，则表示默认选中该选项。

禁用表单控件

给表单的标签设置disable，即可禁用改表单控件。在用户视角，此控件呈灰色不可操作状态。

input、textarea、button、selcet、option都可以设置disable属性。

label标签

label标签可以使 “文本” 与另一个控件关联起来，例如使 “文字”与一个输入框关联起来，点击该文字后，激活关联控件的输入框（激活也称为获取焦点）。

两种与label关联的方式：

  • 近距离

把需要被关联的表单控件嵌套在label标签的里面。

  • 远距离

让label标签的for属性的值等于与之关联的表单控件的id。

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
```







#### 分组框线标签-fieldset与legend（了解）

`fieldset`标签为表单控件分组。

`legend`标签在`fieldset`标签内部，是分组的标题。

```html
        <fieldset>
            <legend>账户登录</legend>
            <!-- 下面是第一种文字与控件关联的方法 嵌套 -->
            <label>账户：<input type="text" name="count" > </label>
            <br>
            <!--  下面是第二种文字与控件关联的方法 id  -->
            <label for="mima">密码：</label><input id="mima" name="psw" type="password">
        </fieldset>

        <br>

        <fieldset>
            <legend>个人信息</legend>
            <!-- 单选框，使用radio；用同一个name保证只能选一个 -->
            性别：<input type="radio" name="sex" value="male">男 
            <input type="radio" name="sex" value="female">女
            <br>
            <!-- 复选框/多选框 -->
            任科：<input type="checkbox" name="subject" value="math">数学
            <input type="checkbox" name="subject" value="chemistry">化学
            <input type="checkbox" name="subject" value="biology">生物
            <br>
            爱好：<textarea name="" id="" cols="22" rows="3"></textarea><br>
            籍贯：
        <select name="homeland">  
            <option value="粤">广东</option>
            <option value="赣">江西</option>
            <option value="皖">安徽</option>
            <option value="辽">辽宁</option>
        </select>
        <br>
        </fieldset>

表单总结

标签名 语义 常用属性
form 表单 action属性：表单数据要提交的目标地址。
target属性：跳转到新地址时，打开窗口的方式，值：_self、_blank
method属性：请求的方式，值：get、post
input 多种形式的表单控件 type属性：指定表单控件的类型。
值：text、password、radio、checkbox、hidden、submit、reset、button等。
name属性：为这个数据起一个名称。
value属性：
对于输入框：可以指定输入框默认存在的值。
对于单选框和复选框：是对应选项实际提交的值。
对于按钮：是按钮上显示的文字。
disable属性：设置表单控件不可用。
maxlength属性：用于输入框，设置最大可输入长度。
checked属性：用于单选框和复选框，在哪个选项中加入checked的属性，表示默认选中。
textarea 文本域 name属性：指定数据的名称。
rows属性：设置默认显示的行数，影响文本域的高度。
cols属性：设置默认显示的列数，影响文本域的宽度。
disable属性：设置表单属性不可用。
select 下拉框 name属性：指定数据的名称。
disable属性：设置整个下拉框不可用。
option 下拉框的选项 disable属性：设置该下拉选项不可用。
value属性：该选项对应的实际提交的数据（若不设置value，则默认提交选项中的内容）
selected属性：默认选中。
button 按钮 disable属性：设置按钮不可用。
type属性：设置按钮的类型，值：submit（默认）、reset、button
label 控件关联 for属性：值=与要关联的表单控件的id值相同。
fieldset 控件分组

HTML实体

在HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 实体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。

字符实体语法有两种：

  • 由连字号（&）与实体名称构成，最后再加上分号（;）结尾。
  • 由井号（#）与实体编号构成，最后加上分号（;）结尾。

推荐第一种写法。

实体的常见用途

1、用于显示保留字符（这些字符会被解析为 HTML 代码）和不可见的字符（如“不换行空格”）。

2、用 HTML 字符实体来代替其他难以用标准键盘键入的字符。

所有的字符实体在线参考

常见实体

描述 实体名称 实体编号
空格 空格 &bnsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 连接符 &amp; &#38;
“ 引号 &quot; &#34;
` 反引号 &acute; &#180;
￠ 分（cent）
£ 镑（pound）
¥ 元（yen）
€ 欧元（euro）
© 版权（copyright）
® 注册商标
™ 商标
× 乘号
÷ 除号

HTML全局属性

全局属性是所有 HTML 元素共有的属性，它们可以用于所有元素。

下面列举一些常见的全局属性

属性名 含义
id 给标签指定唯一标识，注意： id 是不能重复的。 作用：可以让`` label 标签与表单控件相关联；也可以与 CSS 、 JavaScript `配合使用。
class 给标签指定类名，随后就可以通过CSS可以给同一类的标签批量修改样式。
style 给标签设置CSS样式。
dir 内容在网页上输出的方向。值：ltr、rtl
title 给标签设置一个文字提示，鼠标移动到该文字上，就会自动展现小字提示。一般超链接和图片用的比较多。
lang 给标签指定语言。（用的较少）

meta信息

  1. 配制字符编码
1
<meta charset="UTF-8">
  1. 针对IE浏览器的兼容性配置。
1
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  1. 针对移动端的配置
1
<meta name="viewport" content="width=divice-width", initial-scale=1.0>
  1. 配置网页关键字
1
<meta name="keywords" content="网络购物,商城,电商">

关键字一般设置8~12个，用英文逗号，隔开。

  1. 配置网页描述性息
1
<meta name="description" content="80字以内的一段话，与网站内容有关">
  1. 针对搜索引擎爬虫配置
1
<meta name="robots" content="此处可选值见下表">
值 描述
index 允许搜索引擎爬虫索引此页面。
noindex 不允许搜索引擎爬虫索引此页面。
follow 允许搜索爬虫跟随此页面上的链接。
nofllow 要求搜索爬虫不跟随此页面上的链接。
all 等于同时允许fllow+index
none 等于同时拒绝fllow+index
noarchive 要求搜索引擎不缓存页面内容。
nocache =noarchive，即要求搜索引擎不缓存页面内容。
  1. 配置网页作者
1
<meta name="ZhongYuan" content="tony">
  1. 配置网页生成工具
1
<meta name="genrator" content="Visual Studio Code">
  1. 配置网页版权信息
1
<meta name="copyright" content="2022-22029©版权所有">
  1. 配置网页自动刷新
1
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">

完整网页元信息，参考：元信息|MDN

HTML5新特性

什么是HTML5

  • HTML5是新一代HTML标准，2014年10月由万维网联盟（W3C）完成标准制定。
  • HTML5狭义上指的是最新标准，广义上是指：整个前端。

HTML5的优势

  1. 针对JavaScript，新增了很多可操作的接口。
  2. 新增了一些语义化标签，全局属性。
  3. 新增了多媒体标签，可以很好的取缔flash。
  4. 更加侧重语义化，对SEO更加友好。
  5. 可以移植性好，可以大量应用在移动设备上。

HTML5的兼容性

  • 支持主流浏览器：Chrome、Sfari、Opera、Firefox等。

IE 浏览器必须是 9 及以上版本才支持 HTML5 ，且 IE9 仅支持部分 HTML5 新特性。

新增语义化标签

新增布局标签

标签名 语义 单/双标签
header 整个页面或部分区域的头部。 双
footer 整个页面或部分区域的底部。 双
nav 导航 双
article 文章、帖子、杂志、新闻、博客、评论等。 双
section 页面中的某段文字或文章中的某段文字。 双
aside 侧边栏 双
main 文档的主要内容，这标签基本不用。 双

关于article和section：

  1. article里面可以有多个section。
  2. section强调的是分段或分块，如果你想把一段内容分成几段的时候，可以使用section元素。
  3. article比section更强调独立性，一块内容如果比较独立、完整，应该使用article元素。

新增状态标签

新增列表标签

新增文本标签

新增表单功能

表单控件新增属性

input新增属性值

form新增属性

新增多媒体标签

视频标签

音频标签