HTML&CSS入门与介绍

HTML5/CSS

一. HTML5

1.1 参考手册

HTML 参考手册

1.2 字符集

字符集，指的是编码和解码采用的规则。

字符集	语言	备注
ASCII	英语
GB2312	简体中文	中文系统的默认编码
GBK	简繁中文
UTF-8	各国语言
ISO-8859-1	西欧

1.3 标签

1.3.1 常用标签

meta

含义：描述网页
属性：

• name用于描述content的内容，如：keywords，description等
• content设置网页关键字或描述

备注：

• meta还可以用来设置请求重定向。

h1~h5

备注：重点在于语义，而非样式

img

属性：

• alt搜索引擎通过该属性检索图片

备注：

• 除自适应页面外，一般不设置图片的width和height，而是事先处理好图片，以优化性能

iframe

含义：内联框架
备注：不推荐使用，因为iframe中的内容不会被搜索引擎检索

a

含义：超链接
属性：

• target属性值也可以指定为内联框架的name，则在该内联框架内打开
• href="#"，则跳到顶部；href="mailto:收件人邮箱"则打开邮箱客户端

1.3.2 文本标签

标签	含义	样式	举例
em	语气上强调	斜体	如：警告
strong	内容上强调	加粗	如：某重要内容
i	无语义	斜体
b	无语义	加粗
small	细则内容	小字号	如：合同内容、版权声明
cite	参考内容	斜体	如：书名、电影名、歌名
q	内联元素。短引用	引号	如：名人名言。兼容性差，一般不用
blockquote	块元素。长引用	独占一行，缩进
sup	上标	小型置上
sub	下标	小型置下
ins	插入的内容	下划线
del	删除的内容	中划线
pre	代码	保留代码格式
code	专门用来表示代码	不保留代码格式

1.3.3 列表标签

标签	含义
ul	无序列表
ol	有序列表
dl	定义列表
dt	列表的标题，dl子标签
dd	列表的内容，dl子标签
li	列表项，ul和ol子标签

上述标签均为块元素

1.3.4 长表格标签

标签	含义	备注
thead	表头
tbody	表中	如果没设置tbody，则会自动在表格中添加tbody
tfoot	表尾

1.3.5 块元素与内联元素

元素类型	常见元素	备注
块元素	div、p、h1~h5等	p标签不能包含块元素
内联元素	span、a等	a标签可以包含除本身外的任何元素

1.4 实体

HTML 实体符号参考手册

1.5 语法规范

• html不区分大小写，但一般使用小写；
• html标签必须结构完整，成对出现或者自结束标签；
• html标签的属性必须有值，且值必须加引号；

二. CSS

2.1选择器

选择器的优先级：

• 内联样式>id选择器>class选择器>元素选择器>通配选择器>继承的样式

① 元素选择器

语法：标签名{}
作用：选择所有指定元素

② id选择器

语法：#id属性值{}
作用：通过id值选择唯一元素

③ 类选择器

语法：.class属性值{}
作用：通过class属性值选择一组元素
备注：

• 一个元素如果有多个class属性值，通过类选择器指定其中一个属性值，就能选择该元素

④ 并集选择器

语法：选择器1，选择器2，选择器N{}
作用：选中多个选择器对应的元素

⑤ 交集选择器

语法：选择器1选择器2选择器N{}
作用：选中同时满足多个选择器的元素
注意：选择器之间没有空格

⑥ 通配选择器

语法：*{}
作用：选择所有元素

⑦ 后代元素选择器

语法：祖先元素 后代元素{}
作用：选择指定元素的后代元素

⑧ 子元素选择器

语法：父元素>子元素{}
作用：选择指定元素的子元素
备注：ie6及以下不支持

⑨ 伪类选择器

语法：选择器:伪类{}
作用：选择指定状态下的指定元素
备注：由于用户隐私限制，:visited只能设置字体颜色

锚伪类：

• :link 未访问
• :visited已访问
• :hover鼠标悬浮
• :active 鼠标选定

锚伪类的书写顺序：

• visited==link–>hover–>active(箭头表示依次往下书写，双等号表示无顺序要求)

⑩ 否定伪类

语法：元素:not(选择器)
作用：从已选元素中剔除某些元素
备注

• 语法中元素看需求，可写可不写；

⑪ 属性选择器

语法：元素[属性名="属性值"]{}
作用：选择含有指定属性的元素
备注：

• 语法中元素和="属性值"看需求，可写可不写；
• ^表示以指定内容开头，$表示结尾，*表示包含(需是连续包含)。如：[title^="a"]{}表示title属性值为a开头的元素

⑫ 子元素的伪类

