一、HTML的概述
1.1 HTML基本结构
1.<!DOCTYPE html> : 声明该文档是HTML5文档，固定写法。
2.必须放在首行 <html> : HTML的根标记(根元素)，该标记在文档中只能有且只有一个。
3.根标记中通常有两个子标记，分别是 <head>和<body>
1）<head>标记： 进行网页meta的设置（规定字符集等），定义标题，引入css文件，js文件，或者编写style和javascript代码等，可以添加在头部区域的元素标签为: <title>,<style>,<meta>,<link>, <script>,<noscript> 和 <base>。
2）body标记： 用来定义网页的可见内容。
注意: 编辑工具的字符集要和网页显示时字符集一致。
1.2 HTML语法
1.2.1 HTML元素
以开始标签起始，以结束标签终止，元素的内容是开始标签与结束标签之间的内容。
某些html元素具有空内容，比如换行元素<br/>,空元素在开始标签中进行关闭，以开始标签的结束而结束。
| 元素 | 开始标签 | 元素内容 | 结束标签 |
|---|---|---|---|
<p>桃花潭水深千尺</p> | <p> | 桃花潭水深千尺 | </p> |
<h1> 管理系统</h1> | <h1> | 管理系统 | </h1> |
<a href="default.htm">点我跳转</a> | <a href="default.htm"> | 点我跳转 | </a> |
| 换行元素 | <br/> |
大多数HTML元素可拥有属性，HTML元素可以嵌套。
具有开始和结束标签的这种标签，我们也可以称之为双标记标签，而空元素这种标签，也可以称之为单标记标签或自结束标签。
注意：双标/记标签的结束标签的斜杠在标签名前面，比如：</p>、</h1>等。
单标记标签的斜杠在标签名之后，比如<br/>。
1.2.2 HTML的属性
一般位于开始标签中，总是以名/值对的形式出现，比如：name="value",属性的值始终被包括在引号中，常用双引号，单引号也可以。
如果属性值本身带有双引号，那么必须使用单引号。例如:name='my name is "xiaohong"and'
下面是适用于大多数HTML元素的属性：
| 属性 | 描述 | 备注 |
|---|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) | 该属性的值可以有多个，在双引号里使用空格分开 |
| id | 定义元素的唯一id | id作为唯一标识符，只能填写一个，具有唯一性 |
| style | 规定元素的行内样式（inline style） | |
| title | 描述了元素的额外信息 (作为工具条使用) |
1.2.3 HTML快捷键
语法的注释：crtl+/
快速补全HTML基本结构：shift+！，回车
1.3 HTML的字符实体
因为浏览器可能会误以为是HTML标签，因此需要用字符的实体来代替这些字符的文本。
浏览器总是会截短HTML页面中的空格。如果在文本中写10个空格，在显示该页面之前，浏览器会删除他们中的9个。这时，需要使用空格的字符实体 ；来增加页面中空格的数量。
常用的字符实体：
空格： ；小于号:<；或<；大于号：>；和：&；
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 人民币/日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
注意：分号不能丢，实体字符对大小写敏感。
二、常用标签
2.1 HTML头部
2.1.1 <title>元素
<title> 在 HTML/XHTML 文档中是必需的，该标签定义了不同文档的标题：
1.即浏览器工具栏(标签页)的标题
2.当网页添加到收藏夹时，显示在收藏夹中的标题
3.显示在搜索引擎结果页面的标题
2.1.2 <base>元素
*一个HTML文档中只能有一个base元素*
2.1.3 <meta>元素
描述了一些基本的元数据。元数据不显示在页面上，但会被浏览器解析。
1.为搜索引擎定义关键词
<meta name="keywords" content=”温度，天气">
2.为网页定义描述内容
<meta name="description" content="免费web&编程教程">
3.定义网页作者
<meta name="auto" content="123">
4.meta元素也可以使用刷新功能，实现几秒后刷新或者跳转功能
1)<meta http-equiv="refresh" content="5">(5s后刷新）
2）<meta http-equiv="refresh" content="5;url=http://www.runoob.com">（5s后刷新并跳转到菜鸟网页）
2.1.4 <style>元素
用来设置HTML的各种样式，当样式的代码过多时，可以将样式代码放入一个独立的CSS文件中，使用link标签引入即可：<link rel="stylesheet" href="CSS文件的地址">
2.1.5 <script>与<noscript>元素
1.<script>标记是用于书写交互代码的，如果交互代码过多，可以放入一个独立的js文件中，使用<script>标签里的属性src引入过来即可:<script src="js文件的地址">
2.早期的浏览器并不能支持 JavaScript。noscript 标签在不支持JavaScript 的浏览器中显示替代的内容。这个元素可以包含任何 HTML 元素。
<noscript>
Your browser does not support JavaScript!
</noscript>
2.2 基础标签
2.2.1 标题标签
用于设置一级到六级的标题，标签从<h1>到<h6>，<h1>定义最大的标题，<h6>定义最小的标题，浏览器会自动地在标题的前后添加空行， 属于块级元素。
hr是一个水平线标签，也是一个自结束标签（空元素，单标记），也属于块级元素.
2.2.2 段落标签
用于将一段文字包裹起来，可以设置其他各种样式，使用p标签，也是双标记。 属于块级元素.
2.2.3 换行标签
<br>,是一个自结束标签（空元素，单标记）在想要换行的位置处插入换行符号。
2.2.4 HTML水平线
<hr> 标签表示在 HTML 页面中创建水平线，可用于分隔内容。
2.2.5 图片标签
img， 单标记。 不是块级元素，是内联元素（行内元素）。
作用：在网页上插入一张图片。
属性：
src：用于书写图片的具体位置（网络上的一张图片，也可以是本地磁盘上的一张图片)。
alt：给搜索引擎使用的。图片的替代文字。
width： 图片的宽。
height：图片的高。
注意事项：如果只设置宽或高中的一个属性，图片会照比原图的等比例的缩放。
例: <img src="https://img.tukuppt.com/ad_preview/00/04/15/5c98b99bce3ad.jpg" alt="黑板" width="600px height="600px">
路径的写法：有两种，相对路径和绝对路径
相对路径： 相对的是当前文件所在的文件夹。当前文件夹，当前文件夹的表示方式.
注意：./可以省略
../ 返回上一级文件夹
例: <img src="./images/2.jpg" alt="Rose">
绝对路径：一般指的就是项目的跟或者是磁盘的盘符开始写。
如果使用了live server插件，那么绝对路径的根就不是磁盘盘符，而是当前VSCODE 的工作空 间。如果没有使用，就是盘符开始写。
例:<img src="D:\A实训资料\01-HTML&CSS\code\images\2.jpg" alt="">
2.2.6 超链接标签
a标记，双标记，超链接指的是点击后跳往到另一个页面或者本页面的其他位置.
属性：
href:与图片的是src相似，就是书写目的的路径
title:鼠标悬停在超链接上显示的内容
target:去往目的地时，是使用新标签页，还是本页面
值1：_blank 新标签页打开
值2: _self 本标签页打开
1.文字链接
<a href="https://www.runoob.com">点我跳往菜鸟教程网站</a>
2.图片链接
<a href="https://www.vip.com" title="跳转到唯品会官网" target="_blank">
<img src="./images/2.jpg" alt="图片2">
</a>
3.锚点链接
跳转到本页面的某一个位置
href的值，必须是#开头,如果只有#表示跳转到当前页面的最顶端
如果是#配合id值，则是跳转到id值所在位置
因此目标位置，应该设置id值 .
<a href="#">回到最顶端</a>
<a href="#c7">点我跳转到章节7</a>
<h1 id="c7"> 章节7</h1>
超链接默认样式
-
一个未访问过的链接显示为蓝色字体并带有下划线。
-
访问过的链接显示为紫色并带有下划线。
-
点击链接时，链接显示为红色并带有下划线。
2.2.7 按钮标签
button, 双标记。 内容体里可以放入文字或图片.
建议：添加type属性，指定属性值为button
2.3格式化标签
<strong>加重语气的的文本、<b>加粗,bold的意思
<em>斜体效果，强调作用、<i>斜体效果itatic
<pre>预格式化文本
<small>更小的文本
<code>用于存放计算机代码
<bdo>文字显示的方向
<blockquote> 引用标签
<q> 双引号标签
<del> 删除文本
<ins>插入文本
<sub>下标文本
<sup>上标文本
2.4列表标签
2.4.1 无序列表
使用<ul>标签，列表项使用<li>标签，列表项使用粗体圆点（典型的小黑圆圈）进行标记。可以用ul>li*一个数字快速写。
2.4.2 有序列表
始于 <ol> 标签。每个列表项始于 <li>标签，列表项使用数字进行标记。
2.4.3 自定义列表
以<dl>标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。dd里面的文本是对dt里面文本的注释。
注意：列表项内部可以使用段落、换行符、图片、链接以及其他列表(列表里面还可以嵌套其他列表)等等。
2.5 表格标签
2.5.1表格的设置
一般用于标记结构化的数据，有行，有列。每一列都有标题。
过去也用表格做页面的整体布局，但是现在不用了，使用div代替。
<table> 元素表示整个表格，在整体上可以分成四个部分：<caption>，<thead> ，<tbody> 和 <tfoot>.
-
<caption>为整个表格定义主题 -
<thead>表格头部部分(也称表格页眉)。 -
在
<thead>中使用<th>元素定义每一列的标题，有加粗效果，与普通单元格区分开来. -
<tbody>表格主体部分 -
<tr>在<tbody>中使用<tr>元素定义行 -
<td>在<tr>中使用<td>元素定义单元格数据 -
<tfoot>可用于在表格的底部定义摘要、统计信息等内容 -
<table border="1px" cellspacing="0px" cellpadding="5px" width="50%" align="center">
border:边框的宽度，单位是像素
cellspacing：单元格之间的距离
cellpadding: 内容区距离单元格边框的距离
align: 表格整体的位置 center left right
width: 表格整体的宽度 可以是具体像素，也可以是屏幕的百分比
2.5.2 合并单元格
rowspan: 跨行属性，跨几行就写数字几
colspan: 跨列属性，跨几列就写数字几
注意: 要删除合并的单元格，只能从上倒下和从左到右合并.
快捷键：选中写字的地方，alt+shift下拉，相应位置自动填充一样文本.
2.6 表单标签
form是整个表单的父元素，action是form标签里的属性，用于书写提交路径,
method属性是用于书写提交方式，常用的值有get/post。
子元素：
fieldest:表单的整个边框,边框上如果想要使用表单标题，可以使用legend元素
常用子元素：
label:用于设置文字标签,扩大点击域，for属性用于关联某一个input的id值，使用id值关联
input：作为输入框元素，可以根据type属性的不同值，来定义不同的输入类型，比如：
type属性：
text：文本框，该值为默认值，可以不写。
password：密码框，特点是使用*或者.来替换真实的密码
radio属性：单选框 name的值需要相同才能算作一组，具有单选效果,
checked 默认选中
checkbox：复选框，name的值必须相同，才能被作为一组，具有单选效果,
checked默认选中
file：文件上传
hidden：隐藏域，该类型客人已用于隐藏，也不需要展示或者修改的信息
submit:提交类型，提交整个表单里输入的所有数据，提交到服务器
id属性：
1.为了关联label标签
2.id具有唯一标识的特点，不能重复
name属性：用于定义提交到服务器的具体值
value属性：接收用户输入的内容
select:下拉菜单元素
option子元素：用于定义下拉菜单的选项
option元素里的属性:
value属性：用于定义提交到服务器的选项的具体值
selected属性：默认选中
textarea： 文本域，注意域input的type=“text”的区别
可以设置行数（rows）与列数（cols）
2.6.1 元素分类
块级元素在浏览器显示时，通常会以新行来开始（和结束）。 例如: <h1>， <p>， <ul>，<ol>， <table>、<form>
内联元素在显示时通常不会以新行开始。 例如: <b>, <td>, <a>, <img>等，只要不是独占一行的，都是内联元素。
2.6.2 浏览器的自动纠正功能
1.当元素写在了根元素html外面，会自己纠正到body里
2.p元素里如果放入了其他的块元素，则会将p元素分解成两个p元素，其他块元素相当于挪出来。
3.当根元素html里出现了除了head和boby两个以外的子元素，则会自动纠正到body里。
三、HTML5的新元素
3.1 音频标签
audio：用于加载音频文件，支持MP3，ogg，wav
属性：
src：用于书写音频文件的路径
controls：提供用户可以操作的控件，比如播放、暂停。
autoplay：自动播放
loop：循环播放
考虑浏览器的兼容性，有些音频格式不支持。
可以将不同格式的音频放入一个组里面，使用source子元素，让浏览器自上而下的寻找可以播放的音频文件,找到一个能播放的就不会在自上而下。
<audio controls>
<source src="./resource/audio.mp3">
<source src="./resource/audio.ogg">
</audio>
3.2 视频标签
<video> 标签定义视频，比如电影片段或其他视频流。目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。
属性：
src：用于书写视频的路径
controls：提供用户控件
loop: 循环播放
width：宽
height：高
<video src="./resource/flower.webm" autoplay controls loop width="400px"></video>
注意：宽与高只设置其中一个，会等比例缩放。
考虑浏览器兼容问题，有些格式不支持，可以将不同格式的视频放入一个组里面，使用source子元素，让浏览器自上而下的寻找可以播放的视频文件。
<video controls width="400px">
<source src="./resource/flower.mp4">
<source src="./resource/flower.webm">
</video>
3.3 内联标签（用处极少）
iframe标签：用于将另外一个网页，嵌入到当前网页中
属性：frameborder 表示是否显示边框，0表示不显示，1表示显示
可以使用width和height调整窗口的宽与高。
四、练习题
1.在HTML中嵌入JavaScript，应该使用的标记是( A)
A.<script></script>
B.<head></head>
C.<body></body>
D.<!--、、、//-->
2.HTML5中的框架标签是：( C)
A.frame
B.fram
C.iframe
D.frameset
3.提交上显示的文字是由按钮的哪个属性决定的？（ C）
A.type
B.size
C.value
D.都错误
4.在text文本框中限制输入最大长度的属性是(A )
A.maxlength
B.max
C.length
D.lognmax
5.以下对HTML中使用CSS说法不正确的是：（AB ）
A.CSS必须在HTML中使用
B.HTML中必须使用CSS
C.在HTML中可以使用CSS，也可以不使用
D.在HTML元素中通过属性完成的设置，部分也可以通过CSS来设置
6.以下几种在HTML文档中通过CSS的方式将文档颜色设置为红色背景错误的是:（ C）style应该为type
A.内联样式表：<body style="background-Color:red"></body>
B.嵌入样式表：<style> body { background-Color:red } </style>
C.外部样式表：在当前目录下创 建一个test.css文件，在文件中声明一条<style> body { background-Color:red } </style>代码，并在HTML文档中通过<link style="text/css" rel="stylesheet" href="test.css">将其链接到本文档中使用
D.输入样式表：在当前目录下创建一个test.css文件，在文件中声明一条body { background-Color:red } 代码，并在HTML文档中通过<style>@import url(test.css);</style>输入到本文档中使用
7.以下几种样式规则的选择器中， 只能修饰唯一一个HTML元素的是那个：（B ）
A.类选择器
B.ID选择器
C.关联选择器
D.伪元素选择器
8.要将一种HTML标签所创建的各处网页元素分成几类，需要将这个HTML标签的class属性设置为不同的值，以下在HTML中的<div>元素上对类选择器使用不正确的是: ( A)
A.<div class=".classname">内容</div>
B.<div class=”classname1 classname2”>内容</div>
C.<div class="classname">内容</div>
D.<div id="index" class="classname">内容</div>
9.HTML语言中的换行标记是 ( B )
A.html
B.br
C.title
D.p
10.<img>标记符中连接图片位置的参数是 (B )
A.href
B.src
C.type
D.align
11.标记符title是放在以下哪个标记符之间的？（ B）
A.html与html
B.head与head
C.body与body
D.head与body
12.以下哪种语句是实现表单提交的动作? （ A）
A.<input type=submit name=** />
B.<input type=reset name=** />
C.<input type=text name=** />
D.<input type=password name=** />
13.以下表单的属性中哪种提交方式是隐藏提交?（ A）
A.type = hidden
B.type = text
C.type = password
D.type = checkbox
14.在HTML的元素上应用CSS类选择器样式，需要添加（）HTML代码 ( B)
A.css=
B.class=
C.style=
D.effect=
15.要想在网页中输出“<”正确的方法是 （ A）
A.<
B.<
C.>
D."
16.创建一个下拉菜单的HTML代码是？（BD ）
A.<form></form>
B.<select multiple（多） name="NAME" size=?></select>
C.<option></option>
D.<select name="NAME"></select>
17.在用浏览器查看网页时出现404错误可能的原因是 （ B ）
A.页面源代码错误
B.文件不存在
C.与数据库连接错误
D.权限不足
18.在用浏览器查看网页时出现505错误可能的原因是：（C ）
A.页面源代码错误
B.文件不存在
C.系统错误
D.权限不足
