HTML与HTML5常用标签

学前准备
一、HTML简介
- 1.1 HTML是什么
- 1.2 HTML发展历史
- 1.3 HTML⽂档类型的设定
二、HTML基础语法
- 2.1 HTML基本结构
- 2.2 注释
- 2.3 HTML注释
- 2.4 HTML中HEAD头部设置
三、HTML文本标签
- 3.1 常用文本标签如下
- 3.2 举例
四、HTML格式化标签
- 4.1 常见格式化标签
- 4.2 举例
- 4.3 小技巧
五、HTML图像标签
- 5.1 简介
- 5.2 举例
- 5.3 理解绝对路径与相对路径
- 5.4 小技巧
六、HTML超链接标签
- 6.1 超级链接标签a
- 6.2 举例
七、HTML表格标签
- 7.1 表格中的标签
- 7.2 举例
- 7.3 小技巧
八、HTML表单标签（重要）
- 8.1 form 表单标签
- 8.2 input 表单项标签input定义输入字段
- 8.3 select 标签创建下拉列表
- 8.4 textarea 多行的文本输入区域
- 8.5 button 标签定义按钮
- 8.6 fieldset 元素可将表单内的相关元素分组（圈框）
- 8.7 legend -- 标签为 fieldset 、 figure 以及 details 元素定义标题
- 8.8 optgroup html5标签-- 定义选项组
- 8.9 datalist html5标签-- 定义可选数据的列表
九、HTML框架标签
十、HTML5多媒体标签
- 10.1 新增布局标签
- 10.2 新增的input type属性
- 10.3 新增的input属性
- 10.4 多媒体标签（了解）

学前准备

1）百度上的关于操作系统上的使⽤统计
百度统计流量研究院

2）谷歌浏览器下载
谷歌浏览器下载

3）浏览器的使⽤技巧——WEB前端助⼿(FeHelper) 前端⼈员的神器

WEB前端助⼿(FeHelper)

可参考网站上的安装说明进行安装（后缀crx改为zip =》直接拖入更多工具/拓展程序中）

4）工具介绍
SublimeText（高级记事本显示代码高亮，推荐）

Notepad++

aptana

EditPlus

VSCode（轻量级集成开发环境，推荐）

Hbuilder

WebStorm

一、HTML简介

1.1 HTML是什么

HTML 是 HyperText Mark-up Language 的⾸字⺟简写，意思是超⽂本标记语⾔

HTML不是⼀种编程语⾔，⽽是⼀种标记语⾔

超⽂本指的是超链接，标记指的是标签，是⼀种⽤来制作⽹⻚的语⾔，这种语⾔由⼀个个的标签组成

⽤这种语⾔制作的⽂件保存的是⼀个⽂本⽂件，⽂件的扩展名为 .html 或者 .htm

html⽂档也叫 Web⻚⾯，其实就是⼀个⽹⻚，html⽂件⽤编辑器打开显示的是⽂本，可以⽤⽂本的⽅式编辑它

如果⽤浏览器打开，浏览器会按照标签描述内容将⽂件渲染成⽹⻚，显示的⽹⻚可以从⼀个⽹⻚链接跳转到另外⼀个⽹⻚

1.2 HTML发展历史

1.3 HTML⽂档类型的设定

HTML在不同版本下⽂档类型的设定，即 <!Doctype > 对应的属性值

(1) HTML , 对应早期的 HTML4.0.1, 其基本结构如下：

(2) XHTML ，其基本结构如下：

(3) HTML5 ，其基本格式如下

二、HTML基础语法

2.1 HTML基本结构

             HTML⽂件的扩展名为 .html 或者 .htmHTML⽂本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于⽹⻚的信息（包括标题，字符集等），“主体”部分提供⽹⻚的具体内容HTML是由： 标签 和 内容 构成, 每个HTML⻚⾯都有两部分构成(head头和body体)，其最外层是 <html>...</html>标签包裹HTML标签（标记）的语法是由 < 和 > 括起来（比如head标签，body标签~）。HTML标签有两种： 双标签 ： <标签名>....</标签名> 和 单标签 ： <标签名 />（双标签： <h1>....</h1>，单标签： <hr />）HTML标签中还可以添加属性： <标签名 属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>....</标签名>HTML标签规范：标签名⼩写、属性使⽤双引号、标签要闭合。规范不遵守浏览器不会报错，会尽量解析，⼤不了不显示效果

