目录
一.无序链表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:同时清除左右两侧浮动的影响