Html+CSS常用要点及易错点归纳（一）

清疚 2023-07-12 06:23 14阅读 0赞

最近回顾html和css相关知识的时候，发现很多零碎的知识有些遗忘，所以这里总结归纳一下，既方便我自己的记忆，大家也能一起回顾一下，看看你都记全了吗。  
今天先来说说html的相关知识点：

# Html 相关点： #

### \- 文件的命名规范 ###

小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；  
必须以英文字母开头。 eg： goods\_iphone\_1000.html

### \- Html语义化 ###

**含义：** 什么样的结构，采用什么样的标签。

**好处：**

1.  在没有CSS的情况下，页面也能呈现出很好的内容结构。
2.  有利于SEO，让搜索引擎爬虫更好的理解网页。
3.  方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
4.  便于团队开发与维护。

### \- Html标签的分类特点 ###

Html标签**按类型分**可以分为：**块、内联、内联块**，其中

**块标签特点：**

1.  块是上下排列的 ，块是独占一行的。(霸道的小总裁)
2.  块，支持CSS中的所有样式。
3.  当块不写宽度的时候，默认的宽度是父容器的宽。
4.  块永远都是一个矩形区域

**内联标签特点**

1.  内联是左右排列的，内联必须在一起（粘人的小公举）
2.  内联，有些样式是不支持的 width height margin(一部分) padding(一部分)
3.  内联元素的宽度就是由内容决定的。
4.  不一定总是矩形区域。（了解）
5.  两个内联元素之间会有一个空隙（折行带来的空隙）

一般情况下，要不要解决这个空隙问题：一般情况下是不需要的，因为一般我们都是用块来做布局的，用内联元素来做文本修饰的。如果需要解决此问题，方法有：

1.  让内联元素写到一行上。
2.  给父容器设置font-size:0;再给当前元素设置正常的文字大小。

**注意：如果块元素内有文本会以文本的基线对齐。**

### \- 标签的强调效果 ###

*  加粗  
    strong标签表示强调，但同时有加粗文本的效果  
    b标签虽然是加粗标签，但是没有语义化
 *  斜体  
    em标签也表示强调，并能给文本定义斜体，但是语气没有strong的语气强烈  
    i标签虽然是斜体标签，但是没有语义化

### \- 标签的嵌套规范 ###

标签本身就是有很多嵌套规范的，例如：  
table > tr ， ul(ol) > li ， dl > dt ，  
这些标签之间必须紧密相接，不能插入其他标签。

*  **块标签可以嵌套内联标签**  
    **eg：**

*  **块标签不一定能嵌套块标签**

<div>
    	<div></div>
    </div>
    
    <p>
    	<div></div>
    </p>

*  **内联标签不能嵌套块标签**

<span>
    	<div></div>
    </span>
    
    <a href="">
    	<div></div>
    </a>

*  **不能自己嵌套自己的标签**  
    超链接不能嵌套超链接  
    p标签不能嵌套p标签  
    标题标签h1-h6之间不能互相嵌套也不能自己

### \- 关于表格 ###

一个表格table中，只能有一个thead和tfoot，但是可以有多个tbody。表格也是有嵌套规范的。

### \- 关于表单 ###

1.  form必须要有action属性，表示提交地址
2.  所有需要提交的数据，input必须要有name属性
3.  input按钮文字，使用value属性表示
4.  input必须放在form标签内才能提交

### \- get请求和post请求的区别 ###

1.  get请求通常表示获取数据
2.  post请求通常表示提交数据
3.  get请求发送的数据都写在地址栏上，用户可见，安全性较差
4.  post请求发送的数据用户不可见，安全性较好
5.  get请求不能提交大量数据，但post可以，因此不要混用

### \- 标题标签的使用规范 ###

1.  h1是网页中最重要的标题标签，每一个网页，每一个html文件中，只能有一个h1。
2.  除了h1之外，其他标签可以在一个html中多次使用
3.  h5，h6 一般不怎么用

### \- 路径的引入方式 ###

1.  **相对路径**：针对当前文件进行路径的引入方式。

*  同一个目录下： ./…
 *  下一级目录下：./ img/pic/…
 *  上一级目录下：…/ img/pic/…（此处显示的问题，前面上级目录的标记内容中是两个 . + 一个 / ）

1.  **绝对路径**：跟当前文件没有关系了，只要知道绝对的地址，就可以引入。  
    **eg：** E:/ke/qf\_dl201901/20190108/img/animal/dog.jpg  
             https://www.csdn.net/

**注意: 写绝对路径不要写中文，否则中文会被解析**

### \- 如何实现跳转锚点 ###

1.  **实现一**  
    \#+ id属性
2.  **实现二**  
    \#+ name属性

<a href="#html">Html</a>
    
    <h2 id="html">Html的介绍</h2>

### \- 关于HTML5 与 XHTML区别 ###

HTML4.01 -> HTML5( 功能强大 )  
XHTML : XML + HTML ( 严格版本的HTML )  
发展 XHTML2.0

#### 区别 ####

**1. DOCTYPE文档及编码**  
HTML5 :

<!DOCTYPE html>

XHTML和HTML4.01 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5 :

XHTML和HTML4.01 :

**2. 元素大小写**  
HTML5 和 HTML4.01 : 不区分大小写的，建议都写成小写(规范)

XHTML : 要求必须小写。

**3. 属性布尔值**  
HTML5和 HTML4.01 : 属性和属性值相同的时候，可以只写一个

XHTML : 属性和属性值必须都写

**4. 属性引号**  
HTML5和 HTML4.01 : 属性值是可以不加引号的，但是建议添加（规范）

XHTML : 属性值必须加引号  
**eg：**

**5. 图片的alt属性**  
HTML5和 HTML4.01 : 图片的时候alt属性可加可不加。

XHTML :

**6. 单标签写法**  
HTML5和 HTML4.01 :

XHTML :

**7. 双标签闭合**  
HTML5和 HTML4.01不闭合也能识别 :

<div>这是一个盒子  (不建议写法)

XHTML : 双标签必须成对

<div>这是一个盒子</div>

### \- 常用HTML5新语义化标签 ###

常用的语义化标签：  
`header` : 页眉  
`footer` : 页脚  
`main` : 主体  
`hgroup` : 标题组合  
`nav` : 导航  
`article` : 独立的内容，常用场景；

*  论坛帖子
 *  报纸文章
 *  博客条目
 *  用户评论  
    `aside` : 辅助信息的内容  
    `section` : 区域 , 跟div的功能以及语义是一样的  
    `figure` : 描述图像或视频  
    `figcaption` : 描述图像或视频的标题部分  
    **注：`header` `footer` `main` 语义化标签在一个页面中只能出现一次。**

### \- 列表标签类型 ###

**关于无序列表标签的属性：**:

1.  type=“disc” 是实心圆
2.  type=“circle” 是空心圆
3.  type=“square” 是实心方块

**关于有序列表标签的属性：**

1.  type=“数字” 是从该数字往后数的数字排序
2.  type=“a” 是小写字母排序
3.  type=“A” 是大写字母排序
4.  type=“i” 是小写罗马字母排序
5.  type=“I” 是大写罗马字母排序

### \- 表格中的对齐属性 ###

align：左右对齐属性，left居左，center居中，right居右  
valign：上下对齐属性，top居上，middle居中，bottom居下，baseline与基线对齐。

ok，Html相关知识里比较常用而且需要记住的零碎的知识点就说到这里了，下次说说CSS里的常用要点及易忽略的点。