HTML5中一些常用的元素与属性介绍

HTML5规范保持了对现有HTML的最大兼容,并保留了绝大部分元素和属性,HTML推荐使用CSS来控制HTML文档样式。本文为大家介绍了HTML5中一些常用的元素与属性。

一、HTML5保留的常用元素

1、基本元素

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

  • <!-- -->: 定义HTML注释

  • <html>:HTML5文档的根元素

  • <head>:定义HTML5文档的页面头部分

  • <title>:定义HTML5文档的标题

  • <body>:定义HTML5文档的主体部分

  • <style>:用于引入样式定义

  • <h1>到<h6>:定义标题一到标题六

  • <p>:定义段落

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

  • <br>:插入一个换行

  • <hr>:定义水平线

  • <div>:定义文档中的节,也就是我们说的区块,会占满一行

  • <span>:与<div>基本相似,定义的是一个行内标签样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基本标签</title>
</head>
<body>
    <!-- 采用标题一到标题六来输出文本 -->
    <h1>疯狂Java讲义</h1>
    <h2>疯狂Android讲义</h2>
    <h3>轻量级Java EE企业应用实战</h3>
    <h4>疯狂XML讲义</h4>
    <h5>疯狂Ajax讲义</h5>
    <h6>经典Java EE企业应用实战</h6>
    <!-- 输出一条水平线 -->
    <hr />
    <!-- 使用三个span定义三节 -->
    <span>TOmcat</span><span>Jetty</span><span>Resin</span>
    <!-- 输出换行 -->
    <br />
    <!-- 使用三个div定义三节 -->
    <div>Tomcat</div><div>Jetty</div><div>Resin</div>
    <!-- 使用三个p定义三个段落-->
    <p>Tomcat</p><p>Jetty</p><p>Resin</p>
</body>
</html>

2、文本格式化元素

  • <b>:定义粗体文本

  • <i>:定义斜体文本

  • <em>:定义强调文本,实际效果与斜体文本差不多

  • <strong>:定义粗体文本

  • <small>:定义小号字体文本,通常用来标注免责声明、注意事项、法律规定和版权

  • <sup>: 定义上标文本

  • <sub>: 定义下标文本

  • <bdo>:定义文本显示方向,该标签可指定dir属性,属性值只能是ltr或rtl

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>格式化标签</title>
</head>
<body>
<span><b>加粗文本</b></span><br />
<span><i>斜体文本</i></span><br />
<span><b><i>粗斜体文本</i></b></span><br />
<span><em>被强调的文本</em></span><br />
<p><strong>加粗文本</strong></p>
<small><span>小号字体文本</span></small><br />
<div>普通文本<sup>上标文本</sup></div>
<span>普通文本<strong><sub>下标加粗文本</sub></strong></span><br />
<!-- 指定文本从左到右(正常情况)排列 -->
<bdo dir="ltr">从左到右排列的文本</bdo><br />
<!-- 指定文本从右向左排列 -->
<bdo dir="rtl">从右向左排列的文本</bdo><br />
</body>
</html>

