Web前端开发 - 1 - HTML5基础

HTML5基础

- 1. HTML文档结构和基本语法
- 2. HTML4元素(91)
- - 1. 结构元素
  - 2. 内容元素
  - 3. 修饰元素
- 3. HTML4属性
- - 1. 核心属性
  - 2. 语言属性
  - 3. 键盘属性
  - 4. 内容属性
  - 5. 其他属性
- 4. HTML5元素
- - 1. 结构元素
  - 2. 功能元素
  - 3. 表单元素
- 5. HTML5属性
- - 1. 表单属性
  - 2. 链接属性
  - 3. 其他属性
  - 4. HTML5全局属性
- 6. 其他

1. HTML文档结构和基本语法

概念： (HyperText Marked Language) 超文本标记语言
本质：用HTML书写的一种纯文本文件
工具：Dreamweaver 网页编辑器视觉化网页开发工具； Hbuilder 等

HTML5文档的结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"> 
    <!-- 
    width=device-width ：表示宽度是设备屏幕的宽度
	initial-scale=1.0：表示初始的缩放比例
	minimum-scale=0.5：表示最小的缩放比例
	maximum-scale=2.0：表示最大的缩放比例
	user-scalable=yes：表示用户是否可以调整缩放比例  
	-->
    <title>Document</title>
</head>
<body>
    <!-- 主体信息 -->
</body>
</html>

2. HTML4元素(91)

HTML 参考手册- (HTML5 标准)

1. 结构元素

用于构建网页文档的结构，多指块状元素

<div>	定义文档中的节。在文档中定义一块区域，即包含框、容器
<ul>	定义一个无序列表
<ol>	定义一个有序列表
<li>	定义一个列表项
<dl>	定义一个定义列表
<dt>	定义一个定义定义列表中的项目。
<dd>	定义定义列表中项目的描述。
<del>	定义被删除文本。
<ins>	定义被插入文本。
<h1> to <h6>	定义 HTML 标题
<p>	定义一个段落
<hr>	定义水平线。

2. 内容元素

内容元素定义了元素在文档中表示内容的语义，一般指文本格式化元素，多是行内元素

<span>	定义文档中的节。
<a>	    定义一个链接
<abbr>	定义缩写
<address>	定义文档作者或拥有者的联系信息
<dfn>	定义定义项目，术语，以斜体显示
<kbd>	定义键盘文本
<samp>	定义计算机代码样本。
<var>	定义文本的变量部分。
<tt>	定义打字机文本。
<code>	定义计算机代码文本
<pre>	定义预格式文本，保留源代码格式
<blockquote>	定义长的引用
<cite>	定义引用(citation)
<q>	    定义短的引用。
<strong>	定义强调文本。
<em>	定义强调文本

3. 修饰元素

定义文本的显示效果

<b>	    定义粗体文本。
<i>	    定义斜体文本。
<big>	HTML5不再支持。 定义大号文本。
<small>	定义小号文本。
<sub>	定义下标文本。
<sup>	定义上标文本。
<bdi>	设置文本，使其脱离其父元素的文本方向设置。
<bdo>	定义文本的方向。
<br>	定义简单的折行。
<u>	    定义下划线文本。
已废除：
<center>	HTML5不支持，不赞成使用。定义居中文本。
<font>	HTML5不支持，不赞成使用。定义文字的字体、尺寸和颜色。
<s>		不赞成使用。定义加删除线的文本。
<strike>	HTML5不支持，不赞成使用。定义加删除线文本。

3. HTML4属性

1. 核心属性

基本属性，为大部分元素所拥有

class：定义类规则或样式属性
id：定义元素的唯一标识
style：定义元素的样式声明

2. 语言属性

定义元素的语言类型

lang：定义元素的语言代码或编码
dir：定义文本方向，包括ltr和rtl取值

3. 键盘属性

定义元素的键盘访问方法

accesskey：定义访问某元素的键盘快捷键
tabindex：定义元素的Tab键索引编号

4. 内容属性

alt: 定义元素的替换文本
title: 定义元素的提示文本
longdesc: 定义元素包含内容的大段描述信息
cite: 定义元素包含内容的引用信息
datetime: 定义元素包含内容的日期和时间

5. 其他属性

rel: 定义当前页面与其他页面的关系，表示从源文档到目标文档的关系
rev: 定义其他页面与当前页面的关系，表示从目标文档到源文档的关系
<a href="4-3.html" rel="prev">链接到集合中的前一个文档</a>

4. HTML5元素

1. 结构元素

<header>	定义一个文档头部部分
<footer>	定义一个文档底部
<section>	定义了文档的某个区域，内容区块，标识文档结构
<article>	定义一个与上下文不想管的独立内容
<aside>		定义article元素内容之外的、与article内容相关的辅助信息
<nav>		定义导航链接
<main>		表示网页中的主要内容
<figure>	一段独立的流内容，一般表示文档主体流内容中的一个独立单元。
可以使用figcaption元素为figure元素添加标题

2. 功能元素

