HTML知识梳理（笔记）

HTML常见元素

meta

定义和用法
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

base
定义和用法
<base> 标签为页面上的所有链接规定默认地址或默认目标。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

Html5新增标签

新区块标签

• section
• artical
• nal
• aside

表单增强

• 日期、时间、搜索
• 表单验证
• placeholder自动聚焦

html新增语义

HTML元素分类

按默认样式分

• 块级block
• 行内 inline
• inline-block

按内容分类：
按内容分类

HTML的嵌套关系

• 块级元素可以包含行内元素。
• 块级元素不一定能包含块级元素。
• “行内元素一般不能包含块级元素”

a标签里为何可以包含div（点击图片转到链接）
答案，在a标签中包含div不一定合法，因为a是一个透明的内容模型，在嵌套关系中会被忽略，合不合法要看a前面那个标签。

参考链接

HTML默认样式问题

处理浏览器的默认样式。
css Reset解决方案

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

• Normailze.css
• YuI的css reset

问题

1. doctype的意义是什么？
2. HTML XHTML HTML5的关系。
3. HTML5有什么变化。
4. em和i有什么区别？
5. 语义化的意义是什么？
6. 哪些元素可以自闭和？
7. HTML和DOM的关系。
8. propetry和attribute的关系。
9. form的作用有哪些？

答案

1. 让浏览器以标准模式渲染。
   让浏览器知道元素的合法性。
2. HTML属于SGML。
   XHTML属于XML，是HTML进行XML严格化的结果。
   HTML5不属于SGML或XML，不XHTML宽松。
3. 新的语义化元素。
   表单增强。
   新的API（离线、音视频、图形、实时通信、本地储存、设备能力）
   分类和嵌套变更。
4. em是语义化标签，表强调
   i是纯样式标签，表斜体
   HTML5中i一般用作图标
5. 开发者容易理解。
   机器容易理解结构（搜索、读屏软件）
   有助于SEO优化。
   semantic micordata
6. 表单元素 input
   图片 img
   br hr
   meta link
7. HTML是一段文本，是一页字符串，是“死”的。
   DOM是浏览器解析出来的结构，是“活”的。
   JS可以维护的是DOM。
8. attribute是HTML中的,是“死”的。
   property是DOM中的，是可以通过JS进行更改的，是“活”的。
9. 直接提交表单。
   使用submit/reset按钮。
   便于浏览器保存表单。
   第三方库可以整体提取值。
   第三方库可以进行表单验证。