3、语义相关元素

  • <abbr>:用于表示一个缩写,可指定title属性,该属性指定该缩写所代表的全称

  • <address>:用于表示一个地址,斜体显示文本。

  • <blockquote>:用于定义一段长的引用文本,浏览器会使用缩进的方式显示,该标签可指定cite属性,该属性指定该引用文本所引用的网址URL

  • <q>:用于定义一段短的引用文本,浏览器会为这段被引用的文本添加引号

  • <cite>:用于表示作品的标题,斜体显示

  • <code>:表示一段计算机代码

  • <dfn>:用于定义一个专业术语,浏览器会使用粗体或斜体显示

  • <del>:定义文档中被删除的文本。

  • <ins>:定义文档中插入的文本,浏览器通常会使用下划线显示

  • <pre>:表示该元素所包含的文本已进行了“预格式化”

  • <samp>:用于定义示范文本内容

  • <kdb>:用于定义键盘文本

  • <var>:用于表示一个变量。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>语义相关元素</title>
  </head>
  <body>
    <!-- 使用q表示一段短的引用文本 -->
    <p>疯狂Java的精神是<q cite="http://www.fkjava.org">
    疯狂源自梦想,技术成就辉煌。</q>这也是所有Java程序员的梦想</p>
    <div>
      <!-- 使用blockquote表示一段长的引用文本 -->
      <blockquote>
        景色无端五十铉,一炫一柱思年华。<br />
        庄生晓梦迷蝴蝶,望帝春心托杜鹃。<br />
        沧海月明珠有泪,蓝田日暖玉生烟。<br />
        此情可待成追忆,只是当时已惘然。
      </blockquote>
      是唐朝诗人李商隐的代表作,诗中影藏着一种淡淡的忧伤,让人无法言说,但又无法释怀。
    </div>
    <p>
      <cite>《芙蓉镇》</cite>、<cite>《蓝风筝》</cite>
      是国内导演拍摄的最有思考深度的两部电影。
    </p>
    <p>
      下面定义了一个Java类:<br />
      <code>
        public class Cat<br />
        {<br />
          private int name = "garfield";<br />
        }<br />
      </code>
    </p>
    <!-- pre元素包含的内容是"预格式化"文本 -->
    <pre>
      public class Cat
      {
        private int name = "garfield";
      }
    </pre>
    <p>
      <!-- 使用abbr定义缩写 -->
      疯狂Java教育中心的缩写是:<abbr title="疯狂Java教育">fkjava</abbr>
      <!-- 使用address定义地址 -->
      疯狂软件地址是:<address>广州市天河区车坡大纲路4号冯弘大厦306-3011</address>
      <!-- 使用dfn定义专业术语 -->
      <p>
        <dfn>HTML</dfn>是一种广为人知的标记语言。
      </p>
      <p>
        可通过输入如下命令:<br />
        <kbd>list -l</kbd><br />
        在Linux的Shell窗口查看当前目录下所有文件、目录的详细信息。
      </p>
      <p>
        如果您在阅读疯狂Java体系图书时,遇到有任何无法理解的技术问题,<br />
        请登陆www.fkjava.org发帖提问,可按如下示例内容发帖:<br />
        <!-- 使用samp定义示范文本内容 -->
        <samp>
          我在阅读XXX图书的第X章、第X节时,遇到一个XXX问题,<br />
          错误提示信息是:XXX。
        </samp>
      </p>
      <!-- 使用var定义变量 -->
      <var>i</var>、<var>j</var>、<var>k</var>通常用于作为循环计数器变量。
      <!-- 使用del和ins表示修订 -->
      <p>Android是一个<del>开发</del><ins>开放</ins>式的手机、平板电脑操作系统</p>
      
    </p>
  
  </body>
</html>

4、超链接和锚点

HTML5保留了定义超链接的<a.../>元素,它有如下3个重要的属性:

  • href:指定超链接所关联的另一个资源

  • target:指定使用哪种框架来装载资源,有_self、_blank、_top、 _parent四个值

  • media:指定目标URL所引用的媒体类型,默认为all,它是HTML5新 增的属性

5、列表相关元素

  • <ul>:定义无序列表

  • <ol>:定义有序列表,该元素还可以指定以下三个属性:

start:指定列表项的起始数字

type:指定使用哪种类型的编号

reversed:该属性指定是否将排序反转

  • <li>:定义列表项目

  • <dl>:也用于定义列表,只能包含<dt>和<dd>两个子元素

  • <dt>:用于定义列表,只能包含<dd>子元素

  • <dd>:定义普通列表项

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>列表相关标签</title>
  </head>
  <body>
    <!-- 定义无序列表 -->
    <ul>
      <li>疯狂Java讲义</li>
      <li>轻量级Java EE 企业应用实战</li>
      <li>疯狂Android讲义</li>
    </ul>
    <!-- 定义有序列表 -->
    <ol start="2" type="I">
      <li>疯狂Java讲义</li>
      <li>轻量级Java EE 企业应用实战</li>
      <li>疯狂Android讲义</li>
    </ol>
    <!-- 定义列表 -->
    <dl>
      <!-- 定义标题列表项 -->
      <dt>疯狂Java体系</dt>
      <dd>疯狂Java讲义</dd>
      <dd>轻量级Java EE企业应用实战</dd>
      <dd>疯狂Android讲义</dd>
      <!-- 定义标题列表项 -->
      <dt>作者其他图书</dt>
      <dd>Struts 2.1 权威指南</dd>
      <dd>基于J2EE的Ajax宝典</dd>
    </dl>
  </body>
</html>

6、图像相关元素

HTML5保留了<img.../>元素在页面中定义图像,它是一个空元素,它必须制定以下两个属性:

  • src:指定图片文件所在的位置,可以是相对或绝对路径

  • alt:指定一段文本,作为图片的提示信息

<img>的两个可选属性:

  • height:图片高度

  • width:图片宽度

与<img>相关的标签:

  • <map>:定义图片映射

  • <area>:定义图片映射的内部区域

7、表格相关元素

