HTMLCSS学习笔记整理

HTML5 是什么

HTML5 是HTML最新的修订版本，是下一代 HTML 标准，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5 的设计目的是为了在移动设备上支持多媒体，简单易学。

HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML / HTML5 、CSS / CSS3 学习网站：

https://www.w3school.com.cn/html5/index.asp

https://www.runoob.com/html/html5-intro.html

https://www.html5tricks.com/category/html5-tutorials

HTML 发展历史（wikipedia）

①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。

②HTML 2.0：1995年11月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。

③HTML 3.2：1997年1月14日，W3C推荐标准。

④HTML 4.0：1997年12月18日，W3C推荐标准。

⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。

⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。

HTML 发展历史
版本	日期
HTML	1991
HTML 1.0	1993.06
HTML 2.0	1995.11.24
HTML 3.2	1997.01.14
HTML 4.0	1997.12.18
HTML 4.01	1999.12.24
XHTML 1.0	2000.01.26
XHTML 1.1	2001.05.31
XHTML 2.0	2009
XHTML 5	2012
HTML 5 (candidate)	2012.07
HTML 5 (released)	2014.10.28
HTML 5.1	2016.11.01
HTML 5.2	2017.12.14

HTML4，HTML5，XHTML 区别

首先认识三个组织：

1）IETF (Internet Engineering Task Force) 互联网工程任务组

