html5基础知识总结

html5入门基础总结很适合小白前端学习

1、标签按结构分：单标签 双标签

2、body代表网页的正文部分。head标签代表网页的头部，一般用来完成对网页的个性化设置。meta-utf-8:中文显示。

3、常用标签 a 超链接标签 href 地址 target 用来设置新页面用何种方法打开，默认覆盖原页面

4、img标签 src 设置图片路径 alt 设置不能正常显示时提示文字 title 设置鼠标放在图片上的标题 注意：默认以原始尺寸显示。

5、span 是个无语义标签，用来标记一句话，一个单词。以特殊格式显示。

6、b 粗体标签

7、i 斜体标签

8、 行属性标签：标签内容可以在一行显示。
特点：

1、内容可以在一行显示
2、标签的尺寸由内容撑开，无法人为调节尺寸
3、行属性标签内部只能嵌套行属性标签
例子：a,span,img,b,i

9、标题标签，一般只用前三级

10、ul 无序列表标签： ol 有序列表 li 列表项

11、p 段落标签 注意段落标签不能相互嵌套。text-indent:2em; 可以实现首行缩进两个字

12、div块属性标签：标签内容如果不能在一行显示，此时标签称为块属性标签。

特点：

1、标签标记的内容不能再一行显示
2、标签的尺寸可以人为修改，默认块级标签的宽度和父级标签相同。
3、块属性标签内部既可嵌套其他块属性标签，也可以嵌套行属性标签

13、选择器：用来选择指定标签。
分类：

1、class选择器 font-family 设置文字类型，font-weight 设置文字粗细程度 最大900 最小100 text-decoration 设置文字下划线位置 overline上边界，line-through中间,underline下边界,none 无
2、后代选择器：根据标签后代关系选择指定的后代元素 .list li{}
3、id选择器：根据标签的id属性值获取标签
例子 #mark{} id=mark
border-right 设置标签边框  border-radius 设置标签边框拐角。

14、盒模型：margin(外边框),border(边框),padding(内边框),content(内容层) 边框线solid 实线，dotted圆点 double双线 dashed 虚线 margin:0 auto;设置块级标签水平居中 text-align：center 设置标签内文本居中

15、如果要调节行属性标签的内外边距时，需要将行属性标签转为行内块，或块

16、默认情况下相邻两个标签的上下外边距会出现重叠现象。以最大的外边距为主。

17、盒模型的分类

1、表针盒模型 width 为内容层宽度
2、怪异盒模型 width 为总宽度 即 边框+内边距+内容层

18、background-size:设置图片大小 如果值为cover 为覆盖div此时图片不失真。 如果值为contain 为包含图片也不失真。

19、background-repeat 图片重复方式 no-repeat 为不重复。background-position为图片位置

20、*｛｝统配选择器 一般用于css样式重置

21、list-style:none 设置列表默认样式为空

22、zoom 标签缩放比例

23、群组选择器 .list1, .list2{}

24、.map:hover｛｝ 悬停在对应标签上时的选择器

25、vertical-align:30px;调整文字基线位置。

26、overflow:hidden 设置在父级标签内可以清除子级的浮动但是不建议使用

27、清浮动的流行写法：

after 标签的伪元素
display：block 转化为块级标签
clear:both 设置转换的块级标签左右两侧不允许存在浮动
font-size:0 设置添加的文本尺寸为0

28、一个块级元素浮动后，同一级别的兄弟元素都需要浮动。
29、浮动的元素会从父级元素中脱离，此时父级元素会高度塌陷。
30、定位

1、relative 相对定位,以定位元素未移动之前的位置为参照物，
注意该定位不会造成定位元素从父级标签内部脱离。
2、absolute 绝对定位，以定位元素的父级标签为参照物，但父级标签必须为relative或absolute。如果父级没有设置定位则向外层寻找直到body
3、fixed 固定定位 以窗口为参照物，注意固定定位实现的是标签的悬浮效果
注意：absolute 和fixed 都可以实现定位元素从父级标签脱离

31、定位元素默认优先级为0，如果有重叠，后定位元素会覆盖之前的元素。用z-index 修改优先级。

32、标签隐藏：display:none 从网页移除不占网页结构

33、标签隐藏：opacity:0 修改不透明度。

34、显示隐藏：.kings:hover .goods{display:block} goods为将要显示的隐藏的类