<table>:用于定义表格,它可以指定如下属性:

  • cellpadding:指定单元格内容和单元格边框之间的间距

  • cellspacing:指定单元格时间的间距

  • width:指定表格的宽度

注意:HTML5建议将表格的所有属性都放到CSS中定义

  • <caption>:用于定义表格标题

  • <tr>:定义表格行

  • <td>:定义单元格,它可以指定如下几个属性:

  • colspan:指定该单元格跨多少列

  • rowspan:指定单元格可横跨的行数

  • height:指定该单元格的高度

  • width:指定该单元格的宽度

  • <th>:定义表格页眉的单元格

  • <tbody>:定义表格的主体

  • <thead>:定义表格头

  • <tfoot>:定义表格脚

注意:如果使用<thead.../>和<tfoot.../>标签,建议使用如下次序使用它们: <thead.../>、<tfoot.../>、<tbody.../>,浏览器会自动将<tfoot.../>呈现在最下面

  • <col>:该元素为表格中的一个或多个列指定属性值

  • <colgroup>:该元素用于为表格中的一个或多个列指定属性值

8、框架相关元素

HTML5不再推荐在页面中使用框架集,但保留了<iframe.../>元素,它有 一个属性src,该属性指定一个URL,指定该iframe将装载那个页面。

二、HTML5新增的通用属性

1、contentEditable属性

HTML5为大部分HTML元素增加了contentEditable属性,如果将该属性的值设为true,那么浏览器允许开发者直接编辑该HTML元素里的内容,并且它具有可继承性。

HTML5为允许设置contentEditable属性的元素提供了isContentEditable属性,当元素可编辑则返回true,否则false。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>contentEditable属性</title>
  </head>
  <body>
    <!-- 直接指定contentEditable=“true”表明该元素是可编辑的 -->
    <div contenteditable="true" style="width: 500px; border:1px solid black">
      疯狂Java讲义
      <!-- 该元素的父元素有contentEditable=“true”,因此该表格也是可以编辑的 -->
      <table style="width: 420px; border-collapse: collapse;" border="1">
        <tr>
          <td>疯狂Java讲义</td>
          <td>疯狂Android讲义</td>
        </tr>
        <tr>
          <td>轻量级Java EE企业应用实战</td>
          <td>经典Java EE企业应用实战</td>
        </tr>
      </table>
    </div>
    <hr />
    <!-- 这个表格默认是不可编辑的,双击之后该表格变为 -->
    <table id="target" ondblclick="this.contentEditable=true" 
    style="width: 420px; border-collapse: collapse;" border="1">
      <tr>
        <td>Java</td>
        <td>Ruby</td>
      </tr>
      <tr>
        <td>C/C++</td>
        <td>Python</td>
      </tr>
    </table>
  
  </body>
</html>

2、designMode属性

designMode属性相当于一个全局的contentEditable属性,如果把整个页面的designMode属性设置为on,则该页面上所有可支持contentEditable属性的元素都编程可编辑状态。

document.designMode = "on";

3、hidden属性

HTML5为所有元素提供一个hidden属性,如果某元素的hidden设为true, 则浏览器不显示该组件,且不保留该组件所占空间

<div id="target" hidden="true" style="height: 80px;">文字内容</div>
		<button onclick="var target=document.getElementById('target');
			target.hidden=!target.hidden;">显示/隐藏</button>

4、spellcheck属性

HTML5为<input.../>、<textarea.../>等元素增加了spellcheck属 性,该属性支持 true和false两个值,如果为true,则浏览器会对用户 的输入进行语法检。

<!-- 指定执行拼写检查 -->
<textarea spellcheck="true" rows="3" cols="40"></textarea>

三、HTML新增的常用元素

1、文档结构元素

  • <article>:该元素定义页面上一篇独立、完整的“文章”.

    <article.../>可以包含<header.../>作为头部

    <article.../>可以包含<footer.../>作为尾部

    <article.../>可以包含<section.../>作为文章的分段

    <article.../>可以包含<article.../>作为文章的附属文章

  • <section>:该元素用于对页面上的内容进行分块

    建议使用<h1>-<h6>作为<section.../>的标题

    <section.../>可以包含<article.../>

    <section.../>也可以包含<section.../>

