HTML的快乐之旅_全方位的学习html_注意细节—

补充：为了大家更好的掌握前端HTML+CSS的基础，作者写了相关项目方便大家理解与掌握，不懂的欢迎向我咨询。
项目介绍
前端练手项目（1）
前端练手项目（2）

此处学习略过HTML的人文历史环节HTML的历史

学习HTML是多么快乐的一件事

HTML学习框架
- HTML的结构和层面
- HTML的拓展知识
创建第一个HTML
- 常用的标签及属性
- 软件的选用
- 创建工程的注意事项
HTML里的表单元素
- 表单里的属性介绍
- 细谈method的两种方式
- 表单练习
HTML表格介绍
- 表格练习
HTML框架介绍
- 框架练习
列表
- 列表练习
HTML拓展知识点
总结

HTML学习框架

HTML的结构和层面

html结构

html结构类似于数据结构中的二叉树，<html>元素作为根结点，
<head>和<body>分别作为子结点，<head>的子结点又包含了
<title>和<mate>,<body>里面包含了各种标签元素。
--------------------------------------------------
<!DOCTYPE html>文档类型 html----MIME类型
<html lang="en">language=“en” zh-cn属性节点
<head><meta charset="UTF-8">源 编码字符集----utf-8<title>Document</title>标题
</head>
<body>正文
</body>
</html>

html层面
网站的主要组成部分有结构层、表现层和行为层，分别有以下的作用；
结构层：用来规划网站的结构，什么地方放置导航，轮播，侧栏等等。一般在写结构都用html来写，最流行的是html5往后有xhtml html4.0 都称为超文本语言。现在的html5很稳定，描述整个网站的结构。
表现层：表现层可以理解为结构层的衣服，可以随意更换目前使用到的css3.0 --css2.0 全称叫做层叠样式表。
行为层：主要使用到Javascript的脚本语言，实现与用户的一个事件交互，定义整个网站的行为。

HTML的拓展知识

W3C 万维网联盟
标准不是某一个标准，而是一系列标准的集合。在浏览器中的www就是w3c的意思，输入域名的可以省略www.就可以去访问网站。
符合HTTP协议，面向连接，符合web通信的标准
我们所有的web项目(包括前端和后端)都要遵从w3c所提供的标准和http协议。
推荐一个html学习网站W3school
HTML的请求方法
根据 HTTP 标准，HTTP 请求可以使用多种请求方法。
HTTP1.0 定义了三种请求方法： GET, POST 和 HEAD方法。
HTTP1.1 新增了六种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。

[ 1] GET请求指定的页面信息，并返回实体主体。
[ 2] HEAD 类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头
[ 3] POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
[ 4] PUT 从客户端向服务器传送的数据取代指定的文档的内容。
[ 5] DELETE 请求服务器删除指定的页面。
[ 6] CONNECT HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
[ 7] OPTIONS 允许客户端查看服务器的性能。
[ 8] TRACE 回显服务器收到的请求，主要用于测试或诊断。
[ 9] PATCH 是对 PUT 方法的补充，用来对已知资源进行局部更新。

MIME类型
MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。
所有的文件在网络上用于显示还是用于下载都存在自己响应的类型例如 gifjpeg存在自己的MIME类型用于给文档做一些自己的相关标识。

meta源–编码字符集
meta 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
meta标签位于文档的头部，不包含任何内容。meta标签的属性定义了与文档相关联的名称/值对。

创建第一个HTML

新建文件 ctrl+s 保存在自己创建的code目录下

使用！+Tab 按键那么就可以自动生成HTML文档模板如图所示

常用的标签及属性

标签及元素
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

p标签
p标签实现了对行的控制哦

<p>This is my first paragraph.</p>

这个 p元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签 p，以及一个结束标签 /p。元素内容是：This is my first paragraph。

a标签
HTML使用标签 a来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签a中使用了href属性来描述链接的地址。
a标签的使用：

使用a标签进行外部跳转----外链接

    <a href="3.html">主页</a><a href="2.html?username=zhangsanfeng&pwd=123">我的相册</a><a href="1.html">我的日志</a><a href="http://www.baidu.com/">百度</a><a href="http://www.taobao.com/">淘宝</a><br/>

