【前端三剑客】万字总结HTML超文本标记语言

HTML
    css中的1px并不等于设备的1px
    在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
    还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
这点，在文章后面的部分还会讲到。
    在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /
独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该
设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，
也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在
些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。

2.3.1 p 标签表示一个段落

通过 p 标签改进上述代码, 每个段落放到 p 标签中：

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日用例</title>
</head>
<body>
    css中的1px并不等于设备的1px<p></p>
在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
这点，在文章后面的部分还会讲到。<p></p>
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /
独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该
设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，
也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在
些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。
</body>
</html>

展示结果:

注意:

p 标签之间存在一个空隙

当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)

自动根据浏览器宽度来决定排版.

html 内容首尾处的换行, 空格均无效.

在 html 中文字之间输入的多个空格只相当于一个空格.

html 中直接输入换行不会真的换行, 而是相当于一个空格.

2.4换行标签: br

br 是 break 的缩写. 表示换行。

br 是一个单标签(不需要结束标签)

br 标签不像 p 标签那样带有一个很大的空隙.

<br/> 是规范写法. 不建议写成 <br>

HTML
<body>
css中的1px并不等于设备的1px<p></p>
在css中我们一般使用px作为单位，在桌面浏览器中的1个像素往往都是对应着电脑屏幕的1个物理像
素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
这点，在文章后面的部分还会讲到。<p></p>
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /
独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该
设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，
也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在
些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。
</body>

2.5综合案例: 展示博客

案例的文本内容出自 https://www.cnblogs.com/yelongsan/p/7975580.html

预期效果:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日用例</title>
</head>
<body>
<h3>蒂其之死</h3>
meta name="viewport" content="width=device-width,initial-scale=1.0" 解释
简单来说
meta name="viewport" content="width=device-width,initial-scale=1.0" 解释
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<p></p>
content属性值 :
     width:可视区域的宽度，值可为数字或关键词device-width
     height:同width
     intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
     maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
     maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
     user-scalable:是否可对页面进行缩放，no 禁止缩放
<p></p>
复杂的说：
移动前端开发之viewport的深入理解
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念
以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。

<h1>一、viewport的概念</h1>

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器
上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小
，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的view
port都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在
移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980
px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览
器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。

<h1>二、css中的1px并不等于设备的1px</h1>

    在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，
    这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的
    像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在
    为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动
    设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是
    等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果
    公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样
    大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道
    理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，
    安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
</body>
</html>

2.6格式化标签

2.6.1加粗: strong 标签和 b 标签

HTML
<body>
我是一个<strong>大</strong>笨蛋
</body>

2.6.2倾斜: em 标签和 i 标签

HTML
<body>
我是一个<strong>大</strong><i>笨蛋</i>
</body>

2.6.3删除线: del 标签和 s 标签

HTML
<body>
我是一个<strong>大</strong><i>笨蛋</i>,<s>你</s>在干什么呢？
</body>

2.6.4下划线: ins 标签和 u 标签

HTML
<body>
我是一个<strong>大</strong><i>笨蛋</i>,<s>你</s>在<u>干什么</u>呢？
</body>

使用 CSS 也可以完成类似的效果. 实际开发中以 CSS 方式为主.

注意：重点记住加粗和倾斜。

2.7图片标签: img

img 标签必须带有 src 属性. 表示图片的路径：

HTML
<body>
我是一个<strong>大</strong><i>笨蛋</i>,<s>你</s>在<u>干什么</u>呢？
<img src="排序算法.png">
</body>

这个图片文件放到和 html 中的同级目录中.

2.7.1img 标签的其他属性

HTML
<body>
我是一个<strong>大</strong><i>笨蛋</i>,<s>你</s>在<u>干什么</u>呢？
<img src="排序算法.png" alt="无法显示该图片" title="排序算法" width="500px" height="500px" border="5px">
</body>

注意:

属性可以有多个, 不能写到标签之前

属性之间用空格分割, 可以是多个空格, 也可以是换行.

属性之间不分先后顺序

属性使用 "键值对" 的格式来表示.