语法：

• 元素:[firsr-child/last-child/nth-child(n)]{}
• 元素:[first-of-type/last-of-type/nth-of-type(n)]{}

作用：

• 第一种：在父元素的所有子元素中选择
• 第二种：在父元素的指定子元素中选择

备注：

• 参数n也可以写odd表示奇数；写even表示偶数

⑬ 兄弟元素选择器

语法：

• 前一个元素+后一个元素{}
• 前一个元素~后一个元素{}

作用：

• +表示选择后面的一个兄弟元素(必须是紧挨)
• ~表示选择后面的所有兄弟元素(不紧挨也算)

2.2 样式

2.2.1 单位

单位	含义	备注
px	像素	不同类型的屏幕，像素大小不同
%	百分比	根据父元素的样式计算
em	类似百分比	根据当前元素的字体大小计算，1em=1font-size

2.2.2 颜色

属性值	备注
颜色名
#红绿蓝	如果有两位重复，可以写成仅三位
rgb(红，绿，蓝)	0-255或0%-100%

2.2.3 文本属性

属性	文本设置	备注
text-transform	大小写	capitalize每个单词首字母大写，uppercase大写，lowercase小写
text-decoration	修饰线	none无，underline下线，overline上线，line-through中线
letter-spacing	字符间距
word-spacing	单词间距
text-align	对齐	left，right，center，justify两端对齐
text-indent	首行缩进	单位建议用em

2.2.4 文字属性

属性	文字设置	属性值及备注
color	字体颜色
font-style	样式	italic/oblique倾斜，效果相同，一般使用前者
font-variant	小型大写	small-caps小型大写字母
font-weight	粗细	bold粗体，bolder更粗，lighter更细，100-900(通常不使用，因为没有那么多字体版本)
font-size	字号	一般默认16px
font-family	字体	1.能否显示，取决于当前电脑有无该字体；2.多个字体用逗号隔开
font	样式、大写、粗细、字号/行高、字体	1.用空格隔开；2.字体必须写最后，大小写倒二；3.大小和字体必须写，其他的没写则为默认值(注意覆盖)

2.2.5 行高属性

① 行间距
行间距=行高(line-height)-字号(font-size)

② line-height
说明：文本默认垂直居中于行高
参数：

• 大小
• 百分比，表示通过字体大小计算
• 数值，表示字体大小的倍数

技巧：对于单行文本，可以将其行高设置为与父元素的高度一致，实现垂直居中于父元素

2.2.6 背景属性

语法：

• background-image: url(具体路径);设置背景图
• background-repeat设置背景图重复方式
• background-position设置背景图位置
• background-attachment设置背景图与滚动条关系

• scroll默认值。背景图像随滚动条滚动
• fixed背景图固定在某一位置，不随滚动条滚动(一般fixed只设置给body)

• background:url(具体路径) color repeat position attachment;简写，无顺序要求，若没写则表示设为默认值

说明：如果同时设置背景图和背景色，则背景色会作为图的背景显示。(通常，背景色和背景图同时指定)
图片整合：将多张图片整合成一张，并通过background-position设置偏移位置。这样只要发送一次请求，就能加载多张图片，提高访问效率。

2.2.7 表格属性

属性	表格设置
border-collapse	是否合并单元格边框，若合并，则会忽略 border-spacing 和 empty-cells 属性
border-spacing	设置分隔单元格边框的距离
border	设置边框样式。如：order:1px solid black;

CSS设置tr:nth-child(odd){}可以实现隔行变色效果

2.2.6 opacity

含义：设置透明的
语法：opacity x;(x为0~1之间的数)
说明：ie8及以下不支持。在ie8及以下中使用filter:alpha(opacity=x)(x为0~100之间的数)

2.2.7 display和visibility

display

属性值	描述
inline	作为内联元素显示
block	作为块元素显示
inline-block	作为行内块元素显示，既能设置宽高，又不会独占一行
none	隐藏元素，且不会在占页面位置

visibility

属性值	描述
visible	显示
hidden	隐藏元素，但会继续占页面位置

2.2.8 overflow

属性值	描述
visible	显示溢出
hidden	隐藏溢出
scroll	设置横纵滚动条
auto	自动设置滚动条

2.2.9 float

可选值：

• none默认值，在文档流中排列
• right脱离文档流，向右浮动
• left脱离文档流，向左浮动

浮动元素不会盖住文字，文字会自动环绕元素周围

2.2.10 clear

可选值：

• none默认，允许影响
• right去除右侧浮动元素影响
• left去除左侧浮动元素影响
• both去除左右侧浮动元素影响

2.2.11 文档流

① 块元素在文档流中的特点

