HTML5+CSS3笔记

一个网页主要有3个部分组成，即结构、表现和行为，HTML负责结构，CSS负责表现，JAVAScript负责行为。

第一章：HTML5基础

一、HTML：超文本标记语言，由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页

二、W3C标准：为了确保多个浏览器都兼容，HTML内容结构都量语义化，W3C诞生了，用来制定和维护统一的国际化Web开发标准。。W3C标准是一系列的标准合集（HTML5,CSS3,JS）

三、网页编辑工具：记事本、Drwamweaver、HBuilder、Sublime、Webstorm（比较广泛）等。

四、HTML5的基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
	</body>
</html>

1、DOCTYPE声明：约束HTML文档结构，检验是否符合相关Web标准，同时告诉浏览器，使用哪种规范来解释这个文档中的代码。必须位于HTML文档的第一行。

2、title标签：描述网页的标题，将会在浏览器窗口的标题栏显示网页标题

3、meta标签：使用该标签描述网页的摘要信息，包括文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的详细描述等。内容并不在浏览器内容里显示，目的是方便浏览器解析或利于引擎搜索。它采用的是“名称/值”对的方式描述摘要信息

1
2
3

字符编码信息：<meta charset="utf-8" />
搜索关键字：<meta name="keywords" content="皓晨，IT培训"/>
内容描述信息：	<meta name="description" content="皓晨是优秀的培训机构" />

五、网页的基本标签

1、标题标签（h1~h6）：表示一段文字的标题或主题，并且支持多层次的内容结构。是成对出现的，字体会加粗，加黑,

字号最大，

最小。

2、段落标签（

）换行标签（<br /）：段落标签表示一段文字等内容，br表示强制换行显示。

3、水平线标签（

）：表示一条水平线

4、字体样式标签：让字体变粗，让字体倾斜

5、注释和特殊符号：为了方便代码阅读和调试，浏览器会字段忽略注释内容。

特殊符号以英文分号结束

特殊符号	字符实体
空格	&nbsp
大于号（>)	&gt
小于号（<)	&It
引号（””）	&quot要成对
版本符号（©）	&copy

6、图像标签：用图像标签可以让网页显示图片

常见的图像格式：JPG（有损压缩，会造成图片失真，但是体积小，比较清晰）、GIF（支持透明色和动画）、BMP（不支持文件压缩，也不支持Web页）、PNG（支持透明色，兼有JPG和GIF的优势）

语法：

1	<img src="图片地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />

在网站开发中，通常会把网站应用到的图片统一存放到image或images文件夹中，用HBuilder可以把图片放在对应项目img中

7、超链接标签：通过超链接可以查看各个页面或不同的网站，超链接默认有下划线

（1）语法：

1
2
3

<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
href：表示链接地址的路径。
target：指定链接在哪个窗口打开，常用的取值有_self（自身窗口）、_blank(新建窗口)

（2）超链接既可以是图片超链接也可以是图像超链接

图片超链接：
		<a href="01上机练习1.html"><img src="img/book.jpg"/></a>
文字超链接：
		<a href="http://www.baidu.com">百度一下，你就知道</a>

（3）网页中，单击某个链接，将指向万维网上的文档，万维网使用统一资源定位器（URL）的方式来链接地址。
链接地址分为绝对路径和相对路径
绝对路径：指向目标地址的完整描述，一般指向本站点外的文件。如上面的文字超链接。记住：输入网址时需要把http://协议写上，不然浏览器是无法识别的
相对路径：相当于当前页面的路径，一般指向本站点内的文件，一般不需要一个完整的URL地址的形式。常用到连个特殊符号“../”表示当前目录的上级目录，“../../”表示当前目录的上上级目录

（4）超链接的应用场合

1、页面间链接：A页到B页，最常用，用于网站导航

1 2	<a href="01上机练习1.html" target="_blank">清平乐</a> <a href="上机练习3.html" target="_blank">京东读书新闻资讯页面</a>

2、锚链接：A页甲位置到A页乙位置或A页甲位置到B页乙位置。

同页面锚链接

两个步骤：

1、在页面乙位置设置标记，语法：
<a id="marker">目标位置乙</a> /*也可以用name属性，但是id属性兼容性更好*/

2、设置甲位置链接路径href 属性为"#标记名"，语法：
<a href="#marker">目标位置甲</a>

不同页面锚链接，也是上面两个步骤，但是在第二个链接路径那里href=”demo.html#marker”，就是把另一个页面的html文件名写在里面后面用#跟着id名

3、功能性链接：在页面中调用其他程序功能，如电子邮件、QQ、MSN，用mailto

1 2	邮箱邮件链接：<a href="mailto:haochenWebmaster@haochen.cn">联系我们</a> QQ链接:<a href="tencent://message/?uin=542443854&Site=&Menu=yes">点我和好友聊天</a>

六、行内元素和块元素

块元素特性：无论内容多少，该元素独占一行，如：p、h1

行内元素特性：内容撑开宽度，左右都是行内元素的可以排在一行，如：strong、a

第二章列表、表格和媒体元素

一、列表

列表可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

1、无序列表

由

标签作为每个列表项的起始。

	<ul>
			<li>第1项</li>
			<li>第二项</li>
			<li>第三项</li>
	</ul>
遵循W3c原则，ul标签只能嵌套li标签，不能嵌套其他标签
li标签里面可以嵌套任意标签

特性：①没有顺序，每个

标签独占一行（块元素）

②默认

标签项前面有个实心小圆点

③一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等。

场合：无序列表中每项都是平级，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容。

2、有序列表

由

标签组成，由
1. 标签作为每个列表项的起始。

		<ol>
			<li></li>
			<li></li>
			<li></li>
		</ol>
遵循W3c原则，ul标签只能嵌套li标签，不能嵌套其他标签
li标签里面可以嵌套任意标签

