目录
一．无序链表ui 2有序链表ol 3定义链表dl 4链表的嵌套应用
第一章/第二章：初识HTML5
认识了基本标签，以及标签的基本作用（以下附基本用法）
第一部分：
<!-- /:表示结束 -->
<hr/>
<!-- 10.18 -->
<!-- 标题标签 -->
<!-- align:属性 -->
<h1 align="center">标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!-- mark:高亮 -->
<p>我是<mark>帅哥</mark></p>
<!-- 自定义标签 -->
<sb>是个</sb>
<!-- hr/:水平线标签 width:宽度 color：颜色 -->
<hr/>
<!-- 段落标签 -->
<p>这是段落标签</p>
<b>加粗</b>
<strong>加粗2</strong>
<i>倾斜</i>
<em>倾斜2</em>
<!-- 删除线 -->
<s>我没有后悔</s>
<del>你后悔了嘛</del>
<!-- 下划线 -->
<u>下划线</u>
<ins>下划线</ins>
<sup>1</sup>
<sub>2</sub>
<!-- 缩写 -->
<abbr title="缩写一下下">缩写</abbr><br>
<!-- 设置字体 -->
<font color="blue" size="30" face="楷体">so cool</font><br>
<!-- src:路径 alt：注释 widtd：宽 height：高 -->
<img src="./img/friend.jpg" alt="朋友" width="200" height="200"><br>
<!-- a:href 跳转页面 target:属性，可以设置我在新窗口打开某个网址-->
<a href="http://www.baidu.com" target="_blank">跳转页面</a><br>
<a href="html2.html" target="_blank">内部页面</a><br>
<!-- 音频 -->
<audio src="./CMJ - 所念皆星河.mp3" controls>所念皆星河</audio><br>
<video src="./春夏.mp4" controls></video>
第二部分：
具体内容包括：
1.标签的基本分类：
双标签也称体标签，是指由开始和结束两个标签符组成的标签。
<标签名>内容</标签名>
单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。
< 标签名 />
2. HTML5文档头部相关标签
<title>标签用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标签之内。
<meta />标签用于定义页面的元信息，可重复出现在<head>头部标签中。
3.标题标记
HTML提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>标题的重要性依次递减。
4.段落标签
在网页中使用<p>标签来定义段落。<p>标签是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
<p align="对齐方式">段落文本</p>
5.水平线标签
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。水平线可以通过<hr />标签来定义。
6.换行标签
在word中，按【Enter】键可以将一段文字换行显示，但在网页中，如果想要将某段文本强制换行显示，就需要使用换行标签<br />。
7.文本样式标记
8.文本格式化标签
9.mark标签
mark标签的主要功能是在文本中高亮显示某些字符，该元素的用法与em标签和strong标签有相似之处，但是使用mark标签在突出显示样式时更随意灵活。
10.cite标签
cite标签可以创建一个引用，用于对文档引用参考文献的说明，一旦在文档中使用了该标签，被标注的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。
11.特殊字符标签
12.图像标签<img/>
<img src="图像URL" />
alt：图像的替换文本属性，在图像无法显示时告诉用户该图片的内容。
Width height:用来定义图片的宽度和高度，通常我们只设置其中的一个，另一个会按原图等比例显示。
Border:为图像添加边框、设置边框的宽度。但边框颜色的调整仅仅通过HTML属性是不能够实现的。
Vspace/hspace:HTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。
Align:图像的对齐属性align。用于调整图像的位置
13.相对路径和绝对路径
绝对路径：绝对路径一般是指带有盘符的路径，例如“D:\HTML+CSS网页制作\chapter02\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。
相对路径：相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。
第三章 初识css
一.css核心基础
1.Css样式规则
2.引入css样式表
（1）行内式：
也称内联样式，通过标签style属性设置元素样式。以下为基本语法：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
（2）内嵌式：
将css代码集中写在HTML文档的<head>头部标签中，并且用<style>标签定义，基本语法如下：
<head>
<style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
（3）链入式：
将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标签将外部样式表文件链接到HTML文档中，基本语法如下：
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>
3.Css基础选择器
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器，具体如下：
（1）标签选择器：
是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;
（2）类选择器：
使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
（3）Id选择器：使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
//标签选择器
div{
width:300px;
height:300px;
}
//类选择器
.p{
width:300px;
height:200px;
}
//id选择器
#p1{
width:200px;
height:200px;
}
二、文本控制标签
1、Css字体样式属性
（1）font-size设置字号
（2）font-family设置字体
（3）font-weight定义字体粗细
（4）font-style定义字体风格
（5）font综合属性用于综合设置字体样式
（6）@font-face用于定义服务器字体
（7）word-wrap用于实现长单词和url地址的自动换行
2、Css文本外观属性
（1）color
用于定义文本的颜色，其取值方式有如下3种：
预定义的颜色值，如red，green，blue等。
十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
div{
color:#0000ffff;
}（2）letter-spacing
用于定义字间距，所谓字间距就是字符与字符之间的空白. 其属性值可为不同单位的数值，允许使用负值，默认为normal。
div{
letter-spacing:300px;
}（3）word-spacing
用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。
div{
word-spacing:300px;
}
（4）line-height
用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。
div{
line-height:20px;
}（5）text-align
用于设置文本内容水平对齐，相当于html中的align对齐属性其.可用属性值如下：
left：左对齐（默认值）
right：右对齐。
center：居中对齐。
div{
text-align:center;
}（6）text-decoration
用于设置文本的下划线，上划线，删除线等装饰效果。其可用属性值如下：
none：没有装饰（正常文本默认值）。
underline：下划线。
overline：上划线。
line-through：删除线。
div{
text-decoration:none;
}（7）text-transform
用于控制英文字符的大小写。其可用属性值如下：
none：不转换（默认值）。
capitalize：首字母大写。
uppercase：全部字符转换为大写。
lowercase：全部字符转换为小写。
div{
text-transform:none;
}（8）text-indent
用于设置首行文本的缩进. 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
div{
text-indent:30px;
}（9）white-space
可设置空白符的处理方式。其属性值如下：
normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。
pre：预格式化，按文档的书写格式保留空格、空行原样显示。
nowrap：空格空行无效，强制文本不能换行，除非遇到换行标签<br />。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。
div{
white-space:normal;
}（10）text-shadow
可以为页面中的文本添加阴影效果。h-shadow用于设置水平阴影的距离，v-shadow用于设置垂直阴影的距离，blur用于设置模糊半径，color用于设置阴影颜色。 text-shadow: red 2px 5px 1px;
div{
text-shadow:none;
}（11）text-overflow
用于处理溢出的文本。
div{
text--overflow:clip;
}(12)word-wrap
用于实现长单词和URL地址的自动换行。属性如下：
normal：只在允许的断字点换行（浏览器保持默认处理）。
break-word：在长单词或 URL 地址内部进行换。
div{
word-wrap:normal;
}三、高级特性
1、Css复合选择器
（1）标签指定式选择器
又称交集选择器，由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3
//标签指定选择器
p.p1{
font-family:楷体;
}
p#zs{
color:#ffff0000;
}（2）后代选择器
选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
//后代选择器
body font{
font-famiily:楷体;
color:#ffff0000;
}（3）并集选择器
是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。
//并集选择器
.p1,.p2{
color:red;
}2、Css层叠性和继承性
（1）、层叠性：多种CSS样式的叠加。
（2）、继承性：书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。
3、Css优先级
Eg.
<p class="father" id="header" >
<strong class="blue">文本的颜色</strong>
</p>
对应权重值：
p strong{ color:black} /*权重为:1+1*/
strong.blue{ color:green;} /*权重为:1+10*/
.father strong{ color:yellow} /*权重为:10+1*/
p.father strong{ color:orange;} /*权重为:1+10+1*/
p.father .blue{ color:gold;} /*权重为:1+10+10*/
#header strong{ color:pink;} /*权重为:100+1*/
#header strong.blue{ color:red;} /*权重为:100+1+10*/
注：在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
（1）继承样式的权重为0。
（2）行内样式优先。
（3）权重相同时，CSS遵循就近原则。
（4）CSS定义了一个!important命令，该命令被赋予最大的优先级。
//优先级 id选择器权重最高，所以只显示red颜色
p{
color:blue;
}
.p1{
color:green;
}
#zs{
color:red;
}4、属性选择器·
（1）E[att^=value] 属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。^插入符
（2）E[att$=value] 属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。与E[att^=value]选择器一样，E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。
（3）E[att*=value]选择器用于选择名称为E的标记，且该标记定义了att属性，att属性值包含value子字符串。该选择器与前两个选择器一样，E元素也可以省略，如果省略则表示可以匹配满足条件的任意元素。
// 属性选择器 ^:开头含什么的修改
p[name^=w]{
color:red;
}
// $:结尾含什么的修改
p[name$=x]{
color:red;
}
// *:里面含什么的全部修改
p[id*=ax]{
color:red;
}5、关系选择器
关系选择器和前面讲的复合选择器类似，但关系选择器可以更精确的控制元素样式。CSS3中的关系选择器主要包括子元素选择器和相邻兄弟选择器，其中子元素择器由符号“>”连接，兄弟选择器由符号“+”和“~”连接
（1）子元素选择器：
主要用来选择某个元素的第一级子元素。
（2）相邻兄弟选择器
用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。
①邻近兄弟选择器：
该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。
②普通兄弟选择器：
使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。
// 父与子，只能拿到父元素下的第一个子元素
p>span{
font-family:楷体;
color:blue;
}
// 兄弟，只能拿第一个元素
p+h1{
font-family:楷体;
color:blue;
}
// 普通兄弟
p~span{
font-family:楷体;
color:blue;
}第四章 CSS4选择器
1.属性选择器
E[att^=value] 选择前面为att的标签的选择器
E[att$=value] 选择后面为att的标签的选择器
E[att*=value] 选择含有att的标签的选择器
2.关系选择器
子元素选择器：>
兄弟选择器：+
普通兄弟选择器：~
3.结构伪类化选择器
root选择器：对页面所以元素都生效
not选择器：排除某个元素下面的子元素结构
only-child选择器：选择某个父元素只有一个子元素的选择器
first-child选择器：选择父元素的第一个元素
last-child选择器：选择父元素的最后一个元素
not-child（n)选择器：选择某父元素下第几个子元素
not-child（n)选择器：选择某父元素下倒数第几个子元素
nth-of-type（n）选择器：选择父元素特定类型的第几个元素
nth-last-of-type（n）选择器：选择父元素特定类型的倒数第几个元素
：empty选择器：选择没有子元素或文本的元素
4.伪元素选择器
：bedore选择器：在被选元素前插入内容，必须配合content使用
：affte选择器：在被选元素后插入内容，必须配合content使用
第五章 盒子模型
1.边框
边框样式 border-style: none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
边框宽度 border-width:
边框颜色 border-color:
圆角边框 border-radius:
图片边框 border-images：
边框综合属性 border:宽度,样式,颜色;
2.内边距
内边距 padding 四边内边距 不允许使用负值
padding-top:上边距;
padding-right:右边距;
padding-bottom:下边距;
padding-left:左边距;
3.外边距
外边距 margin 四边外边距 允许使用负值
margin-top:上外边距;
margin-right:右外边距;
margin-bottom:下外边距;
margin-left:左外边距;
4.水平居中
margin:0 auto /* 利用margin实现块元素水平居中*/
margin:5px auto /* 利用margin实现块元素水平居中，并且上下拉开5像素边距*/
*{
margin:0; //清除页面内边距
padding:0; //清楚页面外边距
}5.背景
背景颜色属性 background-color:
背景图片属性 background-image :
6.平铺
图像平铺属性 background-repeat
repeat 沿水平和竖直方向平铺
no-repaet 不平铺
repeat-x 只沿水平方向平铺
repeat-y 只沿竖直方向平铺
7.图像属性
图像位置属性 background-position
图像固定属性 background-attachment
Srcoll 图像随页面元素一起滚动（默认值）
Fixed 图像固定在屏幕上，不随页面元素滚动。
对背景与图片设置不透明度 rgba(r,g,b,alpha);
opacity：opacityValue;
0 完全透明
0.5 半透明
1 完全不透明
8.阴影
添加阴影效果 box-shadow属性
线性渐变效果 “background-image:linear-gradient（参数值）;”
在CSS3中，通过“background-image:repeating-linear-gradient（参数值）;”样式可以实现重复线性渐变的效果。
在CSS3中，通过“background-image:repeating-radial-gradient（参数值）;”样式可以实现重复线性渐变的效果。
在CSS3中，通过background-image、background-repeat、background-position和background-size等属性提供多个属性值可以实现多重背景图像效果，各属性值之间用逗号隔开。
9.块元素和行内元素
块元素
- 在页面中以区域块的形式出现。
- 每个块元素通常都会独自占据一整行或多整行。
- 可以对其设置宽度、高度、对齐等属性。
行内元素
- 不占有独立的区域。
- 仅仅靠自身的字体大小和图像尺寸来支撑结构。
- 一般不可以设置宽度、高度、对齐等属性。
disply-inile 块元素转换为行内元素
disply-block 行内元素转换为块元素
第六章 列表与超链接
一．无序链表ui 2有序链表ol 3定义链表dl 4链表的嵌套应用
1.无序链表tybe属性值
disc（默认值）实心圆 circle 空心圆 square 实心方块
2.有序链表相关属性
属性type
属性值 1 （项目符号显示为123…） a或A （项目符号显示为英文字母a b c d…或A B C…
） i或I (项目符号显示为罗马数字i ii iii…或I II III…)
属性 start
属性值 数字 （规定项目符号的起始值）
属性value
属性值 数字 （规定项目符号的数字）
3.自定义列表的基本语法格式
<dl></dl>标签用于指定定义列表
<dt></dt>标签用于指定术语名词
<dd></dd>标签用于对名词进行解释和描述
4.列表嵌套示例
<ul>
// 子列表项中嵌套有序列表
<li>咖啡
<ol>
<li>拿铁咖啡</li>
<li>摩卡咖啡</li>
</ol>
</li>
// 子列表项中嵌套无序列表
<li>茶
<ul>
<li>龙井</li>
<li>铁观音</li>
</ul>
</li>
</ul>二．CSS控制列表样式
1.list-style-type属性
list-style-type属性用于控制无序和有序列表的项目符号。
2.list-style-image属性
list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观。 基本格式 ul{list-style-image:url(图片路径);}
3.list-style-position属性
list-style-position属性用于控制列表项目符号的位置。
三．超链接标签
1.超链接标签
在HTML中创建超链接非常简单，只需用<a></a>标签环绕需要被链接的对象即可。
2.标签实例
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
四．链接伪类控制超链接
| 超链接标签<a>的伪类 | 含义 |
| a:link{ CSS样式规则; } | 未访问时超链接的状态 |
| a:visited{ CSS样式规则; } | 访问后超链接的状态 |
| a:hover{ CSS样式规则; } | 鼠标经过、悬停时超链接的状态 |
| a:active{ CSS样式规则; } | 鼠标点击不动时超链接的状态 |
第七章 表格与表单
1.表格
<table> //定义表格
<tr> //定义行
<td></td> //定义单元格
</tr>
</table>2.表格table属性
| 属性 | 描述 | 常用属性值 | |
| border | 设置表格的边框（默认border="0"为无边框） | 像素值 | |
| cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值（默认为2像素） | |
| cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值（默认为1像素） | |
| width | 设置表格的宽度 | 像素值 | |
| height | 设置表格的高度 | 像素值 | |
| align | 设置表格在网页中的水平对齐方式 | left、center、right | |
| bgcolor | 设置表格的背景颜色 | 预定义的颜色值、十六进制#RGB、rgb(r,g,b) | |
| background | 设置表格的背景图像 | url地址 |
3.tr标签属性
PS:
1<tr>标签无宽度属性width，其宽度取决于表格标签<table>。
.2. 对<tr>标签应用valign属性，用于设置一行内容的垂直对齐方式。
3. 虽然可以对<tr>标签应用background属性，但是在<tr>标签中此属性兼容问题严重。
4.td标签属性
PS:
1. 在<td>标签的属性中，重点掌握colspan和rolspan，其他的属性了解即可，不建议使用，均可用CSS样式属性替代。
2. 当对某一个<td>标签应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。
3. 当对某一个<td>标签应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。
表格结构
5.CSS控制表格样式
（1）绘制表格边框
table{
width:280px;
height:280px;
border:1px solid #F00; //设置table的边框
}
td.th{
border:1px solid #F00; //为单元格单独设置边框
}PS：
1. border-collapse属性的属性值除了collapse（合并）之外，还可以为separate（分离），默认为separate。
2. 当表格的border-collapse属性设置为collapse时， HTML中设置的cellspacing属性值无效。
3. 行标签<tr>无border样式属性，本书不再做具体的演示，初学者可以自己测试加深理解。
（2）绘制单元格边框
PS:
1. 行标签<tr>无内边距属性padding和外边距属性margin。
2. 外边距属性margin对单元格无效，要想设置相邻单元格边框之间的距离，只能对<table>标签应用HTML标签属性cellspacing。
6.表单
表单控件
7.input控件
<form action="url地址" method="提交方式" name="表单名称">
<!-- autofocus获取焦点 -->
<input type="text">文本框
<input type="password">密码框
<input type="radio" name="sex">单选框
<input type="radio" name="sex">
<input type="checkbox">复选框
<input type="checkbox">
<input type="checkbox">
<input type="button" value="普通按钮">普通按钮
<input type="submit"><br>提交按钮
<input type="reset"><br>重置按钮
<input type="file"><br>选取文件
<input type="email">邮箱
<input type="url">网址
<!-- placeholder提示内容 -->
请输入电话：<input type="tel" name="telephone" placeholder="请输入11位数字">
请输入搜索：<input type="search">
请输入颜色：<input type="color">
请输入数值：<input type="number" name="number1" value="0" min="1" max="20" step="4">
请输入年份：<input type="date">
请输入一个浏览器：<input type="text" list="wangzhi">
<datalist id="wangzhi">
<option value="Chrome"></option>
<option value="Edge"></option>
<option value="Opera"></option>
</datalist>
<!-- required提示未输入 -->
姓名：<input type="text" required>
<input type="submit">
</form>8.textarea控件
<textarea name="" id="" cols="30" rows="10"></textarea>可以自行调整的框9.select控件
<form action="">
<select name="" id="">下拉菜单
<option value="">下拉1</option>
<option value="">下拉2</option>
<option value="">下拉3</option>
</select>
</form>第八章：浮动
1.什么是浮动：
浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。
浮动的基本语法格式是：选择器{float:属性值;}
属性有：left：元素向左浮动
Right：元素向右浮动
None：元素不浮动（默认值）
2.如何清除浮动：
基本语法格式是：选择器{clear:属性值;}
属性有：left：不允许左侧有浮动元素（清除左侧浮动的影响）
Right：不允许右侧有浮动元素（清除右侧浮动的影响）
Both：同时清除左右两侧浮动的影响
1373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