使用a标签跳转到网页的内部 ----锚点

 <p><a href="#R1">第一章</a></p><p><a href="#R2">第二章</a></p><p><a href="#R3">第三章</a></p><p><a href="#R4">第四章</a></p><p><a href="#R5">第五章</a></p><h2><a name="R1">第一章</a></h2><!-- 内容 --><h2><a name="R2">第一章</a></h2><!-- 内容 --><h2><a name="R3">第一章</a></h2><!-- 内容 --><h2><a name="R4">第一章</a></h2><!-- 内容 --><h2><a name="R5">第一章</a></h2><!-- 内容 -->

hn
n = 1-6表示的是网页或者文章的标题字体大小从大到小默认加粗

Body元素
body 标签定义文档的主体。
body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
Body中的属性值
bgcolor 属性规定文档的背景颜色。
background 属性规定规定文档的背景图像。
alink 属性规定文档中活动链接（active link）的的颜色。licked).
link属性规定文档中未访问链接的默认颜色
vlink 属性文档中已被访问链接的颜色。

img标签
img 标签定义 HTML 页面中的图像。
img 标签有两个必需的属性：src 和 alt。

从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。img>标签的作用是为被引用的图像创建占位符。通过在 a 标签中嵌套 img 标签，给图像添加到另一个文档的链接。

src----source源代码，src 标签的 src 属性是必需的。它规定图像的 URL。
alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。
假设由于一些原因（比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器）用户无法查看图像，alt 属性可以为图像提供替代的信息。

border----边框单位像素值
width宽度 height高度像素值 ----百分比
usemap用于做位图map----映射
area规定位图区域
map位图

<img src="./image/2.jpeg" alt="大头儿子" usemap="#first" border="1px"><map id="first" name="first"><area shape="circle"coords="230,280,50"href="http://www.baidu.com/"></area></map>

span元素
span 用于对文档中的行内元素进行组合。
span 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 span 应用样式，那么 span元素中的文本与其他文本不会任何视觉上的差异。
span标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

div标签
div 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。div标签常用于组合块级元素，以便通过，CSS 来对这些元素进行格式化。
总结
id属性和name属性的区别？
ID就像是一个人的身份证号码，而Name就像是他的名字，ID显然是唯一的，而Name是可以重复的。id用于DHTML,即客户端脚本。而name则通常用在服务器端。
id的主要用途:
在客户端页面作为对象的唯一表示,同一个页面中不允许出现多个相同的id.可以使用JavaScript的document.getElementById(‘id’)来获取对象。
name的具体用途有：
用途1:
作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其name通过Request[“name”]取得元素提交的值。
用途2:
HTML元素input type='radio’分组，我们知道radio button控件在同一个分组类，check操作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的name属性来实现的。
用途3:
建立页面中的锚点，我们知道<a href="url">link</a>是获得一个页面超级链接，如果不用href属性，而改用name，如：<a name="PageBottom"></a>，我们就获得了一个页面锚点。
用途4:
作为对象的identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其name来引用该对象。
用途5:
在img元素和map元素之间关联的时候，如果要定义img的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的map元素的name)。
用途6:
某些特定元素的属性，如attribute，和param。例如为Object定义参数<param name = "appletParameter" value= "value">。
用途7:
name属性也可以作为客户端对象的标识,可以使用javascript的document.getElementByName(‘name’)来获取对象

标签都分为两种，一种双标签<html></html>，另一种是单标签<meta charset=”utf-8”><br/>换行。双标签一定有结束的标示符，一定不能写掉，否则整个页面会出现问题。而单标签最好在>前加上/。
乱码一般出现原因：字符集不统一，当我们在国内打开的浏览器的默认的编码格式都是GBK 需要把原有的GBK的格式修改成全球统一的格式 —UTF-8。

color颜色表示方法：
rgb(255,255,255) 0-255 r-red g-green b- blue
#000000~#ffffff 以十六进制的方式去表示颜色
使用颜色的单词英文 pinkorangeyellowblackwhitegold

软件的选用