2）W3C (World Wide Web Consortium，万维网联盟） Web领域中，最具权威和影响力的国际中立性技术标准机构

3）WHATWG（Web Hypertet Application Technology Working Group）超文本应用技术工作组、由浏览器厂商组成的。

还有一个重要的人，即 Web之父：Tim Berners Lee

1991年Tim Berners Lee这个人编写了一个HTML的文档。

1995年11月IETF发表了HTML2.0.1994年，Tim Berners Lee成立了W3C组织，成文了web标准的制定者，随后相继发表了HTML3.2和HTML4.0，HTML4.01.

随后W3C在HTML中引入了XML，成为了XHTML。W3C闭门造车的作风引起了各大浏览器厂商的不满。于是各大浏览器厂商联合起来成立了WHATWG组织，在HTML的基础上进行拓展，致力于研发HTML5。W3C继续研发XHTML，但是走向了困境。于是Tim Berners Lee决定采用HTML5，同时继续研发XHTML，知道2009年，W3C宣布终止XHTML2.0的研发，开始一心一意的研究HTML5。HTML5是W3C和WHATWG博弈的结果。

知道这个故事的时候，觉得有点意思，正所谓独学而无友则孤陋寡闻，实在是对极了，引以为鉴吧（米扑博客的我创业更深有体会，哈哈）

HTML 各版本的通用声明

HTML5
<!DOCTYPE html>

HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

下面说一说HTML5和XHTML在语法上的区别吧。

1、XHTML 要求正确嵌套

2、XHTML 所有元素必须关闭

3、 XHTML 区分大小写

4、 XHTML 属性值要用双引号

5、XHTML 用 id 属性代替 name 属性

6、XHTML 特殊字符的处理

更多请见：

HTML4，HTML5，XHTML 之间有什么区别（CSDN）

HTML4，HTML5，XHTML 之间有什么区别（知乎）

HTML5 基础知识概览

HTML5 是 W3C 与 WHATWG 合作的结果，WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

HTML5 <!DOCTYPE>

<!doctype> 声明必须位于 HTML5 文档中的第一行，使用非常简单:

<!DOCTYPE html>

说明：

1. doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。

HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML（Standard Generalized Markup Language 标准通用标记语言）。

HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。

HTML5 不是基于 SGML，因此不要求引用 DTD。

2. 对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。

有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。

3. doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html> 
<!DOCTYPE HTML> 
<!doctype html> 
<!Doctype Html>

最小的HTML5文档

下面是一个简单的HTML5文档：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

HTML CSS 学习笔记整理

HTML head 元素

标签	描述
<head>
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

html 常用标签

<!-- This is a comment -->	注释 			//多行注释可以设置快捷键

<big>		定义大号字。
<small>		定义小号字。
<hr/> 		水平线标签	 
<em>		定义着重文字。emph
			// I是Italic(斜体)，而em是emphasize(强调)。
			// <em> 标签修饰的内容都是用斜体字来显示。
			
<i>			定义斜体字。italic
<b>			定义粗体文本。
<strong>		定义加重语气。
			//<b>标签是一个实体标签，它所包围的字符将被设为bold（粗体），
			//<strong>标签是一个逻辑标签，它的作用是加强字符的语气，一般来说，
			  加强字符的语气是通过将字符变为bold（粗体）来实现的。

<sub>		定义下标字。
<sup>		定义上标字。

<u>			定义插入字。	// 下划线
<ins>		定义插入字。	// 下划线
<del>		定义删除字。	// 删除线
<s>		        定义删除字。	// 删除线
<strike>		定义删除字。	// 删除线
<tt>			等宽字体。	

<q>			定义短的引用。浏览器通常会为 <q> 元素包围引号。
<blockquote> 定义被引用的节。浏览器通常会对 <blockquote> 元素进行缩进处理。

<dfn> 		定义项目或缩写的定义。ex:<dfn title="World Health Organization">WHO</dfn>

示例：

<del>del标签删除线</del><br/>
<strike>strike标签删除线</strike><br/>
<s>s标签删除线</s> <br/>
<u>u标签下划线</u><br/>
<p style="text-decoration: underline;">样式设置下行线</p></FONT><br/>
<b>加粗文字</b> <br/>
<i>斜文字</i> <br/><br/>
<tt>等宽字体</tt> <br/>
上标<sup>2</sup> <br/>
下标<sub>20</sub> <br/>

效果图：

块标签、行标签

块标签：块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <ol>, <dl>, <table>, <div>

行标签：内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>, <span>

块标签优先级和嵌套规则，详见米扑博客：HTML CSS 块级标签的用法总结

表格、框架、列表

/****** 表格的使用 ******/：
<table border="1">
	<tr>
		<th>Heading</th>
		<th>Another Heading</th>
	</tr>

	<tr>
		<td>row 1, cell 1</td>
		<td>row 1, cell 2</td>
	</tr>

	<tr>
		<td>row 2, cell 1</td>
		<td>row 2, cell 2</td>
	</tr>
</table>


/****** 框架的使用 ******/
<frameset cols="25%,75%">
	<frame src="frame_a.htm">
	<frame src="frame_b.htm">
</frameset>


/****** 列表的使用 ******/
/*  无序列表  */
<ul type="disc">	//circle、square
	 <li>苹果</li>
	 <li>香蕉</li>
	 <li>柠檬</li>
	 <li>桔子</li>
</ul>	

/*  有序列表  */
<ol start="1">
	 <li>咖啡</li>
	 <li>牛奶</li>
	 <li>茶</li>
</ol>	

/*  自定义列表  */
<dl>
	<dt>计算机</dt>
	<dd>用来计算的仪器 ... ...</dd>
	<dt>显示器</dt>
	<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

URL 语法规则

语法规则：scheme://host.domain:port/path/filename
解释：

scheme - 定义因特网服务的类型。最常见的类型是

1.http 超文本传输协议——以 http:// 开头的普通网页。不加密。
2.https安全超文本传输协议——安全网页。加密所有信息交换。
3.ftp 文件传输协议——用于将文件下载或上传至网站。
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 blog.mimvp.com
:port - 定义主机上的端口号（http 的默认端口号是 80，https 默认 443）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

示例说明，访问米扑博客：https://blog.mimvp.com/article/38176.html#respond

说明：

完整的 URL https://blog.mimvp.com/article/38176.html#respond 分为两段：

1）https://blog.mimvp.com/article/38176.html 对服务器起作用

2）#respond 对客户端浏览器起作用，对服务器不起作用，如上图，并没有发送给服务器端，原因如下：

# 只是用来指导客户端浏览器的本地行为，对服务器端完全不起作用的。

所以， HTTP请求中不包括#，一般是服务器端使用 # 方便客户通过浏览器准确、快速浏览

URL 中的锚点 # 更多作用，请见米扑博客：URL 地址栏锚点 window.location.hash 使用方法

表单 form 及其元素

<form> 元素（HTML 表单）——用于收集用户输入。

HTML 表单包含表单元素。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

表单元素：
1.<input> 元素
2.<select> 元素		下拉列表	//<select name="city">
									<option value="guangzhou">广州</option>
									<option value="shenzhen">深圳</option>
							</select>
3.<option> 元素		定义待选择的选项
4.<textarea> 元素 	定义多行输入字段（文本域）
5.<button> 元素		定义可点击的按钮	//<button type="button" "alert('Hello World!')">点击我！</button>

// HTML5 增加了如下表单元素：
	<datalist>	//<datalist> 元素为 <input> 元素规定预定义选项列表。
	<keygen>
	<output>
	
<input> 元素的输入类型：
1.<input type="text"> 定义供文本输入的单行输入字段
2.<input type="password"> 定义密码字段(password 字段中的字符会被做掩码处理（显示为星号或实心圆)
3.<input type="submit"> 定义提交表单数据至表单处理程序的按钮
4.<input type="radio"> 定义单选按钮
5.<input type="checkbox"> 定义复选框（复选框允许用户在有限数量的选项中选择零个或多个选项）
6.<input type="button> 定义按钮

//	HTML5 增加了多个新的输入类型：
	<input type="color"> 用于应该包含颜色的输入字段（根据浏览器支持，颜色选择器会出现输入字段中。）
	<input type="email"> 用于应该包含电子邮件地址的输入字段（根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。）
	<input type="range" min="0" max="10"> 用于应该包含一定范围内的值的输入字段（根据浏览器支持，输入字段能够显示为滑块控件。）
	<input type="tel"> 用于应该包含电话号码的输入字段。
	<input type="number"> 用于应该包含数字值的输入字段。
	<input type="url"> 用于应该包含 URL 地址的输入字段
	<input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）。
		以下均有时间选择器：
	<input type="time"> 允许用户选择时间（无时区） // 时分秒
	<input type="date"> 用于应该包含日期的输入字段 // 年月日
	<input type="datetime"> 允许用户选择日期和时间（有时区）
	<input type="datetime-local"> 允许用户选择日期和时间（无时区） // 年月日时分秒
	<input type="week"> 允许用户选择周和年
	<input type="month"> 允许用户选择月份和年份
	
<input> 元素的输入属性：
	value 属性规定输入字段的初始值
	readonly 属性规定输入字段为只读（不能修改）
	disabled 属性规定输入字段是禁用的，被禁用的元素是不可用和不可点击的，被禁用的元素不会被提交
	size 属性规定输入字段的尺寸（以字符计）
	autocomplete 属性规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。autocomplete="on/off"
	autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点。
	required 属性如果设置，则规定在提交表单之前必须填写输入字段。required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

视频、音频

最好的 HTML 解决方法
HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

video、audio 浏览器支持的版本

点击链接后退页面：

<a href="javascript:history.go(-1)">回到上一个网页</a>

修改placeholder提示的样式：

1. 除IE外通用写法

类名或标签名::placeholder {color: red;}

2. 加兼容前缀写法

css超出一行显示省略号：

给定宽度(width:100px)、

超出隐藏（overflow:hidden）、

强制在同一行显示（white-space: nowrap）、

省略号（text-overflow:ellipsis）

常见字体单位

1. em

相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：该div继承的父级字体大小*1.5。（根据他爸）

2. rem

r即root，始终相对于根节点html的font-size进行缩放。（根据祖先html）

3. vh

vh指当前屏幕可见高度的1%，即 height:100vh == height:100%;

区别：当元素没有内容时候，若设置height:100%该元素高度不会被撑开。但设置height:100vh，该元素会被撑开和屏幕高度一致。

4. vw

Viewport width 视窗宽度。1vw = 视窗宽度的1%，1vw就是当前屏幕宽度的1%，

对比：

width:100%; 设置元素宽度占父元素的宽度100%。

width:100vw; 相对于屏幕可见宽度来设置，所以会出现50vw 比50%大的情况。

HTML CSS 分类整理

1、HTML5 基础

5. 在网页中，HTML决定结构和内容（上下左右布局），CSS设定网页的表现样式（字体、颜色、缩进），JavaScript控制网页的行为（动画效果、数据加载）。

6. <!DOCTYPE html>必须位于HTML文档第一行。

7. <meta>标签：用于方便浏览器解析或搜索引擎搜索，一般放置于<head>中，用"名称/值"方式：

(1)表示文档内容类型、字符串编码信息如：<meta charset="UTF-8">

(2)为搜索引擎定义关键词:

(3)为网页定义描述内容:

(4)定义网页作者:

(5)每30秒中刷新当前页面:

8. 字体样式标签：<strong>字体变粗、<em>和<i>都有斜体的效果，区别<em>表示对内容的强调

9. 注释

10. 常用转义字符：

  //空格

> //大于号>

< //小于号<

" //双引号"

HTML 特殊转义字符列表

显示字符	说明	实体名称	实体编号
	半方大的空白	&ensp;
	全方大的空白	&emsp;
	不断行的空白格
<	小于	<	<
>	大于	>	>
&	&符号	&	&
"	双引号	"	"
©	版权	©	©
®	已注册商标	®	®
™	商标（美国）	™	™
×	乘号	×	×
÷	除号	÷	÷

更完整的转义符表

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
￡	镑	£	£
￥	日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

JavaScript 转义符

转义序列	字符含义
\b	退格
\f	走纸换页
\n	换行
\r	回车
\t	横向跳格 (Ctrl-I)
\'	单引号
\"	双引号
\\	反斜杠

11.常用图片格式：JPG、GIF、PNG、BMP、webp

webp是Google开发的一种有损、透明图片格式，相当于jpeg和png的合体，google声称其可以把图片大小减少40%。

12. 图片标签，必须要有src和alt属性：

13. 超链接标签(target指定在哪个窗口打开值有_self自身窗口、_blank新建窗口)

<a href="链接地址" target="目标打开窗口位置">附连接的文本或图像</a>

14. 链接地址

(1)绝对路径(指向目标地址的完整描述多指向本站点外的文件

如<a href="http://www.baidu.com/index.html">百度</a>)、

(2)相对路径(一般指向本站点内的文件,如<a href="login/login.html">登陆<a>)

(3)相对路径中"../"表示当前目录的上级目录，"../../"表示上上级目录

15. 超链接的应用场合：

(1)页面间链接：如<a href="login.html" target="_blank">为您跳转到登录页</a>

(2)锚链接：

先在目标位置B设置标记如：<a name="new">这里是目标位置</a>，

然后在A位置设置链接路径href属性值为"#标记名"如：<a href="#marker"当前位置A</a>

(3)功能性链接：单击时启动本机自带的应用程序如QQ、电子邮箱等

如电子邮件链接："mailto:电子邮件地址"

16.元素分类

(1)块元素：如<p><h1><div>无论内容有多少，该元素都独占一行(一块)。

块状元素特点：如果没有设置自身宽度，则显示为父容器的100%。

(2)行内元素：如<strong><a> 显示宽度由自己的内容决定，其他元素可以排在它后面。

元素类型转换：

(1)块状元素转为内联元素：display: inline;

(2)内联元素转为块状元素：display: block;

(3)把元素设为内联块状元素： display: inline-block;

(inline-block 同时具备内联元素、块状元素特点，如img、input)

更多详见米扑博客：HTML CSS 块级标签的用法总结

2、列表、表格、媒体元素

17.三种列表：

(1)有序列表<ol><li>，<li>显示数字 1. 2. 3. ....

(2)无序列表<ul><li>，<li>显示小圆点、小方块等样式， ul中只能嵌套li，而li可以嵌套任意标签。

(3)定义列表<dl><dt><dd> 是标题及列表项的结合，一般用于只做目录，替代 table 表格等。

18. 表格基本结构：单元格、行、列

(1) <table><tr><th><td>

(2) HTML5中已废除table的border属性，用css控制边框宽度。

(3)跨列(横跨)：<td colspan="所跨的列数">内容</td>

跨行(竖跨)：<td rowspan="所跨行数">内容</td>，两者都要删除被合并的其他单元格。

(4)表格特点：同行单元格高度一致且水平对齐，同列单元格宽度一致且垂直对齐。

19.视频元素：

(1) controls属性提供播放暂停和音量控件、autoplay属性自动播放、loop属性循环播放

<video src="视频路径" controls="controls">你的浏览器不支持video标签</video>

(2)source元素链接不同的视频文件，浏览器会自动选择第一个可识别的格式：

<source src="video/video.mp4" />你的浏览器不支持video标签

<video>

20. 音频元素：使用语法和视频元素一样，只要把video换成audio即可。

21. HTML5的结构元素(先划分结构再写内容)：

header(头部)、footer(脚部)、

section(独立区域)、article(独立文章内容)、

aside(相关内容或应用,常用于侧边栏)、nav(导航类辅助内容)

22.<iframe>框架: 方便在页面中引用站外的页面内容。

23.<iframe>和锚链接的结合：使锚链接的内容在iframe框架中打开

<a href="链接路径" target="mainFrame">点击在框架中打开</a>

3、表单

24.表单标签form：

表单内容

</form>

(1)action="url"属性意为把表单提交到某个页面,method=get|post意为向服务器发送数据的方式。

(2)提交方法：get提交,表单数据会在地址栏url中显示；而post提交不会显示，所以post提交更安全。

(3)enctype="text/plain"指enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。text/plain 空格转换为加号+，但不对特殊字符编码。

24.表单元素：

(1)表单元素<input>标签的属性：

type(默认text,其他password, email, checkbox, radio, button, submit, reset, file, image, url, hidden, number, range, search等)、name、value(可选,该元素的初始值)、size(该元素的初始宽度)、maxlength(可输入的最大字符数)、checked(按钮被选中)

(2)列表框<select><option>标签：

<select>中至少包含一个<option>。在<option>有多行选项需滚动查看时，size属性设置可提示看到的行数，selected属性默认选中该列表项。

(3)按钮：button普通(要和事件如onclick关联使用),submit(提交表单到action指定的url并传递表单数据), reset重置。

要求美观可使用图片按钮，如<input type="image" src="图片路径"/>

(4)多行文本域：不能用value属性赋初始值

自我评价

</textarea>

(5)数字number：限制输入的数据为数字，设定最大值最小值、合法的数据间隔step或默认值等

(6)滑块range：作用和数字number一样，只是外观显示为用滑动条选择数值

(7)search搜索框: 在任意页面中用于输入搜索关键词的文本框

(8)文件域：多用于文件上传

(9)当表单数据包含普通数据、文件数据等多部分内容时，要设置表单的enctype编码属性为 multipart/form-data,表示把表单数据分为多部分提交。

(10)表单隐藏域hidden：数据不会页面中显示，但会随表单一同提交。

(11)表单元素只读属性readonly、禁用disabled

(12)W3CHTML5标准中，规定对布尔类型的属性，属性值可以省略。

(13)表单元素的标注label：当点击标注的文本时，浏览器会自动对焦关联的表单元素，for属性规定label与哪个表单元素绑定。

name和id属性必需。

24. HTML5表单新标签

<form> 供用户输入的表单

<input> 输入域

<textarea> 文本域 (多行输入)

<label> 定义 <input> 元素的标签，一般为输入标题

<fieldset> 定义一组相关的表单元素，并使用外框包含起来

<legend> 定义 <fieldset> 元素的标题

<select> 下拉选项列表

<optgroup> 选项组

<option> 下拉列表中的选项

<button> 点击按钮

<datalist> 指定一个预先定义的输入控件选项列表

<keygen> 定义了表单的密钥对生成器字段

<output> 计算结果

25.表单验证

(1)好处：减轻服务器的压力；保证数据的可行性和安全性。

(2)placeholder:为文本框提示用户输入

(3) required：规定文本框不能为空

(4)pattern：输入的内容必须符合正则表达式自定义的规则

<input type="text" name="tel" required pattern="^1[35]\d{9}"/>规定以13、15开头的11位数字

4、CSS3基础

26.CSS：Cascading Style Sheet层叠样式表，又称风格样式表Style Sheet，用于设计网页风格，例如：字体大小、背景颜色、缩进、动画等。

27.CSS3的基本语法结构：

(1)CSS中注释为 /*内容*/

(2)CSS规则由选择器、声明组成。

(3)声明必须放在大括号{}中，声明可以是一或多条。

(4)每条声明由一个属性和值组成，属性和值用冒号:分开，每条语句以分号;结尾如

<style type="text/css">
    h1{
       font-size : 12px;
       color : red;        
    }
</style>

28.在HTML中引入CSS样式的方式：

(1)行内样式：直接在标签中用style属性设置CSS 如<p style="font-size:10px;">字体大小</p>

(2)内部样式表：把css写在head的<style>中，规范化应为 <style type="text/css">

(3)外部样式表：文件扩展名为.css，在外部样式表中不需要<style>标签。

a.链接式引用外部样式表：

b.导入式引用外部样式表：

    <style type="text/css">
      @import url("css/stype.css");
    </typle>

link引用和 import引用区别是：

link是html加载前就引用，而import是html加载后才引用。

举例：采用impor引用，会先显示无样式的页面，然后再把样式放进去。如果用JavaScript动态引用CSS，得使用link引用方式才可实现，必须先加载。

29.样式优先级："就近原则"，行内样式（行内） > 内部样式表（head头内） > 外部样式表（link 和 import）

当有很多样式时，用 !important 可以为某一个样式覆盖掉其他所有样式， !important 写在样式的最后，优先级高于内部和外部样式表（需浏览器支持）

例如 #textcolor{ color:pink !important; color: red;} // 表示 color 优先使用 xxx.css 外部样式，且就近、优先使用 color:pink，若不匹配不支持，再使用 color: red;

这里还是详细介绍一下：

!important 定义：Selector{sRule!important;}

!important 作用：提升指定样式规则的应用优先权。

IE6及以下浏览器有个比较显式的支持问题存在，!important并不覆盖掉在同一条样式的后面的规则。

请看下述代码：

div{color:#f00!important; color:#000;}

在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00 （就近、优先）

IE6及以下浏览器要使!important生效，可用以下代码：

div{color:#f00!important;}

div{color:#000;}

在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00;

30. CSS选择器命名规范：驼峰命名法，用语义化单词命名且不能和ID选择器同名，例如：txtUserPassword，TxtUserPassword

31.CSS3的基本选择器

(1)标签选择器：以标签名作选择器的名称如 h1{color:red;}

(2)类选择器：选择器名可自定义如 .red{color:red;}同时要设置<标签 class="red">内容</标签>

(3)ID选择器：选择器名可自定义如 #red{color:red;}同时要设置<标签 id="red">内容</标签>，但同一个id属性的选择器在页面中只能用一次。

32.基本选择器的优先级：ID选择器 > 类选择器 > 标签选择器

31.CSS3的高级选择器

1.层次选择器：

(1)后代选择器A B{ }：中间用空格隔开，只要是A的后代元素都会被选中。

(2)子选择器A>B{ }：只能选择A的子元素。

(3)相邻兄弟选择器A+B{ }：只用于A后面一个同级元素

(4)通用兄弟选择器A~B{ }：用于A后面所有的同级元素

2.结构伪类选择器：根据文档对象模型DOM的节点(元素级别)来操作。

(1)B:first-child 作为父元素的第一个子元素B，作用和(3)相似

(2)B:last-child 作为父元素的最后一个子元素B

(3)A B:nth-child(n) 在父级中查第n个子元素是不是B，不分类型

(4)B:first-of-type 选择父元素内B类型的第一个元素B

(5)B:last-of-type 选择父元素内B类型的最后一个元素B

(6)A B:nth-of-type(n) 在父级里先是不是B类型，再看位置n

3.属性选择器：

(1)A[arrt] 选择包含属性arrt的A标签(也可写多个属性，但要同时存在)

(2)A[arrt = val] 选择包含属性arrt,且属性值=val(区分大小写)的A标签

(3)A[arrt ^= val] 选择包含属性arrt,且属性值以val开头的任意字符串

(4)A[arrt $= val] 选择包含属性arrt,且属性值以val结尾的任意字符串

(5)A[arrt *= val] 选择包含属性arrt,且属性值包含val字符串的A标签

5、CSS3美化网页

32.CSS3设置文本样式：

(1)<span>标签：用来设置行内元素(或几个文字)的样式。

(2)字体样式：

font-size：常用单位px

font-family：若同时设中英文字体，英文字体要设置在中文字体前面

font-style：normal标准、italic斜体、oblique倾斜

font-variant：small-caps; 字体设置为新型的大写字母，所有小写字母都转换为大写。

font-weight：normal标准、bold粗、bolder更粗、lighter细、100-900数字越大越粗

font：一次设置字体所有属性，顺序为"字体风格-粗细-大小-类型"

如 font:italic bold 36px "宋体";

(3)用font简写方式至少要指定 font-size和 font-family 属性，其他的属性(如font-weight、font-style、font-variant、line-height)如未指定将使用默认值。缩写时 font-size 与 line-height中间要加"/"斜扛如 "12px/1.5em"

32.Text-transform：控制文本的大小写：

none 默认，定义既有小写字母也有大写字母的标准文本(原文)

capitalize 每个单词以大写字母开头

uppercase 全部为大写字母

lowercase 全部小写字母

inherit 从父元素继承text-transform属性的值。

32. direction属性：规定文本的方向/书写方向。

ltr 文本方向从左到右

rtl 方向从右到左

inherit 继承父元素direction属性的值。

32.文字排版

(1)适用大多数浏览器：

从左向右 writing-mode: vertical-lr;

从右向左 writing-mode: vertical-rl;

(2)只适用IE浏览器:

从左向右 writing-mode: tb-lr;

从右向左 writing-mode: tb-rl

33.排版网页文本

(1)color文本颜色:

RGB：如color:#FF0000; 另一种方法rgb(r,g,b)其中三个参数取整0~255

RGBA：在RGB基础上加控制alpha透明度的参数，取值0~1，0表示完全透明

(2)text-align水平对齐:

left左(默认)、center中间、right右、justify两端对齐

(3)text-indent首行缩进：2em或2px 缩进两个字符

(4)text-height文本行高: 单位px或按倍数(行高是字体大小的倍数)

(5)text-decoration文本装饰：

none默认无、underline下划线、overline上划线、line-through删除线

(2)vertical-align垂直对齐：只能作用于<table>表格单元格的对象:

top顶、middle居中、bottom底

(4)text-shadow文本阴影：

语法"text-shadow:阴影颜色 x轴位移(x-offset) y轴位移(y-offset) 模糊半径(blur-radius);"

如text-shadow: blue 10px 10ox 2px;

(5)查询浏览器是否支持HTML5及CSS3属性的网址： https://www.caniuse.com

33.CSS3设置超链接样式：

伪类:根据标签处于某种行为或状态来修饰超链接样式。其他标签如p可以使用hover

和active。

语法"标签名:伪类名{声明;}"

(1)a:link 未访问前的超链接

(2)a:visited 访问过后

(3)a:hover 鼠标移到链接上

(4)a:active 鼠标点击未释放

(5)设置伪类的顺序：a:link ， a:visited ， a:hover ， a:active

(6)虽有四种样式,但实际开发中只设置<a>标签选择器样式、鼠标悬浮链接样式

34.CSS3设置列表样式

(1)list-style-type：列表项标记类型

none无符号、decimal数字、disc实心圆(默认)、circle空心圆、square实心正方形

(2)list-style-image：用图像做列表项标记

(3)list-style-position：设置列表项标记的位置

(4)list-style：一次设置列表的所有属性 (属性值为none时说明列表无样式)

顺序为 list-style-type + list-style-position + list-style-image

35.<div>：可用于网页布局，把HTML文档分成独立不同的部分。

36.CSS3设置背景样式：

(1)background-color：背景色不能继承，其默认值是透明transparent

(2)background-image：url(图片路径)、none(不显示背景图像)

(3)background-repeat：背景图像重复平铺

repeat(沿水平和垂直方向)、no-repeat(不平铺,只显示一次)、

repeat-x(只沿水平方向)、repeat-y(只沿垂直方向)、

(4)background-position：背景图的位置(X水平Y垂直方向的偏移量，如果只有一个方向关键字，则默认另一个关键字为center)

1.Xpos Ypos:如 0px 0px：默认无偏移,从左上角出现

30px 40px：正向偏移,图像向右和向下出现

-50px -60px：反向偏移,图像向左和向上出现

2.X% Y%：如30% 50%(水平方向偏移30%，垂直方向居中)

3.X水平关键词(left,center,right)、Y垂直关键词(top,center,bottom)

(5)background：一次设置背景的所有属性

(6)background-size背景图片尺寸：

auto(保持图片原尺寸,不易失真)、cover(放大填满容器标签)、

百分比percentage、contain(按照图片本身的宽高比例适应定义背景的区域)

37. gradient线性渐变：颜色沿着一条直线方向过渡

(1)常规语法：" linear-gradient(position, color1, color2,...)"

(2)浏览器兼容语法：" -兼容前缀-linear-gradient(position,color1,color2,...)"

(3)渐变的直线方向：

to left 从右向左、to top left 向左上方、to bottom left 向左下方、

to right 从左向右、to top right向右上方、to bottomo right向右下方、

to bottom从上向下、to top 从下向上、

38.CSS3径向渐变radial-gradient：圆形渐变，颜色从一个起点朝所有方向混合，语法和线性渐变相似。

6、盒子模型

39.盒子模型的组成：

content网页内容、border边框、padding内边距、margin外边距

(1)边框border：

border-color 边框颜色：如border-color:#369 #000 #111 #F00;按“上右下左顺时针”设置

border-width 边框粗细：如细thin、中等medium、粗的thick

border-style 边框样式：常用none无边框、dotted点线边框、dashed虚线边框、solid实线边框

border 简写:如下边框border-bottom:9px red dashed;四条边框border:9px blue solid;

(2)margin外边距：盒子边框以外和其他盒子间的距离

margin-top:上外边距、margin-bottom：下外边距

margin-left：左外边距、margin-right：右外边距

margin：简写"上右下左"

auto：设置盒子在它的父容器里居中显示。如margin:0px auto;让整个盒子居中。

如果将元素的 margin设为负值，则元素会变大。

(块元素可以把左右页边距设置为"自动"中心对齐。margin:auto;但前提宽度不能是100%)

注意：很多标签都有自身默认的外边距，所以一般用并集选择器统一设置这些标签的外边距为0px,这样不会产生不必要的空隙。

如清除body和h2自带的外边距 body,h2{margin:0px;}

(3)padding内边距：

padding-left、padding-right、padding-top、padding-bottom、

padding"上右下左"

40.盒子模型的尺寸：

增加边框、内边距、外边距后不会影响内容区域的尺寸，但会增加盒子模型的总尺寸。

(1)内盒总尺寸 = border(上下/左右)+padding(上下/左右)+内容宽/高度

(2)整个盒子的宽度 = 内容宽度+左右padding+左右边框border+左右margin

41.box-sizing拯救布局

(语法)box-sizing:content-box、border-box、inherit

(1)content-box：盒子的宽度或高度=border+padding+(margin)+width/height

(2)border-box：盒子的宽或高度等于元素内容的宽或高度

(即该内容宽/高度=盒子宽/高度-border-padding )

(3)inherit：使元素继承父元素的盒子模型模式。

42.border-radius圆角边框：语法和边框相似，只是四个边框带圆角

(语法)border-radius:length{1~4个数字};

(1)用border-radius制作特殊图形

圆形：元素的宽度和高度必须相同。圆角半径为元素宽度的一半，或直接设圆角半径为50%

半圆形：元素的高度是宽度的2倍，且圆角半径为元素的宽度值。

扇形：即制作四分之一圆形。"三同"元素宽度、高度、圆角半径 "一不同"

43.盒子阴影：和文本阴影相似

(语法)box-shadow:inset x-offset y-offset blur-radius color;

inset：内部阴影，可选。

x-offset：X轴水平位移，正值在右，负值在左。

y-offset：Y轴垂直位移，正值在下，负值在上。

blur-radius：模糊半径可选，只能>=0 值越大阴影向外面积越大,边缘越模糊。

7、浮动

44.标准文档流：元素根据块元素或行内元素的特性从上到下，从左到右的方式自然排列。

45.display属性：用于指定标签的显示方式

block：块元素的默认值，该元素前后自带换行符

inline：行内元素的默认值，元素会显示为行内元素

inline-block：行内块元素，兼具行内元素和块元素的特性

none：元素不会显示

46.Float：指定网页元素向哪个方向浮动

left左、right右、none默认无(元素不浮动显示在其文本出现的位置)

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果是右浮动，后面的文本流将环绕在它左边

47.clear清除浮动：当子元素全部浮动了，父级将包不住子元素会造成边框塌陷，所以要清除浮动元素对其他元素的影响。

48.clear属性：规定元素的哪一侧不允许其他浮动元素。

left(左侧不允许浮动元素)、right(右侧不允许)、

both(左右都不允许，常用于文本在图片下方显示)、

none(允许浮动元素出现在两侧)

49.解决父级边框塌陷的方法：

(1)浮动元素后加空的div，该div设样式clear:both;margin:0px;padding:0px;

(2)设置父元素固定高度把边框撑开。

(3)父级添加overflow属性:设置外层盒子的overflow:hidden。但此方法不能用于有下拉列表框的场景。

(4)父级用伪类after设样式(推荐)

50.Overflow属性：溢出处理，也可用于扩展盒子高度。

1) visible 默认溢出内容可见，显示在盒子外面

2) hidden 多出来的内容被隐藏且没有滚动条

3) scroll 有垂直水平2条滚动条，可查看多余内容

4) auto 如果内容溢出，自动显示滚动条(只有垂直条)查看

