HTML和css路线

HTML、css详细路线

   目录

---

一、 HTML标签学习

1.排版标签

1.1标题标签

1.2段落标签

1.3换行标签

1.4水平线标签

2.文本格式化标签

3.媒体标签

3.1图片标签

3.2路径

3.3音频标签

3.4视频标签

4.链接标签

二、 列表标签

1.列表的应用场景

2.无序列表

3.有序列表

4.自定义列表

三、表格标签

1.表格的基本标签

2.表格相关属性

3.表格标题和表头单元格标签

4.表格的结构标签（了解)

5.合并单元格

三、 表单标签

1. input系列标签

2. button按钮标签

3.select下拉菜单标签

4.textarea文本域标签

5.label标签

四、 CSS基础学习

一、基础认知

1.css引入方式

内嵌式：CSS写在style标签中

外联式:：CSS写在一个单独的.css文件中

行内式:：CSS写在标签的style属性中

二、基础选择器

1.标签选择器

2.类选择器

3. id选择器

三、字体和文本样式

1.字体样式

2.文本样式

3. line-height行高

4. 颜色常见取值

五、 选择器进阶

1.复合选择器

2．并集选择器

4. Emmet语法(常用)

5. hover伪类选择器

六、 背景相关属性

1.背景颜色

2.背景图片

3.背景平铺

4.背景位置

5.背景相关属性连写

七、 元素显示模式

1、块级元素

2、行内元素

3、行内块元素

3、元素显示模式转换(常用)

4、HTML嵌套规范

八、 CSS三大特性

1、优先级的介绍

九、盒子模型

1.盒子模型的介绍

2内容区域的宽度和高度

3.边框( border )

4.内边距( padding )

5.CSS3盒模型(自动内减)

6. 外边距( margin)

7.清除内外边距

十、结构伪类选择器

十一、浮动

1.浮动的作用

2.清除浮动

十二、定位

1.设置定位方式

(1) 静态定位

(2) 相对定位

(3) 绝对定位

(4) 子绝父相

(5)定位底部半透明遮罩效果

(6)固定定位

2.元素的层级问题

3.装饰

(1)垂直对齐方式

(2)光标类型

(3)边框圆角

(4)overflow溢出部分显示效果

(5) 元素本身隐藏

(6) 元素整体透明度(了解)

(7)边框合并(了解)

(8)焦点伪类选择器

十三、CSS样式补充

1.精灵图

3.背景图片大小

3.文字阴影(了解)

4.盒子阴影(了解)

5.过渡

十四、项目前置认知

1.SEO三大标签

2.ico图标设置版心

3.版心设置

十五、字体图标、平面转换