特性：①有顺序，每个

标签独占一行（块元素）

②默认

标签项前面有顺序标记

③一般用于排序类型的列表，如试卷、问卷选项等

场合：和无序列表差不多，但是有序列表会依据列表的顺序显示

3、自定义列表

是标题和列表项的结合。使用dl作为列表的开始，dt作为每个列表的开始，每个列表项的定义则使用dd完成

<dl>
	<dt>标题</dt>
	<dd>第一项</dd>
	<dd>第二项</dd>
	<dt>标题二</dt>
	<dd>第一项</dd>
	<dd>第二项</dd>
</dl>

性格：①没有顺序，每个dt标签，dd标签独占一行（块元素）

②默认没有标记

③一般用于（一个标题下有一个或者多个列表项）*n的情况

场合：一般用于带有标题和标题解释性内容的场合。

二、表格

表格是块元素，发明该标签的初衷是用于显示表格数据，如：考试成绩单、选修课课表、工资账单。由行、列、单元格组成

语法：

<table border="1">
	<tr>
		<th colspan="所跨的列数">Header</th>
		<th>Header</th>
		<th>Header</th>
	</tr>
	<tr>
		<td rowspan="所跨的行数">Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
</table>

1、创建表格分为4步：①创建表格标签

②在表格标签里创建行标签

③在行标签里创建单元格标签，用于创建表格标题，字体会默认加粗

④在另一个行标签里创建单元格标签,可以有多个单元格，用于写表格内容

为了显示表格的边框，在table里用了border属性，但是HTML5的规范里已经不用了。后续可用CSS控制边框。

2、表格的跨列使用colspan，指单元格的横向合并；跨行使用rowspan，指单元格在垂直方向的合并

三、HTML5的媒体元素

1、视频元素（video），支持ogg、MPEG4、WebM等视频格式

语法：

<video controls width="视频的宽度" height="视频的高度">
	<source src="video.webm" type="video/webm"></source>
	<source src="video.mp4" type="video/mp4"></source>
	<source src="video.ogv" type="video/ogg"></source>
	当前浏览器不支持 video标签
</video>

①src属性用于指定要播放的视频文件的路径，controls属性用于提供播放、暂停和课体控件，没有这个属性就无法播放视频。width和height可以设置视频的宽度和高度，看你自己要不要设置

②由于不同的浏览器支持的视频格式不一样，所以使用source元素来链接到不同的视频文件，每个source元素对应一种格式的视频，浏览器会自动选择自己可以识别的一种格式播放。

③autoplay属性，写在video标签里，设置该属性后不需要与用户交互，就可以让视频文件加载完成后自动播放，用户很反感，慎用。

2、音频元素（audio),支持Ogg、MP3、WAV等音频格式

语法：

<audio controls>
	<source src="music/music.mp3"></source>
	<source src="music/music.ogg"></source>
当前页面不支持audio标签
</audio>

①src属性用于指定要播放的音频文件的路径，controls属性用于提供播放、暂停和课体控件，没有这个属性就无法播放视频。width和height可以设置视频的宽度和高度，看你自己要不要设置

3、通过source引入视频文件的格式至少包括WebM和MPEG4或Ogg和MPEG4。

通过source引入音频文件的格式至少QAV和MP3或Ogg和MP3

四、HTML5的结构元素

元素名	描述
header	标题头部区域的内容（用于页面的一块区域即body）
footer	标题脚步区域的内容（用于整个页面后页面的一块区域）
section	web页面的一块独立区域，相当于身体
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航栏辅助内容

五、iframe内联框架

主要作用是使页面中的部分内容用框架实现，一般用于在页面中引用站外内容。

1、iframe语法：

1	<iframe src="引用页面地址" name="框架表示名" width="" height=""></iframe>

2、iframe属性的使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h2>使用iframe嵌套网页</h2>
		<p>
			<a href="http://www.baidu.com" target="my">点击打开百度</a><br />
			<a href="http://www.haochenit.com" target="my">点击打开皓晨</a><br />
			<a href="index.html" target="my" >点击打开了一个HTML页面</a><br />
		</p>
		<iframe name="my"  width="500px" height="500px"></iframe>
	</body>
</html>

iframe内联框架的常用属性包括name、width、height。其中name属性可以和前面学过的锚链接结合实现页面间的相互跳转。步骤：

①在被打开的框架上加name属性

②在超链接上设置target目标窗口属性为希望显示的框架窗口名

第三章表单

表单是一个将用户信息组织起来的容器，将需要用户填写的内容放在表单容器中，当用户单击“提交”按钮的时候，表单会将数据统一发送给服务器。应用场景：登录、注册、网上订单、调查问卷、网上搜索

一、表单标签及表单属性

①使用form标签来实现表单区域的创建，属于容器标签，其他表单标签需要在它的范围内才有效，input就是其中一个，用于设定各种输入资料的方法。

②form有两个属性：action属性是服务器上处理表单输出的程序，由它指定哪个程序处理，如果action属性的值为空，则默认表单提交到本页。

method属性是告诉浏览器如何将数据发送给服务器，指向服务器发生数据的方法。目前值有post/get。

③语法及method的提交方法注意事项

		<form action="URL" method="post">
			
			<input type="submit" value="提交"/>
		</form>
method提交方法，有两种post和get，方法后面不写时，值默认get。
get提交时，URL的路径后会带上表单数据，直接显示出来
post提交时，提交的数据是隐藏的，安全性更高，建议使用post

二、表单元素及其格式

1、表单的input标签

①、属性：

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name	指定表单元素的名称
value	元素的初始值，type为radio时必须指定一个值
size	文本框的长度，type为text或password时，大小以字符为单位，对于其他类型，宽度以像素为单位
maxlength	文本框的数据长度，最大的字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