2.7.2关于目录结构:

对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好。

1) 相对路径: 以 html 所在位置为基准, 找到图片的位置.

同级路径: 直接写文件名即可 (或者 ./)

下一级路径: image/1.jpg

上一级路径: ../image/1.jpg

2) 绝对路径: 一个完整的磁盘路径, 或者网络路径. 例如

磁盘路径 D:\rose.jpg

网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png

2.7.2.1代码示例

1) 使用相对路径: 创建一个 image 目录和 html 同级, 并放入一个 rose2.jpg

HTML
<img src="image/rose2.jpg" alt="">

2) 使用相对路径2: 在 image 目录中创建一个 html, 并访问上级目录的 rose.jpg

HTML
<img src="../rose.jpg" alt="">

3) 使用绝对路径1: 最好使用 / , 不要使用 \

HTML
<img src="D:/rose.jpg" alt="">

4) 使用绝对路径2: 使用网络路径

HTML
<img src="https://images0.cnblogs.com/blog/130623/201407/300958475557219.png"
alt="">

2.8超链接标签: a

href: 必须具备, 表示点击后会跳转到哪个页面.

target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

2.8.1链接的几种形式

HTML
<body>
    我是一个<strong>大</strong><i>笨蛋</i>,<s>你</s>在<u>干什么</u>呢？
    <img src="排序算法.png" alt="无法显示该图片" title="排序算法" width="500px" height="500px" border="5px">
    <a href="http://www.bing.com" target="_blank">必应</a>
</body>

链接的几种形式:

外部链接: href 引用其他网站的地址

内部链接: 网站内部页面之间的链接. 写相对路径即可.

在一个目录中, 先创建一个 1.html, 再创建一个 2.html

HTML

我是 1.html
<a href="2.html">点我跳转到 2.html</a>

我是 2.html
<a href="1.html">点我跳转到 1.html</a>

空链接: 使用 # 在 href 中占位.

HTML
<a href="#">空链接</a>

下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)

HTML
<a href="test.zip">下载文件</a>

网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)

HTML
<a href="http://www.sogou.com">
<img src="rose.jpg" alt="">
</a>

锚点链接: 可以快速定位到页面中的某个位置.

HTML
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集剧情 <br>
第一集剧情 <br>
...
</p>
<p id="two">
第二集剧情 <br>
第二集剧情 <br>
...
</p>
<p id="three">
第三集剧情 <br>
第三集剧情 <br>
...
</p>

禁止 a 标签跳转: <a href="javascript:void(0);"> 或者<a href="javascript:;">

2.9综合案例: 展示博客2

预期效果: 在上个博客页面的案例基础上, 加上图片和超链接

三、表单标签

表单是让用户输入信息的重要途径。

分成两个部分:

表单域: 包含表单元素的区域. 重点是 form 标签.

表单控件: 输入框, 提交按钮等. 重点是 input 标签.
提示信息

3.1form 标签

表单域是一个包含表单元素的区域。
在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。
<form> 会把它范围内的表单元素信息提交给服务器.

HTML
<body>
<form action="html-demo1.html">这是一个例子</form>
</body>

注意：在我们写表单元素之前,应该有个表单域把他们进行包含.

3.2input 标签（表单控件）

在英文单词中，input 是输入的意思，而在表单元素中 <input> 标签用于收集用户信息。
在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.

name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一.

value: input 中的默认值.

checked: 默认被选中. (用于单选按钮和多选按钮)

maxlength: 设定最大长度.

除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：

1.name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
2.name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
3.checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
4.maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.

3.2.1文本框

HTML
<body>
请输入：
<input type="test">
</body>

3.2.2密码框

HTML
<body>
请输入密码：
<input type="password">
</body>

3.2.3单选框

HTML
<body>
    请输入性别：
    <input type="radio" name="sex">男
    <input type="radio" name="sex" checked="checked">女
    
</body>

3.2.4复选框

HTML
<body>
    请输入您的爱好：
    <input type="checkbox">打羽毛球
    <input type="checkbox">打篮球
    <input type="checkbox">踢足球
    <input type="checkbox">玩滑板
