HTML5为什么要保留常用元素呢!!!

版权声明:本文为博主原创文章,如需转载请标明出去。 https://blog.csdn.net/sujin_/article/details/78550874

今天初步了解一下HTML5的常用元素和属性,如果大家觉得写的不错的话,可以点击右上角的关注,我会持续更新博客的,谢谢。

HTML5保留的常用元素

&(保留的)基本元素、&文本格式化元素、&语义相关元素、&超链接和锚点、&列表相关元素、&表格相关元素

1 基本元素

<!--...--> HTML注释
<html> Html文档的根元素
<head> 页面头部分
<title> 页面标题
<body> 页面主体,这个标签还可以指id,class,style,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup等属性
,这些属性用于指定Javascript脚本。
<style> 样式定义
<h1><h2><h..><h6>定义的标题
<p> 段落定义,可以定义id,class,style和onclick等各种事件属性
<br> 换行
<hr> 水平线
<div> 文档中的块,可以定义id,class,style和onclick等各种事件属性
<span> 和<div>一样

注意:由于<div../>元素的滥用,导致HTML页面中语义的清晰性下降,为了避免这种情况,HTML5规范推荐HTML5的文档结构元素如:<article../>、<section.../>、<nav.../>等代替<div../>。

2 文本格式相关元素

<b>:定义粗体wenben
<i>:定义斜体文本
<em>:定义强调文本
<strong>:定义粗体文本
<small>:定义小号字体文本
<sup>:定义上标文本
<sub>:定义下标文本
<bdo>:定义文本显示的方向

代码示例:

<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 />

效果图:


如果需要对文本进行更丰富的样式的格式化,则建议使用CSS样式单,后续我会为大家讲解

3  语义相关元素

HTML5保留了如下语义相关元素。

<abbr>:用于表示一个缩写。使用该元素时通常建议指定title属性,该元素用于指定该缩写所代表的全称。
<address>:用于表示一个地址。浏览器通常会用斜体字显示<address.../>所包含的文本。
<blockquote>:用于定义一段长的引用文本。浏览器会使用缩进的方式显示这段被引用的文本。
                        使用<blockquote.../>元素时可指定cite属性,该属性用于指定该引用文本所引用的网址URL或出处。
<q>:用于定义一段短的引用文本。浏览器会为这段被引用文本添加引号。
<cite>:用于表示作品(一本书、一部电影、一首歌)的标题。常常浏览器会用斜字体显示<cite../>所包含的文本。
<code>:用于表示一段计算机代码。
<dfn>:用于定义一个专业术语。浏览器通常会用粗体或斜字体显示<dfn../>所包含的文本。
<del>:定义文档中被删除的文本。浏览器通常会以画线形式显示<del>包含的文本。
<ins>:定义文档中插入的文本。浏览器通常会以画线形式显示<ins>包含的文本。
<pre>:用于表示该元素所包含的文本已经进行了预格式化。也就是说,
           <pre.../>元素所包含文本中的空格、回车、Tab键和其他格式字符都会被留下来,但浏览器会处理<pre.../>元素内大部分HTML元素。
<samp>:用于定义示范文本内容。
<kbd>:用于定义键盘文本。该元素用于表示文本是通过键盘输入。通常在计算机使用文档。使用说明中会经常使用该元素。
<var>:用于表示一个变量。浏览器通常会用斜体字显示<var../>所包含的文本。

代码示例:

<!-- 使用q表示一段短的引用文本。 -->
<p>疯狂Java的精神是<q>疯狂源自梦想,技术成就辉煌</q>
这也是所有疯狂Java程序员的精神。</p>
<div>
<!-- 使用blockquote表示一段长的引用文本。 -->
<blockquote cite="李义山诗集">
锦瑟无端五十弦,一弦一柱思华年。<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../>、<adddress.../>、<code.../>等语义相关的元素来定义HTML页面。

<!-- 使用abbr定义缩写 -->
疯狂Java教育中心的缩写是<abbr title="疯狂Java教育">fkjava</abbr>。
<!-- 使用address定义地址 -->
疯狂软件地址是<address>广州市天河区车陂大岗路4号沣宏大厦3006-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>

效果图:

4 使用a元素添加超链接和锚点

HTML页面使用超链接与网络上的另一个资源保持关联,当用户点击页面上的超链接时,浏览器会导航到超链接所值的资源。<a>元素还有如下6个重要的属性:

href:指定超链接所链接的另外一个资源。
hreflang:指定超链接所链接的文档所使用的语言。
target:指使用框架集中的哪一个框架来装载另一个资源。该属性的属性值可以是_self、_blank、_top、__parent四个值,分别表示自身、新窗口、顶层框架、父框架来装载新资源。
type:指定被链接文档的MIME类型。
media:指定目标URL所引用的媒体类型。默认值为all。只要当指定了href属性时该属性才有效。