编辑html网页的软件各种各样，这里为大家介绍10种：
Hbuilde
hbuilder是DCloud推出的一款支持HTML5的Web开发IDE。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。同时，它还包括最全面的语法库和浏览器兼容性数据。
Notepad++
Notepad++ 程序员必备的文本编辑器，软件小巧高效，支持27种编程语言，通吃C,C++ ,Java ,C#, XML, HTML, PHP,JS 等，推荐各位下载使用。Notepad++ 可完美地取代微软的记事本。
Dreamweaver
Dreamweaver “梦想编织者”，是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。
由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，对于初级人员，你可以无需编写任何代码就能快速创建Web页面。其成熟的代码编辑工具更适用于Web开发高级人员的创作！
Sublime Text
Sublime Text 很赞的代码编辑器，界面设置非常人性化，左边是代码缩略图，右边是代码区域，你可以在左边的代码缩略图区域轻松定位程序代码的位置，高亮色彩功能非常方便编程工作。
Eclipse
Eclipse的本身只是一个框架平台，但是众多插件的支持使得Eclipse拥有其他功能相对固定的IDE软件很难具有的灵活性。许多软件开发商以Eclipse为框架开发自己的IDE。Eclipse最初是由IBM公司开发的替代商业软件Visual Age for Java的下一代ide开发环境，2001年11月贡献给开源社区，现在它由非营利软件供应商联盟Eclipse基金会（Eclipse Foundation）管理。
EditPlus
EditPlus是一款为Internet准备的、运行于Windows 下的32位文本、html编辑器, 同时也是程序员们非常喜爱的编辑器。你完全可以用它代替Windows笔记本, 它也为许多网页高手和程序员提供便利！
WebStorm
WebStorm是一款强大的HTML5/JavaScript Web前端开发工具，被广大JS开发者誉为“Web前端开发神器”。WebStorm 8全新特性中包括对AngularJS的支持，能够高效准确地智能感知Angular语法、指令。WebStorm还完美支持Spy-js，合并了这款JavaScript调试利器，大大提高了开发者们的工作效率。
FirHtml
FirHtml网页编辑器一个简洁，小巧的网页编辑器。我们通过上一代，开发出全新的网页编辑器，帮助您高效地设计出精美的网页！新版增加了添加文件域功能。
Vim
Vim是Linux上的著名的文本编辑器，他是早年的Vi编辑器的加强版。这个gVim是windows版的，并且有了标准的windows风格的图形界面，所以叫g(graphical)Vim。这是一个国际版本，会根据安装的平台自动选择相应语言包，支持中文及其各种编码，连界面也是中文的，请放心使用。这个极具Unix特色和风格(simple is the best)的编辑器相信会给您带来不同的感受。

创建工程的注意事项

在创建html项目的时候，尽量去避免路径中包含了中文。平时在测试的时候可能不会出现什么问题，但是一旦接入服务器的时候，就会出现页面不显示的情况，有可能的问题就是路径中包含了中文。在建立工程时工程名一定要望文生义，通俗易懂，避免后期工作量大导致自己并不清楚每个页面显示的内容。在创建文件夹时也要注意这个问题。html的文件后缀名必须是.html，才会被浏览器解析。
文件命名：

项目命名规范：

HTML里的表单元素

input 元素
最重要的表单元素是 input 元素。
input元素根据不同的 type 属性，可以变化为多种形态。
input输入类型有text password submit radio checkbox button number date等等.
text

<form>First name:<br>
<input type="text" name="firstname">
<br>Last name:<br>
<input type="text" name="lastname">
</form>

password

<form>User name:<br>
<input type="text" name="username">
<br>User password:<br>
<input type="password" name="psw">
</form>

submit

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

radio

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

checkbox

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

select元素通常和option元素连用
select元素定义下拉列表，option 元素定义待选择的选项。列表通常会把首个选项显示为被选选项。您能够通过添加 selected 属性来定义预定义选项。例子如下：

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

textarea文本域
textarea表示可以输入多行字段;
里面clos属性和rows属性定义的是文本域的大小,clos表示列,rows代表行.

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

button按键
button元素定义可点击的按钮：

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

表单里的属性介绍