</body>

3.2.5 普通按钮

HTML
<body>
<input type="button" value="提交">
</body>

3.2.6提交按钮

HTML
<body>
    <form action="test.html">
        <input type="text" name="username">
        <input type="submit" value="提交">
        </form>
</body>

3.2.7清空按钮

HTML
<body>
    <form action="test.html">
        <input type="text" name="username">
        <input type="submit" value="提交">
        <input type="reset" value="清空">
    </form>
</body>

清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置.

3.2.8选择文件

HTML
<body>
<input type="file">
</body>

3.3label 标签（表单控件）

<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.

核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。

HTML
<body>
<label for="male">男</label> <input id="male" type="radio" name="sex">
</body>

3.4select 标签（表单控件）

下拉菜单：option 中定义 selected="selected" 表示默认选中.

HTML
<body>
    <select>
        <option>北京</option>
        <option selected="selected">上海</option>
    </select>
</body>

注意! 可以给的第一个选项, 作为默认选项

3.5 textarea 标签（表单控件）

HTML
<body>
<textarea rows="3" cols="50">
</textarea>
</body>

文本域中的内容, 就是默认内容, 注意, 空格也会有影响.

cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。

总结：

这三组表单元素都应该包含在form表单域里面,并且有 name 属性.

3.6无语义标签: div & span

就是两个盒子. 用于网页布局：

特点：
1. <div> 标签用来布局，但是现在一行只能放一个<div>。大盒子
2. <span> 标签用来布局，一行上可以多个 <span>。小盒子

HTML
<body>
    <div>
        <span>咬人猫</span>
        <span>咬人猫</span>
        <span>咬人猫</span>
    </div>
    <div>
        <span>兔总裁</span>
        <span>兔总裁</span>
        <span>兔总裁</span>
        <span>兔总裁</span>
    </div>
    <div>
        <span>阿叶君</span>
        <span>阿叶君</span>
        <span>阿叶君</span>
    </div>
</body>

四、HTML 特殊字符

有些特殊的字符在 html 文件中是不能直接表示的,需要进行转义，例如:

空格:

小于号: <

大于号: >

按位与: &

五、Emmet 快捷键

直接输入内容+TAB

六、综合案例: 展示简历信息

HTML
<!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>
    <div>
        <h1>基本信息</h1>
        <img src="dog.jpg" alt="无法加载该图片" title="张三" width="500px" height="500px">
        <p></p>
        <span>求职意向：</span>Java开发工程师<p></p>
        <span>联系电话：</span>+86 123-4567-8912 <p></p>
        <span>邮箱：</span>xxx@xxxx.com <p></p>
        <a href="https://gitee.com/aoyunlan-jiajie" target="_blank">我的Github</a><p></p>
        <a href="https://blog.csdn.net/2302_79457832?type=blog" target="_blank">我的博客</a><p></p>
    </div>
    <div>
        <h1>教育背景</h1>
        <ol>
            <li>1990-1996 小葵花幼儿园幼儿园</li> <p></p>
            <li>1996-2002 小葵花小学小学</li> <p></p>
            <li>2002-2005 小葵花中学初中</li> <p></p>
            <li>2005-2008 小葵花中学高中</li> <p></p>
            <li>2008-2012 小葵花大学计算机专业本科</li> <p></p>
        </ol>
    </div>
    <div>
        <h1>专业技能</h1>
        <ul>
            <li>Java基础语法扎实，已经刷了800道力扣题目<p></p></li>
            <li>常见数据结构可以独立实现并熟练应用<p></p></li>
            <li>熟知计算机网络理论，并且可以独立排查常见问题<p></p></li>
            <li>掌握Web开发能力，并且独立开发了学校的留言功能<p></p></li>
        </ul>
    </div>
    <div>
        <h1>我的项目</h1>
        <ol>
            <li><h3>留言墙</h3></li>

            开发时间：2008年9月到2008年12月<p></p>
            功能介绍：<p></p>
            <ul>
                <li>支持留言发布<p></ps></li>
                <li>支持匿名留言<p></p></li>
            </ul>
            <li><h3>学习小助手</h3></li>
            开发时间：2008年9月到2008年12月<p></p>
            功能介绍：<p></p>
            <ul>
                <li>支持错题检索</li>
                <li>支持同学探讨</li>
            </ul>
        </ol>
    </div>
    <div>
        <h1>个人评价</h1>
        一般般
    </div>