②、type属性

1、文本框(text)输入元素

<!--input标签，重要的是name元素，需要给你的input标签命名，因为你会有很多input标签，但是不同类型-->
<p>
	名字：<input name="name" type="text" size="30" maxlength="20"/>
</p>

2、密码框（password）输入元素，设置该属性后，密码框输入的字符全以黑色实心的圆点来显示。只是不让周围人看到输入的密码，为了数据安全，需要采用数据加密技术。

1	密码：<input name="pass" type="password" size="22" />

3、单选按钮（radio)控件，用于一组相互排斥的值，组中每个单选按钮控件应具有相同的名称，用户一次只能选中一个单选按钮。只有从组中选中的单选按钮才会提交的数据中提交对应的数值，所以在使用单选按钮时，需要一个显示的value属性。使用checked属性表示默认选项

			<p>
				性别：
				<input name="gen" type="radio" value="男"/>男
				<input name="gen" type="radio" value="女" checked/>女
			</p>
<!--对于固定值，可以使用单选框，type是radio，value值不会再前台显示，但是提交表单数据时会提交value，name属性相同时，单选框只能选择一个-->

4、复选框（checkbox）

			<p>
				<input type="checkbox" name="interest" value="sports" checked />运动
				<input type="checkbox" name="interest"value="talk"/>聊天
				<input type="checkbox" name="interest" value="play" />玩游戏
			</p>
<!--如果要选择多个选项，可以使用复选项checkbox,name建议一样，因为提交数据他会整理成数组,如果name不一样，会按照两个不一样的东西处理-->

5、按钮（submit、button、reset）

<p>
            <!--按钮，submit提交按钮，reset恢复到初始值，button只是按钮，作为一个点击事件用-->
	<input type="submit" name="Button" value="提交"/>
	<input type="reset" name="Reset" value="重填"/>
	<input type="button" name="Butbutton" value="只是按钮，不会提交" onclick="alert(this.value)" />
	<!--onlick就是个点击事件-->
</p>

6、文件域（file)

<!--文件域用于实现文件的选择，type为file,要求表单的提交方法必须为post，需要指定它的MIME类型。MIME是一种协议，作用是告诉处理者用什么方式去解析。multipart/form-data就是MIME的类型，就是告诉处理者，使用多组件表单数据的方式处理-->
		<form action="" method="post" enctype="multipart/form-data">
			<p>
				<input type="file"/><br />
				<input type="submit" name="upload" value="上传" />
			</p>
		</form>

7、邮箱（email）

<!--email类型专门用于输入email地址的文本框，会自动进行邮箱验证,验证email文本框的值，是否包含@，不包含无法提交表单-->				<p>
				邮箱：
				<input type="email" name="email" />
			</p>

8、网址（url），用于输入URL地址这类特殊文本的文本框，不是URL格式的文本将不允许提交表单

1
2
3

请输入你的网址：<!--网址url：统一资源定义符，会自动进行网址验证,http超文本传输协议-->
			<input type="url" name="userUrl" />
			<input type="submit" />

9、数字（number），用于输入数字的文本框。还可以对数字进行限制，用min,max,step,value。

1
2
3

请输入数字：<!--number为数字类型，会自动进行数字验证，不是数字无法输入，min为最小值，max是最大值
			step就是步长，默认是+——1，step为10时，100按上键是110，下是90-->
			<input type="number" name="num" min="0" max="100" step="10" />

10、滑块（range），用于输入包含一定范围内的数字值的文本框。和number表现类型一样，只是外观表现不同

1	<input type="range" name="num" min="0" max="100" step="2" />

11、搜索框（search），用于输入搜索关键词的文本框。

1 2	请输入搜索的关键词：<!--搜索框用search，可以有个叉在后面进行重置--> <input type="search" name="sousou" />

2、表单的其他属性

①列表框(select和option)，使用户快速、方便、正确的选择一些选项，并且节省页面空间,value记得写值，默认选中使用的是selected。

<select name="bmon"><!--声明下拉框-->
	<option value="">[选择月份]</option> <!--声明选项 -->
	<option value="1">一月</option>
	<option value="2">二月</option>
	<option value="3">三月</option>
	<option value="4">四月</option>
	<option value="5" selected>五月</option>
	<option value="6">六月</option>
	<option value="7">七月</option>
	<option value="8">八月</option>
	<option value="9">九月</option>
	<option value="10">十月</option>
	<option value="11" selected>十一月</option>
	<option value="12">十二月</option>
</select>月

②多行文本域（textuarea），当网页需要输入两行或两行以上的文本时使用。

<!--多行文本域，cols显示的列数，rows显示的行数-->
			<p>
				填写个人评价
				<textarea name="Textarea" cols="40" rows="6">自信、活泼、善于思考...</textarea>
			</p>

三、表单的高级应用

1、设置表单的隐藏域（hidden）：网站服务器端发送到客户端的信息，除了用户可以看到的页面内容外，还包含一些隐藏信息，如区别不同用户的id，这个对于网站服务器有用，一般隐藏起来。

<p>密码：<input name="pass" type="password"/></p>
<p><input type="submit" value="提交"/></p>

<p><input type="hidden" value="666" name="userid"</p>
<!--hidden，创建一个隐藏域，通常把不方便给用户看的信息隐藏起来，一般隐藏用户id-->

2、表单的只读（readonly）和禁用(disabled)

<form action="" method="get">
			<p>用户名：<input name="name" type="text" value="CIA" readonly/></p>
			<!--Readonly表单的只读设置，不希望用户修改的数据，比如你的银行卡号-->
			<p> <input type="submit" value="修改" disabled/></p>
			<!--disabled禁用设置，只能看不能改，会置灰，提交表单的时候，不会提交本input	
			一般配合其他控件使用，比方说不同意协议就无法注册，注册就是灰色的-->

