本文详细介绍了HTML的基本结构、常用标签、超链接、表格、表单、框架以及HTML4与HTML5的区别。从文档声明到标签的使用，包括文本、图片、列表、表格的创建，以及表单元素的属性和功能，再到超链接的页面间跳转和锚链接，深入浅出地讲解了HTML的基础知识。此外，还探讨了HTML5新增的form表单属性、音频和视频支持，以及HTML4到HTML5的主要变化，帮助读者掌握HTML的全面技能。
目录
一、HTML文档基本结构
1、概念
HTML：HyperText Markup Language，超文本标记语言。
标记语言是由标签构成的语言，不是编程语言。例如：<html></html>
HTML运行在浏览器上，由浏览器进行解析。
2、html基础
1、文档后缀：.html和.htm
2、分类：围堵标签<p></p>、自闭和标签<br/>
3、标签可以嵌套：<div><p></p></div>
4、标签内可以定义属性，由键值对组成，值需要使用双引号括起来，多个属性使用空格分开。
例：<p id="1" name="p1"></p>
5、HTML标签不区分大小写，推荐全部小写。
3、基本结构
<!-- 声明当前文档是html5文档 -->
<!DOCTYPE html>
<!--html根元素-->
<html>
<!--
html头元素
作用：1、指定html中一些元数据。
例如：(1)meta:定义页面编码格式 (2)title:定义页面标题
2、引入外部资源文件
-->
<head>
<meta charset="utf-8" />
<title>测试页</title>
</head>
<body>
<!--
页面主体：浏览器显示内容。
格式化代码：ctrl+shift+f
-->
Hello Word!
</body>
</html>4、html注释
语法：以 <!-- 开始，以 --> 结束。注释浏览器不解析。
二、HTML常用标签
1、文本标签
- 标题标签 h1--h6 字体逐渐减小
- 段落标签 <p></p>
- 换行标签 <br/>
- 水平线标签 <hr/>
- 范围标签 <span></span> 通过该标签可以包裹一段内容，并对其添加样式。
2、图片标签
<body>
<!--
img 显示图片
常用属性： src 指定图片路径
路径分类：
相对路径：推荐使用
相对于当前html页面位置 ../表示上一级目录
绝对路径：不推荐
从磁盘路径根目录开始查找
title:1、鼠标悬浮在图片上显示的文字
2、当图片不能征程显示时，该位置会显示title中的文字
alt与title作用相同，但有些浏览器不支持
width、height:图片的宽、高，不要同时设置两个值，会失真
-->
<img src="img/my.jpg" title="coolman" width="120px" />
</body>图片热区
<body>
<!--
设置图片热点区域：
1、imag标签上添加属性 usemap 值 #地图名称
<map name="地图名称">
<area shape="形状名称" circle-圆形 rect-矩形 poly-多边形
coords="坐标(多个值之间使用逗号隔开)"
circle- 3个值，代表圆形横坐标，纵坐标，圆半径
rect- 4个值，代表左上角横纵坐标，右下角横纵坐标
poly- 顺时针写好每个点的横纵坐标
href="点击该区域时跳转目标URL"
title="鼠标悬停显示的提示文字"
/>
</map>
-->
<img src="img/1.jpg" usemap="#testMap"/>
<map name="testMap">
<area shape="circle" coords="100,100,100" href="html2.html" title="圆形" />
<area shape="rect" coords="300,100,500,200" href="index.html" title="矩形" />
<area shape="poly" coords="100,400,300,400,200,500" href="html2.html" title="三角形" />
</map>
</body>
3、列表标签
- 无序列表：<ul><li></li></ul>
- 有序列表：<ol><li></li></ol>
注意：建议ul、ol中只有li标签，如果想要嵌套将标签放到li中。
4、定义描述标签
<dl><dt></dt><dd></dd></dl>
dl:包裹dt、dd，不推荐包裹其他标签。
dt:标题，一般只有一个
dd:内容
5、布局标签
div:容器，盛放其他标签
6、标签分类
html标签分为块元素和行级元素
块状元素：一般都是新起一行，容纳行内元素和其他块状元素。
行级元素：一般都是语义级别基本元素，一般只能容纳行文本和其他行内元素。
简单区分二者：是否独占一行。
块状元素和行内元素的区别：
- 块状元素会独占一行，其宽度自动填满其父元素宽度。
行内元素会排列到同一行里，其宽度随着元素内容变化而变化。
- 块状元素可以设置宽高，行内元素设置宽高无效。
- 块状元素可以设置margin、padding属性；行级元素可以定义水平防线padding，垂直方向没有效果。
块状元素：h1-h6、p、hr、ol--li、ul-li、dl-dt-dd、div
行级元素：span、img、a
三、超链接
超链接作用：
- 页面间跳转
- 锚链接
1、页面间跳转
<body>
<!--
a:超链接，作用：跳转到其他资源
属性：href="目标资源路径" 建议使用相对路径
target="打开资源的位置" 默认值：_self 当前页面打开
常用值：_blank 在新页面打开资源
-->
<a href="html3.html" target="_blank">click it</a>
</body>2、锚链接
页面高度超过一屏的时候，通过锚链接可以快速定位到指定位置；可以实现本页面的锚链接，也可以实现不同页面间的锚链接。
<!--
a标签 属性 href="#锚点名称"
跳转至下一个a标签 的 name属性等于 锚点名称的位置
-->
<a href="#mark">锚链接-前往你想去的地方</a>
<div style="height: 800px;background-color: yellowgreen;">第一页</div>
<div style="height: 800px;background-color: goldenrod;">第二页</div>
<div>
<a name="mark">锚点</a>
<p>目的页面</p>
</div>四、表格标签
1、规则表格
<body>
<!--
table:定义表格
常用属性：height:高度
width:宽度
border:边框
cellpadding:内容与单元格之间的距离
cellspacing:单元格与单元格之间的距离
-->
<table border="1" cellpadding="0" cellspacing="0" width="90%" height="200px">
<!--
tr:定义行
常用属性：align:文本水平方向上对齐方式，
有三个取值，默认left:左对齐，center:居中对齐，right:右对齐
-->
<tr>
<!--
th和td标签都用来定义单元格，
th:一般用来定义表头单元格，即做标题的那一行中的单元格
td:一般用来定义非表头单元格，即除了标题正文内容的单元格
但是两者使用没有严格的限制，可以通过样式进行调整
常用属性：valign：文本垂直方向上的对齐方式，top-顶部对齐 bottom-底部对齐 middle-垂直居中
-->
<th align="center">序号</th><th>商品名称</th><th>价格</th>
</tr>
<tr>
<td>1</td><td valign="top"><img src="img/1.jpg" style="width: 100px;"/></td><td>125</td>
</tr>
<tr>
<td>2</td><td valign="bottom">Kitty饼干</td><td>96.0</td>
</tr>
</table>
</body>
2、不规则表格-跨行和跨列
<body>
<!--
单元格标签th和td中的常用属性：
colspan:合并列
rowspan:合并行
类似Excel中的合并单元格
-->
<table border="1" cellpadding="0" cellspacing="0" height="300px" width="400px">
<tr>
<!--
colspan="3" 意思是它要合并包括自身在内的本行的三列单元格，
所以本行后面的两个单元格的位置要被它占用，所以要删除后面两个单元格
-->
<td colspan="3"><h3>个人简历</h3></td>
</tr>
<tr>
<!--
rowspan="3" 意思是它要和并包括自身在内的本列的三行单元格，
所以本列后面两行的同样位置的单元格位置要被它占用，所以要删除后面两行的单元格
-->
<td>姓名：</td><td>贾宝玉</td><td rowspan="3">个人照片</td>
</tr>
<tr>
<td>出生日期：</td><td>1998-01-01</td>
</tr>
<tr>
<td>电话号码：</td><td>15559275441</td>
</tr>
</table>
</body>
3、表格的高级标签-标题标签和逻辑分区标签
<table border="1" cellpadding="10" cellspacing="0" width="90%">
<!--
caption:表格的标题
thead、tbody、tfoot都是逻辑分区标签，没有编写样式之前对整体的结构没有任何的影响
PS：如果自己没有编写逻辑分区标签，浏览器默认把所有行都放入tbody标签中，即table的子节点默认是tbody
-->
<caption>资产负债表</caption>
<thead style="background: lavenderblush;">
<tr>
<th>月份</th><th>负债</th><th>资产</th>
</tr>
</thead>
<tbody style="background: lightblue;">
<tr>
<td>1月份</td><td>10000</td><td>10000</td>
</tr>
<tr>
<td>2月份</td><td>150000</td><td>150000</td>
</tr>
<tr>
<td>3月份</td><td>100000</td><td>100000</td>
</tr>
</tbody>
<tfoot style="background: khaki;">
<tr>
<td>总计</td><td>260000</td><td>260000</td>
</tr>
</tfoot>
</table>
五、form表单
用于采集用户输入数据，与服务器进行交互。
<body>
<!--
form：用于定义表单。
常用属性：action 指定提交数据的URL
method:指定提交方式，一共7种，一下2种比较常用
get:1、请求单数会在地址栏中显示，会封装在请求行中。
2、请求参数大小是有限制的
3、不太安全
post:1、请求参数不会显示在地址栏中，会封装在请求体中
2、请求参数的大小没有限制
3、较为安全
enctyoe:表单中有上传的文件的时候必须有该属性，且取值为multipart/form-data
-->
<form action="index.html" method="get" enctype="multipart/form-data">
<!--
添加表单项元素。PS：表单项中数据要想被提交：必须指定其name属性
-->
</form>
</body>
1、表单项元素中的一些属性
| id | 元素的唯一标识，不重复 |
| name | 表单项元素的名称，提交数据到服务器，服务器获取数据通过该名称 |
| value | 表单项元素的值，服务器获取数据通过name获取到的就是value值 |
| type | 表单项元素呈现形式 |
| class | 样式名称 |
| readonly | 表单项元素只读，用户只能看不能改 |
| disabled | 禁用，该元素不能改，不能赋值 |
2、文本框
<!--
input:表单元素，type属性值不同，展现不同形式
文本框：type="text",text也是input的默认值
id:表单元素唯一标识，不重复
name:表单元素名称，表单提交服务器数据根据name获取值
placeholder:文本框中显示的提示文字，用户输入自己内容的时候提示文字自动消失
-->
<input type="text" id="userName" name="userName" placeholder="请输入用户名称" /><br/>
3、密码框
<!--
密码框：type="password",用户输入内容后显示的是黑色实心圆，而不是铭文显示内容
required:表示用户必须填写此内容，如果没有填写，提交表单的时候失败并给出提示
-->
<input type="password" id="password" name="password" required /><br />
4、单选按钮
<!--
单元按钮：type="radio"
单选按钮都是成组出现，name相同的才表示一组，同组中的按钮都互斥
value:服务通过name获取的值就是value
checked：表示默认选中，值可以忽略不写，也可以写checked="checked"
-->
性别：<input type="radio" name="gender" value="男" checked="checked" />男
<input type="radio" name="gender" value="女" />女
<input type="radio" name="gender" value="未知" />未知<br />
婚姻状态：
<input type="radio" name="statu" value="1" />已婚
<input type="radio" name="statu" value="0" />未婚 <br />
5、复选框
<!--
复选框：type="checkbox"
复选框都是成组出现，name相同的才表示一组，同组中的复选框可以选多个
value：服务器通过name获取到的就是value
-->
爱好：<input type="checkbox" name="hoby" value="swim" />游泳
<input type="checkbox" name="hoby" value="NBA" />游泳
<input type="checkbox" name="hoby" value="movie" />电影
<input type="checkbox" name="hoby" value="music" />音乐 <br />
6、文件域
<!--
文件域：文件上传 type="file"
表单中如果有文件上传，表单中最好有enctype="multipart/form-data"
multiple属性：表示可以同时上传多个文件
-->
头像：<input type="file" name="headImg" multiple="multiple" /><br />
7、日期（H5新加入特性）
<!--
日期-h5新特性
type="date" 表示年月日
type="datetime-local" 表示年月日 时分秒
-->
生日：<input type="datetime-local" name="birthday" /><br />
8、隐藏域
<!--
隐藏域：type="hidden" 页面上看不到恩和效果
作用：隐藏一些用户不关心，但程序需要的值，比如id
-->
<input type="hidden" name="userId" value="001" /><br />
9、下拉列表框
<!--
下拉列表：select中添加属性name
option:select中的所有选项，其中value表示下拉列表中被选中项的对应值
其中selected表示默认选中
-->
<select name="month">
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3" selected="selected">三月</option>
<option value="4">四月</option>
</select><br />
10、文本域
<!--
文本域：textarea
cols:指定列数，每一行有多少个字符
rows:默认多少行
readonly:表示只读，内容不可修改
disabled：表示不可用，样式呈现灰色
-->
协议：<textarea rows="15" cols="50" readonly="readonly" disabled="disabled">
水泊梁山英雄会注册会员条款说明：
1、必须遵守规则
2、替天行道
</textarea><br />
11、按钮
<!--
value:按钮上面的文字
type="submit" 提交按钮，提交到form的action的指定路径
type="image" 等价于提交按钮，只是没有value属性，多了一个src="按钮的图片"
type="reset" 清空表单中的所有用户输入，回到默认原始状态，相当于刷新了页面
type="button" 普通按钮，没有任何功能，只拥有按钮样式
-->
<input type="submit" value="注册" id="regBtn" />
<input type="image" src="../img/2.jpg" id="regBtn2" />
<input type="reset" value="重置" id="reset" />
<input type="button" value="普通按钮" id="commBtn" />
<!--
button标签可以与input实现的按钮相互替换
-->
<button type="submit" id="regBtn" >注册</button>
<button type="reset" id="reset" >重置</button>
<button type="button" id="commBtn">普通按钮</button>
12、标签
<!--
label:指定输入项的文字描述信息
注意：label的for属性一般会和input的id属性对应。
如果对应成功，则点击label区域，会让input输入框获取焦点。
-->
<label for="userName">用户名：</label>
<input id="userName" />
PS:
get方式提交表单时候，在地址栏会出现提交参数
http://127.0.0.1:8020/Test1/index.html? password=1231 &gender=%E5%A5%B3 &statu=1 &hoby=NBA &hoby=movie &headImg= &birthday= &userId=001 &month=3
六、框架
1、概念及语法
通过使用框架，可以在浏览器显示不止一个页面。
<!--
iframe:内嵌框架
常用属性：src="URL" 该URL指向不同的网页
height和width属性用来定义iframe标签的高和宽
属性默认单位为像素，也可以指定其按照比例显示（如：80%）
frameborder 用户定义iframe是够显示边框，值为0,不显示边框
name:内嵌框架名称
iframe可以显示一个目标链接的页面，目标链接的属性必须使用iframe的name
-->
<p><a href="https://ww.baidu.com" target="content">查询</a></p>
<iframe name="content" frameborder="0" src="2.html" width="100%" height="400px">
</iframe>
2、常用布局标签
- div-ul-li /div-ol-li 常用于导航布局
- div-dl-dt-dd 常用于图文混编布局
- div-form 常用于表单布局
- div-table 常用于局部规则数据展示布局
七、HTML4与HTML5的区别
html4和html5是超文本标记语言的第四次和第五次修改，html4是为了适应pc时代，html5是为了适应移动互联网时代，在移动设备上支持多媒体。
html5是互联网的下一代标准，是构建和呈现互联网的一种语言方式。html产生于1990年，1997年html4正式成为互联网标准，并广泛应用于互联网开发。
html5将web带入一个成熟的应用平台，在这个平台上视频、音频、图像、动画和设备的交互都进行了规范。
html5未来技术发展方向主要还是移动端互联网领域，现阶段移动端浏览器有应用体验不佳、网页标准不统一的劣势，这两个方面是移动端页面发展障碍，而html5能够解决这两个方面问题，推动移动端网页方面的发展。
1、一些主要标记区别
1.1、DOCTYPE不同
html4:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html5:
<!DOCTYPE html>
1.2、指定字符编码语法不同
html4:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
html5:
<meta charset="UTF-8">
2、HTML5新增的form表单属性
2.1 form新属性
autocomplete：规定form和input域应该拥有自动完成功能。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
autocomplete属性有可能在form表单中是开启的，在input元素中是关闭的。
注意：
autocomplete适用于input标签，以及以下类型的input标签：text、search、url、email、password、datepickers、range、color
<form action="" autocomplete="on">
姓名：<input type="text" name="name" />
电话：<input type="telephone" name="phone" />
邮箱：<input type="email" name="email" autocomplete="off" />
检索：<input type="search" name="search" />
资源路径：<input type="url" name="url" />
年龄：<input type="number" name="age" />
密码：<input type="password" name="pwd" />
出生日期：<input type="datepickers" name="date"/>
排名：<input type="range" name="range" />
颜色：<input type="color" name="color"/>
</form>
2.2 input新属性
list属性：list属性规定输入域的datalist。datalist是输入域的选项列表。
<input list="companys" />
<datalist id="companys">
<option>119厂</option>
<option>112厂</option>
<option>342厂</option>
<option>52所</option>
<option>123厂</option>
</datalist>
multiple属性：boolean值，规定input可以选择多个值。
注意：multiple适用于file和email
多个文件上传：<input type="file" name="img" multiple />
placeholder属性：提示信息(hint)，描述输入与所期待的值。
简短的提示在用户输入值之前会显示在输入域上。
placeholder适用于以下类型输入域：text、url、search、telphone、email、password
用户名：<input type="text" name="name" placeholder="请输入用户名"/>
required属性：boolean类型属性，要求必须在提交之前填写输入域（不能为空）。
注意：required适用于以下input标签：text、search、url、telephone、email、password、datepickers、number、checkbox、radio、file
用户名：<input type="text" name="name" placeholder="请输入用户名" required/>
2.3 html5新的表单元素
| 标签 | 描述 |
| datalist | input 标签定义选项列表。与input配合使用，定义可能的值。 |
| keygen | 用于定义表单的秘钥对生成器字段。 |
| output | 定义不同类型的输出，比如脚本输出。 |
2.4 html5新的input类型
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
注意：并不是所有主流浏览器都支持新的input类型，不过可以使用，会显示为正常文本域。
2.5 html5新增的音频
直到现在，任然不存一项旨在网页上播放音频的标准，大多数音频是通过插件(如：flash)来播放的。然而并非所有浏览都拥有相同的插件。
html5规定了网页上嵌入音频元素的标准<audio>元素。
<audio controls>
<source src="horse.ogg" type="audio/ogg"/>
<source src="horse.mp3" type="audio/mp3"/>
您的浏览器不支持audio元素
</audio>
PS：
- controls属性供播放、暂停、音量控件。
- 在<audio>与</audio>之间可以加入浏览器不支持组件信息。
- <audio>允许使用多个<source>元素，<source>可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。
- 目前<audio>元素支持三种格式音频文件：wav、ogg、mp3
音频格式的MIME类型
| Format | MIME-Type |
| mp3 | audio/mpeg |
| ogg | audio/ogg |
| wav | audio/wav |
2.6 html5新增的视频
<video width="320" height="240" controls="">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
您的浏览器不支持video标签
</video>
PS：
- controls属性提供了播放、暂停、音量控件来控制视频；
- 同时<video>也提供了width、height来控制视频的尺寸。如果设置了宽高，页面加载时所需要的视频空间会保留；如果没有设置这些属性，页面会根据原始视频大小改变。
- 在<video>与</video>之间可以加入浏览器不支持组件信息。
- 目前<video>支持三种格式视频文件：MP4、WebM、ogg
| Format | MIME-Type |
| mp4 | video/mp4 |
| ogg | video/ogg |
| webm | video/webm |
2.7 html5中移除的元素
- frame
- frameset
- noframes
八、html中的转义符号
| 转义符号 | 描述 |
| | 空格 |
| < | 小于号< |
| ≤ | 小于等于号<= |
| > | 大于号> |
| ≥ | 大于等于号>= |
| © | 版权符号 |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