2.2 注释

2.3 HTML注释

html⽂档代码中可以插⼊注释，注释是对代码的说明和解释

 <!-- 这就是唯⼀的⼀种HTML注释了 -->

2.4 HTML中HEAD头部设置

head标签作⽤于⽹⻚的头部，它的内容不会在正⽂中显示出来，主要完成对当前⻚⾯的各种设置

在head中常包含如下⼦标签：

三、HTML文本标签

3.1 常用文本标签如下

         <hn>...</hn> 其中n为1--6的值。 标题标签（加粗、独⽴⾏）<i>...</i> 斜体<em>...</em> 强调斜体<b>...</b> 加粗<strong>...</strong> 强调加粗（搜索引擎会对此强调的内容进行收录，优先展示）<cite></cite> 作品的标题（引⽤）<sub>...</sub> 下标 <sup>...</sup> 上标<del>...</del> 删除线

3.2 举例

<!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><h1>H1标题标签</h1><h2>H2标题标签</h2><h3>H3标题标签</h3><h4>H4标题标签</h4><h5>H5标题标签</h5><h6>H6标题标签</h6><u>u下划线标签</u><br/><del>del删除线标签</del><br/><b>b加粗标签</b><br/><strong>strong强调加粗标签</strong><br/><i>i斜体标签</i><br/><em>em强调斜体标签</em><br/><br/><cite>清明上河图</cite>是我国十大传世名画之一 <br/><br/>水分子：H<sub>2</sub>O <br/>2<sup>4</sup>=16
</body>
</html>

四、HTML格式化标签

4.1 常见格式化标签

     <br/> 换⾏<p>...</p> 换段<hr /> ⽔平分割线列表：<ul>...</ul> ⽆序列表<ol>...</ol> 有序列表 其中type类型值：A a I i 1 start属性表示起始值<li>...</li> 列表项<dl>...</dl> ⾃定义列表<dt>...</dt> ⾃定义列表头<dd>...</dd> ⾃定义列表内容（会有自动缩进）<div>...</div> 常⽤于组合块级元素，以便通过 CSS 来对这些元素进⾏格式化（两个标签之间自动换行）<span>...</span> 常⽤于包含的⽂本，您可以使⽤ CSS 对它定义样式，或者使⽤ JavaScript 对它进⾏操作。（两个标签之间不换行，无法指定宽、高、尺寸）

4.2 举例

<!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><h1>HTML格式化标签</h1><hr><divstyle="width: 600px"><p>据今日俄罗斯电视台（RT）援引当地媒体报道，以色列情报和特殊使命局（又称摩萨德）已获得中国新冠肺炎疫苗，并带回开始进行“研究”。</p><p>以色列媒体12频道（Channel 12）周一报道称，最近几周，摩萨德将中国疫苗带到了以色列。目前还不清楚该情报机构究竟是如何获得这种疫苗的。</p></div>我的爱好：<ul><li>看书</li><li>听歌</li><li>学习</li><li>运动</li></ul><ul type="circle"><li>看书</li><li>听歌</li><li>学习</li><li>运动</li></ul><ol><li>看书</li><li>听歌</li><li>学习</li><li>运动</li></ol><ol type="a"><li>看书</li><li>听歌</li><li>学习</li><li>运动</li></ol><dl><dt>问：HTML是什么</dt><dd>答：超文本标记语言</dd></dl><div>aaaaa</div><div>bbbbb</div><span>cccccc</span><span>dddddd</span>
</body>
</html>

4.3 小技巧

1）快速生成多个列表项

五、HTML图像标签

5.1 简介

在HTML⽹⻚中插⼊⼀张图⽚，使⽤img标签，他是⼀个单标签： <img />（也可以将图片作为背景，插入图片）其中img标签中常⽤属性如下：src： 图⽚名及url地址alt: 图⽚加载失败时的提示信息title：⽂字提示属性（鼠标放置上去的提示信息）width：图⽚宽度（宽/高只指定一个的话，另一个会根据比例自适应变动）height：图⽚⾼度border：边框线粗细

5.2 举例

<!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><h1>HTML图片img标签</h1><img src="./images/11.jpg" alt="图片1" width="600"><img src="./images/12.jpg" alt="图片2" width="600"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="百度一下" width="200">
</body>
</html>