5) inherit 继承父特性

8、定位网页元素

51.Position属性：指定盒子的位置，相对它父级的位置或它自身应该在的位置。

(1) static 默认无定位，元素按照标准文档布局。

(2) relative相对定位

a.特性:

1.以标准文档流排版为基础，相当于它在原来位置偏移指定的距离。

2.元素位置偏移后，仍会保留原位置。

3.层级提高，可以遮盖标准文档流元素和浮动元素。

b.使用场景：

相对定位可以不设偏移量，让后面的绝对定位以它为祖先元素作基准定位。

c.语法 position:relative,指定偏移量时：水平left(正值向右移)、right(正值向左),垂直top(正值向下)、bottom(正值向上)。如

div{

position: relative;

top:-20px;

left:20px;

}

(3) absolute绝对定位

a.特性：

1.以已定位的祖先元素作基准定位，如果没有定位的祖先元素，则以浏览器窗口为基准定位。

2.元素位置偏移后，不保留原位置(其他元素可以用它原来的空位)

3.层级提高，可以遮盖标准文档流元素和浮动元素。

4.设置绝对定位的元素脱离文档流，对其他盒子的定位无影响

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

(4) fixed 固定定位

a.特性：直接以浏览器窗口为基准定位，偏移位置不受窗口滚动条滚动的影响。

