[JavaScript知识库] HTML知识点

HTML的概念：超文本标记语言： HyperText Markup Language 首字母组成

结构层：

网页是有图像、文字、音频、视频、按钮等元素搭建起来的 HTML

表现层：

美化网页，相当于网页的外衣，让网页更漂亮些 CSS

行为层：让网页动起来，常见的网页特效（返回顶部、轮播图、选项卡、吸顶效果、红包雨、

倒计时等） javascript 简称 js

举个例子：

盖房子，房子是由水泥、钢筋、砖块等元素垒起来的，这个相当于网页的结构层；对

房子进行装修，相当于网页的表现层、按开关，灯就亮了，这个相当于网页的行为层

HTML的语法：

1. 标签分为两种：

常规标签 ( 双标签 ) ：

有开始标签和结束标签 eg :

空标签（单标签） : 只有开始标签，没有结尾标签 eg ：

2. 标签是可以嵌套

备注：

只要嵌套就会出现缩进（ tab 键的间距）， body 和 head 比较特殊，可以不缩进

3. 属性：属性是对标签的补充和说明，多个属性之间用空格隔开，属性是不分先后顺序的，写

在 < 的第一个单词叫标签名，标签名和属性之间也是用空格隔开的

4. 在标签的前后写空格和回车不会影响代码的展示

5. HTML 注释：

语法：

快捷键： ctrl + /

注释不是给用户看的，不能展示在浏览器中，它是给程序员自己看的，便于后期的维护和开

发。

插入图像：

语法：

属性：

src : 图像的路径

alt : 图像加载失败给的提示信息

图像加载成功， alt 内容不会显示

图像加载失败，才会显示 alt 中的内容

标题标签

语法：

共六级标题， h1 是最大的标题， h6 是最小标题

特点：字号逐渐变小，有加粗效果在里面

用法：用于写网页中的标题

备注：一个网页中， h1 标签只能出现一次，一般用于写网页中的 logo 或者文章页的大标题， h2~h6 在一

个网页中可以出现多次，至于用哪个分析合理即可

段落标签

语法：

<p></p>

用法：用于写网页中段落

强行换行标签

语法：

<br>

用法：强行换行

文本标签

语法：

用法：用于控制局部内容的样式

备注：文本标签，可以理解成是一个小盒子，没有实质意义在里面，一般都是包着一个字或者几个字

格式化文本标签

1. 文本加粗

<b></b> : 仅有加粗效果

<strong></strong> ：不仅有加粗效果，还有加重语气在里面

2. 文本倾斜

<i></i> : 仅有文本倾斜效果

<em></em> ：不仅有文本倾斜效果，还有着重文本在里面

3. 上标下标

<sup></sup> ：定义上标

<sub></sub> ：定义下标

4. 删除线

<del></del> 等等

路径问题

1. 绝对路径

情况一：完整的 URL 地址： http://www.ujiuye.com/statics/images/logo.png

情况二：具体的盘符： c:/dog.png

2. 相对路径：相对路径是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系

（ / ）：一个斜杠表示根目录或者下一级。

（ ./ ）：一个点（ . ）后面跟一个斜杠表示当前目录，也就是当前文件所在目录。

（ ../ ）：两个点（ . ）后跟一个斜杠表示前文件所在目录的上一级目录。

（ ../../ ）：表示当前文件所在目录的上上级目录，以此类推。

语义化

语义化：根据内容的结构选择合适的标签。

好处：

在没有 CSS 的情况下，页面也能呈现出很好地内容结构。

语义化使代码更具可读性，便于团队开发和维护。

语义化有利于用户体验（例如： title 、 label 标签、 alt 属性的灵活运用）。

语义化有利于 SEO 优化

css 语法

CSS ： Cascading Style Sheets

层叠样式表或者级联样式表，用于控制页面的样式的

包含两部分：选择符和一条或多条声明组成

选择符又叫选择器，给要定义样式的标签起的名字，标签名是可以当做选择器符

声明都是放在 {} 中的，声明是不分先后顺序的

