一、标记方法

1、内容类型(ContentType)还是.text/html

2、声明:<!DOCTYPE html SYSTEM “about:legacy-compat”>

3、字符编码:<meta charset="UTF-8"  >

二、语法三要点:

1、可以省略标签的元素:

(1)不允许写技术标记的元素,即只能写成<元素/>形式:area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

(2)可以省略结束标签的元素:li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

(3)可以省略整个标签的元素:html、head、body、colgroup、tbody。

2、允许省略boolean值的属性

html5属性 语法描述
checked     checked="checked"        checked=""            checked
readonly  readonly="readonly"       readonly=""           readonly
disabled    disabled="disabled"        disabled=""            disabled
selected     selected="selected"        selected=""            selected
defer   defer="defer"                 defer=""                 defer
ismap      ismap="ismap"                ismap=""               ismap
nohref   nohref="nohref"               nohref=""              nohref
noshade  noshade="noshade"         noshade=""            noshade
nowrap  nowrap="nowrap"           nowrap=""              nowrap
multiple multiple="multiple"           multiple=""            multiple
noresize  noresize="noresize"         noresize=""            noresize

举例说明:

如果省略了属性本身,则表达为false;若省略的是属性值,则表达为true。

以下属性值全为true:

<input type="checkbox" checked>

<input type="checkbox" checked="checked">

<input type="checkbox" checked="">

3、省略属性的引用符

可以用双引号或者单引号引用属性的值,只要属性值中不包括空格、<、>、'、"、‘、=等字符,都可以省略引用符。

举例说明:

<input type="text">                            <input type='text'>                             <input type=text>

三、新增元素

1、结构元素

<section></section>定义文档或应用程序中的一个区段,如章节、页眉、页脚或文档的其他部分

一个section元素通常由内容和标题组成。

当一个容器要被直接定义样式或通过脚本定义行为时,推荐用div,不是section。

<article></article>表示文档中独立的一块内容,如博客、教程、故事、视频及脚本。

一个article元素通常有它自己的标题header,有时还有自己的脚注。

article元素可以嵌套使用。

article元素也可以用来表示插件,作用是使插件看起来像内嵌在页面中。如下所示:

<header></header>有引导和导航的作用。放置页面中一个内容区块或整个页面的标题,也可以包含内容,如搜索表单或logo。

一个页面可以有多个header元素。

在html5中,一个header元素通常包括至少一个heading元素,即h1~h6元素,也可以包括hgroup、table、from、nav元素。

hgroup元素:将标题与子标题分组的元素。

hgroup元素通常将h1~h6元素进行分组;若只有一个主标题,则不需要写hgroup元素。

<nav></nav>导航部分,主要放主要的、基本的链接。

一个页面可以有多个nav元素,该元素可以用于以下场合:

传统导航条(将当前页面跳转到网站的其他页面上),侧边栏导航(将当前页面或文章跳转到其他页面或文章中)、页内导航(在本页面的几个组成部分之间跳转)、翻页操作(在多个页面的上下页或博客网站的上下篇文章滚动)。

在html5中不能用menu来代替nav元素,因为menu元素是用在一系列发出命令的菜单上的,是一种交互性的元素,更准确的说是用在web应用程序中的。

<footer></footer>页面的脚注部分,一般包含作者姓名、创作日期、版权信息等。

一个页面可以包含多个footer元素,可以为article和section元素添加footer元素。

<address></address>用于当前article或文档的作者的详细联系方式。

                       

2、块级元素

<aside></aside>放置位于article元素外的相关内容,可以用于摘录引用或边栏的排版效果,用于广告或导航元素。。

aside元素主要有以下两种用法:

(1)被包含在article元素中作为主要内容的附属信息部分,可以是与当前文章相关的信息等。

(2)在article外使用,作为页面或站点全局的附属信息部分,比如侧边栏。

<figure></figure>一般表示文档主体流内容中的一个独立单元,使用<figcaption>为figure添加标题。     <figure><figcaption>...</figcaption></figure>

<dialog></dialog>定义对话。如:

                             对话中的每个句子都必须属于<dt> 标签定义的部分。

figure元素:块级图像元素。具有独立性。可以放图片,还可以给audio、video、iframe、embed元素添加说明。

                                     

figcaption元素:表示figure的标题,一个figure元素内只能放一个该元素。

                                   

3、行内元素

<mark></mark>用于在视觉上向用户呈现需要突显的文字,比如搜索关键词。

                         

