HTML 5(二)——HTML 5常用元素与属性

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/static_eye/article/details/79736874

一、HTML 5保留的常用元素

HTML 5保留了原有HTML规范的绝大部分元素和属性,删除了少量元素和属性——主要删除了文档样式相关的各种元素和属性,比如<font.../>元素,width属性等,HTML 5规范推荐使用CSS样式来控制HTML文档样式。

1.基本元素

HTML 5保留的基本元素有如下几个:

  • <!--...-->:定义HTML注释。位于<!---->之间的内容会被当成注释处理。
  • <html>:它是HTML 5文档的根元素。但HTML 5允许完全省略这个元素。
  • <head>:它用于定义HTML 5文档的页面头部分。但HTML 5允许完全省略这个元素。
  • <title>:它用于定义HTML 5文档的页面标题。
  • <body>:它用于定义HTML 5文档的页面主体部分,该标签可以指定id、class、style等核心属性,还可以指定onload、onunload、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup等时间属性,这些属性用于指定JavaScrip脚本。
  • <style>:该元素用于引入样式定义。
  • <h1><h6>:定义标题一到标题六。
  • <p>:定义段落,该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
  • <br>:插入一个换行,该标签可以指定id、class、style等核心属性。
  • <hr>:定义水平线,该标签可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。HTML 5中<hr.../>还代表了主题结束的语义。
  • <div>:定义文档中的节。该标签可以指定id、class、style等属性,还可以指定onclick等各种事件属性。
  • <span>:与<div>基本相似,区别是该定义的节默认不会换行。该标签可以指定和<div>相同的属性。

提示:几乎所有的HTML元素都可以指定id、styleclass属性。其中id属性用于为HTML元素指定一个唯一标识,该表示是通过DOM访问HTML元素的重要途径。classstyle属性是CSS样式相关属性。

>**注意:`

###2.文本格式化元素 下面这些元素让文本内容在浏览器中呈现出特定效果。 - ` ###3.语义相关元素 HTML 5保留了如下语义相关元素 - ``:用于表示一个缩写。使用该元素时可指定如下属性. > -`title`:该元素用于指定该缩写所代表的全称。 - `
`:用于标识一个地址。浏览器通常会用斜体子显式`
###4.超链接和锚点 HTML 5保留了定义超链接的`
<!-- 下面代码会生成一个命名锚点 -->
<a name="test"></a>

用浏览器浏览命名锚点时,该命名锚点不会生成任何显示内容,我们可以使用如下超链接来定位到该锚点:

<a href="anchor.html#test">定位到test锚点</a>

从上面代码可以看出,定位到指定锚点需要在URL资源后指定锚点名,锚点名和URL资源之间以#隔开。

5.列表相关元素

HTML 5还保留了如下几个列表相关元素

  • <ul>:定义无序列表。该元素可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。该元素只能包含<li.../>子元素。
  • <ol>:定义有序列表。该元素可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。该元素只能包含<li.../>子元素。除此之外,在HTML 5规范中,该原素还可以指定如下三个属性。
  • start:指定列表项的起始数字。默认是第一个,如1、A等。
  • type:指定使用哪种类型的编号,例如1代表使用数字,A和a代表使用字母,I和i代表使用罗马数字。该属性在HTML 5规范中已经不推荐使用了,推荐使用CSS来定义。
  • reversed:该属性指定是否将排序反转。很遗憾,目前没有任何浏览器支持该属性。
  • :定义列表项目。该元素可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。该元素里可以包含与<div.../>完全类似的内容,因此可以包含较多类型的子元素。
  • <dl>:也用于定义列表,该元素只能包含<dt.../><dd.../>两种子元素。该元素可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。
  • <dt>:定义标题列表项。该元素可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。该元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素等。
  • <dd>:定义普通列表项。该元素可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。该元素里可以包含与

6.图像相关元素

HTML 5保留了<img.../>元素在页面中定义图像,这个元素只能是一个空元素,它不可以包含任何内容。该元素可以指定id、class、style等核心属性,还可以指定onclick等各种事件属性。不仅如此,使用该元素必须指定如下两个属性。

  • src:该属性指定图片文件所在的位置,该属性值既可以是相对路径,也可以是绝对路径。
  • alt:该属性指定一段文本,该文本将作为该图片的提示信息。