每一条声明是以分号进行结尾的，最后一条声明的分号可以省略掉

声明的前后加空格或回车不会影响代码的展示

css 的注释 /*css 要注释的内容 */ 快捷键： ctrl + /

css引入方式

行内引入方式：

通过 style 属性，创建的行内样式表，作用在当前标签上

语法： < 标签 style = “css 样式 "></ 标签 >

备注：不推荐使用，因为没有做到结构和表现相分离

内部引入方式

语法： <style>css 样式 </style>

style 标签创建的样式表是嵌入在当前页面中，所以叫它内部样式表， style 标签一般放在 title 标签的下

面。

应用场景：应用于单个页面，比如：活动页、主题页

外链引入方式

通过 link 标签引入外部的样式表

语法：

rel="stylesheet" ：让当前的 html 文件和 css 文件产生关联

应用场景：应用于多个页面（网站项目）

三种样式标签的优先级

三种样式表用同一种选择器，作用在同一标签上，产生优先级问题

采用 “ 就近原则 ”

优先级高的会把优先级低的样式给覆盖掉，覆盖只是相同的属性

css基本选择器

选择器：为了给要定义样式的标签起的名字

类型选择器：标签名作为选择器 , 选中当前页面中所有同一种类型的选择器

语法：标签名 {css 样式 }

ID 选择器：

html 语法： < 标签 id = "id 名 " ></ 标签 >

css 语法： #id 名 {css 样式 }

备注： id 名在一个页面中不能重复的，一般用于给外围结构起的名字或者 JS 通过 id 获取元素

class 选择器：

html 语法： < 标签 class = "class 名 " ></ 标签 >

css 语法： .class 名 {css 样式 }

备注： class 名可以是一个词列表，中间用空格隔开 < 标签 class = "class 名 1 class 名 2 " ></

标签 >

通配符选择器：选中页面中所有的标签

语法： *{css 样式 }

应用场景：清除所有的标签的内外边距 *{margin:0;padding:0;}

标识符：自主起的名字，遵循以下规范

以字母数字下划线（

_ ）连字符（ - ）组成

不能以数字开头

不要使用中文

做到见名识意

比如： box1 、 box-1 box_1 con

选择器优先级：多种选择器同时作用在一个标签上，会有优先级问题：

ID 选择器 > class 选择器 > 类型选择器 > 通配符选择器

优先级高的会把优先级低的给覆盖掉，覆盖只是相同的属性

文本字体属性

1. font-size : 设置字体大小

默认的字号是 16px

最小的字号是 12px

字号只能是偶数不能奇数

2. font-style : 设置斜体

normal 正常（给 i em 去掉斜体）

italic : 倾斜

3.font-weight ：设置文本加粗

nromal : 正常（给 b strong h1~h6 去掉加粗）

bold : 加粗

关键字 100 ~ 900 为字体指定了 9 级加粗度。（ bold === 700 ）

4. font-family : 设置字体

默认字体是微软雅黑

可以支持多个值，多个值之间用逗号隔开

可以把多个字体名称作为一个 “ 回退 “ 系统来保存。如果浏览器不支持第一个字体，则会尝试下一

个

中文字体和多个单词组成的英文字体需要加引号，一个单词的英文字体不要加引号

中文字体和英文字体同时出现，英文字体放前，中文字体放后

5.line-height : 行高（文字的高 + 上下的间隙）

normal : 默认值行高

length(px)

number( 具体数 ) 计算：具体数 * font-size

复合写法：

font:font-style font-weight font-size/line-height font-family

font-size 和 font-family 不能省略

不要值可以省略，但顺序不能颠倒

文本属性

1.text-align : 控制文本的水平对齐方式

left : 水平居左对齐（默认值）

center : 水平居中对齐

right : 水平居右对齐

justify : 两端对齐

2.text-decoration : 控制文本的装饰效果

none : 去掉下划线

underline ：下划线

overline ：上线

line-through ：删除线

3. text-indent : 首行缩进，采用的单位是 em

4. color: 设置字体的颜色

英文表示的字体颜色