注意:<article.../>和<section.../>很容易混淆,它们可以包含很多子元素,也可以相互嵌套。一般 使用<article.../>表达一篇独立、完整的文章,而使用<section.../>对页面内容进行分块。

  • <nav>:该属性用于定义页面上的“导航条”

  • <aside>:该属性用于定义页面内容的附属信息,推荐此属性配合CSS渲染成侧边栏

  • <header>:该属性主要为<article.../>定义头部信息

  • <hgroup>:该元素组织多个<h1>~<h6>这样的标题元素

  • <footer>:该元素主要为<article>定义脚注信息

  • <figure>:该元素用于表示一块独立的“图片区域”,它可以包含一个或多个由<img>元素组成的图片,除此之外,它还可以包含一个<figcaption>元素,用于表示该图片区域的标题

  • <figcaption>:通常放在<figure>元素里,用于表示图片区域的标题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5新增元素 - article</title>
    </head>
    <body>
        <article>
            <!-- 帖子的“头部” -->
            <header>
                <h1>学习Android,必须先学习Java吗?</h1>
                <div>作者:crazystu</div>
            </header>
            <p>
                学习Android,必须先学习Java吗?
                Android上的应用程序只能用Java编写吗?可以用C++吗?
            </p>
            <!-- 帖子的“回复”部分,用section元素表示 -->
            <section>
                <article>
                    <!-- 回复的头部 -->
                    <header>
                        <h2>还是得学习Java</h2>
                        <div>作者:kongyeeku</div>
                    </header>
                    <p>
                        虽然Android不一定要使用Java开发,还可以选择JavaScript<br />
                        或NDK开发,但Java毕竟是Android主要的开发语言,<br />
                        因此建议学习Android之前还是学习Java
                    </p>
                </article>
                <!-- 每一个article代表一个回复 -->
                <article>
                    <!-- 回复的头部 -->
                    <header>
                        <h2>Java是基础</h2>
                        <div>作者:kuan008</div>
                    </header>
                    <p>
                        Java是基础,学好Java再去学习Android事半功倍。
                    </p>
                </article>
            </section>
            <!-- 帖子的”脚注“ -->
            <footer>
                以上帖子和回复只代表个人观点,不代表疯狂Java联盟的观点或立场
            </footer>
        </article>
    </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5新增元素 - aside</title>
  </head>

  <body>
      <article>
        <!-- 帖子的头部 -->
        <header>
            <h1>学习Android,必须先学习Java吗?</h1>
            <div>作者:crazystu</div>
        </header>
        <p>
            学习Android,必须先学习Java吗?
            Android上的应用程序只能用Java编写吗?可以用C++吗?
        </p>
        <!-- 帖子的“回复”部分,用section元素表示 -->
        <section>
            <!-- 回复的头部 -->
            <header>
                <h2>还是得学习Java</h2>
                <div>作者:kongyeeku</div>
            </header>
            <p>
                虽然Android不一定要使用Java开发,还可以选择JavaScript<br />
                或NDK开发,但Java毕竟是Android主要的开发语言,<br />
                因此建议学习Android之前还是学习Java            
            </p>
        </section>
      </article>
  </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5新增结构元素 - figure</title>
    </head>
    
    <body>
        <figure style="border:2px solid black; padding:5px; width:500px;">
            <figcaption><b>疯狂Java体系图书</b></figcaption>
            <img src="images/java.png" alt="疯狂Java">
            <img src="images/android.png" alt="疯狂Android">
            <img src="images/ee.png" alt="轻量级Java EE">            
        </figure>
    </body>
</html>

2、语义相关元素

HTML5提供了以下两个语义相关的元素:

  • <mark>:用于显示页面中需要重点关注的内容,浏览器通常会使用黄色来标注,比如搜索结果中用户输入的关键字

  • <time>:用于显示被标注的内容是日期、时间或日期时间,该元素有一个datatime属性,用于向机器提供时间

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>新增的语义相关元素 - mark和time</title>
    </head>
    <body>
        <article>
            <header>
                <h2>疯狂软件即将引入<mark>HTML5</mark>相关课程</h2>
            </header>
            <p>
                <mark>HTML5</mark>是下一代的HTML规范。<br />
                <mark>HTML5</mark>即将把前端开发者从繁重的开发中解放出来<br />
                为了把握技术潮流的脉搏,疯狂软件教育计划在
                <time datetime="2012-04-21">2012年4月</time>引入<mark>HTML5</mark>相关课程
            </p>
        </article>
    </body>
</html>

<details>:用于显示一段详细信息或某个主题的细节,通常它会跟<summary>元素结合使用,把<summary>放在<details>中,为其定义摘要信息,当用户点击摘要信息时,浏览器会显示出详细内容。目前只有Chrome浏览器支持这两个属性

<details>
    <summary>芙蓉镇</summary>
    《芙蓉镇》是一部极好的电影,每个中国人都不应该错过。
