HTML基础知识普及

HTML常用元素

meta/title/style/link/script/base

<meta charset="utf-8"> 规定页面的字符编码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> meta name="viewport" viewport视口：手机屏幕/电脑屏幕等设备的视口有多大 width=device-width: 视口宽度=设备宽度 initial-scale=1.0: 初始化的缩放比例是1 maximum-scale=1.0: 最大缩放是1 user-scalable=no: 用户不能缩放

<base href="/"> 框架中用于指定 其它文件路径的基准路径

div: 是 层？ 是 区域？ 是 容易？ 由于语义不明确，似乎可以是任意一种。 section, article, aside, header, footer: 有明确含义的 一块区域 p: 段落 span/em/strong: 行内元素(em, strong 带默认样式：em斜体 strong粗体)

table/thead/tbody/tr/td:表格相关元素。 tr(table row)表格中的一行，td(table data)单元格。 thead封装整行，将该行作为表头 th：将tr中的第一个单元格 设置为 标题单元格

ul/ol/li/dl/dt/dd:列表相关的元素。 ul(unordered list无序列表) ol(ordered list有序列表) li(list item列表项) dl(defined list定义的列表) dt(defined title定义的标题) dd(defined data定义的内容)

a:链接

form/input/select/textarea/button:表单 输入框 下拉框 文本输入区域 按钮

HTML重要属性

• a[href, target] target:在哪儿打开链接，默认在当前窗口打开。target=blank新窗口打开
• img[src, alt] alt:alternative替代资源，一般为文字
• table td[colspan, rowspan] 单元行 需要占用多行/多列，使用colspan rowspan属性
• form[target, method, enctype] target: 表单提交地址 method: 提交方式)post get) enctype: encode type 编码类型(对post而言) urlencode(提交文本) formdata(把数据进行编码后 进行提交。因此，可以上传文件)
• input [type, value, name, id]
• button[type]
• select>option[value]
• label[for] 与表单项 相关联。点击某个label时，相当于点击 该label对应的表单项。用于单选框 复选框

如何理解HTML

• 描述网页内容各个部分之间的 结构关系

H5新增内容

• 新区块标签
  • section
  • article
  • nav
  • aside
• 表单增强
  • input新增类型：日期，时间，搜索
  • 表单验证: required, min, max, pattern
  • placeholder autofocus

H5新增语义

• header/footer: 即可表示 网站的头部，也可表示 区块的头部(比如article中 可以包含header footer)
• section/article: div是没有语义的 区块(当找不到合适的语义标签时，就使用div). section和article相比，section适用于更琐碎的信息
• nav：navigate
• aside: 侧边栏
• em/strong: emphasis(斜体)/strong(加粗)
• i: icon图标

HTML元素分类

可以按样式，按功能(区块，链接，表单元素)

• 按默认样式分：
  • block块：呈方块形状，默认会占据整行(div section article aside)
  • inline行内元素/内联元素：没有 规则的形状，不会独占一行(跟文本相关的元素 span em strong)
  • inline-block: 可以像inline元素一样 和其它元素 在同一行。对外像inline元素，对内 像block元素(形状可能是块状，有自己的宽高尺寸等)。 (inline-block: 一些表单元素，下拉框 输入框)

div, p 都是块级元素 span, em, strong 都是inline元素 select 是inline-block元素

• 按内容分(content model)：
  • Flow: 在文档流中 有一些影响的元素(大部分可见的元素 都属于flow元素)
  • Metadata：表示信息的元素，有一些metadata不在flow中，html中head中的title，base，script等，这些标签是不占据文档流的。
  • Heading：h1-h6标题，hgroup
  • Sectioning: 主要是一些分区的元素，比如section article aside nav
  • Interactive：有交互/互动的元素(和用户有交互)， 链接(点了链接就跳转了). 比如 a, audio, button等 和用户有交互的元素
  • Phrasing: 这部分的元素 大都属于inline类型的元素，被包含在一个段落中 是段落的一部分。phrasing本身并不是完整的(只是其他元素中的一部分)，比如em(一句话中可能有两个需要强调的词组，就使用em包裹)。
  • Embeded: 可嵌入的元素(是嵌入别的元素中，还是被嵌入？)一些元素 可以在其中 嵌入其他元素。比如audio video img

Flow content

Phrasing content

Interactive content

Embeded content

Metadata content

HTML元素的嵌套关系

哪些元素 可以出现在 哪些地方，哪个元素 可以被另一个元素包含。

基本原则：