5.3 理解绝对路径与相对路径

绝对路径：
绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径，(URL和物理路径)

例如：C:\xyz\test.txt 代表了test.txt⽂件的绝对路径。
http://www.sun.com/index.htm也代表了⼀个URL绝对路径。

相对路径：
相对与某个基准⽬录的路径。包含Web的相对路径（HTML中的相对⽬录）

例如：   在Web开发中，"/"代表Web应⽤的根⽬录。
"./" 代表当前⽬录,
"../"代表上级⽬录。这种类似的表示，也是属于相对路径。

5.4 小技巧

1）快速生成标签

六、HTML超链接标签

6.1 超级链接标签a

格式：

<a href="链接⽬标url地址">显示⽂字</a>

a标签属性

href: 必须，指的是链接跳转地址target: 表示链接的打开⽅式：_blank 新窗⼝_parent ⽗窗⼝_self 本窗⼝（默认，点击回退可以回到上一个页面）_top 顶级窗⼝framename 窗⼝名title：⽂字提示属性（鼠标放上去，可以看到详情）

锚点链接（可以通过id定位，在页面内跳转）

定义锚点： <a id="自己定义的名称"></a> 以前使⽤的是 <a name="自己定义的名称"></a>使⽤锚点： <a href="#a1">跳到a1处</a>

6.2 举例

<!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><h1>HTML实例-超级链接a标签</h1><!-- 锚点超级链接 --><a href="#girl1">美女1</a><br/><br/><a href="#girl2">美女2</a><br/><br/><!-- 普通超级链接 --><a href="https://ww.baidu.com" title="百度链接">百度(本窗口打开)</a><br/><a href="https://ww.baidu.com" target="_blank">百度(新窗口打开)</a> <br/><br/><a href="./Demo.html" target="_blank" >图片标签实例</a><br/><br/><a id="girl1"></a><h4>美女1</h4><img src="./images/11.jpg" alt="girl1" width="100%"><br/><br/><a id="girl2"></a><h4>美女2</h4><img src="./images/22.jpg" alt="girl2" width="100%"><br/><br/></body>
</html>

七、HTML表格标签

7.1 表格中的标签

th与td相比，th默认有加粗居中效果

7.2 举例

1）简单的表格

<!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><h1>HTML实例-表格标签</h1><table><!-- 表头 --><tr><th>学号</th><th>姓名</th><th>年龄</th><th>班级</th></tr><!-- 第一行数据 --><tr><td>1001</td><td>同学1</td><td>21</td><td>1班</td></tr><!-- 第二行数据 --><tr><td>1002</td><td>同学2</td><td>15</td><td>1班</td></tr><!-- 第三行数据 --><tr><td>1003</td><td>同学3</td><td>15</td><td>1班</td></tr></table></body>
</html>

7.3 小技巧

快速生成表格

八、HTML表单标签（重要）

8.1 form 表单标签

1）form标签常⽤属性：

*action属性:提交的⽬标地址(URL)
*method属性:提交⽅式:get(默认)和post
get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.
post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.
enctype:提交类型
target: 在何处打开⽬标 URL。
name:属性为表单起个名字.在HTML5中使⽤ id 代替。

2）举例

<!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><h1>HTML实例-表单标签：form, input, select, textarea</h1><form action="a.html" method="GET">姓名：<input type="text" name="uname"/> <br/><br/>密码：<input type="password" name="upass"/> <br/><br/><input type="submit" value="提交"/><input type="reset" value="重置"/></form></body>
</html>

8.2 input 表单项标签input定义输入字段

1）input常用属性

⽤户可在其中输⼊数据。在 HTML 5 中，type 属性有很多新的值。

*type属性:表示表单项的类型:值如下:
text:单⾏⽂本框

password:密码输⼊框checkbox:多选框 注意要提供value值radio:单选框 注意要提供value值file:⽂件上传选择框button:普通按钮submit:提交按钮image:图⽚提交按钮reset:重置按钮, 还原到开始(第⼀次打开时)的效果（如果有默认值，则会恢复默认值，而不是清空的意思）hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改

HTML5新增属性 email ⽤于应该包含 e-mail 地址的输⼊域

url ⽤于应该包含 URL 地址的输⼊域

