一、HTML
HTML是标记符号或代码的集合，这些符号或代码被放置在文件里，最终显示在网页上。它们指定了结构性的元素，例如段落、标题、列表等等。HTML还可以将多媒体组件（例如图形、视频、音频等）组件放置在网页中或者描述填充表单。
二、HTML的组成
HTML主要分为头部和主体两部分。在代码中所使用的标签有自闭合写法（也称自包含）和双<>写法。
1.头部（Head）
头部（head section）的元素包含网页的标题title、描述文档的元信息meta标签以及对脚本和样式的引用等。这部分的许多特性并不直接显示在网页上。
head元素包含标题，以<head>开头，以</head>标签结尾。在标题部分里面，至少要包含两个其他的元素：title元素和meta元素。
title元素用来配置浏览器窗口标题栏里显示的文本。文本包含在<title>和</title>之间，称为网页标题。
mate元素描述网页的特性，例如字符集，目前练习时多使用utf-8的字符集，该字符集的示例标签是<mate charset=”utf-8”>，它是独立存在的或被认为是自闭合的标签。
2.主体（Body）
主体（body section）包含的文本和元素直接显示在浏览器所展现的网页上，所以也称浏览器视窗。使用主体的目的在于配置网页的内容。
主体元素包含网页的实体部分，以<body>标签开头，以</body>标签结尾。在写网页时，绝大部分时间都用在写主体部分的代码上。如果主体部分里面输入文本，它将直接显示在浏览器视窗里的网页上。
将title设为“首页”，在body中输入要显示的文本。示例代码如下：
<html>
<head lang="en">
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
认识html的主要组成
分为head和body两部分
</body>
</html>显示效果如图：
从上图我们可以知道，body中输入的文本可以直接在网页中显示，但是在未设定的情况下，浏览器默认在同一行显示。
三、常用标签
1.h标签
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6> h标签的功能是字体加粗，自动换行，改变字体大小（从1到6依次减小）。
2.b标签
<b></b> b标签的功能是字体加粗。
3.u标签
<u></u> u标签的功能是给文字加上下划线。
4.i标签
<i></i> i标签的功能是文字倾斜。
5.<sub>和<sup>标签
<sub></sub> sub标签的功能是设置为下标。
<sup></sup> sup标签的功能是设置为上标。
示例代码如下：
<body>
<h1>学习html</h1>
<h2>学习html</h2>
<h3>学习html</h3>
<h4>学习html</h4>
<h4>学习html</h4>
<h6>学习html</h6>
<b>字体加粗</b>
<u>给文字加上下划线</u>
<i>文字倾斜</i>
H<sub>2</sub>o
x<sup>2</sup>
</body>显示效果如图：
6.预先格式化标签：
<pre></pre> 该标签可以让输入的内容按照你想要的格式输出。
示例代码如下：
<body>
<pre>按照自己定义的格式输出 空格
换行</pre>
</body>显示效果如图：
7.有序列表和无序列表标签
有序列表标签：<ol>
<li></li>
</ol>
无序列表标签：<ul>
<li></li>
</ul>
列表中每一个列表项又包含在<li></li>标签对之内。同时这两个列表标签内都可以继续嵌套列表标签。
示例代码如下：
<body>
<ol>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
</ol>
<ul>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
</ul>
<ul>
<li>水果
<ul>苹果</ul>
<ul>菠萝</ul>
<ul>香蕉</ul>
</li>
</ul>
</body>显示效果如图：
从效果显示图中可以看到嵌套的列表未显示无序点，这可能是由于嵌套列表的默认格式不同或者无序点被隐藏等原因。
8.图像标签：
<img> 图片标签是自闭合标签。常用写法为<img src=””> 。
示例代码如下：
<img src="./img/1.jpg" alt="加载失败"/>加一个“/”表示进入该文件夹下的某个文件。“./”指当前文件夹。
显示效果如图：
9.超级链接标签
<a></a> 超链接标签的功能是跳转。常用写法为<a href=””>。
以跳转到百度网页为例，示例代码如下：
<a href="https://www.baidu.com">百度</a>跳转这种网页的时候要注意不能漏掉前面的协议。显示效果如图：
在点击“百度”之后，会跳转到百度的界面。
a链接还可做锚标记，即在点击该a链接后本网页界面或其他网页界面中找到相应的元素。示例代码如下：
<body>
<a href="#targetC">找按钮</a>
<a href="./text.html#targetF">text页面</a>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<a name="targetC">按钮</a>
</body>10.段落标签
<p></p> 段落标签的功能是分段。常用写法为<p align=””>，分段标签的默认大小为可视化环境的100%。
在段落标签中，align是控制对齐的属性。
示例代码如下：
<body>
<p>html</p>
<p>html</p>
<p align="left">html</p>
<p align="center">html</p>
<p align="right">html</p>
</body>显示效果如图：
11.文字标签
<span></span> 文字标签的功能是输出文本。示例代码如下：
<body>
<span>文本输出</span>
<span>文本输出</span>
<span>文本输出</span>
</body>显示效果如图：
12.块标签（又称容器）
<div></div> 块标签的功能是做网站的布局。
13.表格标签
表格标签是<table></table>其中包含了控制行元素的<tr></tr>标签和控制列元素的<td></td>标签。
在标签中加入对应的属性来调整表格，示例代码如下：
<body>
<table border="1" bgcolor="#f0f8ff" cellspacing="0" width="500">
<caption>学生信息表</caption>
<tr>
<td rowspan="7">学生</td>
</tr>
<tr>
<td align="center" colspan="5">本校学生</td>
</tr>
<tr bgcolor="#ffebcd">
<td align="center">姓名</td>
<td align="center">性别</td>
<td align="center">年龄</td>
<td align="center">成绩</td>
<td align="center">是否考过</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>400</td>
<td>否</td>
</tr>
<tr>
<td>王月</td>
<td>女</td>
<td>20</td>
<td>500</td>
<td>是</td>
</tr>
<tr>
<td>李克</td>
<td>男</td>
<td>21</td>
<td>420</td>
<td>否</td>
</tr>
</table>
</body>显示效果如图：
14.标签里面的框架
标签里面的框架可以用<iframe></iframe>设置。
四、样式
1.样式的基本了解
样式是与HTML进行配合，它的写法为“属性：值；”。
样式的写法分为三种，分别是行内样式、内嵌样式和外部样式。样式中有一些样式是复合样式。
行内样式即直接在<div>标签中根据属性设置样式。
内嵌样式可以在定义<div>之后，在<style>标签内，运用选择器进行设置。
外部样式可以在定义<div>之后，使用<link>标签调用外部样式进行设置。
2.五种选择器
（1）基本选择器：根据元素名称进行选择。如：div{}。
（2）class类名选择器：根据类名称进行选择，格式为“.”加上类名。如：.block{}。
（3）id选择器：根据id名称进行选择，格式为“#”加上id名称。如：#b{}。
（4）子父型选择器：有“>”和“空格”两种格式。如：menu>li{}表示menu的直接子类li；menu li{}表示menu的全部子类。
（5）属性选择器：根据属性进行选择。如#b【class】【id】{}。
示例代码如下：
<html>
<head lang="en">
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="ab.css">
<style type="text/css">
/*1.基本元素选择器*/
div{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: aqua;
}
/*2.class类名称选择器*/
.block{
width: 500px;
height: 100px;
background-color: pink;
}
/*3.id选择器*/
#bb{
width: 100px;
height: 200px;
background-color: orange;
}
/*4.子父元素选择器*/
#father{
border: 1px solid black;
}
#father>li{
list-style: none;
border: 1px solid silver;
}
#father li{
color: red;
}
/*5.属性选择器*/
div[class="block"][id="aa"]{
background-color: black;
}
</style>
</head>
<body>
<!--外部样式-->
<div style=" width: 300px; height: 200px; border:1px solid black;"></div>
<!--内嵌样式-->
<div></div>
<div class="block"></div>
<div class="block"></div>
<div class="block" id="aa"></div>
<div class="block"></div>
<div id="bb"></div>
<ul id="father">
<li>1
<ul>
<li>1.1</li>
<li>1.1</li>
<li>1.1</li>
<li>1.1</li>
</ul>
</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!--外部样式-->
<div id="ab"></div>
</body>
</html>其中外部样式调用的代码如下：
#ab{
width: 200px;
height: 200px;
border: 1px solid red;
}上面提到的常用标签在未设置属性时都使用的的默认属性，它们的属性也可以在基本选择器中设置。如：p{}、ul{}。
在样式中还存在优先级：
（1）当样式互相冲突即存在相同样式属性的情况下，优先级从高到低为行内样式>内嵌样式>外部样式。
（2）当样式不互相冲突时，元素的样式会混合使用。
元素选择器中也存在优先级：
（1）从上至下的优先级。
（2）优先级从高到低为id选择器>class类名称选择器>基本选择器
（3）需要哪一种属性必须使用时，用“！important”强制提高优先级。
五、定位
定位分为相对定位、绝对定位和固定定位。
相对定位：相对定位的意思是在设置了某个元素之后，将其进行移动时，它原本的位置依然保留，即占了位置。配置相对定位时用position：relative设置。
绝对定位：绝对定位的意思是在设置了某个元素之后，将其进行移动时，它的位置随之移动，即不占位置。配置绝对定位时用position：absolute设置。
固定定位：固定定位的意思就和名字一样，网页滚动时，被配置为固定定位的元素始终在指定位置保持不变。
元素在配置了定位之后，可以使用样式，可以使用z-index、left、top、right、bottom元素。
相对定位和绝对定位嵌套使用时，此时绝对定位的显示对相对定位的属性卡死，即根据相对元素进行调整。
示例代码如下：
<html>
<head lang="en">
<meta charset="UTF-8">
<title>首页</title>
<style>
.a1{
position: relative;
margin: auto;
width: 300px;
height: 300px;
background-color: orange;
}
.a2{
position: absolute;
width: 200px;
height: 200px;
background-color: blue;
left: 0;
bottom: 20px;
}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
</body>
</html>六、伪类
伪类是用来指定一个或者与其相关的选择符的状态。使用时用“:”隔开。初学是常用的四个伪类分别是悬停伪类（:hover）、激活伪类（:active）、访问前伪类（:link）、访问后伪类（:visited）。
（1）悬停伪类:hover在鼠标光标放在指定位置时显示。
（2）激活伪类:active用于获得焦点(比如，被点击)的连接上。
（3）访问前伪类:link指在访问之前显示。
（4）访问后伪类:visited指在访问之后显示。
示例代码如下：
<html>
<head lang="en">
<meta charset="UTF-8">
<title>伪类测试</title>
<style>
a{
color: black;
text-decoration: none;
}
a:visited{
color: blue;
}
a:hover{
color: orange;
}
*a:link{
color: deeppink;
}
a:active{
color: red;
}
</style>
</head>
<body>
<a href="#">伪类</a>
</body>
</html>