HTML5语法
-
文档类型
DOCTYPE声明文档类型 ,必须位于第一行。
DOCTYPE不区分大小写以及单双引号。
DOCTYPE会触发浏览器以标准模式显示页面。<!DOCTYPE HTML>
-
字符编码
HTML5中简化了字符编码的写法,直接用 meta 即可<meta charset = "UTF-8">
-
布尔值
具有bool值的属性,当只写属性不指定属性值的时候,默认为true;若想要设置为false,可以不使用checked属性:<!-- 只写属性,不写属性值,代表属性为true --> <input type = "checkbox" checked> <!-- 不写属性,代表属性为false --> <input type = "checkbox"> <!-- 属性值 = 属性名,代表属性为true> <input type = "checkbox" checked = "checked"> <!-- 属性值 = 空字符串,代表属性为true> <input type = "checkbox" checked = "">
-
属性值
当属性值不包括空字符串、<、>、=、单双引号时,属性值两边的引号可以忽略。<input type = "text"> <input type = 'text'> <input type = text>
HTML5的元素
根据标记类型的不同,将HTML5的元素分为6类:
标记内容类型 | 说明 |
---|---|
内嵌 | 文档中嵌入其他内容,如audio, video等 |
流 | 文档和body中使用的元素,如form, h1, small等 |
标题 | 段落标题,如h1, h2, hgroup等 |
交互 | 与用户交互的内容,如 button, textarea等 |
元数据 | 一般在页面的head标签里面,设置页面的表现和行为,如style,script等 |
短语 | 文本及文本标记元素,如mark, sub等 |
-
结构元素
HTML5新增的结构元素:元素 说明 header 一个内容块或者整体页面的标题 footer 一个内容块或者整体页面的脚注 section 表示页面中一个区块,如章节、页眉等 article 表示页面中一块与上下文都不相关的内容 aside article内容之外,与article内容相关的辅助信息 nav 表示页面中导航的链接 main 网页中的主要内容 figure 表示一段独立的流内容 -
功能元素
根据页面内容的功能需要,HTML5新增许多功能元素:- hgroup元素:对整个页面或者一个内容块进行整合
<hgroup> ... </hgroup>
- video元素:定义视频等
<video src = "movie.ogg" controls = "controls">video 元素</video>
- audio元素:定义音频
<audio src = "someaudio.wav">audio 元素</audio>
- mark元素:显示高亮的文字
<mark> ... </mark>
- dialog元素:定义对话框或窗口
<dialog open>这是打开的对话窗口</dialog>
- bdi元素:定义文本方向
<ul><li>Username:<bdi>Bill</bdi>80 points </li> </ul>
- figcaption元素:定义figure标题
<figure><figcaption> ... </figcaption><img ... /> </figure>
- canvas元素:表示图形、图表和其他图像。相当于提供一块画布
<canvas id = "myCanvas" width="200" height="200"></canvas>
- summary元素:为details元素定义可见的标题
- details元素:用户可以得到的具体信息
<details><summary>HTML5</summary>explanation </details>
效果:
- datalist元素:表示可选数据的列表,与input配合,可以作出输入值的下拉列表
与此类似的还有datagrid,它以树状列表的形式来展示。<datalist> ... </datalist>
- meter元素:度量给定范围的数据
效果:<meter value = "3" min = "0" max = "10">十分之三</meter>
用图形来表示的。
- hgroup元素:对整个页面或者一个内容块进行整合
-
表单元素
通过type属性,HTML5为input元素新增了许多类型:名称 格式 说明 tel <input type = "tel">
表示输入电话号码的文本框 search <input type = "search">
表示搜索文本框 url <input type = "url">
表示输入url地址的文本框 email <input type = "email">
表示输入电子邮件地址的文本框 datetime <input type = "datetime">
表示输入日期和时间的文本框 date <input type = "date">
表示输入日期的文本框 month <input type = "month">
表示输入月份的文本框 week <input type = "weekt">
表示输入周几的文本框 time <input type = "time">
表示输入时间的文本框 datetime-local <input type = "datetime-local">
表示本地日期和时间的文本框 number <input type = "number">
表示必须输入数字的文本框 range <input type = "range">
表示范围文本框 color <input type = "color">
表示颜色文本框
HTML5全局元素
- contenteditable属性
主要功能为允许用户在线编辑元素中的内容。它是一个bool型属性,当值为true时,允许编辑;为false时,不允许编辑。未指定true还是false时,依靠元素的父元素来决定是否可编辑。
<ul contenteditable="true"><li>列表元素1</li><li>列表元素2</li><li>列表元素3</li>
效果:
- 用户自定义数据
data-*属性赋予HTML嵌入自定义data属性的能力
data-*主要包括两部分:- 属性名:不包括任何大写字母
- 属性值:可以是任意字符串
<ul><li data-animal-type="bird">猫头鹰</li><li data-animal-type="fish">鱼</li><li data-animal-type="spider">蜘蛛</li>
</ul>
data-animal-type就是用户自定义的属性。
- draggable属性
该属性可以定义元素是否可以被拖动。属性取值及说明为:- true:可以被拖动
- false:不可被拖动
- auto:定义使用浏览器的默认行为
- spellcheck属性
该属性定义是否对元素进行拼写和语法检查- true:进行拼写和语法检查
- false:不进行检查
- translate属性
该属性定义是否应该翻译元素内容:- yes:应该翻译此段内容
- no:不应该翻译此段内容0
初学HTML,做个笔记。。。