form表单的属性有以下几种：
accept-charset 规定用于表单提交的字符编码。
action 规定提交表单时将表单数据发送到何处。
autocomplete 规定表单是否应打开自动完成（填写）功能。
enctype 规定将表单数据提交到服务器时应如何编码（仅供 method=“post”）。
method 规定发送表单数据时要使用的 HTTP 方法。
name 规定表单名称。
novalidate 规定提交时不应验证表单。
rel 规定链接资源和当前文档之间的关系。
target 规定提交表单后在何处显示接收到的响应。
最常用的是action和methon

细谈method的两种方式

post与get的区别：
安全：从安全上来看，post的请求方式更安全不会将用户选择或设置的信息暴露在请求路径上。然而get的请求方式会将其信息暴露在请求路径中。
get请求在路径的地址上存在属性值 url的地址是有限制的
最大为64kb
何时使用 POST？
针对表单里填写的信息为热数据时post和get均可。
您应该使用 POST：
如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
何时使用 GET？
您能够使用 GET（默认方法）：
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的。

表单练习

一个简单的表单样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<div align="center">
<form action="" method="get">
姓名：<input type="text" name="username"/><br/><br/>
密码：<input type="password" name="mima"/><br/><br/>
性别：<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br/><br/>
爱好：
<input type="checkbox" name="hobby" value="吃饭">吃饭
<input type="checkbox" name="hobby" value="睡觉">睡觉<br/>
<input type="checkbox" name="hobby" value="懒虫">懒虫
<input type="checkbox" name="hobby" value="打游戏">打游戏
<input type="checkbox" name="hobby" value="开车">开车<br/><br/>请选择地址：
<select name="address">
<option value="">请选择城市</option>
<option value="重庆">重庆</option>
<option value="四川">四级</option>
<option value="四川">川菜</option>
<option value="四川">黑龙江</option>
<option value="四川">北京</option>
</select><br/>
<p>
请选择类型
<select name="type" multiple="multiple">
<option value="重庆">都市u安全</option>
<option value="四川">古代穿越</option>
<option value="四川">先嗲科技</option>
<option value="四川">历史人文</option>
<option value="四川">悬疑推理</option>
</select> </p>
<input type="submit" value="提交" />
</form></div>
<map id="first" name="first">
<area shape="circle" coords="100,223,50" href="https://www.w3school.com.cn/"></area></map></body>
</html>

表单总结
表单在日常生活中是十分常见,例如现在的每一个网页几乎都存在登录注册的功能,然而实现它们都需要利用到表单元素。在表单里特别注意的是methon里的两种请求方式,根据应用场景就行选用。表单里的submit和button,从形式看它俩都是按键的形式.然而button在还未添加事件之前它是毫无作用的,而submit默认的功能是将用户填写的表单进行提交并跳转到指定到URl。所以submit默认就是代有功能的不需要自己定义其功能。
在提交表单路径中通常会有 ?和 &，路径的规则 ?和 &，?号表示的是路径的跳转地址结束，&号表示的是属性之间的间隔。

HTML表格介绍

<table> 标签定义 HTML 表格
一个 HTML 表格包括 <table> 元素，一个或多个<tr>、<th> 以及<td> 元素。
<tr> 元素定义表格行， <th>元素定义表头，<td> 元素定义表格单元。
更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。

表格练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><img src="./image/2.jpeg" alt="大头儿子" usemap="#first" border="1px">&gt; &lt;<map id="first" name="first"><area shape="circle"coords="230,280,50"href="http://www.baidu.com/"></area></map><table border="1px"><tr><th>早餐</th><th>午餐</th><th>晚餐</th></tr><tr><td>包子</td><td>米粉</td><td>大盘鸡</td></tr><tr><td>豆浆</td><td>肉夹馍</td><td>烤馕</td></tr></table></body>
</html>