3、表单元素的标注(label for)：为了增强鼠标的可用性

<label for="male">男</label>
<input type="radio" name="gender" id="male"/>
<label for="female">女</label>
<input type="radio" name="gender" id="female"/>
<!--<label for="表单元素的ID">标注的文本内容</label>是对表单元素进行标注的语法，使用for属性来指定当鼠标单击标注文本时，焦点对应的表单元素-->

四、表单的初级验证

在客户端就对表单进行验证可以减轻服务器的压力，还可以验证数据的可行性和安全性

1、初级验证的方法：

①placeholder，该属性用于为input类型的文本框提供一种提示，这种提示可以描述文本框期待用户输入何种内容，输入内容时，提示消失。适合text、search、url、email、password类型

1 2	请输入搜索的关键词： <input type="search" name="sousou" placeholder="请输入要搜索的关键字"/>

②required，用于规定文本框填写内容不能为空，否则不允许用户提交表单。适合类型：text/search/url/email/password/number/checkbox/radio/file

1 2	用户名： <input name="uname" type="text" required/>

③pattern，用于验证input类型文本框中用户输入的内容是否与定义的正则表达式相匹配。

1 2	电话号码<!--pattern 用于使用正则表达式验证--> <input type="number" name="tel" required pattern="^1[358]\d{9}" />*以13、15、18开头的11位数字

第四章初识CSS、

一、CSS概述

1、CSS全称是层叠样式表，又称为风格样式表，用来进行网页风格设计的。可以通过CSS统一控制HTML中各标签的属性，精确定位网页元素的位置，美化网页外观

2、CSS的优势：①内容与表现分离，便于后限CSS样式的维护

②表现的统一，容易修改

③丰富的样式，使页面布局更加灵活

④减少网页的代码量，提供网页的浏览速度，节省网络带宽

⑤运用独立于页面的CSS，有利于网页被搜索引擎收录等

二、CSS3的基本语法

CSS规则由两部分构成，即选择器和声明。

声明必须在大括号{}中，声明可以是1条或多条，声明由一个属性和值组成，属性和值用冒号分开，每条语句以英文分号结尾。

		h2{
			font-size: 20px;
			color: black;
		}	
/*h2就是选择器，font-size: 20px;color: black;就是声明，font-size、color是属性，20px和black是值*/

三、在HTML中引入CSS样式的方法

1、行内样式，就是在html标签中使用style属性设置CSS样式

<body>
	<h2 style="font-size: 20px; color: black;">望庐山瀑布</h2>
	<p style="font-size: 14px; color: green;">日照香炉生紫烟，</p>
</body>

2、内部样式，把css代码写在head的style标签中，与HTML位于同一个HTML文件中。

方便在页面中修改样式，但是不利于多页面共享复用代码

<head>
	<meta charset="UTF-8">
	<title>内部引入样式《望庐山瀑布》</title>
	<style>
	h2{
		font-size: 20px;
		color: black;
	}		
	p{
		font-size: 14px;
		color: green;
	}
	</style>
</head>

3、外部样式表，把CSS代码保存在一个文件扩展名为.css的单独样式表文件中，在html页面中直接引用外部样式表即可。实现了样式和结构的彻底分离，一个样式表可以应用于多个页面。

有两种方式，链接式和导入式，导入式是css2.1特有的，一般使用链接式，链接式会先将样式加载到网页中，再实时进行编译。

①链接式，使用xhml范畴的link标签链接外部样式表，需要把link标签放在head标签内。

	<head>
		<meta charset="UTF-8">
		<title>内部引入样式《望庐山瀑布》</title>
		<link rel="stylesheet" type="text/css" href="css/pubu.css"/>
	</head>
/*rel="stylesheet"是指在页面中使用这个外部样式表
  type="text/css"是指文件的类型是样式表文本
   href="css/pubu.css"是文件所在位置*/

②导入式：使用@import导入外部样式表，语句必须放在style标签中，style标签必须放在head标签中。url(“global.css”)表示样式表文件的位置

<head>
	<meta charset="UTF-8">
	<title>内部引入样式《望庐山瀑布》</title>
	<style>
		@import url("global.css");
	</style>
</head>

4、样式优先级

优先级遵循就近原则，行内样式>内部样式>外部样式。如果同一个选择器样式声明层叠，那么厚些的会覆盖先写的样式。

四、CSS3的选择器

1、CSS3基本选择器

1、标签选择器

一个页面有很多标签，如h2、p、a、img等，每种标签的名称可以作为相应的标签选择器的名称。如果相同的标签内容的样式一致，使用标签选择器很方便，语法：标签名{}

h2{
	font-size: 20px;
	color: black;
}		
p{
	font-size: 14px;
	color: green;
}

2、类选择器

有时候页面同一个标签会需要不同的样式，有的又需要一样的，这个时候就需要用标签的class属性。类选择器的名称可以自定义，必须符合CSS规范。语法：.类名称

	<body>
		<img src="img/1.jpg"/ class="one">
		<h2>主要演员</h2>
		<img src="img/2.jpg" class="two" />
		<img src="img/3.jpg" class="two"/>
	</body>
	
	以下是css样式：
.one{
	width: 100px;
	height: 160px;
}
.two{
	width: 200px;
	height: 130px;
}

3、ID选择器

与类选择器基本相同，但是ID是唯一的，在HTML中只使用一次，它的针对性强。语法：#ID名称{}

		<p id="first">北京欢迎你</p>
		<p id="second">为你开头辟地</p>
		以下是CSS样式
#first{font-size: 16px;}
#second{font-size: 12px;}

4、它们三个之间的优先级：ID选择器>class选择器>标签选择器，不遵循就近原则。

2、CSS的高级选择器

1、层次选择器（选择一个元素中包含的其他元素）