• 独占一行，自上而下排列
• 默认宽度为auto，即父元素的100%；
• 默认高度为被子元素撑开的部分

② 内联元素在文档流中的特点

• 只占自身大小，从左到右排列
• 默认宽高均为被子元素撑开的部分
• 一行中无法容纳时，自动换行

③ 脱离文档流

• 块元素脱离文档流后，默认的宽高为被内容撑开的部分，即不再独占一行
• 内联元素脱离文档流后，会变为块元素

④ 高度塌陷

问题描述：在文档流中，元素默认高度为被子元素撑开，但是当子元素设置为脱离文档流浮动时，将造成父元素高度塌陷。
解决方法：

• 方法一：将父元素设置为overflow: hidden或auto;
• 方法二：(最推荐的解决方式)

	/*clearfix为父元素class属性值其中的*/
	/*兼容绝大多数浏览器*/
	.clearfix:after{
		content: "";
		display: block;
		clear: both;
	}
	/*兼容ie6及以下的浏览器*/
	.clearfix{
		zoom:1;
	}

2.2.12 BFC

开启BFC后具有的特点：

• 父子元素的垂直外边距不会重叠
• 开启BFC的元素不会被浮动元素覆盖
• 开启BFC的元素可以包含浮动子元素

开启方法：

• 设置元素为浮动
• 设置绝对定位
• 设置元素为display: inline-block;
• 设置元素为overflow: hidden或auto;

说明：ie6及以下不支持BFC

2.2.13 样式继承

后代元素可以自动继承祖先元素的某些样式，如：字号；而有些样式不会自动继承，如：背景、边框、定位相关的。

2.3 盒子模型

说明：

• width和height只设置内容区的宽高
• 盒子大小=border边框+padding内边距+content内容区

① padding内边距

语法：

• padding:上 右 下 左;
• padding:上 左右 下;
• padding:上下 左右;
• padding:上下左右;

说明：

• 颜色背景会延申到padding内边距
• 当元素未设置width时(即为auto)，则设置padding不会影响盒子的宽度，而是自动调整

② border边框

• border-width、border-style(必填) 、border-color
• border
  语法： border:宽度 样式 颜色(无顺序要求)

③ margin外边距

含义：盒子与盒子之间的距离
说明：

• 设置上左margin，将影响自身位置；设置下右margin，将影响其他盒子位置
• 若为负值，则表示反向
• 若只设置margin-right或只设置margin-left为auto，则为最大值，若同时设置为auto，则居中；若设置margin-top为auto，则默认为0

重叠问题

兄弟元素

问题说明：相邻的兄弟元素，在垂直方向上的外边距会发生重叠，即取最大值。
解决方法：在两元素之间插入一个其他元素，让其不相邻。

父子元素

问题说明：如果父子元素的垂直外边距重叠，则子元素的外边距会设置给父元素
解决方法：

• 给父元素设置border，让其不相邻；
• 给父元素设置padding，间接实现效果；
• 给父元素设置clearfix

	/*clearfix为父元素class属性值其中的*/
	.clearfix:before{
		content: "";
		display: table;
	}

④ 内联元素的盒模型

• 内联元素不能设置width和height；
• 内联元素只能设置水平margin(重叠时求和)，不能设置垂直的；
• 内联元素可以设置padding和border，但在水平方向上会影响布局，而垂直方向上不会影响布局。

2.4 定位

当开启元素定位后(position不为static)，可以设置top、right、bottom、left和z-index，反之则不能设置

① 相对定位

• 相对于元素原来的位置进行定位
• 不会脱离文档流，不会影响元素性质(块元素还是块元素，内联元素还是内联元素)
• 会使元素提升一个层级

② 绝对定位

• 相对于离它最近的开启定位的祖先元素进行定位，如果所有祖先元素均没有开启定位，则会相对于浏览器窗口进行定位。(一般开启了子元素的绝对定位，我们会同时开启父元素的相对开启)
• 会脱离文档流
• 会使元素提升一个层级

③ 固定定位

• 相对于浏览器窗口进行定位，不会随滚动条滚动
• 会脱离文档流

④ 层级

• 父元素的层级再高，也无法盖住子元素
• 如果层级相同，则后写的盖住先写的

2.5 hack

• ie10及以上不支持
• css hack不推荐使用，难维护

2.5.1 条件hack

• 在开发中通常利用两份外部样式表，并配合hack进行使用

2.5.2 属性hack

符号	浏览器	备注
_	ie6及以下	写在样式名最前
*	ie7及以下	写在样式名最前
\9	ie6及以上	写在样式值最后
\0	ie8及以下	写在样式值最后