十六进制（ 0-9a-f ） , 前面要加 #

#000000 黑色简写 #000 #ffffff 白色简写 #fff

rgb （ red,green,blue ）

red,green,blue 取值 0-255 之间

rgba(red,green,blue,alphy)

alphy : 透明度，取值 0-1 之间， 0 代表完全透明， 1 不透明， 0.5 半透明

transparent : 透明

考点：单行文本水平垂直居中？

text-align:center

line-height 的值和 height 的值一样的

复合选择器

复合选择器由两个或多个基础选择器通过不同的方式组合而成的选择器。

1. 后代选择器

语法：选择器 1 选择器 2{css 样式 }

2. 子代选择器

语法：

选择器 1> 选择器 2{css 样式 }

3. 群组选择器：

语法：

选择器 1, 选择器 2…, 选择器 n{css 样式 }

应用场景：

提取公共样式

4. 交集选择器

语法：

选择器 1 选择器 2{css 样式 }

5. 伪类选择器

语法：

选择器 : 伪类 {css 样式 }

伪类是选择器上的螺栓，表示选择器的状态，其中典型是 a 标签，它

有四种状态：

a:link 未访问前的状态

a:visited 访问侯的状态

a: hover 鼠标悬停时的状态

a:active 属性点击时的状态（或鼠标激活时的状态）

四个状态同时存在的时候，顺序要按照：

: link — :visited —-: hover

—active

备注：

四个状态同时存在这种情况几乎没有，

一般只有 hover 状态

盒模型-边框

分别属性设置：

border-width : 边框的宽度

border-color : 边框的颜色

border-style : 边框的线型（ solid 实线 / dashed 虚线 / double 双线

/dotted 点状线 /none ）

复合写法： border : border-width border-style border-color?

分别方向分别属性设置

border-top/bottom/right/left-style: dashed?

border-top/bottom/right/left-width: 5px?

border-top/bottom/right/left-color: blue?

分别方向的复合写法

border-top/right/bottom/left : border-width border-style border-color?

制作一个三角形

.box1{width: 0; border-width: 50px; border-color: transparent transparent yellow transparen t; border-style: solid; }

所有 HTML 标签可以看作是生活中的盒子，包含了内容区

（ centent:width+height ）、内边距（ padding ）、边框 (border) 、外边距

(margin) 几个组成要素。

padding：内边距，用来控制内容区到盒子边界的间距。

分别方向设置 padding 值：

padding-top/padding-right/padding-bottom/padding-left

复合写法：（顺时针给值）

padding :10px? 代表上下左右

padding:10px 20px? 代表上下右左

padding:10px 20px 30px? 代表上右左下

padding:10x 20px 30px 40px? 代表上右下左

注意：

padding 部分也会有背景颜色

如果盒子设置宽，加左右 padding, 盒子会撑大，

如果盒子设置高，加上下 padding ，也会将盒子撑大

设置边框也会使盒子撑大。

想回归到原来的大小：

方法一 : width / height 需要减

方法二： box-sizing: border-box?

外边距margin : 长在盒子四周的间距 , 控制盒子与盒子之间的间距

分别方向设置：

margin-top/margin-right/margin-bottom/margin-left

复合写法：顺时针给值

margin:10px? 代表是上下左右

margin:10px 20px? 代表上下右左

margin:10px 20px 30px? 代表是上右左下

margin:10px 20px 30px 40px? 代表上右下左

特殊值：

auto ，利用特殊值可以实现块级元素水平居中

块元素水平居中：

第一步：设置宽

第二步：

margin:0 auto?

边框：border

单方向分别属性设置 :

border-top-width

border-top-style : solid /dashed / double/dotted/

none

border-top-color

单方向复合写法 :

border-top : 线的粗细线型线的颜色

整体设置复合写法

border : 线的粗细线型线的颜色

背景色

background-color: 设置背景颜色

英文名称的颜色 (pink…)

十六进制

rgb()

rgba()

transparent 默认值 : 透明

作用范围 : border + padding + content

背景图

background-image :