选择器	类型	功能描述
E F	后代选择器	要设置样式的F元素，F元素包含在E里面。使用空格隔开。选中所有后代，无论儿子还是孙子…
E>F	子选择器	要设置样式的F元素。使用>隔开。只选第一代，也就是F是E的儿子
E+F	相邻兄弟选择器	选择E元素之后的一个F兄弟，E和F是同级
E~F	通用兄弟	选择E元素之后的所有F元素，E和F是同级

2、结构伪类选择器

选择器	功能描述
E:first-child	针对E元素的父类，选择E父类的第一个孩子且第一个必须是E元素
E:last-child	选择属于其父元素最后一个子元素每个 E元素
E F:nth-child(n)	选择父元素EE的第n和子元素F，n可以是数字，even偶数、odd奇数，3n即3的倍数
E:first-of-type	针对E元素的父类，选择E父类的第一个类型为E的孩子
E:last-of-type	针对E元素的父类，选择E父类的最后一个类型为E的孩子
E F:nth-of-type（n）	选择父元素E内具有指定类型的第n个F元素

E F:nth-child(n)不按类型区分，直接从E父类的子元素开始数第n个的数F

E F:nth-of-type（n）先从E父类里选出F类型，然后再输第n个

3、属性选择器

HTML中，可以给元素设置各种各样的属性，如：id、class、title、href等。通过各种各样的属性可以选择到元素并为其设置样式

属性选择器	功能描述
div[class]	div里面有class属性的都被选中，可以设置多个属性，代表元素要同时定义了设置的多个属性，这样才能被选择
div[class=first_div]	div里面有class属性,且属性值为 first_div 的都被选中
div[class^=first]	div里面有class属性,且属性值为以first开头的都被选中
div[class$=div]	div里面有class属性,且属性值为以div结尾的都被选中
div[class*=st]	div里面有class属性,且属性值包含有st字母的都被选中
*	星号代表所有，所有选择器

第五章 CSS3美化网页元素

一、编辑网页文本

1、span标签：编辑文本的标签，当你在p标签内容中有需要突出的文字时，用标签

2、字体样式

注意：设置的父元素字体样式，其子元素直接继承其样式。

①设置字体类型（font-family ）

举例：font-family: “楷体”; 或 font-family: verdana,”宋体”;

注意：这里是一个文本里声明了两种字体，英文必须写在前面，中文写在后面，浏览器会优先用英文字体显示，如果英文字体里没有包含的字符，则从后面的中文字体里面找。前提是计算机中有这两种字体。

②设置字体大小(font-size )

举例 font-size: 16px;

注意：常用单位是px（像素）,css中设置大小还有其他单位：in/cm/mm/pt/pc/%（百分比），这些都不常用。

如果没有设置，网页默认字体大小是16px？

③ 设置字体风格( font-style )

举例 font-style: italic;

注意：有三个值：normal标准的字体样式（默认值）；italic斜体字体样式；oblique倾斜的字体样式，后两者显示效果相似

④字体的粗细（font-weight）

举例 font-weight: bold;

值	说明
normal	默认值，标准的字体
bold	粗体字体
bolder	更粗的字体
lighter	更细的字体
100,200,300,400,500,600,700,800,900	定义由细到粗的字体，400等同于normal,700等同bold

⑤字体属性（font）

同一部分字体设置多种属性，各属性用英文空格隔开。

注意：顺序由：字体风格( font-style ) – 字体的粗细（font-weight）— 字体大小(font-size )–字体类型（font-family ）

举例：font:oblique bold 12px “楷体”;

2、排版网页文本

(1)文本颜色(color)

三种写法：①英文字母表现的颜色：举例color:red

②红绿蓝RGB，三种颜色的不同比例，用16进制的方法表示：如：#FFFFFF代表白色，#000000白色，#000000表示黑色，当这6种颜色值相邻数字相同时，可两两缩写为一位，如#336699可写为 #369，举例 color:#369。可以下载一个颜色编辑器查看值

另一种写法是：color：rgb(r,g,b)，这三个参数正整数取值0~~255,百分比取值0%~~100%，不能取负数

③扩展：在rgb里增加了控制alpha透明度的参数，透明度的值为0（完全透明）~1（不透明）

举例： color:rgba(0,0,255,0.5)

(2)水平对齐方式（text-align）

值	说明
left	把文本排版到左边。默认值：由浏览器决定
right	把文本排版到右边
center	把文本排列到中间
justify	实现两端对齐文本效果

(3)首行缩进(text-indent)和行高(line-height)

①首行缩进(text-indet)：以em为单位，如text-indent:2em，首行缩进2个字符

px是绝对单位，屏幕中每个点代表一个像素，如30px

em是相对单位，相对于父元素的单位，如2em，就是2*父元素的像素，60px

rem是相对单位，相对于根元素，根元素是html的单位

②行高(line-height)：以px为单位，也可以用倍数表示行高是字体大小的倍数，如：line-height：1.8

(4)文本装饰(text-decoration)

如a标签自带的下划线给设置没有，a{text-decoration:none}

值	说明
underline	设置文本的下划线
none	默认值，定义的标准文本
overline	上划线
line-through	设置文本的删除线

(5)垂直对齐方式(vertical-align)

在目前的浏览器中只能对表格的单元格中的对象设置垂直对齐方式属性，所以一般只用于图片和文本的对齐方式，需要在选择选择器的时候，进行相对选择

常用值为middle，其他top(文本在图片上面)，bottom（文本在图片下面）不常用

如：image,span{vertical-align：middle}

(6)文本阴影(text-shadow)：可以产生阴影和模糊主体

语法：text-shadow:color x轴位移值 y轴位移值模糊半径

四个参数：①color：阴影颜色，可以是十六进制颜色，RGB颜色，RGBA透明色，如果不设置会使用文本颜色作为阴影色