b.使用场景：窗口边缘的固定广告、返回顶部图标、边缘固定导航栏等。

52. z-index属性：设置定位元素的堆叠顺序。默认值0，值大的层位于值小层的上方。

网页中的元素都含有两个堆叠层级：

1）未设置绝对定位时所处的环境，此时z-index是0；

2）设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定。

53.设置元素透明度的方法(通常两种方法搜设置以适应所有浏览器兼容)

(1)opacity:x x值为0~1，值越小越透明

(2)filter:alpha(opacity=x) x值为0~100，值越小越透明

9、CSS3做网页动画

54.transform变形：指效果的集合，如平移、旋转、缩放、倾斜效果。

语法 transform:[transform-function]*;

其中transform-function是变形函数，如要设置多个，则中间以空格分开。在用2D变形时要加浏览器兼容性前缀。

常用2D变形函数如下：

(1)translate(tx,ty)：

平移函数，将元素从原位置(基于X,Y坐标)移动到指定位置上。

tx表示X轴(横坐标)上移动的向量长度，正值向右，负值向左。

ty表示Y轴(纵坐标)上移动的向量长度，正值向下，负值向上。

(2)scale(sx,sy)：

缩放函数，定义宽高度(元素尺寸)的缩放比例，默认值1。0~0.99缩小，大于1放大。