mark、em、strong的区别:mark的目的是吸引用户的注意力,提供参考。em是作者为突出文章重点使用的。strong是原文作者用来强调一段文字的重要性的,譬如警告信息、错误信息等。

<time></time>表示日期或时间

<meter></meter>表示度量衡,仅用于已知最大值和最小值的度量。必须定义度量的范围,可以在元素文本或max/min属性中定义

<progress></progress>表示一个任务的完成进度

progress有两个属性值:value表示已经完成的工作量;max表示总共的工作量。

                            

    

4、多媒体元素         video(视频)                        audio(音频)

5、交互性元素

<details></details> 表示详细信息,提供一个展开/收缩区域。可与summary(提供标题或图例)配合使用。用户单击标题时,会显示details。

(1)没有sunmary情况:                                              (2)有sunmary情况:

                                                                   

结果:                                                                                           结果:

                                                     

该元素并没有严格地限制于纯文本标记,它可以是一个登录表单、一段说明性的视频、以图形为源数据的一个表格,或者提供给使用辅助性技术的用户的一个表格式的结构说明。

details元素可以可选择地接受open属性,来确保页面载入的时候该元素是可以打开的。

<details open>

<datagrid></datagrid>表示可选数据的列表,通常用于显示树列表

<menu></menu>表示菜单列表,通常用于列出表单控件

                                         

command元素:表示命令按钮,如单选按钮,复选框或按钮

                       

fieldset元素:将表单内的相关元素分组。

                                  

                          

output元素: 显示一些计算的结果或脚本等其他结果。必须从属于表单。

                                                  

                  

6、新增的input元素类型

email类型:用于包含e-mail地址的输入域

email类型的文本框具有multiple属性,表示允许输入多个email地址,且用逗号隔开。

url类型:用于包含url地址的输入域

<input type="url" value="http://www.qq.com" />

number类型:用于包含数值的输入域

                       

range类型:用于包含一定范围内数字值的输入域

具有max和min属性,默认最小为0,最大为100。在Opera浏览器中,以滑动条方式进行值的指定;在Opera10中是输入文本的方式。

     

date pickers:数据检出器

search类型:用于搜索域,如站点搜索或google搜索。默认是圆角矩形文本框,firefox显示的依然是常规矩形。

                       

tel类型:用于input元素中输入电话号码,没有特殊校验规则,在实际开发中可以通过pattern属性指定输入电话格式进行验证。

                                               

color类型:提供颜色选择器,默认为黑色。

                               

日期和时间的输入类型:

date-----------日、月、年    该类型的input元素以日历的形式方便用户输入

month---------------月

week类型的input元素用来输入周号的文本框。

time--------------时间(小时和分钟)

                              

datetime------------日、月、年(UTC时间)    用来输入UTC日期和时间的文本框,且提交时对输入内容有效性检查。

time元素的机器可读部分是在datetime属性中的,格式有以下类型:

<time datetime="2011-10-12">2011年10月12日</time>

<time datetime="2011-10-12">10月12日</time>

<time datetime="2011-10-12T20:00">晚上8点</time>   日期与时间用T文字分开

<time datetime="2011-10-12T20:00Z">晚上8点</time>     Z表示给机器编码时使用UTC标准时间

<time datetime="2011-10-12T20:00+09:00">美国晚上8点</time>          加上了时差,表示向机器编码另一地区时间;若编码本地时间,则不需要加时差

datetime-local------------日、月、年(本地时间)      用来输入本地日期和时间的文本框,且提交时对输入内容有效性检查。

pubdate属性:布尔属性,表明哪个time元素代表了发布日期

如:<time datetime=2011-10-11 pubdate>2011年10月11日</time>

7、新增的属性

与表单相关的属性:

autocomplete:是否保存输入值以备使用。保护敏感用户数据,避免本地浏览器对它们进行不安全的存储。

有三个值:"on":显示指定候补输入值的数据列表。使用datalist元素和list属性提供候补输入值的数据列表,自动完成时,将该datalist元素中的数据作为候补输入数据在文本框                             中显示。

"off":不指定。

" ":使用浏览器默认值。

                  

适用于<form>标签,以及以下类型的<input>标签:text、search、url、telephone、email、password、date pickers、range、color。

autofocus:适用于所有<input>标签的类型,规定在页面加载时,域自动地获得焦点。

                           

一个页面只能有一个控件具有该属性。

list属性:该属性的值是datalist元素的id,datalist元素类似于select选择框,但是期望值不在选择列表内时,允许自己输入。