url()

none( 默认值 )

作用范围 : padding + content

备注 : 默认会平铺整个盒子

背景图的平铺方式

background-repeat :

repeat( 平铺 )

repeat-x (x 方向平铺 )

repeat-y (y 方向平铺 )

no-repeat ( 不平铺 )

背景图的位置

background-position : 水平位置垂直位置

关键字 : 水平方向 : left center right , 垂直方向 :top

center bottom

备注 : 如果只有一个值 , 第二值垂直方向默认的是

center?

长度值

百分比

复合属性 background

background: bg-color bg-image bg-repeat bg-position?

插入图像和背景图像区别

1. 插入图像属于 html, 背景图像属于 css

2. 插入图像上不能写内容 , 背景图像上可以写内容

3. 插入图像属于重要的信息 , 而背景图像只是用于装

饰 , 属于非重要信息

css三大特性

层叠性 :

如果一个属性通过两个相同选择器设置到同一个元

素上，相同的属性就会出现冲突 , 那么这个时候一个

属性就会将另一个属性层叠掉 , 采用的是就近原则

继承性 :

子标签会继承父标签的某些样式

一般以 font-,line-,color,text-,list-, 都能继承

备注 : a 标签不能继承字体颜色 ,h 标签不能继承字体

的大小

优先级 : id 权重 0 1 0 0

class/ 伪类权重 : 0 0 1 0

类型选择器权重 : 0 0 0 1

统配符选择器权重 : 0 0 0 0

行内样式权重 : 1 0 0 0

复合选择器权重 :

组成单个选择器的权重之和

注意 : 群组选择器权重是各自的权重

!important 可以进行提权 , 放在属性值的后面 , 比行内样式

的权重还高

权重相同时， CSS 遵循就近原则。

元素的分类

根据元素的显示模式 , 可以将元素分为

块级元素 (block level)

常见的块级元素 : div , p, h1~h6 ,ul,li,dl,ol,dt….

特点 :

独占一行 , 垂直排列 , 可以设置宽高

在没有设置宽度的情况下 , 它的宽等同于父元素

内容的宽

在没有设置高度的情况下 , 它的高是由内容撑开

的 , 没有内容 , 它的高是 0

支持盒模型属性 , 可以设置四周的内外边距

应用 : 一般是块元素 , 行内元素 , 行内块元素的父

级盒子 ,p 标签不能嵌套 div 和标题标签行内元素 : (inline level)

常见的行内元素 : span ,a,i,em,strong,b….

特点 :

并排排列 , 中间有间隙 , 不能设置宽高

它的宽高是由内容撑开的

不能设置上下外边距

应用 : 里面一般是纯文本或者其他行内元素 ( 行

内元素不要嵌套块元素 , 除标签以外 )

行内块元素 (inline-block level)

常见的行内块 : img ,input

特点 :

不独占一行 , 并排排列 , 中间有间隙

可以设置四周的内外边距

它的宽高等同于内容的宽高

元素类型的转换

display :block? 转为块元素 , 让他拥有块元素的特性

display : inline : 转为行内元素 , 让他拥有行内元素的特

性

display:inline-block : 转为行内块 , 让他拥有行内块元素

的特性

外边距塌陷 ( 外边距合并 )

1. 父子块级元素外边距塌陷子元素加 margin-top, 父元素也加 margin-top, 如果父

元素没有设置 margin-top, 那默认 0, 取的是其中最大

的值 , 这个效果作用父元素身上啦 , 原因 : 他俩共用

一个外边距

解决 :

方法一 : 给父元素加 border/padding

方法二 : 给父元素加 overflow:hidden , ( 触发 BFC, 它

是一块独立的渲染区 , 不受子元素的影响 )

2. 相邻块元素垂直外边距的塌陷

给上盒子加 margin-bottom, 给下面盒子加 margin-top

, 就会出现外边距塌陷 , 原因 : 它俩共用一个外边距 ,

取的是他俩之间最大的值

解决 : 给任意一个盒子加父元素 , 给父元素设置 :

overflow:hidden