`HTML`

`HTML`常见元素

`head`区

特点：不会在页面上留下直接的内容，主要负责页面的一些资源和描述的加载
meta
- 作用：提供有关页面的元信息(meta-information),比如编码格式
- 常见属性：
  - 【1】charset,表示编码格式，一般值为"UTF-8";<meta charset="UTF-8">
  - 【2】name,提供了名称/值对中的名称,常见的有值有
    - 【2-1】keywords,搭配content属性使用做SEO优化;<meta name="keywords" content="HTML,ASP,PHP,SQL">
    - 【2-2】viewport,搭配content属性使用定义一些用户使用视口的限制;<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no"">依次表示视口宽度等于设备宽度,初始化缩放比例为1.0,最大缩放比例1.0,用户不可以缩放
title、style、link、script、
base
- 作用：页面上的所有链接规定默认地址或默认目标<base href="/">
- 常见属性:
  - 【1】href,值为URL路径,规定页面中所有相对链接的基准 URL(必选属性)
  - 【2】target,值为_blank,_parent,_self,_top,framename,在何处打开页面中所有的链接(非必选属性)

`body`区

div、section、article、aside、header、footer
p
span、em、strong
table、thead、tbody、tr、td
ul、ol、li、dl、dt、dd
a
form、input、select、textarea、button

`HTML`的理解

所谓的html可以理解为一个文档,由描述文档的结构组成(标题，摘要，正文···),有区块和大纲;这样做的好处是有利于爬虫去爬取,SEO优化,更加具有语义化等

`HTML`的版本对比

语法对比

HTML4	XHTML	HTML5
标签允许不结束	标签必须结束	标签允许不结束
属性不用带引号	属性必须带引号	属性不用带引号
标签/属性可大写	标签/属性必须小写	标签/属性可大写
Boolean属性可省略值	Boolean属性必须写值	Boolean属性可省略值

`HTML5`新增内容

新区块标签
- section
- article
- nav
- aside
表单增强(form,input)
- input新增类型,比如日期、时间、搜索等
- 表单验证:通过增加required,max···属性对表单进行校验
- placeholder
- 自动聚焦(autofocus)
新增语义
- header/footer标签表示头尾
- section/article表示区域
  - 和div的区别，div没有任何语义，在不明确当前区域是做什么的时候使用并且div不会计入页面大纲的算法计算范围
- nav导航
- aside侧边栏。表示一些不是很重要的内容，比如网址的简介，友情链接等不会进入页面大纲的内容
- em/strong强调
- iicon

`HTML`元素分类

按默认样式分

块级(block)
- 【1】是一个方块的形状
- 【2】默认会占据整行，不会给其它元素留出空间
- 【3】可以设置宽高
行内(inline)
- 【1】不一定是方形的也可以说它不一定是有规则形状的
- 【2】不会独占一行
- 【3】不可以设置宽高
行内块级(inline-block)
- 【1】是一个方块的形状
- 【2】不会独占一行
- 【3】可以设置宽高

按内容分

Flow
- 对文档流有一定影响的元素
Metadate
Heading
- h1~h6
Sectioning
- section,article,aside,nav
Interactive
- 有互动的元素：跟用户有交互的元素，比如a,button,select等
Phrasing
- 一些零碎的文本片段,一般是行内元素
Embedded
- 嵌入其它资源的一些元素比如audio,vidio,img等

参考链接

`HTML`元素的嵌套关系

基本原则

块级元素可以包含行内元素
块级元素不一定能包含块级元素
- p不能包含div,section等
行内元素一般不能包含块级元素
- 提到一般就肯定有特殊的，这个特殊的就是a可以包含块级元素

常见问题

【1】a>div是不是合法的？为什么？参考文档
- 根据W3C的html5的规范中，元素a的内容模式(Content model),在其包含块级元素的时候可以认为它是透明的，即浏览器在计算盒模型的时候不会讲其计算进去，所以这个答案是不一定合法的；如下例中，当我们将a标签看成透明的后，第一个div直接被body包裹，合法；第二个div直接被p包裹，不合法。
```
<body>
    <a href="https://www.baidu.com">
        <div>合法的</div>
    </a>
    <p>
        <a href="https://www.baidu.com">
            <div>不合法的</div>
        </a>
    </p>
   
</body>
```

`HTML`元素的默认样式

默认样式的意义

试想一个场景哈，当用户访问我们的网站的时候此时用户的网络很差，在没加载css的时候我们更希望的是用户可以看到我们页面的结构，和拥有一定的功能，比如select下拉框。所以说html默认样式的意义对我们来说是很重要的

默认样式带来的问题

表单样式需要重写，因为默认样式很丑很难满足日常的开发

`CSS Reset`

`HTML`面试真题

【1】`doctype`的意义是什么？

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

【2】`HTML`,`XHTML`,`HTML5`的关系？

HTML是属于SGML的一个应用,SGML是一个非常通用的标记语言
XHTML是属性XML的一个应用,是HTML进行XML严格化的结果
HTML5不属于SGML或XML,它自己是一个独立的规范,比XHTML更加宽松

【3】`HTML5`有什么变化？

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

【4】`em`和`i`有什么区别？

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

【5】语义化的意义是什么？

开发者容易理解
机器容易理解结构(搜索、读屏软件)，大纲算法
有助于SEO优化
semantic microtata规范

【6】哪些元素可以自闭合？

表单元素input
图片img
br,hr(水平线)
meta,link

【7】`HTML`和`DOM`的关系

HTML是‘死’的
DOM是HTML解析而来的，是活的
JS可以维护DOM

【8】`property`和`attribute`的区别？

attribute是‘死’的
property是‘活’的

【9】`form`的作用有哪些？

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

重学HTML

HTML

HTML常见元素

head区

body区

HTML的理解

HTML的版本对比

语法对比

HTML5新增内容

HTML元素分类

按默认样式分

按内容分

HTML元素的嵌套关系

基本原则

常见问题

HTML元素的默认样式

默认样式的意义

默认样式带来的问题

CSS Reset

HTML面试真题

【1】doctype的意义是什么？

【2】HTML,XHTML,HTML5的关系？

【3】HTML5有什么变化？

【4】em和i有什么区别？

【5】语义化的意义是什么？

【6】哪些元素可以自闭合？

【7】HTML和DOM的关系

【8】property和attribute的区别？

【9】form的作用有哪些？

`HTML`

`HTML`常见元素

`head`区

`body`区

`HTML`的理解

`HTML`的版本对比

`HTML5`新增内容

`HTML`元素分类

`HTML`元素的嵌套关系

`HTML`元素的默认样式

`CSS Reset`

`HTML`面试真题

【1】`doctype`的意义是什么？

【2】`HTML`,`XHTML`,`HTML5`的关系？

【3】`HTML5`有什么变化？

【4】`em`和`i`有什么区别？

【7】`HTML`和`DOM`的关系

【8】`property`和`attribute`的区别？

【9】`form`的作用有哪些？