适用于以下类型的<input>标签:text、search、url、telephone、email、date pickers、number、range、color。

                                                                                                

                               

form override attributes:表单重写,允许用户重写form元素的某些属性设定,适用于以下类型的<input>标签:submit、image。

formaction-----重写action属性                  formenctype-----重写enctype属性                 formmethod-----重写method属性

formnovalidate-----重写novalidate属性                                                                          formtarget-----重写target属性

height、width属性:  <input type="image" src="data:images/1.jpg" width="200" height="200"/>

min、max属性:规定输入值的范围。默认的min为0,max为100

                         

step属性:为输入域规定合法的数字间隔(若step=“3”,则合法数是-3、0、3、6等)

       

step属性的值取决于控件的类型,对于range控件,step默认为1。

为配合step属性,html5引用的stepUp和stepDown两个函数,分别根据属性的值来增加或减少控件的值。

multiple属性:规定输入域中可选择多个值,适用于以下类型的<input>类型:email、file

novalidate属性:规定在提交表单时不应该验证form或input域,适用于<form>以及以下类型的input标签:text、search、url、telephone、email、password、date pickers、range、color。

pattern属性:用于验证input域的模式,模式是正则表达式。适用于以下类型的input标签:text、search、url、telephone、email、password。

                                      

                        

placeholder属性:提供一种提示(hint),描述输入域的期待值。适用于以下类型的input标签:text、search、url、telephone、email、password。

              

required属性:必须填写的项。

                             

该属性是最简单的一种表单验证方式。

适用于以下类型的input标签:text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file。

与链接相关的属性:

media属性:为a与area元素增加了media属性,该属性规定目标URL是为什么类型的媒介/设备进行优化的。只能在href属性存在时使用。

hreflang、rel属性:为area元素增加了hreflang、rel属性,以保持与a、link元素的一致。

sizes属性:为link元素增加了新属性sizes。该属性可以与icon元素结合使用,以指定关联图标(icon元素)的大小。

target属性:为base元素增加了target属性,主要目的是保持与a元素的一致性,同时target元素由于在web应用程序中,尤其是在与iframe结合使用时,是非常有用的。

其他新增属性:

reversed属性:为ol元素增加reversed属性,它指定列表倒序显示。

         

charset属性:为meta元素增加charset属性。

type、label属性:为menu元素增加的属性。label属性为菜单定义了一个可见的标注,type属性让菜单可以以上下文菜单、工具条或列表菜单三种形式出现。

scoped属性:为style元素添加的属性,用来规定样式的作用范围,为script元素增加async属性,它定义脚本是否异步执行。

manifest属性:为html元素增加的属性,开发离线web应用程序时与API结合使用,定义一个URL,在这个URL上描述文档的缓存信息。为iframe元素增加sandbox、seamless、srcdoc三个属性,用来提高页面安全性,防止不信任的web页面执行某些操作。

全局属性:任何元素都适用的属性

contentEditable属性:允许用户编辑元素中的内容(该元素必须是可以获得鼠标焦点,且单击后向用户提供一个插入符号),它的值为布尔类型。

                                              

ondblclick="contentEditable=true" :表示双击后才可以编辑。

此外,该属性有个隐藏的inherir(继承)状态,若父元素可编辑,则子元素也是可编辑的。

iscontentEditable属性:为true是可编辑,为false是不可编辑。

designMode属性:指定整个页面是否可以编辑,只能在js脚本里被编辑修改,该属性有两个值:off和on。       <body ondblclick="document.designMode='on';">

脚本指定该属性的方法:document.designMode="on"。

大部分浏览器支持designMode属性,而IE8不支持,但是IE9允许。

hidden属性:布尔值。不可见状态是true,可见状态是false。  hidden="true"相当于css中的display:non。

           

spellcheck属性:布尔型,告诉浏览器检查元素的拼写和语法。可以不写该属性,但是一旦书写,必须有值。支持该属性的浏览器有Chrome、Opera和Safari,IE与Firefox暂未支持。若是元素的readOnly属性或disabled属性设为true,则不执行拼写检查。

tabindex属性:用户使用键盘导航一个页面时,控制页面上的元素获得焦点的顺序。

tabindex有三个值:0 ,-1, 以及X(X里32767是界点,稍后说明)

在IE中,tabindex范围在1到32767之间(包括32767);在FF、 Chrome无限制,不过一旦超出32768,顺序跟tabindex=0时一样。这个估计跟各个浏览器对int型的解析有关

