如何定义html基础样式,HTML & CSS 基础

HTML 基本结构

基本骨架

DTD

命名空间

字符集

基本骨架：

标签：根标签

标签标签：浏览器的内容显示标签：设置页面标题，title关键字可以作为搜索引擎抓取的关键字

注意：meta声明的字库，必须和编辑器软件默认的字库相同，否则浏览器在加载时会出现乱码.

HTML 常用标签

html注释语法：``

标题标签：

~

标题标签为容器级标签，不能互相嵌套，是同级关系书写.

由于

权重高，内部文字对提高搜索引擎排名非常重要。为防止作弊，若一个页面有多个

，反而降低权重。一个页面应只有一个

.

段落和换行

段落标签:

换行标签：
,换行符，可进行强制性换行

标签作用是添加一个完整段落的语义，不负责换行.

文本格式化

对文字进行格式化显示的设置，比如，粗体、斜体。

文本格式化标签均为文本级标签

图像标签： 相当于一个特殊的文本，在指定位置插入图片

常用属性：

src 图片路径

width 宽、height 高

title 提示文本，鼠标悬停时出现提示文本

border 边框

alt 替换文本，图片加载失败，出现的替换文本

注意：尽量使用alt属性对图片进行说明，添加相对应的关键字有利于SEO搜索引擎优化.

音频标签：

音频控制条属性

音频加载后不会自动显示播放器控制条，需要使用controls属性进行设置

视频标签：

与音频标签类似，也需要添加视频控制条属性controls

超级链接： 容器级标签

与网络上另一文档相连。在指定位置添加链接，提供用户点击和跳转，可以跨页面跳转、页内跳转。

常用属性：

href 超文本引用，用于链接目的地址

target 被链接文档在哪里显示,默认在当前窗口打开，__self；__blank:在新窗口打开

title 提示文本，鼠标悬停时出现提示文本

两种特殊锚点跳转

a. 页面内锚点跳转

①设置锚点：

目标，在目标位置添加一个空的标签，并加上name属性，必须唯一。

②添加链接

给

b. 跨页面锚点跳转

① 设置锚点。

②添加链接，href属性值路径为：路径#id或路径#name。

列表 (无序，有序，定义)

通常将内容相关，结构相似，样式相近的内容，使用列表结构进行搭建。\

无序列表：

定义无序列表的大结构无序列表的列表项

注意：

只能嵌套标签，只能存在列表标签内是容器级标签

列表项之间没有先后之分

没有添加样式前缀功能，后续可用css实现

有序列表：

有序列表的大结构有序列表的列表项

定义列表：

定义列表的大结构定义列表的列表项定义列表的描述内容 无序列表项1无序列表项2 有序列表项1有序列表项2 定义列表项定义列表项描述1定义列表项描述2

布局标签div和span (俗称盒子)

没有具体的语义，是经典的容器级标签。

用于划分网页布局。

在不改变整体效果的情况下，可以辅助进行布局调整。

表格

表格基础

合并单元

表格分区

①表格基础

定义整个表格大结构 定义表格的行 定义表格的单元格 定义表头单元格，可替换td的位置，默认样式：文字显示粗体居中

使用

的属性 border ，行与单元格默认有空隙，会使得表格有双线效果。

解决方法

设置样式：border-collapse:collapse //表边框塌陷

表头1表头2普通单元格1普通单元格2

②合并单元

表格单元格氪合并，通过

和的两个属性可设置。

rowspan: 跨行合并，上下的合并

colspan：跨列合并，左右的合并

属性值：数字

小技巧：

先列出所有

,以最小单元格为标准

添加每行的/

或/单元格

划分单元格所在的行，顶边对齐的属于同一行

将所有行和列写完后，在查看哪些单元格有跨行、跨列、属性值的个数要参展最小单元格。

③表格分区

完整的表格包括：

表格标题

表格头部

表格主体

，内嵌套、、

表格页脚

注意：不论书写顺序如何，浏览器都会按照

,,,顺序加载

表单，用来收集用户信息

表单域

表单控件(表单元素)

提示文本

①表单域：

容器级标签。功能性标签，可将收集数据提交后台服务器

属性 / 属性值：

action / url 表单提交处理的url

method / get/post 提交方式

②表单元素

a. 标签,相当于特殊文本，不会换行，根据属性type的值对应不同的表单控件。

b. 文本域标签：

可输入多行文本的区域，相当于一个特殊文本，在标签之间书写文字为默认输入文字。

可设置区域大小：rows 最大行数；cols 最大字节数(一个汉字2个字节)。

c. 下拉菜单

标签，下拉菜单整体结构，文本级标签

标签，表示定义下拉菜单选项，文本级标签\

选项一

选项二

分组管理：对进行分组管理，使用

选项一

选项二

选项一

d. 标签

所有表单元素都可以通过绑定其他内容去扩大触发点击范围，这是需要一个label标签。