</body>
</html>

七、综合案例: 填写简历信息

Java
<h1>请填写简历信息</h1>
    <p>
        姓名：<input type="text">
    </p>
    <p>
        性别：<input type="radio" name="sex" checked="checked">男
        <input type="radio" name="sex">女
    </p>
    <p>
        出生日期：
        <select>
            <option selected="selected">"--请选择年份--</option>
            <option>2022</option>
            <option>2023</option>
        </select>
        <select>
            <option selected="selected">--请选择月份--</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
        </select>
        <select>
            <option selected="select">--请选择日期--</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
        </select>
    </p>
    <p>
        就读学校：<input type="text">
    </p>
    <p>
        应聘岗位：<input type="checkbox">前端开发
        <input type="checkbox">后端开发
        <input type="checkbox">测试开发
        <input type="checkbox">运维开发
    </p>
    <p>
        掌握的技能：<textarea cols="30" rows="10"></textarea>
    </p>
    <p>
        项目经历：<textarea cols="30" rows="10"></textarea>
    </p>
    <p>
        <input type="checkbox">我已仔细阅读过公司的招聘要求

    </p>
    <p>
        <a href="#">查看我的状态</a>
    </p>

八、参考文档

经常查阅文档是一个非常好的学习习惯。
推荐的网址：
百度: http://www.baidu.com
W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/

九、列表标签

9.1无序列表

1.无序列表的各个列表项之间没有顺序级别之分，是并列的。
2.<ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
3.<li> 与 </li> 之间相当于一个容器，可以容纳所有元素。
4.无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

HTML
<ul>
    <li>Java 基础语法扎实，已经刷了 800 道 Leetcode 题；</li>
    <li>常见数据结构都可以独立实现并熟练应用；</li>
    <li>熟知计算机网络理论，并且可以独立排查常见问题；</li>
    <li>掌握 Web 开发能力，并且独立开发了学校的留言墙功能。</li>
</ul>

9.2有序列表

1.<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
2.<li> 与 </li>之间相当于一个容器，可以容纳所有元素。
3.有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。

HTML
<ul>
        <li>Java基础语法扎实，已经刷了800道力扣题目<p></p></li>
        <li>常见数据结构可以独立实现并熟练应用<p></p></li>
        <li>熟知计算机网络理论，并且可以独立排查常见问题<p></p></li>
        <li>掌握Web开发能力，并且独立开发了学校的留言功能<p></p></li>
</ul>

9.3二级无序列表

HTML
<ol>
            <li><h3>留言墙</h3></li>

            开发时间：2008年9月到2008年12月<p></p>
            功能介绍：<p></p>
            <ul>
                <li>支持留言发布<p></p></li>
                <li>支持匿名留言<p></p></li>
            </ul>
            <li><h3>学习小助手</h3></li>
            开发时间：2008年9月到2008年12月<p></p>
            功能介绍：<p></p>
            <ul>
                <li>支持错题检索</li>
                <li>支持同学探讨</li>
            </ul>
        </ol>

9.4自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕

着标题来展开的.

HTML
<dl>
    <dt>我的老婆们</dt>
    <dd>咬人猫</dd>
    <dd>兔总裁</dd>
    <dd>阿叶君</dd>
</dl>

十、表格标签

10.1表格的主要作用

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

10.2表格的基本语法

1.<table> </table> 是用于定义表格的标签。
2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
3.<td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4.字母 td 指表格数据（table data），即数据单元格的内容。

10.3表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.

th: 表示表头单元格. 会居中加粗

thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)

HTML
<table align="center" border="1" cellpadding="10" cellspacing="0" width="500" height="500">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>15</td>
        </tr>
    </table>