本文主要内容
- html 的常见元素
- html 元素的分类
- html 元素的嵌套关系
- html 常见面试题
html 的常见元素
html 的常见元素主要分为两类:head 区域的元素、body 区域的元素。下面来分别介绍。
1、head 区域的 html 元素
- head 区域的 html 元素,不会在页面上留下直接的内容。
- meta
- title
- style
- link
- script
- base
base元素的介绍:
<base href="/">
base 标签用于指定基础的路径。指定之后,所有的 a 链接都是以这个路径为基准。
2、html 元素(body 区域)
- body 区域的 html 元素,会直接出现在页面上。
- div、section、article、aside、header、footer
- p
- span、em、strong
- 表格元素:table、thead、tbody、tr、td
- 列表元素:ul、ol、dl、dt、dd
- a
- 表单元素:form、input、select、textarea、button
div 是最常见的元素,大多数场景下,都可以用div(实在不行就多包几层div)。可见,div 是比较通用的元素,这也决定了 div 的的语义并不是很明确。
HTML元素的分类
按照样式分类:
- 块级元素
- 行内元素
- inline-block:比如form表单元素。对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以设置宽高)。
按照内容分类:
图片来源:https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content
html 元素的嵌套关系
- 块级元素可以包含行内元素。
- 块级元素不一定能包含块级元素。比如 div 中可以包含 div,但 p 标签中不能包含 div。
- 行内元素一般不能包含块级元素。比如 span 中不能包含 div。但有个特例:在 HTML5 中, a 标签中可以包含 div。
注意:在 HTML5 中 a > div 是合法的, div > a > div是不合法的 ;但是在 html 4.0.1 中, a > div 仍然是不合法的。
html 常见面试题
1、doctype 的意义是什么
让浏览器以标准模式渲染
让浏览器知道元素的合法性
2、HTML、XHTML、HTML5的区别
HTML 属于 SGML
XHTML 属于 XML,是 HTML 进行 XML 严格化的结果
HTML5 不属于SGML,也不属于 XML(HTML5有自己独立的一套规范),比 XHTML 宽松。
3、HTML5 有什么新的变化
新的语义化元素
表单增强
新的API:离线、音视频、图形、实时通信、本地存储、设备能力等。
4、em 和 i 的区别
共同点:二者都是表示斜体。
区别:
em 是语义化的标签,表示强调。
i 是纯样式的标签,表示斜体。HTML5 中不推荐使用。
5、语义化的意义是什么
开发者容易理解,便于维护。
机器(搜索引擎、读屏软件等)容易理解结构
有助于 SEO
6、哪些元素可以自闭和
自闭和的元素中不能再嵌入别的元素。且 HTML5 中要求加斜杠。
表单元素 input
图片 img
br、hr
meta、link
7、form 表单的作用
直接提交表单
使用 submit / reset 按钮
便于浏览器保存表单
第三方库(比如 jQuery)可以整体获取值
第三方库可以进行表单验证