②x-offset：值为正负值，正值阴影在对象的右边，负值阴影在对象的左边

③y-offset：值为正负值，正值阴影在对象的底部，负值阴影在对象的顶部

④blur-radius:值只能是正值，0不具有模糊效果，值越大，向外模糊范围越大，阴影边缘就越模糊

二、设置超链接和列表样式

1、超链接伪类

超链接的文本默认样式：出现下划线，单击前文本颜色为蓝色，单击后为紫色，正在单击为红色。如果要将其的样式改变则需要使用到超链接伪类

① a:link 指未单击访问时超链接样式，如：a:link{color:#9ef5f9;}

② a:visited 单击访问后超链接样式，如： a:visited{color:#333;}

③ a:hover 鼠标悬浮其上的超链接样式，如： a:hover{color:#ff7300;}

④ a:active 鼠标单击未释放的超链接样式，如： a:active{color:#999;}

注意：顺序必须为： a:link —a:visited —a:hover—a:active ，不然有的浏览器a:hover不起作用。实际开发中，仅设置两种超链接样式，一种是a标签选择器没有下划线，再设置鼠标悬浮其上的超链接样式

如：a{text-decoration: none;}

a:hover{
text-decoration: underline;
color: blueviolet;
}

2、列表样式

(1)列表项标记的类型（list-style-type）

值	说明
none	无标记符号
disc	实心圆，默认类型
circle	空心圆
square	实心正方形
decimal	数字，相当于有序列表

(2)使用图像来替代列表项的标记（list-style-image）

(3)设置在何处放置列表项标记（list-style-position），就是列表项符号的定位

(4)在一个声明中设置所有列表样式（list-style）

语法：li{list-style:list-style-type list-style-position list-style-image}，顺序不能改变。

三、背景样式

1、div标签

div标签可以把HTML文档分割成独立的不同部分，div标签独占一行，可以嵌套div，列表、段落。

可以控制网页元素宽、高两个属性

		<div id="header">
			
		</div>
以下为CSS样式	
		#header{
			width:200px;
			height:280px;
		}

2、背景属性

1、背景颜色（background-color）

设置字体、div、列表等网页元素的背景颜色，transparent透明，是它的默认值。颜色与color表示方法一样

2、背景图像(background-image)

使用图像作为某个元素的背景

①设置背景图像(background-image)

语法：background-imgage:url(图片路径)

②设施背景重复方式(background-repeat)

repeat：沿着水平和垂直两个方向平铺

no-repeat：不平铺，即背景图像只显示一次

repeat-x：只沿水平方向平铺

repeat-y：只沿垂直方向平铺

③背景定位(background-position)

如果不设置默认从被修饰的网页元素的左上角开始显示图像。如果要设置图像位置可以使用backgroud-size，值可以使用数值、百分比、关键词三种方式表示水平和垂直方向的偏移量

数值：Xpx Ypx 百分比：x% y% 关键词：水平：left/center/right 垂直：top/center/bottom

④背景(background)

语法：background：color url() 20px 10px no-repeat;

3、背景尺寸(background-size)

①auto，背景图片保持原样

②percentage，百分比（0%~100%），相对于元素的宽度计算。

③cover，整个背景图片放大填充整个div，图片容易失真，且并不是显示的正中间

④contain，保持图片本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

4、CSS3渐变(linear-gradient)

语法

1 2	background：linear-gradient(position,color1,color2...) position的值有：to top（颜色1从下往上变到颜色2...颜色n）;to bottom;to left; to right

第六章盒子模型

一、盒子模型

在CSS中，一个独立的盒子模型由：content（网页的主要显示内容）、border(边框)、padding(内边距)、magin（外边距）四部分组成。

1、边框(border)

位于内边距外面，如果没有内边距就是包着内容的外框，它一般具有一定的厚度。

有三个属性：

①边框颜色border-color：与文本颜色设置方法一样，十六进制、rgb()、rgba()

由于是盒子模型，分为上（top）、右（right）、下(bottom)、左(left)的顺序来设置四个边框的颜色

属性	示例
上边框颜色：border-top-color	border-topt-color：red;
右边框颜色：border-right-color
下边框颜色：border-bottom-color
左边框颜色：border-left-color
设置所有边框颜色：border-color	四个边框同一色：border-color:red;	上下边框#369；左右边框#000：border-color:#369 #000

注意：使用 border-color属性同时设置四条边框的颜色时,设置顺序按顺时针方向“上右、下、左”设置边框颜色,属性值之间,以空格隔开。没有设置属性值的找对边。

②边框粗细border-width：值有thiin、 medium、 thick和像素值。其属性和顺序和border-color一样，只是把color换成border-width。如上边框粗细：border-top-width：1px

③边框样式border-style：它的值有：none/hidden/dotted/dashed/solid/double/groove/ridget/outser等

常用的：none：无边框，dotted:点线边框；dashed:虚线边框；solid：实线边框

其属性和顺序和border-color一样，只是把color换成border-style

如设置下边框为实线：border-bottom-style:solid

④border的简写属性，没有顺序要求，通常是粗细、颜色和样式

如：border:1px red solid

2、外边距(margin)

位于盒子边框外，指与其他盒子之间的距离，也是指网页中元素与元素之间的距离，单位是px

1、外边距与边框一样，也按照“上右下左”，“没有找对边”这样的方式去设置对应的外边距

2、在实际应用中，很多标签都有默认的外边距，如：h1、p、ul、body、form

通常在CSS中通过并集选择器统一设置这些标签的外边距为0px。

*并集选择器：同时选中各个基本选择器所选择的范围，任何形式的选择器都可以作为其的一部分，多个选择器用逗号连接。如：body,h2{magin:0px}，意思是清除h2和body默认的外边距

3、特殊值：将页面内容水平居中(auto)显示

该元素必须是块元素并且要给这个元素设定固定宽度，然后设置magin: 0px auto

3、内边距（padding）

用于控制内容与边框之间的距离，以便精确控制内容在盒子中的位置。内边距与边框一样，也按照“上右下左”，“没有找对边”这样的方式去设置对应的外边距，单位是px

4、盒子模型的尺寸

在CSS中，wodth与height指的是内容区域的宽度和高度，增加了边框，内外边距虽然不会影响内容区域尺寸，但会增加盒子模型的总尺寸。开发者学会用谷歌浏览器的F12打开调试窗口，查看盒子模型。盒子的总宽度是在水平方向上，从左到右的把它加起来就是总宽度

内盒的总尺寸=border+padding+内容的宽/高

外盒的总尺寸=border+padding+margin+内容的宽/高

5、box-sizing为了能够事先定义盒子模型的尺寸的解析方式

box-sizing:centent-box/border-box/inherit（三个值）

centent-box：默认值，盒子的宽度或高低=border+padding+（margin）+内容的宽/高

border-box：盒子的宽度或高低=元素内容的宽度或高度

inheri：使元素继承父元素的盒子模型模式

二、圆角边框（border-radius）

1、语法

border-radius:左上右上右下左下角的圆角值，没有找对边

2、border-radius的使用

①圆形：元素的宽度和高度必须相同，圆角的半径为元素宽度的一半，

如：div{width:100px;height:100px;border-radius:50%(或者100px);}

②半圆形：

制作上下半圆时，元素的宽度是高度的2倍，圆角半径为元素的高度值

制作左右半圆时，元素的高度是宽度的2倍，圆角半径为元素的宽度值

.div2{
		margin: 50px;
		width: 100px;
		height: 50px;
		background-color: red;
		border-radius:50px 50px  0 0; 
	}/*上半圆*/
	
	.div3{
		margin: 50px;
		width: 100px;
		height: 50px;
		background-color: red;
		border-radius:0 0  50px 50px; 
	}/*下半圆*/
	
	.div4{
		margin: 50px;
		width: 50px;
		height: 100px;
		background-color: red;
		border-radius:0 50px  50px 0; 
	}/*右半圆*/
	
	.div5{
		margin: 50px;
		width: 50px;
		height: 100px;
		background-color: red;
		border-radius:50px 0 0 50px; 
	}/*左半圆*/

③扇形：三同：元素宽度、高度、圆角半径相同，一不同：圆角取值不同

三、圆角阴影

1、语法

box-shadow:inset x-offset f-offset blur-radius color;

inset:阴影类型，如果不设置，默认的投影方式是外阴影，如果设置inset表示内阴影

2、使用

box-shadow可以同时设置多层阴影，用逗号隔开

如：box-shadow:0px 0x 20px #06c,0px 0px 30px red;

第七章浮动

一、网页布局

常见的有上左右下布局，上左中右下布局，左边固定右边自适应布局。

1、标准文档流

指元素根据块元素或行内元素的特性从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。

二、display属性

值	说明
block	将行内元素变为块元素
inline	将块元素变为行内元素
inline-block	行内块元素，又可以设置宽和高，又会从左到右排列
none	设置元素不会被显示

三、浮动（float）

设置了浮动的元素，会脱离标准文档流，浮起来，元素会向其父元素的左侧或右侧浮动，同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容和宽度来确定。一般用于设置网页的导航栏。

特殊情况：没有设置浮动的文字会环绕在浮动元素周围显示

值	说明
left	元素向左浮动
right	元素向右浮动
both	默认值，元素不浮动，且显示在其文本中出现的位置
none	元素不会被显示

四、清除浮动

元素设置了浮动后，会影响其他元素的位置，如果子元素全部浮动了，父元素包不住子元素造成边框塌陷，为了消除对其后面标准文档流的元素不受其浮动影响，需要清除浮动

1、clear属性

值	说明
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	默认值，元素不浮动，且显示在其文本中出现的位置
none	默认值，允许浮动元素出现在两侧

父级边框塌陷解决法：

1、浮动元素后面加空div

2、设置父元素的高度

3、父级元素添加overflow属性，有下拉列表框的场景不可用

属性值	说明
visible	默认值，内容不会被修剪，会呈现在盒子之外
hidden	内容会被修剪，且其余内容不可见，没有滚动条，可以扩展盒子的高度
scroll	内容会被修剪，但是浏览器会显示滚动条以查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条以查看其余内容

4、父级添加伪类after,推荐使用

选择到class类的后面元素

p:after {
	/*:after用于追加内容；content就是内容*/
	content: "如果你的能看到这段文字，说明你的浏览器只支持E:after";
	display:block;
	clear:both;
}

五、inline-block和浮动的区别

inline-block优势：可以让元素排在一行，并且支持宽度和高度，元素在标准文档流中不需要清除浮动

inline-block缺点：位置方向不可控制，会解析空格

float优势：可以让元素排在在一行，并且支持宽度和高度，可以决定排列方向

float缺点：浮动会脱离标准文档流，会对周围元素产生影响，必须在它的父级添加清除浮动的样式

第八章定位网页元素

一、position属性

1、static

默认值，盒子保持在原本应该在的位置上，没有任何一点效果

2、relative

相对定位。使用相对定位的盒子位置以标准文档流排版方式为基础，然后使盒子相对于它自身原本的位置偏移指定的距离，对其它的盒子没有影响，且盒子元素的位置还会被保留下来。如果该元素被设置了浮动，就是以浮动后的位置作为原点开始进行位移

设置了position:relative后，还需要指定一定的偏移量，水平方向：left（从左到右）,right（从右到左）；垂直方向：top(从上到下)和bottom（从下到上），它们的值单位一般是px，可以是负数，也可以设置为百分数。

使用场景：很少单独使用，都是配合绝对定位使用，为绝对定位的父级设置定位，又不设置偏移量

3、absolute

绝对定位。它会脱离文档流，会对后面的元素位置影响，偏移量与相对定位设置方法一样

设置了绝对定位的元素，如果没有已经定位的祖先或父级元素（position为除了static的其他值），则会以浏览器窗口为基准进行定位，偏移量不会按随滚动条的移动而移动

如果它的祖先或父级元素设置了定位，则以离它最近的父级元素为原点进行偏移。

如果设置了绝对定位，而没有设置偏移量，那么它将保持在原来的设置，但是又脱离了标准文档流

使用场景：下拉菜单，焦点轮播图，弹出数字气泡，特别花边。

4、fixed

固定定位。以浏览器窗口为基准进行位移，偏移量与相对定位设置方法一样

使用场景:一般用在窗口左右两边的固定广告，返回顶部图标，吸顶导航栏

二、Z-index属性

由于有的元素位置会有重叠，或者需要重叠在一起，这个时候需要用z-index属性来设置哪个元素显示在最外层，改变层的上下层位置。

1、其值为整数，可以是正数也可以是负数，默认值为0，值大的位于值小的层上方。

2、设置层的透明度

属性	说明	举例
opacity:x	x值为0~1，值越小越透明	opacity:0.4
filter:alpha(opacity=x)	x值为0~100，值越小越透明	filter:alpha(opacity=40)

第九章利用CSS3制作网页动画

一、CSS3变形（transform）

CSS3变形是一些效果的集合，如平移、旋转、缩放、倾斜效果。

语法：transform:transform-function

案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>translate的使用</title>
    <style>
        li{
            list-style: none;/*去点*/
            float: left;/*浮动*/
            width: 80px;/*宽度*/
            line-height: 40px;/*行高*/
            background: rgba(242, 123, 5, 0.61);/*透明度*/
            border-radius: 6px;/*画角*/
            font-size: 16px;/*字体大小*/
            margin-left: 3px;/*左外边距*/
        }
        
        li a{
            text-decoration: none;/*去下划线*/
            color: #fff;/*颜色*/
            display: block;/*块元素*/
            text-align: center;/*文本居中*/
            height: 40px;/*高度*/
        }
        
        a:hover{
        /*	translate()：平移函数，基于X、Y坐标重新定位元素的位置
          	第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 
         	*/
       		/*transform:translate(20px,20px);*/
       		/*transform:translatex(20px);*/
       		/*transform:translatey(20px);*/
       		background-color: pink;
       		
		/*scale()：缩放函数，可以使任意元素对象尺寸发生变化
		 		大于1代表放大，小于1代表缩小，等于1则不变,负数可以颠倒；
		 		scale（2,4）转变宽度为原来的大小的2倍，和其原始大小4倍的高度。
		 		* */
			/*transform: scale(1.5);  */
			 
		/*rotate()：旋转函数，取值是一个度数值
		    		deg角度。默认是按顺时针旋转，负数代表逆时针旋转
		    		旋转不会改变元素原来的形状
		    * */
			/*transform: rotate(-50deg);  */
		
		/*skew()：倾斜函数，取值是一个度数值
		 		该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度
		 		倾斜会改变元素内容
		 * */
			/*transform: skew(30deg,20deg);*/

			transform:translate(20px,20px) scale(1.5) rotate(-50deg) skew(30deg,20deg);
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">服装城</a></li>
        <li><a href="#">美妆馆</a></li>
        <li><a href="#">超市</a></li>
        <li><a href="#">全球购</a></li>
        <li><a href="#">闪购</a></li>
        <li><a href="#">团购</a></li>
        <li><a href="#">拍卖</a></li>
        <li><a href="#">金融</a></li>
    </ul>
</body>
</html>

1、translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数

如：transform: translate(50px,100px); 指把元素从左侧移动 50 像素，从顶端移动 100 像素。

2、rotate() 方法

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

如：transform: rotate(30deg); 指把元素顺时针旋转 30 度。

3、scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

如：transform: scale(2,4); 指把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

4、skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

如：transform: skew(30deg,20deg);指围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

二、CSS3过渡(transition)

transition是一个复合属性，会体现出元素变化的过程，有四个属性，属性用空格隔开

1、语法：

transition:transition-property transition-duration transition-timing-function transition-delay

这四个属性值分别含义是

1、transition-property ：规定应用过渡的 CSS 属性的名称。

2、transition-duration：定义过渡效果花费的时间。

3、transition-timing-function ：规定过渡效果的时间曲线。

4、transition-delay：规定过渡效果何时开始。

2、过渡的触发机制

1、伪类触发: hover、active、ffocus、checked等

2、媒体查询：可以通过@media属性判断设备的尺寸、方向等

3、JavaScript触发：用JavaScript脚本触发

3、过渡动画的使用步骤

1、在默认样式中声明元素的初始状态样式

2、声明过渡元素最终状态样式，如悬浮样式

3、在默认样式中通过添加过渡函数，添加一些不同的样式

案例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>transition过渡</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: hotpink;
			}
			/**
				 * 过渡transition注重的是变换的过程
				 */
			
			div:hover {
				background-color: black;
				/*background-image: url(img/timg.jpg);*/
				/*transition过渡：
				 * 第一个参数代表需要过渡的属性，  也可以使用all
				 * 第二个参数代表过渡的时间
				 * 第三个参数代表过渡的动画类型  ease-in： 由慢到快  ease-out： 由快到慢。
				 * 第四个参数代表开始过渡的间隔时间。
				 * */
				transition: all 5s ease-in-out 3s;
			}
		</style>
	</head>

	<body>
		<div></div>
	</body>

</html>

三、CSS3动画(animation）