除此之外,该元素还可以指定如下两个可选属性。

  • height:指定该图片的高度,该属性可以是百分比,也可以是像素值。
  • width:指定该图片的宽度,该属性可以是百分比,也可以是像素值。

除此之外,与图片相关的还有如下两个标签。

  • <map>:用于定义图片映射。该元素主要可以包含一个或多个<area.../>子元素,每个<area.../>子元素定义一个区域,不同区域可链接到不同URL。
  • <area>:用于定义图片映射的内部区域。该元素只能是一个空元素,该元素除了可以指定id、class、style等核心属性,也可以指定onclick等各种事件属性。还可以指定onfocus、onblur等焦点相关属性。除此之外,还可以指定如下几个属性。
  • shape:指定该内部区域是哪种区域,该属性的默认值是“rect”,即矩形区域;
  • coords:指定多个坐标值,用于确定区域位置。
  • href:用于确定该区域所连接的资源。
  • alt:该属性指定一段文本,该文本将作为该图片的提示信息。
  • target:指定使用框架集中的哪一个框架来装载另一个资源。该属性的值可以是_self、_blank、_top、_parent四个值,分别代表使用自身、新窗口、顶层框架、父框架来装载新资源。
  • media:指定目标URL所引用的媒体类型。默认值为all。只有当指定了href属性时该属性才有效。

一旦我们使用<map.../>元素定义了图片映射之后,就可以让指定图片使用该图片映射,通过为<img.../>元素指定usemap属性让该图片使用图片映射,设置usemap属性值为#mapname即可。

7.表格相关元素

HTML 5保留了定义表格的如下标签。

  • <table>:

cellpadding:
cellspacing:
width:

  • <caption>
  • <tr>
  • <td>:

colspan:
rowspan
height
width

  • <th>
  • <tbody>
  • <thead>
  • <tfoot>

除此之外,如果需要在页面中为某列整体指定属性,HTML 5保留了如下两个标签。
- <col>

span

  • <colgroup>
  • -

8.框架相关元素

HTML 5不再推荐在页面中使用框架集,因此HTML 5删除了<frameset.../><frame.../><noframes.../>这3个标签。

HTML 5依然保留了一个与框架相关的元素:<iframe.../>元素,该元素可以在普通HTML页面中使用,该元素用于在普通HTML页面中生成一个内联框架,可以直接放在HTML页面的任意位置。该元素除了可指定id、style、class等核心属性外,还可以指定如下属性。

  • src:该属性指定一个URL,指定该iframe将装载哪个页面。

二、HTML 5新增的通用属性

HTML 5保留了大部分原有的HTML元素,但为这些元素增加了一些通用属性,这些通用属性极大地增强了HTML元素的功能

1.contentEditable属性

HTML 5为大部分HTML元素都增加了contentEditable属性,如果将该属性设为true,那么浏览器将会允许开发者直接编辑该HTML元素里内容。

contentEditable属性具有“可继承”的特点:如果一个HTML元素的父元素是“可编辑”的,那么它默认也是可编辑的,除非显式指定contentEditable=“false”。

当用户编辑完成后,用户编辑的内容就会直接显示在该页面中(不要刷新页面,一旦刷新页面就会重新加载,编辑的内容就会丢失),开发者可以通过该元素的innerHTML属性来获取编辑后的内容。

2.designMode属性

该属性相当于一个全局的contentEditable属性,如果把整个页面的designMode属性设置为on时,该页面上所有可支持contentEditable属性的元素都变成可编辑状态;designMode属性默认为off

在JavaScript代码中只能修改整个HTML页面的designMode属性。例如如下代码可以打开HTML页面的designMode属性。

document.designMode = "on";

3.hidden属性

HTML 5为所有元素都提供了一个hidden属性,这个属性支持truefalse两个属性值,一旦把某个HTML元素的hidden设为true,就意味着通知浏览器不显示该组件,浏览器也不会保留该组件所占用的空间。

提示hidden属性可以代替CSS样式单中的display属性,设置hidden="true"相当于在CSS中设置display:none

4.spellcheck属性