<video>: 	定义视频
<audio>: 	定义音频
<embed>: 	用来插入各种多媒体，格式可以是Midi/Wav/AIFF/AV/MP3等
<mark>		定义带有记号的文本。请在需要突出显示文本时使用 <em> 标签。
<dialog>	定义对话框，比如提示框
<bdi>		设置文本方向，使其脱离其父元素的文本方向设置。
<figcaption>定义<figure> 元素的标题
<time>		定义日期或时间，或者两者。
<canvas>	定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<output>	定义不同类型的输出，比如脚本的输出。
<source>	为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<menu>		定义菜单列表，HTML4中不赞成使用。
<rp>		定义不支持 ruby 元素的浏览器所显示的内容。
<rt>		定义字符（中文注音或字符）的解释或发音。
<ruby>		定义 ruby 注释（中文注音或字符）。
<wbr>		规定在文本中的何处适合添加换行符。
<command>	定义用户可能调用的命令（比如单选按钮、复选框或按钮）。
<details>	定义了用户可见的或者隐藏的需求的补充细节。
<summary>	定义一个可见的标题。 当用户点击标题时会显示出详细信息。
<datalist>	定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen>	规定用于表单的密钥对生成器字段。
<progress>	定义运行中的进度（进程）。
<meter>		定义度量衡。仅用于已知最大和最小值的度量。
<track>		为诸如 video 元素之类的媒介规定外部文本轨道。

3. 表单元素

HTML5input类型
HTML5表单元素

<input type="tel" />
tel ： 表示必须输入电话号码的文本框
search ： 表示搜索文本框
url ： 必须输入URL地址的文本框
email ： 不需输入电子邮件地址的文本框
datetime ： 表示日期和时间文本框
date ： 日期文本框
month ： 月份文本框
week ： 周几文本框
time ： 时间文本框
datetime-local ： 表示本地日期和时间文本框
number ： 表示必须输入数字的文本框
range ：表示范围文本框
color ：表示颜色文本框

5. HTML5属性

1. 表单属性

HTML5表单属性

为input(type=text)、select、textarea与button元素新增加autofocus属性。它以指定属性的方式让元素在画面打开时自动获得焦点。
为input元素（type=text)与textarea元素新增加placeholder属性，它会对用户的输入进行提示，提示用户可以输入的内容。
为input、output、select、textarea、button与fieldset新增加form属性，声明它属于哪个表单，然后将其放置在页面上任何位置，而不是表单之内。
为input元素（type=text）与textarea元素新增加required属性。该属性表示在用户提交的时候进行检查，检查该元素内一定要有输入内容。
为input元素增加 autocomplete、min、max、multiple、pattern和step属性。同时还有一个新的list元素与datalist元素配合使用。datalist元素与autocomplete属性配合使用。multiple属性允许在上传文件时一次上传多个文件。
为input元素与button 元素增加了新属性formaction、formenctype、formmethod、formnovalidate与formtarget，它们可以重载form元素的action、enctype、method、novalidate与target属性。为fieldset元素增加了disabled属性，可以把它的子元素设为disabled（无效）状态。
为input元素、button元素、form元素增加了novalidate属性，该属性可以取消提交时进行的有关检查，表单可以被无条件地提交。

2. 链接属性

为a与area元素增加了media属性，该属性规定目标URI是为什么类型的媒介/设备进行优化的，只能在href属性存在时使用。
为area元素增加了hreflane属性与rel属性，以保持与a元素、link元素的一致。
为link元素增加了新属性sizes。该属性可以与icon元素结合使用（通过rel属性)，该属性指定关联图标（icon元素）的大小。
为base元素增加了target属性，要目的是保持与a元素的一致性。

1.6.3 其他属性

为ol元素增加属性reversed，它指定列表倒序显示。
为meta元素增加charset属性，因为这个属性已经被广泛支持了，而且为文档的字符编码的指定提供了一种比较良好的方式。
为menu元素增加了两个新的属性_tvne与bbelsbel屋性为菜单定义一个可见的标注，type属性让菜单可以上下文菜单、工具条与列表菜单3种形式出现。
为style元素增加scoped属性，用来规定样式的作用范围，譬如只对页面上某个树起作用。
为script元素增加 async属性，它定义脚本是否异步执行。
为html元素增加属性manifest，开发离线Web应用程序时它与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息。
为iframe元素增加3个属性，即sandbox、seamless与sredoc，用来提高页面安全性，防止不信任的Web页面执行某些操作。

3. 其他属性

4. HTML5全局属性

HTML全局属性

HTML5新增8个全局属性：
contenteditable	规定是否可编辑元素的内容，布尔值属性
contextmenu	指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单【目前只有Firefox支持
data-*	用于存储页面的自定义数据
draggable	指定某个元素是否可以拖动
dropzone	指定是否将数据复制copy，移动move，或链接link，或删除【目前浏览器不支持
hidden		对元素进行隐藏。
spellcheck	是否对元素进行拼写和语法检查
translate	指定是否一个元素的值在页面载入时是否需要翻译，值为yes/no【目前浏览器无法正确支持

6. 其他

HTML特殊字符编码对照表

##空格符 &nbsp; 
要输入多个空格，可以交替使用“&nbsp”和“ ”（空格）