HTML知识点

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

结构层 ：

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

表现层 ：

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

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

倒计时等） javascript 简称 js

举个例子 ：

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

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

HTML的语法：

1. 标签分为两种：

常规标签 ( 双标签 ) ：

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

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

2. 标签是可以嵌套

备注 ：

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

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

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

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

5. HTML 注释 ：

语法 ：

快捷键 ： ctrl + /

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

发。

插入图像：

语法 ：

<img src = "" alt = "" >

属性 ：

src : 图像的路径

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

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

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

标题标签

语法 ：

<h1></h1> ~ <h6></h6>

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

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

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

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

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

段落标签

语法 ：

<p></p>

用法 ： 用于写网页中段落

强行换行标签

语法 ：

<br>

用法 ：强行换行

文本标签

语法 ：

<span></span>

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

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

格式化文本标签

1. 文本加粗

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

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

2. 文本倾斜

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

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

3. 上标下标

 ： 定义上标

 ： 定义下标

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

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

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

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

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