绑定方法一

给表单元素设置id

将绑定内容用label包裹

给label设置for属性值等于id的值

男

绑定方法二

使用场景：绑定内容与表单元素挨在一起，直接用label标签包裹

男

字符实体

对一些特殊的字符，可以用字符实体去进行书写，只需要记住常见的几个即可，其余可查看文档字符实体列表进行参考。

常见的字符实体：< >   ©

CSS层叠样式

静态的修饰网页，对元素进行格式化。

书写位置

. 内联式(内行式)

在html标签上的style属性直接书写：

这里是一个段落

缺点

1. 没有完全脱离html标签。

2. 不利于html结构的解读。

3. 只能给一个标签使用。

. 内嵌式

在html文件中，

标签的

优点

1. 实现结构、样式处不分离

2. 多个标签可以利用同一代码设置

缺点

1. 结构、样式没有完全分离。

2. css样式只能给一个html文件使用。

3. 在html中css太多，会造成头重脚轻，不利于修改和阅读。

. 外联式(外链式)

在单独的扩展名为.css文件中。

引用方式：

①在html的

内使用标签这里是标题

注意：在.css文件中书写，不用

优点

1. 实现html和css完全分离

2. 多个html文件可共用一份css文件，便于提取公共css

3. 可实现一个css变化，多个页面同时变化

4. 一个html可引入多个css文件

. 导入式

在内嵌样式

导入方式： 利用一条@import url(路径)语句进行引入

问题

1. 导入式样式表作用与外链式基本相同

2. 在浏览器加载时，会在html结构加载完成后再对该语句进行编译。若网速慢，会导致没有出现css样式效果

总结:

在实际应用中，小型案例可用内嵌式，实际工作、大型网址，推荐使用外链式。

CSS语法

css语法规则：

由两部分组成，选择器以及一条或多条声明。

p {width: 300px; font-size:14px}

css样式规则：

①css在给标签设置样式之前，必须先用选择器选择该标签

②属性名和属性值用键值对写法K：V

③添加的样式都必须在{}里面

div {

width: 200px;

height: 200px;

background-color: red;

margin-bottom:10px;

}

注意：

a.分号的必要性：每条属性后面的分号必须书写，不然浏览器会加载错误。

b.css中对所有属性与属性之间的空格、缩进、换行不敏感。

css样式规范

样式格式

在开发中，为了代码可读性强，便于调试，使用展开格式对css样式进行书写：

div {

width: 200px;

height: 200px;

background-color: red;

margin-bottom:10px;

}

在上传服务器时，减少不必要的空白，压缩文件大小，利于传输，使用紧凑格式对css样式进行书写：

div {width: 200px;height: 200px;background-color: red;margin-bottom:10px;}

英文大小写

css中英文可用大写，也可用小写，建议使用时全部用小写。

空格规范

为了书写起来的易读性，可在选择器于大括号{}间保留一个空格；冒号后，属性值前，保留一个空格。例：

selector(空格){

k:(空格)v;

}

CSS常用样式

文字三属性

颜色color

作用是给文字设置颜色，k:color,v:颜色值或颜色名。

颜色值可用颜色英文字母，rgb模式或16进制来表示。

p {

color: red;

color: rgb(255,0,0);

color: #ff0000;

}

字体font-family

作用是定义元素内文字的字体，k:font-family,v:字体名称，包裹在引号中，属性值可多个用逗号分隔。

如果不设置字体属性，不同浏览器有自己默认字体

注意：

1、font-family可设置多个字体名称，实际加载时只会选择一种加载。按书写顺序进行加载，如浏览器不支持第一个字体，则会尝试下一个直到第一个支持字体。

2、浏览器中加载的字体是用户机器中自带的，若用户的电脑中没有设置的字体则会加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字体。

3、中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响，建议将英文字体写在属性值最前面。

p {

font-family: "arial","微软雅黑","宋体"l

}

字号font-size

作用是设置字体大小，k:font-size,v:相对长度单位或绝对长度单位。

注意：

1 、如果 HTML 中不设置字号，不同的浏览器有自己默认的加载字号，比如 chrome、IE，默认显示字号为 16px。

2、 不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以最小字号加载，0除外。chrome 浏览器最小加载显示字号为8px，IE 浏览器最小可以支持1px的字号。

盒子实体化三属性

想在浏览器具体看到一个盒子占有的实际位置，需要设置盒子可以实体化的三属性。

属性名

属性值

说明

width

px单位的数值

定义元素占有的宽度

height

px单位的数值

定义元素占有的高度

background-color

颜色名、颜色值

定义元素占有的高度

CSS选择器

选择器：选择要添加样式的 HTML 标签的一种方法、模式。

标签选择器(基础选择器)

• 通过标签名去选择标签元素。

• 书写方式：标签名。

• 选择范围：选中的是HTML文件中所有的同名标签。

