HTML+CSS阶段知识点梳理

一、简单的网页结构

二、常用标签

三、列表

四、CSS引入方式

一、简单的网页结构

<!DOCTYPE html>

文档声明告诉浏览器我们写的代码是按照html文档类型来写的，浏览器在编译代码时，也要按照html规范来编译，防止出现怪异模式

<html></html>

html根标签一个页面就一个根标签所有的内容都要写在根标签里面，开始标签和结束标签中间

<head> </head>

head标签帮助浏览器编译代码，里面的内容，用户一般看不到

<body> </body>

body标签是书写网页主体内容，用户看到的所有内容，文字，图片，音视频等等都写在body

html 复制代码

 <!-- chinese lorem  假文 
        jw+数字
        -->
        有作洪锐领，招承如。

        <!-- lorem+数字 -->
        Lorem ipsum dolor sit amet.

<title></title>

title标签：网站的标题

可以帮助推广部门进行网站推广，非常重要，一般具体内容都是推广部门来定的

<meta/>

meta标签是根据其配置的属性和属性值来确定功能, 设置一些元信息

属性和属性值写在开始标签和自标签内部的

charset属性="charset属性值"

charset属性设置字符集

utf-8 字符集的类型-万国码

gb、gbk等

编码：将汉字图片音视频等等转成二进制的过程

解码：将二进制又转成汉字图片音视频等

乱码：编码和解码参考的标准不统一，就会出现乱码

二、常用标签

1、标题标签

h1-h6

默认样式：字体加粗，从h1-h6，字体是逐步放小，行与行之间的间距比较大，独占一行

语义：表示一个标题

可以帮助推广部门做推广

其中h1的语义最重，一般情况下一个页面就一个h1

常用的是h1-h3
<h1> 一级标题 </h1>

<h2> 二级标题 </h2>

<h3> 三级标题 </h3>

<h4> 四级标题 </h4>

<h5> 五级标题 </h5>

<h6> 六级标题 </h6>

2、段落标签 p

默认样式：行与行之间有间隔，独占一行

语义：表示一个段落

注意：p中间一般只放文本或者图片

3、强调标签

strong 文本加粗强调

em 文本倾斜强调

4、center

语义：使内容居中

默认样式：会独占一行

5、br 强制换行

6、hr 分割线

7、del 删除线不会独占一行

8、div 没有任何语义的标签，会独占一行

9、span 没有任何语义的标签不会独占一行

能够用有语义标签的时候一定要用对应的标签

三、列表

将一组一组数据列在一起

1、有序列表

用ol创建 li表示每个列表项

默认样式：默认加项目符号123，列表项前面有一定间距

2、无序列表

用ul创建，li表示每个列表项

默认样式：加项目符号黑心圆，列表项前面有一定间距

3、定义列表

用dl创建，dt表示下定义，dd表示具体内容

注意：1、常用的ul，ol，在实际开发过程中，不会特别区分有序或者无序

2、ul li；ol li；dl dt dd；是相对固定的结构，里面一般情况下不嵌套其他子元素

3、ul ol li dl dt dd 都是块元素

4、ul ol 有一个属性 type属性，可以更改项目符号

ol type 属性

可选值：1 默认

A 、a、I、i

ul type 属性

可选值： disc 黑心圆

square 实心方块

circle 空心的圆

5、列表可以相互嵌套使用

6、列表的默认样式一般情况下，是不需要，后期写样式之前需要去除

四、CSS引入方式

**第一种方式：**内联样式/行内样式

写在开始标签或者自结束标签内部，写一个style属性，将css样式写在属性值

可以写多组样式，但一定要用；隔开

优点是有针对性

缺点：

1、html结构和css样式耦合了，不好看

2、不好修改

3、使用js不好修改，后期维护也不行

不建议使用

第二种方式：内部样式表

写在head标签内，写一个style标签，在style标签内，通过选择器，选中对应的内容

在{ } 内设置css样式，可以写多组样式，用；隔开

优点：方便修改

缺点：1、css样式还是写在html文件内部，会导致代码量很多

2、不方便复用

第三种方式：外部样式表

在html文件的外面新建一个.css文件，在css文件内，选中对应的内容，写css样式

通过在html文件head标签写link标签，引入对应的css文件

或在style标签内，@import url ( 文件名 .css );

推荐使用

五、常用选择器

1、标签（元素）选择器

作用：通过对应的标签名选中内容

语法：标签名 { }

注意：会波及其他的同标签名的内容

2、id选择器

作用：通过id属性值，选中对应的内容

语法：#id属性值 { }

注意：id属性值不能以数字，汉字开头，而且id属性值不能复用

3、class选择器

作用：通过对应class属性值选中内容，跟id选择器很像，不同的是class属性值可重复使用

语法：.class属性值

注意：最常用的选择器

4、通配选择器

作用：选中页面中所有的标签

语法：*{ }

5、复合选择器

1、交集选择器

作用：同时符合选择器1选择器2···对应的内容

语法：选择器1选择器2····{}

注意：如果选择器中有标签选择器，那么标签选择器必须放在第一位

2、并集选择器（群组选择器）

在选择器1或者选择器2或者····里面的内容

语法：选择器1,选择器2,····{}

6、关系选择器

1、子元素选择器

作用：通过指定的父元素找到指定的子元素

语法：父元素 > 子元素 { }

2、后代元素选择器

作用：通过指定的祖先元素找到指定的后代元素

语法：祖先元素后代元素 { }

3、选择下一个兄弟（紧挨着我的）

作用：通过指定的兄弟找到紧挨弟弟

语法：兄 + 弟 { }

4、选中指定元素下所有的兄弟

语法：兄 ~ 弟{ }

7、属性选择器

语法：[属性名]{} 选择含有指定属性的元素