HTML为<input.../><textarea.../>等元素增加了spellcheck属性。该属性可支持truefalse两个属性值,如果设置”spellcheck="true"“,浏览器将会负责对用户输入的文本内容执行输入检查,如果检查不通过,浏览器会对拼错的单词进行提示。

三、HTML 5新增的常用元素

为了更好地表达HTML的文档结构、文档语义,HTML 5也新增了大量元素,这些元素更好地丰富了HTML文档的语义。

1.文档结构元素

在HTML 5以前,HTML页面只能使用<div.../>元素作为结构元素,而HTML 5则提供了<article.../><section.../><nav.../><aside.../><header.../><footer.../>等文档结构元素。下面先简单列出这些元素的概要功能。

  • <article>:该元素用于代表页面上独立、完整的一篇“文章”,该元素表示的内容可以是一个帖子、一篇Blog文章、一篇短文、一条完整的回复等。关于<article.../>的简单规则如下:

<article.../>元素内部可使用<header.../>定义文章“标题”部分。
<article.../>元素内部可使用<footer.../>定义文章“脚注”部分。
<article.../>元素内部可使用多个<section.../>把文章内容分成几个“段落”。
<article.../>元素内部可嵌套多个<article.../>作为它的附属“文章”,比如一篇Blog文章后面可以有多篇回复文章。

  • <section>:该元素用于对页面的内容进行分块。<section.../> 元素通常也可由标题和内容组成。关于<section.../>元素的简单规则如下:

通常建议<section.../>元素包含一个标题(也就是<h1.../>~<h6.../>元素定义的标题)。
<section.../>元素可以包含多个<article.../>元素,表示该“分块”内部包含多篇文章。
<section.../>元素可以嵌套<section.../>元素,用于标识该“分块”包含多个“子分块”。

  • <nav>:该元素专门用于定义页面上的“导航条”,包括页面上方的“主导航条”、侧边的“边栏导航”、页面内部的“页面导航”、页面下方的“底部导航”等,HTML 5推荐将这些导航链接分别放在响应的<nav.../>元素中进行管理。
  • <aside>:该元素专门用于定义当前页面或当前文章的附属信息,通常来说,推荐<aside.../>元素使用CSS渲染成侧边栏。
  • <header>:该元素主要用于为<article>元素定义“头部”信息。该元素内部既可包含多个<h1.../>~<h6.../>这样的标题元素,也可包含<hgroup.../>元素,还可包含普通的<p.../><span.../>等元素。
  • <hgroup>:该元素主要用于组织多个<h1.../>~<h6.../>这样的标题元素。当<header.../>需要包含多个标题元素时,可以考虑使用<hgroup.../>把它们组成一组。
  • <footer>:该元素主要用于为<article.../>元素定义“脚注”部分,包括该文章的版权信息、作者授权信息等。
  • <figure.../>:该元素用于表示一块独立的“图片区域”,该元素内部可包含一个或多个<img.../>元素所代表的图片。除此之外,该元素内部还可包含一个<figcaption.../>元素,用于定义该“图片区域”的标题。
  • <figcaption>:该元素通常放在<figure.../>内部,用于定义“图片区域”的标题。

2.语义相关元素

HTML 5也提供了如下两个语义相关元素。

  • <mark>:用于显示HTML页面中需要重点“关注”的内容。该元素可以指定idstyleclasshidden等通用属性。浏览器通常会用黄色显示<mark.../>标注的内容。
  • <time>:用来显示被标注内容是日期、时间或日期时间。使用该元素时除了可以指定idstyleclasshidden等通用属性外,还可指定如下属性。

datetime:该属性主要用于向机器提供时间(向流浏览器呈现的时间放在<time></time>之间),datetime属性的属性值应该是符合yyyy-MM-ddTHH:mm格式的日期时间。当然,也可以只指定日期,或只指定时间。

只有Chrome浏览器支持<details.../><summary.../>元素

3.两个特殊功能的元素

HTML 5还新增了如下两个具有特殊功能的元素。

  • <meter>:

value
min
max
low
high
optimum

  • <progress>:

max
value

四、HTML 5头部和元信息

