Web学习历程（五）

待我称王封你为后i 2022-12-09 02:50 190阅读 0赞

# 本文主要内容 #

*  html 的常见元素
 *  html 元素的分类
 *  html 元素的嵌套关系
 *  html 常见面试题

## html 的常见元素 ##

html 的常见元素主要分为两类：head 区域的元素、body 区域的元素。下面来分别介绍。

**1、head 区域的 html 元素**

- head 区域的 html 元素，不会在页面上留下直接的内容。

*  meta
 *  title
 *  style
 *  link
 *  script
 *  base

**base元素的介绍：**

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表单元素。对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。

**按照内容分类：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5NjM1Mw_size_16_color_FFFFFF_t_70_pic_center]图片来源：[https://html.spec.whatwg.org/multipage/dom.html\#kinds-of-content][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）可以整体获取值
    
    第三方库可以进行表单验证

摘自：[https://github.com/qianguyihao/Web/tree/master/01-HTML][https_github.com_qianguyihao_Web_tree_master_01-HTML]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5NjM1Mw_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200921165349252.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA5NjM1Mw==,size_16,color_FFFFFF,t_70#pic_center
[https_html.spec.whatwg.org_multipage_dom.html_kinds-of-content]: /images/20221123/4e946def33684bc0a10dbbbe191952c1.png
[https_github.com_qianguyihao_Web_tree_master_01-HTML]: https://github.com/qianguyihao/Web/tree/master/01-HTML