原本在Html中,只有链接a和表单元素可以被键盘访问(即使是a也必须加上href属性才可以),但是aria允许tabindex指定给任何html元素。

当tabindex=0时,该元素可以用tab键获取焦点,且访问的顺序是按照元素在文档中的顺序来focus,即使采用了浮动改变了页面中显示的顺序,依然是按照html文档中的顺序来定位。

当tabindex=-1时,该元素用tab键获取不到焦点,但是可以通过js获取,这样就便于我们通过js设置上下左右键的响应事件来focus,在widget内部可以用到。

当tabindex>=1时,该元素可以用tab键获取焦点,而且优先级大于tabindex=0;不过在tabindex>=1时,数字越小,越先定位到。

HTML5--语法的更多相关文章

  1. html5语法

    html5语法沿用html语法,但更简单,更人性化. 一.DOCTYPE及字符编码 DOCTYPE:<!doctype html>或者<!DOCTYPE html>因为html ...

  2. bootstrap学习起步篇:初识bootstrap之html5语法构建hello篇(一)

    目前选择使用bootstrap作为前端页面模板,是件很省心的事情.官网上给出的实例和教程也很多.在实际使用过程中,我们也许还要借助文档去了解它的元素和样式.但也不能减少我们使用他的兴趣. 我准备将其整 ...

  3. 让vs2010的html编辑器验证html5语法

    或者在Tools -> option -> Text Editor -> Html -> Validation

  4. html5语法改变

    <!doctype html> 简化了 <meta http-equiv="Content-type" content="text/html;chars ...

  5. HTML5学习笔记简明版(1):HTML5介绍与语法

    HTML5介绍 HTML5是继HTML4以后的下一代HTML标准规范,它提供了一些新的元素和属性(例如<nav>网站导航块和<footer>).新型的标签有利于搜索引擎和语义分 ...

  6. HTML5 学习总结(一)——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  7. HTML5 与 CSS3 jQuery部分知识总结

    一.    HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5 ...

  8. HTML5 学习笔记(一)——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  9. HTML5 与 CSS3 jQuery部分知识总结【转】

    一.    HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5 ...

  10. 网站开发中很实用的 HTML5 & jQuery 插件

    这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的.这些优秀的 jQuery 插件能为你的网 ...

随机推荐

  1. 【Ruby】与ruby相关的内容

    本博文是为了记录Ruby相关的可学习资源,以便日常使用 在线学习Rails的网站版本 Ruby on Rails教程(Rails 5) Ruby的中文社区 Ruby China

  2. VMware ESXi 6.7服务器设置开机自动启动虚拟机

    VMware ESXi 6.7服务器设置开机自动启动虚拟机,具体操作步骤如下 1.登陆到VMware ESXi 6.7  web 界面 2.导航器-->主机-->管理  将自动启动修改为 ...

  3. pip安装依赖与生成依赖

    一.安装依赖 从requirements.txt安装依赖库 pip install -r requirements 当提示权限不够时,前面加上sudo#下面就是一个requirements.txt文件 ...

  4. 微信小程序--Tab栏切换的快速实现

    上效果! wxss样式代码: .tabs-item.selected { color:rgba(,,,.); border-bottom:2px solid rgba(,,,.); } .tabs-i ...

  5. androidstudio如何用github多人开发

    一.首先我们利用github作为代码库,有两种方法可以创建代码库 一定要配置好git环境和创建好github账号 检测git环境配置 检测github账号是否能登录 成功就会 (1)在github中直 ...

  6. Linux下的权限管理

    Linux系统上对文件的权限有着严格的控制,用于如果相对某个文件执行某种操作,必须具有对应的权限方可执行成功. Linux下文件的权限类型一般包括读,写,执行.对应字母为 r.w.x. Linux下权 ...

  7. conda 下配置环境

    conda list 查看已有环境(感觉anaconda 中查看的不全,只有指定路径的,但是这个路径和默认创建的路径不一样 然后我发现 要安装traits 库必须要的是PyQt4 但是我的py3下只有 ...

  8. JS 鼠标键盘HTML事件

  9. CMD格式数据表输出语句

    mysql --default-character-set=latin1 -uroot -p

  10. PHP开发api接口安全验证的实例,值得一看

    php的api接口 在实际工作中,使用PHP写api接口是经常做的,PHP写好接口后,前台就可以通过链接获取接口提供的数据,而返回的数据一般分为两种情况,xml和json,在这个过程中,服务器并不知道 ...