</details>
  • <meter>:用于表示一个已知最大值和最小值的计数仪表,它可以指定如下属性:

    value:指定计数仪表的当前值,默认为0

    min:指定计数仪表的最小值,默认为0

    max:指定计数仪表的最大值,默认为1

    low:指定计数仪表制定范围的最小值,它必须大于min

    high:指定计数仪表指定范围的最大值,它必须小于max

    optimum:指定计数仪表有效范围的最佳值

  • <progress>:用于表示一个进度条,它可以指定如下属性:

    max:指定进度条完成时的值

    value:指定进度条当前完成的进度值

四、HTML5头部和元信息

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

  • <script>:该元素用于包含JavaScript脚本

  • <style>:该元素用于定义内部CSS样式

  • <link>:该元素用于链接外部CSS样式资源

  • <title>:该元素定义文档标题

  • <base>:该元素用于指定该页面中所有链接的基准链接

  • <meta>:该元素用于定义HTML页面的元数据,也就是一些name-value对,它可以指定如下属性

http-equiv:指定元信息的名称

name:指定元信息的名称,可以随意指定

content:指定元信息的值

<head>
    <title>我是标题</title>
    <meta name="author" content="Yeeku.H.Lee">
    <meta name="websit" content="http://www.xxx.org">
    <meta name="copyright" content="2001-2008 xxx.org">
    <meta name="Keywords" content="Java论坛, Java技术论坛">
</head>

http-equiv属性可以指定如下值:

Expires:指定页面的过期时间,一旦过期必须从服务器下载

<meta http-equiv="Expires" content="Sat Sep 27 16:12:36 CST 2008">

Progma:指定禁止浏览器从本地磁盘缓存中调阅页面内容

<meta http-equiv="Progma" content="no-cache">

Refresh:指定浏览器多长时间后自动刷新指定页面

<!-- 设置2秒后自动刷新本页面 -->
<meta http-equiv="Refresh" content="2" />
<!-- 设置2秒后自动刷新http://www.xxx.org -->
<meta http-equiv="Refresh" content="2;URL= / >

Set-Cookie:设置Cookie,如果网页过期,那么Cookie也将被删除

<meta http-equiv="Set-Cookie" content="name=value expires=Sat Sep 27 16:12:36 CST 2008, path=" />

content-Type:设置该页面的内容类型和所用的字符集

<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />

五、HTML5新增的拖放API

HTML5新增的拖放API,可以让HTML页面的任意元素变得可以被拖放,通过它可以开发出更友好的人机交互界面

1、启动拖动

在HTML5中,把需要拖动的元素的draggable属性设置为true,就表示它可以被拖动了,但此时它未携带数据,所以用户是看不到效果的,为了让拖动操作能携带数据,应该为被拖动元素的ondragstart事件指定监听器。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>可拖动的DIV</title>
</head>
<body>
<div id="source" style="width:80px;height:80px;border:1px 
solid black;background-color:#bbb;" draggable="true">可拖动的Div</div>

<script>
  var source = document.getElementById('source');
  source.ondragstart = function (evt) {
    evt.dataTransfer.setData('text/plain', 'www.xxx.org');
  } 
</script>
</body>
</html>

2、接受“放”操作

为了让document接受“放”操作,应该为document的ondragover事件指定监听器,在监听器中取消document对拖动事件的默认行为

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

但Firefox和Chrome对此操作有不同的反应,所以需要对document的ondrop事件设置监听器

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

下表是用户在拖放HTML元素时可能会触发的事件

1.jpg

下面的代码实现了一个可以自由拖动的<div>元素

<!DOCTYPE html>
<html>
<head>
  <meat charset="utf-8">
  <title></title>
  <style>
    div#source {
      width: 80px;
      height: 80px;
      background-color: #bbb;
    }
  </style>
</head>
<body>
  <div id="source" draggable="true">可拖动Div</div>

  <script>
    var source = document.getElementById('source');
    source.ondragstart = function (evt) {
      evt.dataTransfer.setData('text/plain', 'www.baidu.com');
    }
    document.ondragover = function (evt) {
      return false;   //取消事件默认行为
    }
    document.ondrop = function (evt) {
      source.style.position = 'absolute';
      source.style.left = evt.pageX + 'px';
      source.style.top = evt.pageY + 'px';
      return false;      //取消事件默认行为
    }
  </script>
</body>
</html>

更多HTML知识请关注HTML中文网HTML教程栏目。

以上就是HTML5中一些常用的元素与属性介绍的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » HTML 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