注意：标签选择器可以选择所有的同名标签，会忽视 HTML 元素的嵌套关系，不管

嵌套多深，都能被选中

标签选择器特点

• 优点：可以选中所有的同名标签，设置所有同名标签的公共样式。

• 缺点：只能实现全选，不能对局部的标签添加特殊样式。

id选择器

• 通过标签上的 id 属性去选择标签。

• 书写方式：#id 属性值

• 选择范围：只能选中一个标签。

• id 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分

大小写。每个 id 属性值必须是唯一的，不能与其他的 id 同名。

注意：如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签取不同的 id 名，分别选中设置。

id 选择器特点(基础选择器)

• 缺点：id 选择器只能实现单选，不能帮我们完成多选的功能。

类选择器

• 通过标签的 class 属性去选择标签。

• 书写方式：.class属性值

• 选择范围：是页面中所有 class 属性值相同的标签。

• class 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。class 属性值可以与其他的class相同。

类选择器特点(基础选择器)

特点 1：多个不同的标签，不区分标签类型，只要 class 属性值相同，都可以被同

一个类选择器选中。

特点 2：一个标签的 class 属性可以有多个属性值，值之间用空格分隔，每个属性

值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同一

个标签。

类选择器优点

①通过一个类选择器进行多选，选中多个标签，添加公共样式。

②一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样

式和单独样式，节省代码量。

实际工作中的使用规律：类上样式(CSS)，id 上行为(JavaScript)。

通配符选择器(基础选择器)

• 通过一个特殊符号选择页面内所有的标签。

• 书写方式：*

• 选择范围：包含 标签在内的所有标签

通配符特点

• 优点：可以实现全选，简化书写。

• 缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使

用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。

• 注意：实际上线的网站不允许使用 * 去清除默认内外边距。

后代选择器(高级选择器)

• 通过标签之间存的嵌套关系(族谱关系)去选择元素，基本组成部分就是基础选择

器。

• 后代选择器也叫包含选择器。

• 书写方式：空格表示后代，基础选择器中间使用空格分隔，空格前面的选择器选中

的标签必须是后面选择器选中标签的祖先级。

• 选择范围：通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后

一个选择器确定选中的标签。

• 注意：后代选择器必须满足所有的后代关系才能够被选中，后代关系不一定只能是

父子关系。

后代选择器特点

• 优点：减少 class 属性的定义使用，选择效率更高。

交集选择器(高级选择器)

• 通过一个标签之上满足所有的基础选择器的需求去选择标签。

• 书写方式：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开

头。

• 选择范围：选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能

被选中。

• 比较常见的是标签与类的交集。

并集选择器(高级选择器)

• 不同选择器选中的元素都要设置相同的样式，多次书写相同的样式属性对代码造成

浪费，可以将前面六种选择器可以进行并集书写，相当于一种简化写法。

• 书写方式：将多个选择器中间用逗号进行分隔，最后一个后面不能加逗号。

• 选择范围：是所有的单独选择器选中的标签的并集集合

并集选择器用途

①如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法。

②可以使用标签选择器的并集写法，进行默认样式的清除，替换通配符的功能。

CSS层叠式

继承性

如果一个标签没有设置过样式，它的某个祖先级曾经设置过，在浏览器中该标签也加载了这些样式，这些样式都是从祖先级继承而来，这种现象就是继承性。

能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。

层叠式

多个选择器在进行对比的过程中，最终只有一个属性会成功加载，它会层叠、覆盖掉其他的属性。

优先级判断：

选中目标标签

第一步：比较多个选择器的权重，权重高的层叠权重低的。

基础选择器的权重：根据选择范围，范围越大权重越小，* < 标签选择器 < 类选择器 < id 选择器。

高级选择器权重比较方法：依次比较组成高级选择器的 id 的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小。

比较顺序：( id 个数, 类的个数, 标签的个数 )

第二步：如果选择器权重都相同，需要比较 CSS 中代码的书写顺序，后写的层叠先写的。

选中目标标签的组先级

如果选择器选中的是祖先元素，文字的样式可以被继承。

第一步：比较就近原则，比较选择器选中的祖先级在 HTML 结构中距离目标标签的远近，近的层叠远的。

第二步：如果选中的祖先级距离目标一样近(同一个祖先级)，比较选择器权重，权重大的层叠小的。

第三步：如果距离一样近，权重也相同，最后比较 CSS 中的书写顺序，后面的层叠前面的。

! important 关键字

• 如果在比较选择器权重的过程中，遇见一个 !important 关键字，可以将某条 CSS样式属性的权重提升到最大。

• 书写位置：在某个css属性的属性值后面空格加 !important 。

注意：

① 就近原则中，不需要比较选择器权重，所有 important 会失效。

② important 不能提升选择器的权重，只能提升某条属性的权重到最大

行内式权重

• 行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高。

• 但是，与 !important 关键字相比权重要低