--------------download、type、media是HTML5新增的属性

<a.../>元素主要可以包含文本。图像。各种文本格式化元素和表单元素等内容。

下面定义了四个超链接。

<!-- 在本窗口打开另一个资源 -->
<a href="http://www.crazyit.org"><b>疯狂Java联盟</b></a><br />
<!-- 在新窗口中打开另一个资源 -->
<a href="http://www.crazyit.org"
	target="_blank"><em>疯狂Java联盟</em></a><br />
<!-- 为图像增加超链接 -->
<a href="http://www.crazyit.org"><img src="images/logo.jpg"
	alt="疯狂Java联盟"/></a><br />
<!-- 基于相对路径指定另一个资源 -->
<a href="text.html">文本格式化元素</a><br />

上面的代码定义了四个超链接,分别是粗体字超链接、斜体字超链接、图像超链接和普通超链接,单击前三个超链接中任意一个,浏览器将导航到--疯狂Java联盟--站点;单击最后一个则会链接到text.html。当使用<a.../>元素时,href属性值既可以是绝对路径,也可以是相对路径当指定绝对路径时,href属性值为URL(Uniform Resource Locator,统一资源定位符),URL用于对互联网上的文档(其他资源)进行寻找,深入了解URL

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 超链接 </title>
</head>
<body>
<!-- 在本窗口打开另一个资源 -->
<a href="http://www.crazyit.org"><b>疯狂Java联盟</b></a><br />
<!-- 在新窗口中打开另一个资源 -->
<a href="http://www.crazyit.org"
	target="_blank"><em>疯狂Java联盟</em></a><br />
<!-- 为图像增加超链接 -->
<a href="http://www.crazyit.org"><img src="images/logo.jpg"
	alt="疯狂Java联盟"/></a><br />
<!-- 基于相对路径指定另一个资源 -->
<a href="text.html">文本格式化元素</a><br />
</body>
</html>

 

点击图片,它并没有打开logo.jpg,而是下载logo.jpg图片,并且默认文件名为:疯狂Java 联盟.jpg,这就是download的作用

 

此外,<a>元素还可以生成一个命名锚点,在HTML页面中生成一个定位点,这样允许超链接直接链接到指定页面的该定位点。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 超链接 </title>
</head>
<body>
<a href="anchor2.html#test">定位到test锚点</a><br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
<!-- 下面代码会生成一个命名锚点 -->
<a name="test">test</a><br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
a<br>
</body>
</html>

5 列表相关元素

  • <ul>:定义无须列表。该元素只能包含<li>元素。
  • <ol>:定义有序列表,在HTML5中,该元素还可以指定下面三个属性
  1. start:指定列表项的起始数字。默认是第一个,如1、A等。
  2. type:指定使用哪种类型的编号,例如1代表使用数字,A或a分别代表使用大写或小写字母,I或i代表使用大写或小写罗马数字。该属性在HTML5规范中已经不推荐使用了,推荐用CSS来定义。
  3. reversed:该属性指定是否将排序反转。很遗憾,目前没有任何浏览器支持该属性。
  • <li>:定义列表项。该元素里可以包含<div>完全类似的内容,因此可以包含较多类型的子元素。
  • <dl>:用于定义术语列表。该元素只能包含<dt>和<dd>两种子元素。
  • <dt>:定义标题列表项。该元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素等。
  • <dd>:定义普通列表项。该元素里可以包含<div>完全类似的内容,因此可以包含较多类型的子元素。
<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 列表相关元素 </title>
</head>
<body>
	<h4>定义反序的有序列表</h4>
	<ol reversed="true">
		<li>疯狂Java讲义</li>
		<li>轻量级Java EE企业应用实战</li>
		<li>疯狂Android讲义</li>
	</ol>
	<h4>定义从3开始的有序列表</h4>
	<ol start="3">
		<li>疯狂Java讲义</li>
		<li>轻量级Java EE企业应用实战</li>
		<li>疯狂Android讲义</li>
	</ol>
	<h4>定义使用小写字母编号的有序列表</h4>
	<ol type="a">
		<li>疯狂Java讲义</li>
		<li>轻量级Java EE企业应用实战</li>
		<li>疯狂Android讲义</li>
	</ol>
	<h4>定义使用小写罗马数字、从4开始的有序列表</h4>
	<ol type="i" start="4">
		<li>疯狂Java讲义</li>
		<li>轻量级Java EE企业应用实战</li>
		<li>疯狂Android讲义</li>
	</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 列表相关元素 </title>
