本文详细介绍了HTML5的基础知识，包括HTML的结构、字符集、元数据、语义标签、列表、超链接、图片、内联框架、音频、视频、表格和表单。重点讲解了字符实体、元数据的charset属性、语义标签的使用，以及表单的input控件和label标签。此外，还介绍了表格的创建和单元格合并，以及如何创建和使用表单。
什么是 HTML？
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签
- HTML 使用标记标签来描述网页
一、HTML骨架
<!doctype html>
<html lang=“en”>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
1.!doctype html（文档声明）
<!doctype html>- 文档声明用来告诉浏览器当前网页的版本
- <!doctype html>就是声明网页是HTML5版本的
2.html（超文本标记语言）
<html></html>- html的根标签（元素），网页中的所有内容都要写根元素的里边
- lang表示语言：“en”表示英文“zh-CN”表示中文简体...等，哪种语言对内容没影响，但会告诉浏览器这是什么语言的网站，协助浏览器完成翻译等操作
3.head（头部）
<head></head>head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页
4.body（主体）
<body></body>body是htm1的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里
5.charset（字符集）
字符编码
所有的数据在计算机中存储时都是以二进制形式存储的，文字也不例外。
所以一段文字在存储到内存中时，都需要转换为二进制编码当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读
编码
将字符转换为二进制码的过程称为编码
解码
将二进制码转换为字符的过程称为解码
字符集
编码和解码所采用的规则称为字符集（相当于密码本）
乱码
如果编码和解码所采用的字符集不同就会出现乱码问题。
可以通过meta标签来设置网页的字符集，避免乱码问题
<meta charset="utf-8">meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题
utf-8：万国码
6.title（网页标题）
<title></title>title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容
二、字符实体与语义标签
1. 实体
语法：&实体的名字；
有些时候，在HTML中不能直接书写一些特殊符号，如：
- 多个连续的空格（在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格）
- 比如字母两侧的大于小于号（可能会被认为是标签并解析）
如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）如：
| 实体名字 | 显示结果 | 描述 |
| | 空格 | |
| > | > | 大于号 |
| < | < | 小于号 |
| © | © | 版权 |
更多实体:HTML 字符实体，HTML ISO-8859-1 参考手册
2.meta（元数据）
- meta标签必须放在head标签中
- meta主要用于设置网页中的一些元数据，元数据并不是给用户看的
属性：
1.charset
<meta charset="utf-8">以上代码表示设置字符集
2.http-equiv（设置http首部）
equiv（等效）
<meta http-equiv="refresh"content="3;url=网页">以上代码表示3秒后跳转到该网页
refresh（刷新）
content（内容）、“n；url=”（链接）
3.name
<meta name="description"content="腾讯网从2003年创立至今，已经成为集新闻信息，区域垂直生活服务、社会化媒体资讯和产品为一体的互联网媒体平台。腾讯网下设新闻、科技、财经、娱乐、体育、汽车、时尚等多个频道，充分满足用户对不同类型资讯的需求。同时专注不同领域内容，打造精品栏目，并顺应技术发展趋势，推出网络直播等创新形式，改变了用户获取资讯的方式和习惯。">
description（描述）
content
3.语义标签
- 在网页中HTML专门用来负责网页的结构所以在使用html标签时，应该关注的是标签的语义，而不是它的样式
文本格式化标签
| 语义 | 标签 | 说明 |
| 加粗 | <strong></strong> | 更推荐使用<strong></strong>标签加粗，语义更强烈 |
| 倾斜 | <em></em> | 更推荐使用<em></em>标签加粗，语义更强烈 |
| 删除线 | <del></del> | 更推荐使用<del></del>标签加粗，语义更强烈 |
| 下划线 | <ins></ins> | 更推荐使用<ins></ins>标签加粗，语义更强烈 |
我是<strong>strong</strong><br />
我是<em>倾斜线</em><br />
我是<del>删除线</del><br />
我是<ins>下划线</ins><br />
效果
块元素（block element）
-
在网页中一般通过块元素来对页面进行布局
- 行内元素主要用来包裹文字
- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
- 如
<q>元素中不能放任何的块元素
行内块元素
4. 内容修正
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，比如：
- 标签写在了根元素的外部
- <p>元素中嵌套了块元素
- 根元素中出现了除head和body以外的子元素
这个通过浏览器中的查看网页源代码并不能看到效果，但是使用F12进行开发者调试时是能够看到上述几种情况被修正的结果。不过虽然浏览器能够对不规范的页面内容进行修正，还是不建议编写不规范的代码，因为这对后期代码维护或团队代码协作将是非常不好的后果和体验。
5. 布局标签（这里不做详细介绍）
结构化语义标签
- header表示网页的头部（页眉）
- main表示网页的主体部分（一个页面中只会有一个main）
- footer表示网页的底部（页脚）
- nav表示网页中的导航
- aside和主体相关的其他内容（侧边栏）
- article表示一个独立的文章
- section表示一个独立的区块，上边的标签都不能表示时使用section
- div 块元素，没有任何的语义，就用来表示一个区块，一个div独占一行，可以理解为一个大盒子，目前来讲，div还是主要的布局元素
- span 行内元素，没有任何的语义，一般用于在网页中选中文字，可以理解为小盒子
6.列表
在html中可以创建列表，html列表一共有三种：
（1）无序列表
使用ul标签创建无序列表， 用li创建列表项
-
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
-
<li>与</li>之间相当于一个容器，可以容纳所有元素。
<ul>
<li>first column</li>
<li>second column</li>
<li>third column</li>
<li>forth column</li>
<li>fifth column</li>
</ul>
（2）有序列表
使用ol标签创建无序列表， 用li创建列表项
-
<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
-
<li>与</li>之间相当于一个容器，可以容纳所有元素。
<ol>
<li>first column</li>
<li>second column</li>
<li>third column</li>
<li>forth column</li>
<li>fifth column</li>
</ol>
（3）自定义列表
使用dl标签来创建定义列表，使用dt表示定义的内容，使用dd来对内容进行解释说明
-
<dl></dl>中只能嵌套<dt>和<dd>，直接在<dl></dl>标签中输入其他标签或者文字的做法是不被允许的。
-
<dt>和<dd>之间相当于一个容器，可以容纳所有元素。
<dl>
<dt>Beast of Bodmin</dt>
<dd>A large feline inhabiting Bodmin Moor.</dd>
<dt>Morgawr</dt>
<dd>A sea serpent.</dd>
<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>
7.超链接
- 超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置
- 使用
a标签来定义超链接，href属性指定跳转的目标路径，属性值可以是一个外部网站的地址，也可以写一个内部页面的地址 - 超链接是也是一个行内元素，在
a标签中可以嵌套除它自身外的任何元素
外部地址
<a href="网址">链接名字</a>表示在本页面打开网址
href（Hypertext Reference）（超文本引用）
<a href="网址" target="_blank">链接名字</a>表示在本页面打开网址，属性名target（目标），属性值_blank，当此属性值变为 self则在本页面打开网址
内部地址
当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，会以./或../开头
./表示当前文件所在目录，可以省略不写../表示当前文件所在目录的上一级目录
在1.1.html中输入
<a href=“./2.file/3.file/3.1.html">3.1.html</a>或
<a href="2.file/3.file/3.1.html">3.1.html</a>以上代码表示打开3.1.html
在2.1.html中输入
<a href="../1.1.html">1.1.html</a>以上代码表示打开1.1.html
锚点跳转
- 可以使用javascript:;来作为href的属性，此时点击这个超链接什么也不会发生
- 可以将#作为超链接的路径的占位符使用。
- 空链接：可以直接将超链接的href属性值设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置,开发时使用
- 可以跳转到页面的指定位置（锚点），只需将href的属性值改为#+某一元素的id或name属性值（唯一不重复）
<a id="a"></a>以上代码表示a标签的id为a
下载链接：路径为一个.exe或者.zip文件等压缩包文件时，会下载文件
网页元素链接：
在网页中的各种元素，如文本、图像、表格、音频、视频等都可以添加超链接，方法是将原标签用a标签包裹起来，例：
<a><img></a>8.图片
- 图片标签用于向当前页面中引入一个外部图片
- img标签是一个自结束标签，这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
<img src="" alt="" title="" width="" height="" border="">属性
- src(source)：属性值为路径（路径规则和超链接是一样的）
- alt(alternate,代替)：图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片
- titile：鼠标放在图像上显示的文字
- width：图片的宽度（单位是像素）
- height ：图片的高度（单位是像素）
- border：可以给图片设置边框粗细
- 宽度和高度中如果只修改了一个，则另一个会等比例缩放
注意
一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大（否则影响像素）
但是在移动端，经常需要对图片进行缩放（大图缩小）
图片格式
jpeg（jpg）
- 支持的颜色比较丰富
- 不支持透明效果
- 不支持动图
- 一般用来显示照片
gif
- 支持的颜色比较单一
- 支持简单透明
- 支持动图
png
- 支持的颜色丰富
- 支持复杂透明
- 不支持动图
- 专为网页而生
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 具备其他图片格式的所有优点，而且文件还特别的小
- 缺点：兼容性不好
base64
- 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
图片格式的选择
- 图片效果一样的，选文件小的
- 图片效果不一样的，选图片效果好的
- 尽可能的兼顾和平衡图片效果和文件大小
9.内联框架
iframe内联框架，用于向当前页面中引入一个其他页面，
- src：指定要引入的网页的路径
- frameborderd：指定内联框架的边框,属性值为0是无框，1为有框
<iframe src="https://beansprouts.neocities.org/" frameborder="1"></iframe>音频
- audio标签用来向页面中引入一个外部的音频文件
- 音视频文件引入时，默认情况下不允许用户自己控制播放停止
属性：
- src：相对路径
- controls：是否允许用户控制播放
- autoplay：音频文件是否自动播放，如果设置了autoplay，则音乐在打开页面时会自动播放，但是目前来讲大部分浏览器都不会自动对音乐进行播放
- loop（循环）：音乐是否循环播放
<audio src="相对路径" controls autoplay loop></audio>
source
除了通过src属性来指定外部文件的路径以外，还可以通过source元素来指定文件的路径
<audio controls autoplay loop>
对不起，您的浏览器不支持播放音频！请升级浏览器！
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
</audio>
IE11下，能够正常播放
IE8下，出现我们自定义的提示信息
embed
IE8下不支持audio元素，但是可以使用 embed元素在文档中的指定位置嵌入外部内容。
<embed src="">
视频
使用video标签来向网页中引入一个视频，使用方式和audio基本上是一样的
<video controls>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
<embed src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
</video>
IE11下，能够正常播放， IE8下，也能正常播放
其他
通过iframe和embed的方式引入视频。以某艺为例，提供了视频链接的HTML代码和通用代码，不过，embed需要flash的支持
<iframe
src="http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=0c53ddd55f262c6d416afa9d1f49dc55&tvId=1008748400&accessToken=2.ef9c39d6c7f1d5b44768e38e5243157d&appKey=8c634248790d4343bcae1f66129c1010&appId=1368&height=100%&width=100%"
frameborder="0" allowfullscreen="true" width="100%" height="100%"></iframe>
<embed
src="//player.video.iqiyi.com/0c53ddd55f262c6d416afa9d1f49dc55/0/0/v_19rrcuh1jw.swf-albumId=1008748400-tvId=1008748400-isPurchase=0-cnId=undefined"
allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always"
type="application/x-shockwave-flash"></embed>
表格
「1. 表格」
现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。
「2. 创建表格」
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>table、tr、td，他们是创建表格的基本标签，缺一不可
-
table用于定义一个表格标签。
-
tr标签 用于定义表格中的行，必须嵌套在 table标签中。
-
td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
-
字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。td像一个容器，可以容纳所有的元素。
表头单元格标签th:一般表头单元格位于表格的第一行或第一列，并且文本加粗居中,只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。
表格标题caption通常这个标题会被居中且显示于表格之上。caption 标签必须紧随 table 标签之后。这个标签只存在表格里面才有意义。
<table>
<caption>我是表格标题</caption>
</table>「3. 表格属性」
三参为0，平时开发时这三个参数border、cellpadding、cellspacing为0
「4. 合并单元格」
合并的顺序我们按照 先上 后下 先左 后右 的顺序 ,合并完之后需要删除多余的单元格。
-
跨行合并：rowspan="合并单元格的个数"
-
跨列合并：colspan="合并单元格的个数"
「5. 总结表格」
「6. 表格划分结构」
对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注， 这样更好的分清表格结构，例：
<table>
<thead>
<th></th>
<th></th>
<th></th>
</thead>
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
<tfoot></tfoot>
</table>
注意：
- <thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有<tr> 标签！
- <tbody></tbody>：用于定义表格的主体。放数据本体 。
- <tfoot></tfoot>放表格的脚注之类。
- 以上标签都是放到table标签中。
表单
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。
表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
「1. input 控件」
<input type="属性值" value="">-
input 输入的意思
-
<input />标签为单标签
-
type属性设置不同的属性值用来指定不同的控件类型
-
除了type属性还有别的属性
用户名: <input type="text" />
密码：<input type="password" />
效果：
单选框
性别：<input type="radio" name=“性别” />男<input type="radio" name=“性别”/>女 
相同name属性值的标签之间可以实现都选一
复选框
爱好：<input type="checkbox" />吃饭<input type="checkbox" />睡觉<input type="checkbox" />打豆豆
value属性
-
value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置，在文本框中显示，在其他type中不显示，起告诉后台的作用
name属性
- name表单的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。
- name属性后面的值，是我们自己定义的。
- radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
- name属性，我们现在用的较少，但是，当我们学ajax 和后台的时候，是必须的。
用户名: <input type="text" name="usename" value="请输入用户名"/><br />
密码：<input type="password" name="pwd" value=""/><br />
性别：<input type="radio" name=“sex” value="男"/>男<input type="radio" name=“sex vaule="女"/>女效果：
checked和maxlength属性
-
checked属性值唯一为checkded表示默认选中状态。 较常见于 单选按钮和复选按钮。
-
maxlength属性值表示用户最多可以输入的字数
submit和reset属性
- submit属性为点击提交整个表单域的所有元素给后台服务器，显示为提交，可以通过value改变
- reset属性为点击重置表单域，恢复默认状态，显示为重置，可以通过value改变
「2. label标签」
-
label 标签为 input 元素定义标注（标签）。
-
label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。
作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
如何绑定元素呢
-
第一种用法就是用label标签直接包含input表单， 适合单个表单选择
第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。
<!--第一种-->
<label> 用户名：
<input type="radio" name="usename" value="请输入用户名">
</label>
<!--第二种-->
<label for="sex">男</label><input type="radio" name="sex" id="sex">「3. textarea控件(文本域)」
-
通过textarea控件可以轻松地创建多行文本输入框.
-
cols="每行中的字符数" rows="显示的行数" 我们实际开发不用
<textarea >
文本内容
</textarea>
文本框和文本域区别
「4. select下拉列表」
-
如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。
-
在option 中定义selected =" selected "时，当前项即为默认选中项。
-
我们实际开发会用的比较少
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select>
综合案例
<h3>青春不常在，抓紧谈恋爱</h3><br />
<table width="400" border="1">
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="nan" id="nan" /><label for="nan">男</label><input type="radio" name="sex" value="nv" id="nv" /><label for="nv">女</label></td>
</tr>
<tr>
<td>生日</td>
<td>
<select>
<option>选择年</option>
<option>2000</option>
<option>2003</option>
</select>
<select>
<option>选择月</option>
<option>1</option>
<option>2</option>
</select>
<select>
<option>选择日</option>
<option>1</option>
<option>14</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td><input type="text" name="section" value="请填写所在地区"</td>
</tr>
<tr>
<td>婚姻状况</td>
<td><input type="radio" name="hunyin" value="marry" />已婚<input type="radio" name="hunyin" value="unmarry" />未婚<input type="radio" name="hunyin" value="dismarry" checked="checked" />离婚</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="type" />妩媚的
<input type="checkbox" name="type" />性感的
<input type="checkbox" name="type" />胸大的
<input type="checkbox" name="type" />都喜欢
</td>
</tr>
<tr>
<td>自我介绍</td>
<td><textarea>个人介绍</textarea>
<td>
</tr>
<tr>
<td></td>
<td><input type="button" value="免费注册" /></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" />我同意注册条款和会员加入准则</td>
</tr>
<tr>
<td></td>
<td><a href="#">我是会员，立即登录</a></td>
</tr>
</table>
<h4>我承诺</h4>
<ul>
<li>年满18、单身</li>
<li>抱着严谨的态度</li>
<li>真诚寻找另一半</li>
</ul>效果
扫一扫
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
