您的位置：首页 > Web前端 > HTML5

html5重要元素

2016-03-29 13:09 239 查看

html5元素文档元素，脚本，节点元素，文本元素，嵌入元素，

1.根元素 <html>

在html文档中，元素<html>代表了文档的根，其他所有的元素都是在此基础上进行延伸或拓展的，该元素也是html文档的最外层元素，因此称之为根元素

html4与html5中的<html>相差不大，主要区别在于xmlns属性。在html4中，该属性是必须的，因为它将在html转成xmlns的过程中发挥作用；而html5中不需要增加这个属性。另外，html5中新增了一个属性manifest,用于指向文档缓存信息的URL.

<html> 属性

manifest url 该url指向描述文档缓存信息的地址

xmlns http://www.w3.org/1999/xhtml 设置XML namespace的属性

<html>

<head>

<meta charset="utf-8"></meta> //meta中的charset属性描述页面的字符集格式

<title></title> //页面的标题内容

<style></style> //设置样式

</head>

<body></body>

</html>

2.文档元素 <head> <title> <base> <link> <meta> <style>.....

<head>包含的标签：

base 定义页面中所有链接的默认地址或目标 ( href,target 表示打开页面的连接方式 _blank 在新窗口打开_self   _parent(在父窗口打开)base中的href对整个页面元素生效，将鼠标移至超链接

时可用看到，默认网站地址就是"href"属性的值，

link 导入页面中的样式文件

meta 定义页面中的相关信息 //设置页面的文档信息，如针对搜索引擎的关键字，同时该元素新增了 charset,简化了冗余的字符，如"http-equiv="Content-type" content="text/html" 只需要加入utf-
8即可

script 定义客户端脚本代码或文件

style 定义HTML文档中的样式信息

title 设置文档的标题

注意:<base> <title>只能使用一次，并且必须包含于<head>元素中，而其他元素可以多次使用，<base>元素必须放在其他元素之前，以便于其他元素能调用<base>元素的属性。

3.脚本 <script>

为了增加页面的互动性，需要对文档编写客户端脚本，最常用的语言javascript

<script> 既可以包含脚本语言，又可以通过src属性导入一个脚本文件；同时选择元素的必选属性type与MIME类型

<noscript> 是一个检测工具，用于<script>中脚本内容未被执行时显示的内容。即，如果浏览器支持<script>中的脚本，则不会显示<noscript>中的内容

script常用属性

async true/false 定义是否异步执行脚本，此属性为html5新增;当为true时，脚本在页面中执行时是异步的，即在页面解析的过程中执行；当取值为false,脚本将被
立刻执行，页面也会等脚本执行完成后解析

charset charset 设置脚本使用字符编码，此属性html5不再支持

language JavaScript 等定义脚本的语言类型，此属性html5不再支持

xml:space preserve 此属性html5不再支持

4. 节点

html5中新增了许多用于标志节点的元素，如<section> <nav>等，这些元素可以用于页面内容的分段或分区，

<section> 用于标记文档中的区段或段落，例如文档的章节，页眉，页脚的设置

<section>常用属性

cite url <section>元素的内容来源web的地址

hidden true/false 显示或隐藏<section>元素，默认值为false

draggable true/false 是否可以拖动<section>元素，默认值为false

<nav> 是html5新增的元素，是页面的的一个导航元素，该元素可以将具有导航性质的链接归纳在一个区域，使页面的元素更有语义性，同时，也方便了对屏幕阅读器设备的支持

<hgroup> 是html5新增的元素,该元素用于对页面的标题进行分组，从而形成一个组群。为了更好的说明个组群的功能，该元素常常与元素<figcaption>结合使用，通过<figcaption>元素说明各组群的功能。

<adress> 是html5新增的元素,该元素用于定义文档作者或所有者的相关联系方式，常用于<article>元素外部，如果用于<article>内部，则表示文章作者的联系方式。该元素在通常情况下显示为斜体，绝大部分的浏览
器在解析该元素的时候，都会在该元素的前后添加换行标记

注意：section 可以对内容进行分块,但是section是进行有意义的分块;section内部必须有标题，标题也代表了
section的意义所在(如果<article>、<aside>或<nav>更符合状况，不要使用<section>)

5.分组

<ul> 用于定义页面中的无序列表，html5不再支持"type"与“compact"这两个属性，由于<ul>常与<li>一块使用，因此，html5页不支持<li>的"type"属性，而是改用CSS样式来定义列表的类型

<ol> 用于定义页面中的有序列表，html5中新增了两个属性："start" "reversed",前者用于自定义列表项开始的编号，后者用于设置列表是否进行反向排序
c7ff

<dl> 用于创建一个术语列表，允许在一个<dl>中包含若个<dt>,一个或多个术语元素后面可以跟一个或多个定义< <dd>元素

6 文本层次语义 <time> <mark> <cite>

<time>是html5新增的一个标记，用于定义时间或日期，该元素可以代表24小时中的某一时刻，在表示时刻时，允许有时间差，在设置时间或日期时，只需将该元素的属性"datetime"设置为相应的时间或日期即可。

datetime如果要表示时间与日期，之间使用"T"进行分割;如果在整个时间与日期的后面加上一个字母Z,则表
示获取UTC（世界统一时间）格式；pubdate="true/false" 表示时间是否为发布时间

<mark>是html5新增的一个标记，主要功能是在文本中高亮显示某个或某几个字符，旨在引起用户的特别注意；其
使用方法与<em>和<strong>有相似之处（页面显示高亮字符为黄色背景色）

<cite> 创建有一个引用标记，用于文档中参考文献的引用说明，如书名，文章名。一旦在文档中使用该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。（<cite>无换行）

7 嵌入内容

<img> 元素功能是在页面中导入一副图像。在html5中，该元素的"border","align","hspace"，”vapance"属性不再被支持，这些功能需要通过CSS样式设置。

<iframe> 元素用于在页面中创建包含另一文档的框架。处于对页面安全性的考虑，html5不再支持<frame>元素，包含<frameset>,但仍然支持<iframe>元素，只是该元素的一些原有属性不再被支持，而仅仅支持src属性，但新增了“sandbox",通过该属性的设置，可以避免私自访问父页面，执行异常脚本，通过脚本嵌入表单或者控制表单

<object> 元素用于在页面中嵌入一个对象。这个对象可以包含视频，音频，flash等多媒体文件。在html5仍可以使用，但是部分属性已不支持

<object>属性

data URL 设置多媒体对象的数据源

type typevalue 选择数据源中的多媒体在页面中展示的类型

usemap URL 设置多媒体对象在客户端映射的地址

height heightValue 设置对象的高度（单位像素）

width widthValue 设置对象的宽度（单位像素）

在html5中，新增了专门播放多媒体文件的标签-<video>元素与<audio>元素。前者用于播放视频或影视，后者用于播放音频文件，<video><audio>将逐步取代<object>

8
公共属性 draggable

draggele true/false 设置是否允许用户拖动元素

hidden true/false

spellcheck true/false 用来检测文本框或输入框中的拼音或语法是否正确;true,检测对应输入框中的语法(页面显示出错的红色波浪线，chrome浏览器，支持<textare>输入框元素，而不支持<input>)

contenteditable true/false 可以直接对显示在页面中的文字进行编辑；true,可进行对该元素显示的文本内容直接进行编辑

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5

相关文章推荐

新的分享

章节导航