</head>
<body>
	<h2>dt定义标题、dd定义解释</h2>
	<dl>
		<dt>Java<dt>
		<dd>Java是一门广泛使用的、跨平台的开发语言</dd>
		<dt>疯狂Java体系图书</dt>
		<dd>疯狂Java体系图书是李刚老师积十年之功创作的一套系统的Java学习图书,<br>
		且多次升级保持与最新技术同步,对广大初学者帮助很大。</dd>
		<dd>疯狂Java体系图书均已得到广泛的市场认同,多次重印成为超级畅销图书,<br>
		并被多所“985”、“211”高校选作教材,<br>
		部分图书已被翻译成繁体中文版、授权到台湾地区。</dd>
	</dl>
</body>
</html>

6 表格相关元素

1.<table>:用于定义表格,有如下属性

  • cellpading:指定单元格内容和单元格边框之间的间距。该属性可以为百分比或素值。
  • cellspacing:指定单元格之间的间距。
  • width:指定表格的宽度。

2.<caption>:用于定义表格标题,该元素只能包含文本、图片、超链接、文本格式化元素和表单控件元素。

3.<tr>:定义表格行

4.<td>:定义单元格

  • colspan:指定该单元格跨多少列,该属性值就是一个简单的数字。
  • rowspan:指定此单元格可横跨的行数。
  • height:指定该单元格的高度
  • width:指定单元格的宽度

5.<th>:定义表格的表头单元格,和<td>元素的用法几乎一模一样,只是浏览器呈现时有一定的差别。

6.<tbody>:定义表格的主体。

7.<thead>:定义表格头。

8.<tfoot>:定义表格脚。

代码示例:

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 带tbody的表格 </title>
</head>
<body>
<table border="1" style="width:400px">
	<caption><b>图书</b></caption>
	<thead>
	<tr>
		<th> </th>
		<th>书名</th>
		<th>作者</th>
	</tr>
	</thead>
	<tfoot>
	<tr>
		<td colspan="3" style="text-align:right">现总计:4本图书</td>
	</tr>
	</tfoot>
	<tbody>
	<tr>
		<th rowspan="2">Java体系</th>
		<td>Java讲义</td>
		<td>李丽</td>
	</tr>
	<tr>
		<td>轻量级Java EE企业应用实战</td>
		<td>李刚</td>
	</tr>
	</tbody>
	<tbody>
	<tr>
		<th rowspan="2">iOS体系</th>
		<td>Swift讲义</td>
		<td>李庭</td>
	</tr>
	<tr>
		<td>疯狂iOS讲义</td>
		<td>李框</td>
	</tr>
	</tbody>
</table>
</body>
</html>

如果决定使用<tbody>和<tfoot>元素,只能在<table>元素内使用,并且要按照顺序来,除此之外,如果需要在页面中为某列整体指定属性,HTML5中有这两个元素:

<col>

用于表格中的一个或多个列指定属性值,还可以指定span属性,用于指定该列可横跨多少列

<colgroup> 用于表格中的一个或多个指定的属性值,它的作用只是用于多个<col>元素

在<table>中使用<col>为表格指定属性,那么<col>定义的表格列数就应该与表格内实际包含的列数相等。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 带col的表格 </title>
</head>
<body>
<h4>通过CSS设置表格背景色为黑色,单元格之间的间距为1px<br>
	通过设置背景色为黑色可以实现边框效果</h4>
<table style="background-color:black;
	border-collapse:separate;border-spacing:1px;">
	<caption><b>疯狂Java体系图书</b></caption>
	<!-- 定义所有列的背景色都是白色 -->
	<colgroup style="background-color:white;">
		<!-- 设置第一列宽160px -->
		<col style="width:160px"/>
		<!-- 定义横跨两列,设置这两列各宽100px -->
		<col span="2" style="width:100px"/>
	</colgroup>
	<thead>
	<tr>
		<th>书名</th>
		<th>作者</th>
		<th>价格</th>
	</tr>
	</thead>
	<tfoot>
	<tr>
		<td colspan="3" style="text-align:right">现总计:2本图书</td>
	</tr>
	</tfoot>
	<tbody>
	<tr>
		<td>Java讲义</td>
		<td>李丽</td>
		<td>109</td>
	</tr>
	<tr>
		<td>轻量级Java EE企业应用实战</td>
		<td>李刚</td>
		<td>89</td>
	</tr>
	</tbody>
</table>
</body>
</html>

 

---------------------------如果大家喜欢我的博客,可以点击左上角的关注

 

阅读更多
换一批

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