Html+CSS常用要点及易错点归纳（一）
最近回顾html和css相关知识的时候，发现很多零碎的知识有些遗忘，所以这里总结归纳一下，既方便我自己的记忆，大家也能一起回顾一下，看看你都记全了吗。
今天先来说说html的相关知识点：
Html 相关点：
- 文件的命名规范
小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；
必须以英文字母开头。 eg： goods_iphone_1000.html
- Html语义化
含义： 什么样的结构，采用什么样的标签。
好处：
- 在没有CSS的情况下，页面也能呈现出很好的内容结构。
- 有利于SEO，让搜索引擎爬虫更好的理解网页。
- 方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
- 便于团队开发与维护。
- Html标签的分类特点
Html标签按类型分可以分为：块、内联、内联块，其中
块标签特点：
- 块是上下排列的 ，块是独占一行的。(霸道的小总裁)
- 块，支持CSS中的所有样式。
- 当块不写宽度的时候，默认的宽度是父容器的宽。
- 块永远都是一个矩形区域
内联标签特点
- 内联是左右排列的，内联必须在一起（粘人的小公举）
- 内联，有些样式是不支持的 width height margin(一部分) padding(一部分)
- 内联元素的宽度就是由内容决定的。
- 不一定总是矩形区域。（了解）
- 两个内联元素之间会有一个空隙（折行带来的空隙）
一般情况下，要不要解决这个空隙问题：一般情况下是不需要的，因为一般我们都是用块来做布局的，用内联元素来做文本修饰的。如果需要解决此问题，方法有：
- 让内联元素写到一行上。
- 给父容器设置font-size:0;再给当前元素设置正常的文字大小。
注意：如果块元素内有文本会以文本的基线对齐。
- 标签的强调效果
- 加粗
strong标签表示强调，但同时有加粗文本的效果
b标签虽然是加粗标签，但是没有语义化 - 斜体
em标签也表示强调，并能给文本定义斜体，但是语气没有strong的语气强烈
i标签虽然是斜体标签，但是没有语义化
- 标签的嵌套规范
标签本身就是有很多嵌套规范的，例如：
table > tr ， ul(ol) > li ， dl > dt ，
这些标签之间必须紧密相接，不能插入其他标签。
- 块标签可以嵌套内联标签
eg：
<div>
<span>span>
div>
- 块标签不一定能嵌套块标签
<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。表格也是有嵌套规范的。
- 关于表单
- form必须要有action属性，表示提交地址
- 所有需要提交的数据，input必须要有name属性
- input按钮文字，使用value属性表示
- input必须放在form标签内才能提交
- get请求和post请求的区别
- get请求通常表示获取数据
- post请求通常表示提交数据
- get请求发送的数据都写在地址栏上，用户可见，安全性较差
- post请求发送的数据用户不可见，安全性较好
- get请求不能提交大量数据，但post可以，因此不要混用
- 标题标签的使用规范
- h1是网页中最重要的标题标签，每一个网页，每一个html文件中，只能有一个h1。
- 除了h1之外，其他标签可以在一个html中多次使用
- h5，h6 一般不怎么用
- 路径的引入方式
- 相对路径：针对当前文件进行路径的引入方式。
- 同一个目录下： ./…
- 下一级目录下：./ img/pic/…
- 上一级目录下：…/ img/pic/…（此处显示的问题，前面上级目录的标记内容中是两个 . + 一个 / ）
- 绝对路径：跟当前文件没有关系了，只要知道绝对的地址，就可以引入。
eg： E:/ke/qf_dl201901/20190108/img/animal/dog.jpg
https://www.csdn.net/
注意: 写绝对路径不要写中文，否则中文会被解析
- 如何实现跳转锚点
-
实现一
#+ id属性 -
实现二
#+ name属性
<a href="#html">Htmla>
<h2 id="html">Html的介绍h2>
- 关于HTML5 与 XHTML区别
HTML4.01 -> HTML5( 功能强大 )
XHTML : XML + HTML ( 严格版本的HTML )
发展 XHTML2.0
区别
1. DOCTYPE文档及编码
HTML5 :
XHTML和HTML4.01 :
HTML5 :
<meta charset="UTF-8">
XHTML和HTML4.01 :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
2. 元素大小写
HTML5 和 HTML4.01 : 不区分大小写的，建议都写成小写(规范)
<div>div> <span>span>
<DIV>DIV> <SPAN>SPAN>
XHTML : 要求必须小写。
3. 属性布尔值
HTML5和 HTML4.01 : 属性和属性值相同的时候，可以只写一个
<input type="checkbox" checked>
XHTML : 属性和属性值必须都写
<input type="checkbox" checked="checked">
4. 属性引号
HTML5和 HTML4.01 : 属性值是可以不加引号的，但是建议添加（规范）
<input type=checkbox>
XHTML : 属性值必须加引号
eg：
<input type="checkbox">
5. 图片的alt属性
HTML5和 HTML4.01 : 图片的时候alt属性可加可不加。
<img src="">
XHTML :
<img src="" alt="">
6. 单标签写法
HTML5和 HTML4.01 :
<img src="">
<input type="">
XHTML :
<img src="" />
<input type="" />
7. 双标签闭合
HTML5和 HTML4.01不闭合也能识别 :
<div>这是一个盒子 (不建议写法)
XHTML : 双标签必须成对
<div>这是一个盒子div>
- 常用HTML5新语义化标签
常用的语义化标签：
header : 页眉
footer : 页脚
main : 主体
hgroup : 标题组合
nav : 导航
article : 独立的内容，常用场景；
- 论坛帖子
- 报纸文章
- 博客条目
- 用户评论
aside: 辅助信息的内容
section: 区域 , 跟div的功能以及语义是一样的
figure: 描述图像或视频
figcaption: 描述图像或视频的标题部分
注：headerfootermain语义化标签在一个页面中只能出现一次。
- 列表标签类型
关于无序列表标签的属性：:
- type=“disc” 是实心圆
- type=“circle” 是空心圆
- type=“square” 是实心方块
关于有序列表标签的属性：
- type=“数字” 是从该数字往后数的数字排序
- type=“a” 是小写字母排序
- type=“A” 是大写字母排序
- type=“i” 是小写罗马字母排序
- type=“I” 是大写罗马字母排序
- 表格中的对齐属性
align：左右对齐属性，left居左，center居中，right居右
valign：上下对齐属性，top居上，middle居中，bottom居下，baseline与基线对齐。
ok，Html相关知识里比较常用而且需要记住的零碎的知识点就说到这里了，下次说说CSS里的常用要点及易忽略的点。