sx表示宽度即横坐标方向的缩放量。

sy表示高度即纵坐标方向的缩放量。

(3)rotate(a)；

旋转函数，只取一个值为度数值,单位deg表示角度°

正值顺时针转，负值逆时针转。

rotate函数只旋转，不改变元素形状。

(4)skew(ax,ay)：

倾斜函数，取值为度数值，单位deg

ax表示水平方向即X轴的倾斜角度。

ay表示垂直方向即Y轴的倾斜角度。

55.3D变形函数：translate3d()平移函数、scale3d()缩放函数、rotate3d()旋转函数

56.transition过渡：

指动画转换的过程，如渐现、渐弱、动画快慢等。

通过指定属性的初始状态、结束状态，在两个状态间通过平滑过渡的方式实现动画。

语法:[transition-property transition-duration

transition-timing-function transition-delay]*

(速记法)transition: 过渡属性过渡用时过渡的动画函数过渡的延迟时间

主要包括四个属性值：

(1)transition-property：

过渡属性，设置过渡或动态模拟的CSS属性

(2)transition-duration：

过渡用时，从旧属性到新属性的用时，单位为s

(3)transition-timing-function：

指定过渡函数、过渡速度,有以下方式：

ease 速度由快到慢，逐渐变慢(默认)

liner 匀速