number ⽤于应该包含数值的输⼊域

max 规定允许的最⼤值
min 规定允许的最⼩值
step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
value 规定默认值

range ⽤于应该包含⼀定范围内数字值的输⼊域，显示为滑动条

max 规定允许的最⼤值
min 规定允许的最⼩值
step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
value 规定默认值

⽇期选择器 Date pickers

date - 选取⽇、⽉、年
month - 选取⽉、年
week - 选取周和年
time - 选取时间（⼩时和分钟）
datetime - 选取时间、⽇、⽉、年（UTC 时间）
datetime-local - 选取时间、⽇、⽉、年（本地时间）

search ⽤于搜索域，⽐如站点搜索或 Google 搜索

color 颜⾊选择

8.3 select 标签创建下拉列表

1）常用属性
name属性:定义名称,⽤于存储下拉值的

size：定义菜单中可⻅项⽬的数⽬，html5不⽀持disabled 当该属性为 true 时，会禁⽤该菜单。multiple 多选<option>... </option> 下拉选择项标签,⽤于嵌⼊到<select>标签中使⽤的;*value属性:下拉项的值
*selected属性:默认下拉指定项.

2）举例

<!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><h1>HTML实例-表单标签：form, input, select, textarea</h1><form action="a.html" method="GET">学历：<select name="education" id=""><option value="1">大专</option><option value="2">本科</option><option value="3" selected>硕士</option><option value="4">博士</option></select></form></body>
</html>

8.4 textarea 多行的文本输入区域

1）常用属性
name :定义名称,⽤于存储⽂本区域中的值。

cols ：规定⽂本区内可⻅的列数。rows ：规定⽂本区内可⻅的⾏数。disabled： 是否禁⽤readonly： 只读...默认值是在两个标签之间

2）举例
无value属性，而是在标签开始结束中间添加内容，如图：

8.5 button 标签定义按钮

可以在 button 元素中放置内容，⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之处。

8.6 fieldset 元素可将表单内的相关元素分组（圈框）

disabled属性：定义 fieldset 是否可⻅。

form属性：定义该 fieldset 所属的⼀个或多个表单。

8.7 legend – 标签为 fieldset 、 figure 以及 details 元素定义标题

8.8 optgroup html5标签-- 定义选项组

此元素允许您组合选项，允许进行分组

8.9 datalist html5标签-- 定义可选数据的列表

与 input 元素配合使⽤，就可以制作出输⼊值的下拉列表。

九、HTML框架标签

1）常用属性：
src：规定在 iframe 中显示的⽂档的 URL

name：规定 iframe 的名称height：规定 iframe 的⾼度。width：定义 iframe 的宽度。frameborder：规定是否显示框架周围的边框。例如：<iframe src="1.html" name="myframe" width="700" height="500"></iframe>

2）举例

<!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><h1>HTML框架标签：iframe</h1><ul><li><a href="f.html" target="myframe">表单标签实例</a></li><li><a href="e.html" target="myframe">表格标签实例</a></li><li><a href="c.html" target="myframe">图片标签实例</a></li></ul><iframe src="f.html" name="myframe" frameborder="1" width="80%" height="500"></iframe>
</body>
</html>

十、HTML5多媒体标签

10.1 新增布局标签

将一些标签的含义更加具体化，这样可以快速区分页面中的各个部分，提高检索内容的速度

10.2 新增的input type属性

这些新增的类型，更加细化的限定了输⼊内容，如果输⼊格式不对，在提交的时候会⾃动给出相应提示

更多新增type 参考w3c

10.3 新增的input属性

10.4 多媒体标签（了解）

<audio src="./images/beidahuang.mp3" controls="controls">你的浏览器不⽀持播放
</audio> <br/>
<audio controls="controls"><source src="./images/beidahuang.mp3" type="audio/mpeg" />你的浏览器不⽀持播放
</audio> <br/><br/>
<video controls="controls" width="400" height="400"><source src="./images/fun.mp4" type="video/mp4" /><source src="movie.webm" type="video/webm">你的浏览器不⽀持视频播放
</video> <video controls loop poster="tiao.jpg"><source src="movie.webm" type="video/webm"><source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4">您的破浏览器该扔了，不⽀持视频标签
</video> <br/><br/>
<embed src="./images/haowan.swf" width="300" height="300" />