HTML元素分类、嵌套关系、默认样式、面试真题

HTML元素分类

按样式分

block	块级 单独一行，块状
inline	行内/内联 不一定什么形状
inline-block	内联块级

<div>DIV元素</div>
<p><span>内联元素</span><em>内联元素</em><strong>好巧，我也是内联元素</strong></p>
<p><select><option>下拉框</option></select><span>你猜左边是什么元素</span></p>

按内容分

HTML 元素嵌套关系

块级元素可以包含行内元素
块级元素不一定能包含块级元素
行内元素一般不能包含块级元素
特殊：<a>元素可以包含块级元素

为什么a包含div是合法的？HTML5的嵌套关系按内容划分类来计算, a 是transparent content model a前面是body则合法，a前面是p ，就不合法。
主流浏览器都支持

严格嵌套需要查文档 ，查content model
或者用w3c提供的文档查错工具https://validator.w3.org/

HTML元素默认样式

默认样式的意义
复杂样式有初始默认状态，减少我们的工作量

默认样式带来的问题
美化成本高。

CSS Reset ：

https://meyerweb.com/eric/tools/css/reset/

一个写法 *表示对任何元素都适用 非常简单的css reset。但是有争议。性能问题。问题不大。

<style>
	*{
		margin: 0;
		padding: 0;
	}
</style>

HTML面试真题

doctype的意义是什么

让浏览器以标准模式渲染
让浏览器知道元素的合法性

HTML XHTML HTML5 的关系

HTML属于SGML
XHTML属于XML，是HTML进行XML严格化的结果
HTML5不属于SGML或XML，比XHTML宽松

HTML5有什么变化

新的语义化元素
表单增强
新的API（离线、音视频、图形、实时通信、本地存储、设备能力）
分类和嵌套变更

em和i有什么区别

em是语义化的标签，表强调
i是纯样式的标签，表斜体
HTML5中i不推荐使用

语义化的意义是什么

开发者容易理解
机器容易理解结构（搜索、读屏软件）
有助于SEO
semantic microdata(一个规范，进一步语义化)

哪些元素可以自闭合

表单元素input
图片img
br hr
meta link

HTML和DOM的关系

HTML是“死”的
DOM由HTML解析而来，是活的
JS可以维护DOM

property和attribute的区别

attribute是“死”的，固定的
property是“活”的，变化的

form的作用由哪些

直接提交表单
使用submit/reset按钮
便于浏览器保存表单
第三方库可以整体提取值
第三方库可以进行表单验证