表格布局·：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>热门电影导航</title><style type="text/css"></style>
</head>
<body><h1>热门电影板块</h1>
<hr/>
最近热门电影 &nbsp;&nbsp;&nbsp;&nbsp;热门&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 最新 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;豆瓣评分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 冷门佳片 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;华语 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;欧美&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 日本&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="">更多&gt;&gt;</a>
<br/>
<hr/>
<table>
<tr><td><img src="../image/3.png" alt="致命ID"></td><td><img src="../image/2.png" alt="万能钥匙"></td><td><img src="../image/3.png" alt="禁闭岛"></td><td><img src="../image/2.png" alt="恐怖邮轮"></td>
</tr>
<tr align="center"><td>致命ID</td><td>万能钥匙</td><td>禁闭岛</td><td>恐怖邮轮</td></tr>
<tr>
<td><img src="../image/2.png" alt="致命ID"></td><td><img src="../image/3.png" alt="万能钥匙"></td><td><img src="../image/2.png" alt="禁闭岛"></td><td><img src="../image/3.png" alt="恐怖邮轮"></td>
</tr><tr align="center">    <td>致命ID</td><td>万能钥匙</td><td>禁闭岛</td><td>恐怖邮轮</td>
</tr>
</table>
</body>
</html>

HTML框架介绍

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。使用框架的坏处：开发人员必须同时跟踪更多的HTML文档，很难打印整张页面。
frameset框架
框架结构标签frameset定义如何将窗口分割为框架，每个 frameset 定义了一系列行或列，rows/columns 的值规定了每行或每列占据屏幕的面积。
frame框架标签
Frame 标签定义了放置在每个框架中的 HTML 文档。假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 frame标签中加入：noresize=“noresize”。为不支持框架的浏览器添加 noframes标签。重要提示：不能将 body 标签与 frameset标签同时使用！不过，假如你添加包含一段文本的noframes 标签，就必须将这段文字嵌套于 body 标签内。

框架练习

框架嵌套分块：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>框架</title>
</head>
<frameset rows="20%,60%,*"><frame src="" name="" /><frameset cols="10%,*"><frame  src="" name="" /><frame src="" name="" /></frameset><frame src="" name="" />
</frameset>
</html>

页面跳转：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head><frameset rows="10%,80%,10%"><frame src="A.html" name="header" /><frameset cols="10%,90%"><frame  name="menu" /><frame name="center" /></frameset><frame  name="footer" />
</frameset>
</html>

<!--A页面  -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>A</title>
</head>
<body><a href="B.html" target="menu">A</a>
</body>
</html><!--B页面  -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>B</title>
</head>
<body><a href="C.html" target="center">B</a>
</body>
</html>
<!--C页面  -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>C</title>
</head>
<body><a href="D.html" target="footer">C</a>
</body>
</html><!--D页面  -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>D</title>
</head>
<body><a href="A.html" target="header">D</a>
</body>
</html>

列表

无序列表
ul li
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 ul标签。每个列表项始于 li。
type的属性值可以填写disc 默认值。实心圆。circle 空心圆。square 实心方块。
有序列表
ol li
type属性可填写1 A a I i，有序列表始于 ol 标签。每个列表项始于 li 标签。
自定义列表
dl dt dd
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
列表的应用场景：导航 nav侧栏 sidebar商品栏贴吧知道 ----其他贴子的链接。

列表练习

无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

自定义列表

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

HTML拓展知识点

XHTML
XHTML 是以 XML 格式编写的 HTML

XHTML 指的是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
XHTML 是更严格更纯净的 HTML 版本
XHTML 是以 XML 应用的方式定义的 HTML
XHTML 是 2001 年 1 月发布的 W3C 推荐标准
XHTML 得到所有主流浏览器的支持

XHTML 它是html4.01版本后出现的一个更严谨语法更纯粹的一个版本
从语法上对html进行更严谨的规范。

HTML5
HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。
新增加了video和audio，分别表示视频音频的导入标签。

<video src="./video/final.mp4" controls="controls"></video>

<audio src="./music/Pianoboy高至豪 - The truth that you leave.mp3"controls="controls"></audio>

总结

在学习HTML的过程中会遇到很多的标签和属性，我们不需要每一个属性都要记得很清楚，有时候只需要明白标签有一个这样的功能，就好比在网页设计过程中你有一个好的设计想法如何来实现它，此时你便会想起标签的某一个属性就行。前端的学习相对后端来讲可能相对会简单一点，实时交互性可能给自己带来不一样的体验，存在的bug会相对后端来讲更好处理一点。凡是都要自己感兴趣才会学得更深入，学得精通，在学习的路上不能半途而废。
复杂的事情要简单做，简单的事情要认真做，认真的事情要重复做，重复的事情要创造性地做。脚踏实力地干，认真努力地学便会有结果，加油！