HTML5学习

HTML5语法

字符编码：<！doctype html>
大小写都可以: 如<Input tYpe = RadiO/>
省略引号 type = “text”——type = text
不允许写结束符的标签：area、basebr、col、command、embed、hr、img、input、Keygen、link、meta、param、source、track、wbr
可以省略结束符的标签：li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th
可以完全省略的标签：html、head、body、colgroup、tbody

HTML5新增标签

新增结构标签

• section标签
  表示页面中的一个内容区域块，比如章节、页眉页脚或页面的其他部分。可以和h1、h2…等标签合起来用，表示文档结构。
  例：html5中的<section></section>html4中<div></div>.

• article标签
  表示页面中一块与上下文不相关的独立内容，比如一片文章。

• aside标签
  表示article标签内容之外的、与article标签内容相关的辅助信息。

• header标签
  表示页面中一个区域块或整个页面的标题

• hgroup标签
  表示对整个页面或页面中的一个内容区块的标题进行组合。

• footer标签
  表示整个页面或页面中的一个区域块的脚注，一般来说，他会包含创作者的姓名、日期以及相关的联系信息。

• nav标签
  页面中导航链接的部分。

• figure标签
  表示一般独立的流内容，一般表示文档中主题流内容中的一个独立单元。使用figcaption标签为figure标签组添加标题。例如：

  <figure>
    <figcaption>H5</figcaption>
    <p>Hello world</p>
    </figure>
  

新增媒体标签

• video标签
  定义视频，像电影片段或其他视频流，支持的格式有Ogg、MPEG 4、WebM。例:<video src="movie.ogg" controls = "controls">video</video>
• 标签属性
• autoplay：如果出现该属性，则视频在就绪后马上播放。
• controls ：如果出现该属性，则向用户显示控件，比如播放按钮。
• loop ：如果出现该属性，则当媒介文件完成播放后再次开始播放。
• preload ：如果出现该属性，则视频在页面加载时进行加载，并预备播放。
  如果使用 “autoplay”，则忽略该属性。
• audio标签
  定义音频，如音乐播放或其他音频流，支持的格式有 Ogg Vorbis、MP3、Wav。例：<audio src="song.ogg" controls = "controls">audio</audio>
• 注：属性与video大致相同。
• embed标签
  用来嵌入内容（包括各种媒体流）。格式可以是Midi、Wav、AIFF、AU。MP3、flash等。例：<embed src = "flash.swf"/>

新增表单控件标签

• email
  必须输入email

• url
  必须输入url地址

• number
  必须输入数值

• range
  必须输入一定范围内数值

• Data Pickers（日期选择器）
  拥有多个可供选取日期和时间的新输入类型：
  data-选取日、月、年
  month-选取月、年
  week-选取周、年
  time-选取时间（小时和分钟）
  datatime-选取时间、日、月、年（本地时间）

• search
  用于搜索域，域显示为常规的文本域

• color

新增其他标签

• mark
  标签定义带有记号的文本。请在需要突出显示文本时使用

<p>Do not forget to buy<mark>milk</mark> today</p>

Do not forget to buy milk today

• progress
  标签定义运行中的进度（进程）。
  可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。

<progress>
<span id="objprogress">85</span>%
</progress>

• time
  标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
  该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>

<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

• ruby
  标签定义 ruby 注释（中文注音或字符）。
  在东亚使用，显示的是东亚字符的发音。
  与 <ruby> 以及 <rt> 标签一同使用：
  ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 “ruby” 元素时显示的内容。

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

• rt
  <rt> 标签定义字符（中文注音或字符）的解释或发音。
  ruby 注释是中文注音或字符。
  在东亚使用，显示的是东亚字符的发音。
  与 <ruby> 以及 <rt> 标签一同使用：
  ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 “ruby” 元素时显示的内容。
• wbr
  Word Break Opportunity
  提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 元素来添加 Word Break Opportunity（单词换行时机）。

<p>
如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>
如果想学习 AJAX，那么您必须熟悉 XMLHttpRequest 对象。

• canvas
  <canvas> 标签定义图形，比如图表和其他图像。
  <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

</script>

• command
  command 元素表示用户能够调用的命令。
  <command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。
  只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。

<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>

• details
  <details> 标签用于描述文档或文档某个部分的细节。

 <details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

• datalist
  <datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
  datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
  请使用 input 元素的 list 属性来绑定 datalist。

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

• output
  <output> 标签定义不同类型的输出，比如脚本的输出。

<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>

• source
  <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。

• keygen
  <keygen> 标签规定用于表单的密钥对生成器字段。
  当提交表单时，私钥存储在本地，公钥发送到服务器。

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

• menu
  <menu> 标签定义菜单列表。当希望列出表单控件时使用该标签。

<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>

删除标签

• 可以用CSS代替的标签
  如：basefont、big、center、font、s、strike、tt、u
• 不再使用frame
• 只有个别浏览器支持的标签
• 其他不常用的标签

新增属性
html：manifest=“cache.manifest” （定义当前页面需要用到的离线应用文件是哪一个）
meta：charset=“utf-8” （规定当前页面字符集）
link：sizes="" （设置网页的小图标的大小）
base: target="_blank" (定义超链接打开方 当前/新窗口)

script：defer和async（加载方式）
defer src="" （推迟执行：脚本下载后不执行，等页面全部加载完，再执行）
async src=""（异步执行：脚本下载后马上运行，同时不阻止浏览器解析下面内容）

a: media=“handheld”（表示对设备进行优化，"handheld"手持设备、"tv"电视设备）
a: hreflang=“zh” （设置语言，这里设置语言是中文）
a: ref=“external” （表示超链接为外部链接）

【目前所有主流浏览器均不支持<menu>标签】
nenu：type=“toolbar(工具条)，contextmenu(上下栏菜单)，list(平常列表菜单)”
ol：start=“50”（起始值），reversed（倒序）
style：scoped（在某个标签块中内嵌CSS样式）

iframe：seamless （当有这个属性时，这个框架是没有边框和边距的）
iframe:srcdoc（指定内线框架的内容，srcdoc出现的时候，src里的内容就会被忽略）
iframe:sandbox（规定内线框架的安全级别）①禁止提交表单 ②禁止运行javascript脚本 ③表示内嵌网页和外面的页面不是相同的源
sandbox=“allow-forms(允许提交表单)、allow-same-origin（允许是相同的源）、allow-script（允许在里面执行脚本）、allow-top-navigation（允许是外面页面进行跳转）”

废除属性

• 可以用CSS代替的属性
• 多余属性
• 其他属性

全局属性

• data-yourvalue="" 自定义数据名称
  例：data-type（yourvalue为你想定义数据的名字）
• hidden 隐藏(删除hidden显示，相当于display属性)
  例：<label hidden>不可见</label>
• Spellcheck=“true” 对输入内容进行语法纠错
  例：<textarea tabindex="2" spellcheck="true" cols="60" rows="5">
• tabindex=“1/2/3” 使用tab键时的切换顺序
  例：

<span>邮件<\span>
<input tabindex="3"/>
表示按两下Tab键后，光标会落在邮件处

• contenteditable=“true” 点击内容出现输入框，可以对网页中的内容进行局部修改
  例：<p contenteditable="true">请留言</p>
• desginMode=“open/off” 整个网页都可以/不可以编辑(实用度不高)
  例：

<script>
          window.document.designMode='off';//把off改成on就可以生效
      </script>

https://www.w3school.com.cn/html5/index.asp