ease-in 越来越快(渐显)

ease-out 越来越慢(渐隐)

ease-in-out 先加速再减速(渐显渐隐)

(4)transition-delay：设置过渡是否延迟时间执行。

注意：transition-duration指完成过渡需要的时间；transition-delay指过渡在什么时间之后触发。

57.总结如何用transition实现过渡动画：

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

(2)声明过渡元素之中状态样式，如悬浮状态

(3)在默认样式中通过添加过渡函数，添加不同的样式。

58.过渡的触发机制：

(1)伪类触发: :hover、 :active、 :focus、 :checked等

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

(3)JavaScript触发：用JavaScript脚本触发。

59. animation 动画

animation制作动画的步骤:

(1)通过类似Flash动画的关键帧(@keyframes)声明一个动画；

其中@keyframes称为关键帧，可以设置多段属性。语法

@keyframes 动画名称{

from{ //css样式代码 }

百分比1{ //css样式 }

百分比2{ //css样式 }

100%{ //css样式 }

}

(2)找到要设置动画的元素，调用关键帧已声明的动画。

如 animation: spread(动画名) 2s linear(匀速);

60.animation动画的语法和属性：

" animation: 动画名称播放时间播放方式开始播放的时间播放次数播放方向播放状态动画时间之外的状态 "

其中属性分别为：

animation-name 动画名称、

animation-duration 播放时间、

animation-timing-function 播放方式、

animation-delay 开始播放的时间、

animation-iteration-count 播放次数(无限次用infinite)、

animation-diriection 播放方向、

animation-play-state 播放状态、

animation-fill-mode 动画时间之外的状态、

其他HTML部分

utf-8 和 utf8 的使用

只有MySQL可以用"utf8"，但其他地方一律使用大写"UTF-8"（注：总结非常到位，我曾总结也是这个，记住了，编程终身受益）

网页推荐使用长后缀名 .html，静态网址（即使看起来是 xxx.html）更容易被搜索引擎检索、收录。

Nginx rewrite 可以把 .php 重定向成 .html，例如：米扑博客本文：https://blog.mimvp.com/article/38176.html 其实本身都是动态的 php 网页

有的浏览器中直接输出中文会出现中文乱码，可加声明 <meta charset="UTF-8">

超链接

<a href="链接网址" target="目标">页面间链接</a>

<a href="mailto:bdqnWebmaster@bdqn.cn" target="_blank">功能性链接</a>

<a>标签链接Email地址，使用mailto能发送电子邮件。

如果mailto后面同时有多个参数，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

超链接伪类：

a:link 访问前

a:visited 访问后

a:hover 鼠标悬停

a:active 鼠标选中未释放

创建表格：

1、<table>：整个表格以<table>标记开始、</table>标记结束，table在加css样式前不会显示表格线。

2、<tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不用等整个表格加载完后显示。）

3、<tr>：表格的一行，所以有几对tr 表格就有几行。

4、<th>：表格的头部的一个单元格，表格表头，文本默认粗体且居中显示。

5、<td>：表格的一个单元格，一行中包含几对<td>这行中就有几个单元格。

6、表格中列的个数，取决于一行中数据单元格的个数。

7.设置样式 border-collapse:collapse; 可以把双线边框线合并为一条线边框。

<table border="边距宽度">
 <tr>
  <td rowspan="跨行数量" colspan="跨列数量" align="文本状态"></td>
 </tr>
</table>

表格可以添加标题和摘要标签进行优化。

(1)摘要：<table summary="表格简介文本">

摘要的内容不会在浏览器中显示。作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

(2)标题：<caption>

描述表格内容，标题的显示位置：表格上方。

语法：

<table summary="表格简介">
    <caption>标题</caption>
    <tr><td></td></tr>
</table>

内联框架iframe

相关属性 src="引用页面地址" name="框架标识名" frameborder="边框"

scrolling="是否出现滚动条" noresize="noresize"更改页面大小

用<a targer="">配合<iframe name="">可实现窗口间的关联

表单

<form method="提交方式" action="提交地址"> 
如果是文件域要在表单中加 enctype="multipart/form=data" 属性
隐藏域：type="hidden"
只读：readonly="readonly"
禁用：disabled="disabled"

普通输入框
<input type="text" name="名称" size="长度" maxlength="最大长度"/>

radio单选按钮
<input type="radio" name="sex" value="男" id="nan"/>
<label for="nan">男</label>
<input type="radio" name="sex" value="女" id="nv"/>
<label for="nv">女</label>

checkbox多选按钮
<input type="checkbox" name="" value="1"/>

下拉列表
<select name="名称">
  <optoin value="值">1</option>
</select>

文本域textarea
<textarea  rows="行数" cols="列数">文本</textarea>

透明度

opacity:(范围0~1)

filter:aplha(opcitive=透明度<(100)>);

Location 对象的方法：

.assign() //加载新文档

.reload() //刷新当前文档

.replace() //用新文档替换当前文档

在网页中显示代码，当代码为一行时可用<code>包裹，多行代码用<pre>。

<pre>：预格式化，它包围的文本会保留空格和换行符

下拉列表进行多选操作：在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。

通用选择器匹配所有标签 *{ }

浏览器根据选择器权值来使用权值最高的css样式

规则：

标签的权值为1，类选择器的权值为10，ID选择器的权值为100。

!important 有最高权值

!important要写在分号的前面，但注意当网页制作者不设置css样式时，浏览器会按照自己的样式来显示网页。

并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。

这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但 !important优先级例外，权值高于用户自设置的样式。

什么是“置换元素”？

置换元素会根据标签属性来显示的元素。反之就是非置换元素了。

如img根据src属性来显示，input根据value属性显示，因此可知img和input是置换元素，同理textarea、 select也是置换元素。

段落排版：

(1)letter-spacing：单个汉字间隔或单个字母间隔。

(2)word-spacing：按单词来设置间隔。

1、border-style 边框样式：

dashed（虚线）| dotted（点线）| solid（实线）

2、border-color 边框颜色

3、border-width 边框宽度：

thin | medium | thick。常用像素(px)。

4、当margin(或padding或border)的left和right的值相同，如：

margin:10px 20px 30px 20px;

缩写：

margin:10px 20px 30px;

布局模型与盒模型都是 CSS概念。布局模型建立在盒模型基础上。

在网页中，元素有三种布局模型：

1、流动模型（Flow）

流动（Flow）是默认的网页布局模式。特征：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

流动模型下，内联元素会在所处的包含元素内从左到右水平分布显示。

2、浮动模型 (Float)

任何元素默认是不能浮动的，可用CSS定义为浮动。

3、层模型（Layer）

让html元素在网页中精确定位，就像PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：

(1)绝对定位(position: absolute)

将元素从文档流中拖出来，然后用left、right、top、bottom属性相对最靠近它的一个带有定位属性的父包含块进行绝对定位。如果不存在这样的父包含块，则相对于body元素即相对于浏览器窗口。

(2)相对定位(position: relative)

元素在正常文档流中的偏移位置。首先按static(float)方式生成一个元素(元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留。

(3)固定定位(position: fixed)

始终位于浏览器窗口内视图的设置位置，不受文档流动影响，

另外，属性background-attachment:fixed;的作用也是设置背景图片固定。

relative与absolute组合：

1、参照定位的元素必须是相对定位元素的前辈元素。

2、参照定位的元素必须加入position:relative。

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

设置颜色的方法：

1、单词：p{color:red}

2、RGB

由 R(red)、G(green)、B(blue)三种颜色比例来配色。

p{color:rgb(133,45,200)}

每一项的值可以是 0~255 的整数，也可以是0%~100% 的百分数。如：

p{color:rgb(20%,33%,25%)}

3、十六进制颜色

其原理也是 RGB 设置，每一项的值由 0-255 变成了十六进制 00-ff。p{color:#00ffff;}

相对单位长度值：

1、px像素

像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器和使用显示器的实际像素值有关。

2、em

(1)元素给定字体的 font-size 值，如果元素的 font-size 为 14px，那么 1em = 14px；如果font-size 为18px，那么 1em = 18px。

如 p{font-size:12px; text-indent:2em;}意思首行缩进 24px(即两个字体大小的距离)

(2)当 font-size 设置为 em时，计算标准以它父元素的 font-size 为基础。

如：<p>以这个<span>例子</span>为例</p>

p{font-size:14px} span{font-size:0.8em;}

这里 span 字体大小就为11.2px(14 * 0.8 = 11.2px)

3、%百分比

p{font-size:12px; line-height:130%}

设置行高(行间距)为字体的130%（12 * 1.3 = 15.6px）

块状元素没有设置宽度时怎么居中?

1.加入 table 标签

2.设置 display: inline方法：显示类型设为行内元素，进行不定宽元素的属性设置

3.设置 position: relative 和 left:50%。利用相对定位，将元素从左偏移50%实现居中。

隐性改变display类型：

1. position : absolute;

2. float:left 或 float:right;

不论什么元素(display:none除外)，设置以上属性之一，该元素的display显示类型就会自动变为以display:inline-block(行内块状元素)方式显示，此时可设置元素的 width 和 height，且默认宽度不占满父元素。

(如 a是行内元素，直接设置它的 width 无效，但设置 position:absolute 绝对定位后就可以设置宽度)

文本格式化标签：

<b> 文本加粗

<strong>文本加粗(加重语气)

<i> 斜体字

<em> 斜体(强调文字)

<big> 字体放大

<small> 字体缩小

<sub> 定义下标字

<sup> 定义上标字

<ins> 插入字(字体下划线)

<del> 字体删除线

"计算机输出" 标签：

<code> 定义计算机代码

<kbd> 键盘输入

<samp> 定义计算机代码样本

<var> 定义变量

<pre> 预格式化文本(会保留文本的多个空格)

引文、引用、及标签定义：

<abbr> 缩写

<address> 地址联系信息

<bdo> 文字方向(设置dir="rtl"为从右到左显示)

<blockquote> 长文本引用(不会自带双引号，但会两边自动缩进)

<q> 短句引用语(自带双引号)

<cite> 定义引用、引证

<dfn> 定义一个定义项目。

title=""属性规定关于元素的额外信息。标签中加上title属性可实现鼠标移过时出现提示文字，如<p title="提示">

<base>元素:

描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>

</head>

提示：在HTML中，<base>标签没有结束标签。

HTML 颜色值RGB

由红(R)、绿(G)、蓝(B)组成。

每个颜色的最低值为0(十六进制为00)，最高值为255(十六进制为FF)。

十六进制值写法：#号后加3个或6个十六进制字符。

三位数表示法为：#RGB，转换为六位数表示为：#RRGGBB

常见的 URL Schemes

http 超文本传输协议以http开头的普通网页不加密

https 安全超文本传输协议 https 加密所有信息交换

ftp 文件传输协议把文件上传或下载到网站

file 本地计算机上的文件。

HTML5 多媒体标签

<param> 定义对象的参数

<audio> 定义声音内容

<video> 定义视频或者影片

<source>定义media元素的多媒体资源(<video>、<audio>)

<track> 规定media元素的字幕文件或其他包含文本的文件 (<video>、<audio>)

audio 音频设置

1.解决方法：

下例使用两个不同的音频格式。

HTML5 <audio> 元素会尝试以 mp3 或 ogg来播放音频。

如果失败，代码将回退尝试 <embed> 元素。

<audio controls height="100" width="100">
   <source src="horse.mp3" type="audio/mpeg">
   <source src="horse.ogg" type="audio/ogg">
   <embed height="50" width="100" src="horse.mp3">
</audio>

2.雅虎播放器使用免费，提供一个小型的播放按钮。

（1）如果使用它，要把这段JS插入网页底部：

（2）然后把MP3文件链接到页面中，JS会自动为每首歌创建播放按钮如：

3.用超链接

以下代码指向 mp3 文件链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：

video 视频播放设置

1.最好的解决方法

下例中使用了4种不同的视频格式。HTML 5 <video> 元素会尝试以 mp4、ogg、webm其中一种格式来播放视频。如果都失败，则回退到 <embed> 元素。

HTML5的 source + object + embed

<video width="320" height="240" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   <source src="movie.webm" type="video/webm">   
   <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
   </object> 
</video>

2.优酷解决方案

如果要在网页中播放视频，可把视频上传到优酷等视频网站，然后在你的网页中插入 HTML代码即可播放视频：

width="480" height="400"

type="application/x-shockwave-flash">

</embed>

3.使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。

以下代码指向 AVI文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"如 Windows Media Player 来播放该 AVI 文件：

<a href="https://www.xxx.com/html/intro.swf">播放该视频</a>

HTML中如何键入空格

1.用空格占位符  

但&nbsp有不间断的特性。即连续的&nbsp会在同一行内显示。即使有多个&nbsp，浏览器也不会把它们回车拆行。

2.段落间距<p>、换行<br/>

3.用JS动态给HTML添加空格：

例为照顾CSS样式或照顾特殊效果的实现。如果你不单单想让div之间是null，而是想动态添加空格的话，这样(jquery):

$("#id").innerHTML += " ";

display: none; 元素不显示也不会占位

visibility: hidden; 元素只是隐藏但仍然占位置

visibility: collapse; 隐藏但不占空间，类似display:none;

clip 剪辑一个绝对定位的元素。

clip : rect(top, right, bottom, left);

CSS 伪类

1.Anchor伪类 (伪类如:link冒号和伪类名之间不能有空格)

在支持 CSS 的浏览器中，链接的不同状态可用不同的方式显示：

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} /* 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */

2.CSS类和伪类配合使用：

p : first-child{ } 匹配父级中第一个<p>子元素

p > i:first-child{ } 匹配所有<p>元素的第一个 <i> 子元素

p:first-child i{ } 匹配第一个<p>元素中的所有 <i> 元素

White-space属性：设置如何处理元素内的空白。

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 <pre>标签。

nowrap 文本不会换行，文本在同一行上继续，直到遇到<br/>为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

inherit 从父元素继承 white-space 属性的值。

viewport 是用户网页的可视区域。

浏览器兼容前缀：

-moz- 火狐等使用 Mozilla内核的浏览器

-webkit- 谷歌、Safari等使用 Webkit内核的浏览器

-o- Opera浏览器，使用Blink内核

-ms- IE，使用 Trident内核

本文转自：HTML CSS整理笔记（CSDN）

参考推荐：

URL 地址栏锚点 window.location.hash 使用方法

HTML CSS 字体大小 pt、px、em、rem 用法详解

CSS 自适应多屏大小的 @media 用法详解

PC网站自动适配手机网页的方法技巧

PC端网页自适应手机屏幕大小

JS检测移动端自适应屏幕大小

HTML css、id、name、js 代码命名规范

米扑博客

Most Valuable Package of Mobile Internet

标签云

打赏赞助

访客统计

分类 (24)

归档 (181)

友情链接

HTML CSS 学习笔记整理

发表评论