HTML常见元素和理解

HTML常见元素

meta 
title
style
link
script
base

这些元素之所以出现在 head 中是因为它们不会在页面上直接留下内容 

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  / 表单元素

meta

<meta charset = "utf-8" >
这里的 chartset 表示这个页面使用哪一种编码的字符集  

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" >

• viewport：查看视口
• width = device-width： 视口宽度 = 设备宽度
• initial-scale=1.0 ：初始比例缩放是1
• maximum-scale=1.0 ：最大缩放比例也是1

base

• base 标签为页面上的所有的相对链接规定默认 URL 或默认目标。
• 在一个文档中，最多能使用一个 元素。 标签必须位于 元素内部。
• base 标签不支持任何的事件属性。
• 属性
  • href ： 规定页面中所有相对链接的基准 URL。
  • target ：规定页面中所有的超链接和表单在何处打开。该属性会被每个链接中的 target 属性覆盖。

HTML版本

• HTML4

  • 标签允许不结束
  • 属性不用带引号
  • 标签属性可大写
  • Boolean属性可省略

• XHTML

  • 标签必须结束
  • 属性必须带引号
  • 标签属性必须小写
  • Boolean属性必须写值

• HTML5

  • 标签允许不结束
  • 属性不用带引号
  • 标签属性可大写
  • Boolean属性可省略

  HTML - XHTML - HTML5的关系

  • HTML 属于 SGML
  • XHTML 属于 XML 是 HTML 进行 XML 严格化的结果
  • HTML5 不属于 SGML 或 XML 比 XHTML 宽松

HTML5新增内容

- 表单增强
 	- 日期 时间 搜索
	- 表单验证
	- Placeholder 自动聚焦
-  新增语义
	- header / footer 头尾标签 	
	- section / article 区域
	- nav 导航
	- aside 不重要的内容 （侧边栏）
	- em / strong 强调 （加粗）
	- i   icon

HTML 元素分类

• 按默认样式分
  • 块级 block
  • 行内 inline
  • inline-block 行内块级元素

HTML 元素嵌套关系

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

HTML 元素默认样式

• 默认样式的意义
  • 标签内加文字的时候 不需要去手动加样式 直接展示效果
• 默认样式带来的问题
  • 有些不想要的默认样式例如 ul li span p a 。。。。

常见问题

doctype

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

HTML5有什么变化

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

em 和 i 有什么区别

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

语义化的意义是什么

• 开发者容易理解
• 机器容易理解结构（搜索 读屏软件）
• 有利于 SEO
• semantic microdata

哪些元素可以自闭合

• 表单元素 input
• 图片 img
• br hr
• meta link

HTML 和 DOM 的关系

• HTML是 “死”的
  • HTML 的结构其实就是看起来有结构而已 其实本质就是字符串 通过浏览器解析为DOM 才变成活的 DOM 树
• DOM 由 HTML 解析而来 是活的
• js 可以维护 DOM

form 的作用有哪些

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