• 块级元素(block) 可以包含 行内元素(inline). 比如div元素可以包含(a, span)
• 块级元素 不一定 能包含块级元素 块级 包含 块级：div包div, section包div。 块级元素(段落p) 不能包含 块级元素(div)
• 行内元素 一般不能包含 块级元素 span包div 是不行的。 行内元素(a元素) 可以包含 块级元素(div)。

HTML的嵌套关系 依赖于：

* 元素的分类
* content model

HTML元素默认样式

html不写样式时，会有 默认的样式

* 默认样式的意义：
    如果默认没有样式 需要对每个元素定义 各种基础的样式，增加了 开发人员的负担。
* 默认样式 会带来问题：
    有些默认样式 是我们不想要的，需要清除默认样式 再写一些自己需要的样式。
    比如下拉框是没办法清除 默认样式的，此时 需要的定制成本 是很高的。
    有些样式 不同浏览器的处理结果 是不同的
* css reset
    有些样式 是我们不想要的，统一去掉
    有些样式 不同浏览器的处理结果 不一样，显式地统一
css reset的简单粗暴方式：
    *{
        margin:0;
        padding:0;
    }
浏览器在查找元素时，使用的是什么策略？如果我用*，会不会一个一个的去匹配元素 会不会比较慢

HTML面试真题

* 1. doctype的意义是什么？
    对盒子模型 进行标准的处理(width看做content-width)
    让浏览器知道 元素书写方法的合法性(doctype: html4, xhtml)

* 2. html, xhtml, html5的关系
    html属于SGML的一个应用(SGML是一个通用的标记语言，xml也是SGML的一个应用)
    xhtml属于xml，是html进行xml严格化的结果
    html5是个独立的规范，不属于SGML或XML，书写方式上 html5比XHTML宽松
* 3.html5 有什么变化？
    变化是 相对于html4 和xhtml而言的
    * 增加 新的语义化元素，比如section article nav aside header footer, 便于书写 更富有语义的结构。把之前语义不强的i,b元素 都不推荐使用了。
    * 表单增强，包括新的元素 和 表单验证。
    * 新的API(离线application cache, 音视频，图形canvas，实时通信websocket，本地存储local storage，设备能力 包括定位 获取加速计 陀螺仪的状态)
    * 元素分类和嵌套的变更，html5对元素 重新进行了分类，嵌套规则也有一些变化，但是 推理的过程 完全变了，因为分类变化了。比较明显的就是a元素的变化，a能否包含 块级元素，取决于a外面的元素是什么 
* 4. em和i有什么区别
    主要是语义化上面的变化，em和i的默认样式 都是斜体的。
    * em是语义化的标签，表强调
    * i是纯样式的标签，表斜体 其没有强调的意思
    * html5中不推荐使用i，一般把i作为图标 表示icon的含义
* 5.语义化的意义是什么
    * html文档 按照语义化去编写 读起来就会 很容易，能够一眼看到它的大纲 开发者就容易理解
    * 也是机器容易理解的结构(比如 搜索引擎，读屏软件)
        如果大纲写的好，机器就容易理解你的页面 
    * 有助于SEO
    * 不要到处用div，需要section就用section 需要article就用article
    * semantic microdata,这是另外一个规范 会在html中添加一些新的标记，让后去标注 这个东西 是什么。对页面中的元素 做进一步的语义化标记 方便搜索。
* 6.哪些元素可以自闭合
    不是所有的元素里面 都可以放别的元素的，有些元素就是放在那儿 它里面就没有别的元素了。常见的有以下这些元素：
    * 表单元素input(input框内 不能有其他元素)
    * 图片img(不能在图片中嵌入 别的元素)
    * br hr（br换行  hr水平线）
    * meta link(元信息：meta link)
* 7.HTML和DOM的关系
    * HTML是写好的带结构的文本，是'死'的
    * DOM是 由HTML 经过浏览器解析 而来的，DOM是存在于浏览器内存中的 一个树状的结构, 是'活'的
    * JS维护DOM
* 8.property和attribute的区别
    一般都译作'属性'，认为：property是'特性' attribute是'属性'. 
    * 写在html中的 被认为是 attribute
    * property一般被用在 (html经过解析之后的得到的dom)dom元素中
        调试技巧，在inspect查看器中选中的元素 在console中有个名称'$0'. 使用'$0'，可以查看选中元素的一些属性。
* 9.form的作用有哪些
    使用form有很多好处，就算是用ajax提交数据 也应该加上form。
    * 直接提交表单(直接用get/post的方式 进行表单提交)，必须有form
    * 表单和submit/reset配合，submit可以提交表单 reset可以重置表单
    * 使用form 可以使 浏览器记录下 表单中的数据
    * 第三方库 可以整体提取值
        jquery中的serialize 可以把表单中的值 
    * 第三方库 在有form时，才能进行表单验证