版权声明：作者已开启版权声明，如转载请注明转载地址。 https://blog.csdn.net/qq_34829447/article/details/84311861
一.HTML常见元素和理解
1.<head>中的元素
- 不会在页面中留下直接的内容
- 元素内容meta/title/style/link/script/base
2.<body>中的元素
- 直接出现在页面上的元素
- 块级元素div/section/article/aside/header/footer
- p段落
- 行内元素span/sm/strong
- 表格相关元素table/thread/tbody/tr/td
- 列表类元素ul/ol/li/dl/dt/dd
- 链接a
- 表单元素form/input/select/textarea/button
3.常见元素讲解
<meta charset="utf-8">表示页面的字符集，保证页面不出现编码问题<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no>"设置视口信息（适配移动端）<base href="/">指定基准路径，如果使用a的href是"p"，则它的匹配路径是"/p"
4.HTML重要属性
a[href连接地址,target在哪里打开连接]img[src,alt替换资源（src不可用时，显示alt资源名）]table td[colspan,rowspan]form[target表单提交到哪里,method,enctype编码格式]input[type,value]button[type]select>option[value]label[for]
二.HTML版本
1.如何理解HTML
- HTML文档
- 描述文档的结构
- 有区块和大纲
2.HTML版本
- HTML4/4.01(基于SGML标记语言写的)【SGML是XML的超集】，容错性特别好，开发者觉得不规范
- 标签允许不结束
- 属性不用带引号
- 标签属性可大写
- Boolean属性可省略值
- XHTML(基于XML)，要求所有的标签、属性都是小写的且都要有值。要求更加严格
- 标签必须结束
- 属性必须带引号
- 标签属性必须小写
- Boolean属性必须写值
- HTML5基于HTML4，不要求所有的属性都有值等问题
- 标签允许不结束
- 属性不用带引号
- 标签属性可大写
- Boolean属性可省略值
3.HTML5新增内容
- 新区块标签
- section
- Article
- nav
- aside
- 表单增强
- 日期、时间、搜索
- 表单验证
- Placeholder，autofocus自动聚焦
- 新增语义
- header/footer头尾
- section/article区域（div是没有语义的）
- nav导航
- aside不重要的内容
- em/strong强调
- i icon
三.HTML元素的分类
- 按默认样式分
- 块级block
- 行内inline
- Inline-block
- 按内容分：Flow等等…
四.HTML元素嵌套关系
- 块级元素可以包含行内元素
- 块级元素不一定能包含块级元素【如p中不能有div】
- 行内元素一般不能包含块级元素【如span中不能有div，a元素中可以包含块级元素】
- 为什么a包含div是合法的？
- 如一大块的广告都是超链接
- 在按内容分时，a是transparent，即透明的，查看时可以去掉，故出现如下场景
<a href="#"><div>hhh~</div></a>a是透明的，拿掉依然合法<p><a href="#"><div>hhh~</div></a></p>a是透明的拿掉，p中不能有div，故不合法。浏览器会有容错性，会自动转换成其他格式的嵌套
- 验证嵌套是否合法
- 使用验证工具
- 查看对应文档
五.HTML元素默认样式和定制化
1.默认样式的意义
- 如果使用对应的标签后没有默认样式用户体验不好，所以标签都会有默认样式
2.默认样式带来的问题
- 下拉框等标签无法覆盖默认样式等…
- 如li自带的样式会左侧有padding，小圆圈是在padding内的。我们可以通过设置
list-style-position:inside决定小圆圈作为元素内的，padding设为0则不会隐藏。
3.移除默认样式
-
使用CSS RESET:CSS RESET是一个CSS文件，主要用于移除HTML元素默认样式
-
直接自定义css移除默认样式
<style> *{ margin:0; left:0; } </style> -
使用Normalize.css作为另一种重置HTML默认样式的css，不是都归0，而是统一成另一种样式
六.HTML面试真题
1.doctype的意义是什么
- 让浏览器以标准模式渲染（带padding,margin作为元素本身大小）
- 让浏览器知道元素的合法性
2.HTML、XHTML、HTML5的关系
- HTML属于SGML
- XHTML属于XML，是HTML进行XML严格化的结果
- HTML不属于SGML或XML，比XHTML宽松
3.HTML5有什么变化
- 新的语义化元素（saction、article、nav等）
- 表单增强
- 新的API（离线application cache、音视频、图形、实时通信web socket、本地存储、设备能力）
- 分类和嵌套更变
4.em和i有什么区别
- em是语义化的标签，表强调
- i是纯样式的标签，表斜体
- HTML5不推荐使用i，一般用作图标
5.语义化的意义是什么
- 开发者容易理解（可以看到大纲）
- 机器容易理解机构（搜索、读屏、软件）
- 有助于SEO
- semantic microdata（另一些规范，在HTML中添加其他标记，用于记录HTML是什么）
6.哪些元素可以自闭合
- 表单元素input
- 图片img
- br hr
- meta link
7.HTML和DOM的关系
- HTML是死的（是文本-字符串）
- DOM是HTML解析而来的，是活的
- JS可以维护DOM
8.property和attribute的区别（DOM中）
- attribute是死的（写在HTML中的）
- property是活的（经解析之后显示在DOM中的）
- attribute和property的改变不会互相影响
9.form的作用有哪些
- 直接提交表单
- 使用submit/reset按钮
- 便于浏览器保存表单
- 第三方库可以整体提取值（序列化时）
- 第三方库可以进行表单验证（如angular）