使用<head.../>元素可以定义HTML文档头,该元素可以包含如下子元素。

  • <script>:该元素用于包含JavaScript脚本。
  • <style>:该元素用于定义内部CSS样式。
  • <link>:该元素用于链接外部CSS样式等资源
  • <title>:该元素用于定义文档标题。该元素较为常用的属性是id,作为其唯一标识。该元素只能包含文本内容,该文本内容就是该文本的标题。
  • <base>:该元素用于指定该页面中所有链接的基准链接。
  • <meta>:该元素用于定义HTML页面的元数据。

<base.../>元素必须是空元素,该元素除了可以指定id作为其唯一标识之外,还可以指定如下两个属性。

  • href:指定所有链接的基准链接。
  • target:指定超链接默认在哪个窗口打开链接。该属性值只能是_blank_parent_self_top其中之一。

<meta.../>元素用于定义页面元信息,定义元信息也就是指定一些name-value对。该元素除了可以指定id属性之外,还可以指定如下三个属性:

  • http-equiv:指定元信息的名称,该属性指定的名称具有特殊意义,它可以向浏览器传回一些有用的信息,帮助浏览器正确地处理网页内容。
  • name:指定元信息的名称,该名称值可以随意指定。
  • content:指定元信息的值。

http-equiv属性所支持的值主要有如下几个:
- Expires:指定网页的过期时间。一旦网页过期,必须重新从服务器上下载。
- Pragma:指定禁止浏览器从本地磁盘缓存中调阅页面内容,浏览器一旦离开该网页就无法脱机访问该页面。
- Refresh:指定浏览器多长时间后自动刷新指定页面。
- Set-Cookie:设置Cookie。如果网页过期,那么客户端上的Cookie也将被删除。
- content-Type:设置该页面的内容类型和所有字符集。

五、HTML 5新增的拖放API

HTML 5新增了关于拖放的API,通过拖放API可以让HTML页面的任意元素都变成可拖动的,通过使用拖放机制可以开发出更友好的人机交互界面。

拖放操作可以分成两个动作:在某个元素上按下鼠标,并移动鼠标(没有松开鼠标),此时开始拖动;在拖动过程中,只要没有松开鼠标,将会不断地产生拖动事件——这个过程被称为“拖”;把被拖动的元素拖动到另外一个元素上并松开鼠标——这个动作被称为“放”。拖放操作由“拖”和“放”两个动作组成。

1.启动拖动

在HTML 5中,

<script type="text/javaScript">
    var source = document.getElementById("source");
    source.ondragstart = function(evt)
    {
        // 让拖动操作携带数据
        evt.dateTransfer.setData("text/plain", "www.fkjava.org");
    }
</script>

2.接受“放”

不管是拖动图片,还是拖动

document.ondragover = function(evt)
{
    // 取消事件的默认行为
    return false;
}

在用户拖放HTML元素的过程中,可能触发如下表所示的事件。
这里写图片描述

3.DataTransfer对象

拖放触发的拖放事件有一个dataTransfer属性,该属性值是一个DataTransfer对象,该对象包含如下属性和方法。

  • dataTransfer.dropEffect:设置或返回拖放目标上允许放生的拖放行为。如果此处设置的拖放行为不在effectAllowed属性设置的多种拖放行为之内,拖放操作将会失败。该属性值只允许为”none”、”copy”、”link”和”move”四个值之一。
  • dataTransfer.effectAllowed:设置或返回被拖动元素允许发生的拖动行为。该属性可设置为”none”、”copy”、”copyLink”、”copyMove”、”link”、”linkMove”、”move”、”all”和”uninitialized”。
  • dataTransfer.items:
  • dataTransfer.setDragImage(element, x, y):
  • dataTransfer.addElement(element):
  • dataTransfer.types:
  • dataTransfer.getData(format):
  • dataTransfer.setData(format, data):
  • dataTransfer.clearData([format]):
    通过DataTransfer对象,可以让拖放操作实现更丰富的功能——开发者可以在拖放开始时(ondragstart事件)将拖放源的数据存入DataTransfer对象中,然后在拖放结束时从DataTransfer对象中读取数据,这样就可以完成更负责的拖放操作了。

4.拖放行为

5.改变拖放图标

展开阅读全文

没有更多推荐了,返回首页