这是我参与「第四届青训营 」笔记创作活动的的第1天
入门了解：浏览器渲染页面的过程
用户输入网址通过DNS(Domain Name Sysyem域名系统)解析后得到服务器地址，浏览器向服务器发送http请求，经过TCP/IP三次握手确认来链接后，服务器将需要的代码发回给浏览器。浏览器接收到代码后会进行解析，经过DOM构造、布局以及绘制页面，最终展示为网页。
一、什么是HTML？
HTML(HyperText Markup Language超文本标记语言)是一种用来告诉浏览器如何组织页面的标记语言(不是编程语言)。由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种形式呈现或工作。
所谓超文本两层含义：1.可以加入图片、声音、动画、多媒体等内容，超越了文本的限制。
2.还可以从一个文件跳转到另一个文件。与世界各地的文件链接，超级链接文本。
二、HTML实例解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML实例解析</title>
</head>
<body>
<h1>这是我的第一个标题</h1>
<p>这是我的第一个段落</p>
</body>
</html>
(1)<!DOCTYPE html>文档类型声明标签，意思是当前页面采取的是HTML5版本来显示网页
(2)<html>是HTML页面的根元素。lang用来定义当前文档显示的语言，en定义语言为英语，zh-CN定义语言为中文。对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英语。
(3)<head>用于定义文档的头部，是所有元素头部的容器。
对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。
(4)<title>描述了文档的标题。
(5)<body>包含了可见的页面内容。
(6)<h1>定义了一个标题。HTML提供了6个等级的网页标题，h1~h6。
(7)<p>定义了一个段落。
三、常用的标签
1. <em></em>使行内容变成斜体。或者使用<i></i>
2.<strong></strong>用来强调文本的重要性，在浏览器以加粗的形式显示。或者使用<b></b>
3.<img></img>在所在位置插入一张指定图片。
图像标签的其他属性：src图片路径；alt替换文本，图像不能显示的文字;title提示文本，鼠标放到图像上现实的文字;width设置图像的宽度;height设置图像的高度;border设置图像的边框粗细。
还有<audio></audio>插入音频,<video></vedio>插入视频
4.<br>换行标签，单标签。
5. <del></del>删除线。或者<s></s>
6.<ins></ins>下划线。或者
7.<div>和<span>是没有语义的，他们就是一个盒子，用来装内容的。
div设计division的缩写，表示分割、分区。span意为跨度、跨距、
<div>标签用来布局，一行只能放一个<div>，大盒子。
<span>标签用来布局，一行可以放多个<span>，小盒子。
8.<a href=""></a>超链接。可以设置一个target用来指定链接页面的打开方式，_self为默认值，_blank为在新窗口打开链接。
链接分类：
四、块级元素和内联元素
1.块级元素在页面上以块的形式展现，相对于前面的内容它会在下一行展示，后面的内容也会进入下一行。
2.内联元素通常出现在块级元素中并环绕文档内容的一小部分；内联元素不会导致文本换行。
示例：
<em>1</em><em>2</em><em>3</em>
<p>1</p><p>2</p><p>3</p>
运行结果：
五、特殊字符的表示方法
在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们可以用下面的字符来替代。
示例：
<p>是一个段落标签。
显示结果：<p>是一个段落标签。
六、无序列表、有序列表和自定义列表
1.无序列表
四大名著
<ul>
<li>三国演义</li>
<li>西游记</li>
<li>水浒传</li>
<li>红楼梦</li>
</ul>
结果：
2.有序列表
世界国家国土面积排名
<ol>
<li>俄罗斯</li>
<li>加拿大</li>
<li>中国</li>
</ol>
结果：
3.自定义列表
<dl>
<dt>名词</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
</dl>
结果：
注意：(1)<ul></ul>和<ol></ol>之间只能嵌套<li></li>，直接在<ul></ul>输入其他标签或文字是不允许的；
(2)<li></li>之间相当于一个容器，可以容纳所有元素；
<dl></dl>里面只能包含<dt></dt>和<dd></dd>(dt类似标题，dd类似内容)。
七、表格的基本使用
示例：
<table border="1">
<th>此处是表头部分</th>
<tr>
<td>单元格里的文字1</td>
<td>单元格里的文字2</td>
</tr>
<tr>
<td>单元格里的文字3</td>
<td>单元格里的文字4</td>
</tr>
</table>
结果：
注意：(1)、<table></table>是用于定义表格的标签；
(2)<tr></tr>用于定于表格中的行，必须嵌套在<table></table>标签里；
(3)<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签里；
(4)<thead></thead>用于定义表格的头部，内部必须要有<tr></tr>标签，一般位于第一行；
(5)<tbody></tbody>用于定义表格的主题，主要用于存放数据本体；
(6)合并单元格：跨行合并：rowspan="合并单元格的个数"； 跨列合并：colspan="合并单元格的个数"。
八、表单域
表单域是一个包含表单元素的区域。
1.<form>标签用于定义表单域，以实现用户信息的收集和传递。
2.<form>常用属性：
3.input输入表单元素：
<input>标签用于收集用户信息，单标签。
在<input>标签里，包含一个type属性，根据不同的属性值，输入形式有很多。
type属性的属性值及其描述：
input的其他属性：
4.label标签：
<label>标签为input元素定义标签。
<label>标签用于绑定一个表单元素，当点击此标签内的文本时，浏览器会自动将焦点转到对应的表单元素上，来增加用户体验。
语法示例：
<label for="sex">男</label>
<input type="radio" id="sex">
核心：<label>标签的for属性应该与相当元素的id属性相同。
5.select下拉表单元素 语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
结果：
注意：(1)<select>里最少有一对<option>
(2)在<option>中定义select="select"时，当前项为默认选择项。
6.textarea文本域元素：通过<textarea>标签创建多行文本输入框。
语法：
<textarea rows="" cols="">
文本内容
</textarea>
实际开发中不会使用cols和rows，都是用CSS来改变其大小。
九、一些小常识：
1.URL统一资源定位符，URL地址俗称网页地址。
2.相对路径：以引用文件所在位置为参考基础，而建立的目录路径。 访问下一级路径用符号'/'，访问上一级路径用符号'../'。
结束语：
小白初学HTML笔记到这就结束了。欢迎观看的各路大佬批评、讨论和指正。我的QQ号：2531549812，有问题欢迎联系哦。
