本文共 5607 字，大约阅读时间需要 18 分钟。

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

HTML5保留的常用元素

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

1 基本元素

    HTML注释 Html文档的根元素 页面头部分 页面主体，这个标签还可以指id,class,style,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup等属性，这些属性用于指定Javascript脚本。

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

2 文本格式相关元素

代码示例：

加粗文本
斜体文本
粗斜体文本
被强调的文本
加粗文本
小号字体文本
   
    普通文本
    上标文本
   
普通文本下标加粗文本
   从左向右排列的文本
   从右向左排列的文本

效果图：

3  语义相关元素

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

代码示例：

   
疯狂Java的精神是疯狂源自梦想，技术成就辉煌这也是所有疯狂Java程序员的精神。
   
    
    
     锦瑟无端五十弦，一弦一柱思华年。
     
庄生晓梦迷蝴蝶，望帝春心托杜鹃。
     
沧海月明珠有泪，蓝田日暖玉生烟。
     
此情可待成追忆，只是当时已惘然。
    
是唐朝诗人李商隐的代表作，诗中隐藏中一种淡淡的忧伤，让人无法言说，但又无以谴怀。
   
《芙蓉镇》、《蓝风筝》是国内导演拍摄的很有思考深度的两部电影。
下面代码定义了一个Java类：
	public class Cat
	{
		private int name = "garfield";
	}
   
	public class Cat	{		private int name = "garfield";	}

代码效果：

   疯狂Java教育中心的缩写是fkjava。
   疯狂软件地址是
广州市天河区车陂大岗路4号沣宏大厦3006-3011
   
HTML是一种广为人知的标记语言。
可通过输入如下命令：
list -l
在Linux的Shell窗口查看当前目录下所有文件、目录的详细信息。
如果您在阅读疯狂Java体系图书时，遇到有任何无法理解的技术问题，
请登录www.fkjava.org发帖提问，可按如下示例内容发帖：
    我在阅读XXX图书的第X章、第X节时，遇到一个XXX问题，
错误提示信息是：XXX。
   i、j、k通常用于作为循环计数器变量。
   
Android是一个开发开放式的手机、平板电脑操作系统

效果图：

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

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

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

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

下面定义了四个超链接。

   疯狂Java联盟
   疯狂Java联盟
   
   文本格式化元素

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

	
   	
   	
   疯狂Java联盟
   疯狂Java联盟
   
   文本格式化元素

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

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

	
   	
   	定位到test锚点
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
   test
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a
a

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>完全类似的内容，因此可以包含较多类型的子元素。

	
   	
   		
定义反序的有序列表
	
   
		
    
疯狂Java讲义
		
    
轻量级Java EE企业应用实战
		
    
疯狂Android讲义
	
   
	
定义从3开始的有序列表
	
   
		
    
疯狂Java讲义
		
    
轻量级Java EE企业应用实战
		
    
疯狂Android讲义
	
   
	
定义使用小写字母编号的有序列表
	
   
		
    
疯狂Java讲义
		
    
轻量级Java EE企业应用实战
		
    
疯狂Android讲义
	
   
	
定义使用小写罗马数字、从4开始的有序列表
	
   
		
    
疯狂Java讲义
		
    
轻量级Java EE企业应用实战
		
    
疯狂Android讲义
	
   

	
   	
   		
dt定义标题、dd定义解释
	
   
		
    
     Java
    
    
		
    
    
     Java是一门广泛使用的、跨平台的开发语言
    
		
    
     疯狂Java体系图书
    
		
    
     疯狂Java体系图书是李刚老师积十年之功创作的一套系统的Java学习图书，
     
		且多次升级保持与最新技术同步，对广大初学者帮助很大。
    
		
    
     疯狂Java体系图书均已得到广泛的市场认同，多次重印成为超级畅销图书，
     
		并被多所“985”、“211”高校选作教材，
     
		部分图书已被翻译成繁体中文版、授权到台湾地区。
    
	
   

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>：定义表格脚。

代码示例：

	
   	
   	
   
	    
     图书
    
	    
	     
		      
 
		      
书名
		      
作者
	     
	    
	    
	     
		      
现总计：4本图书
	     
	    
	    
	     
		      
Java体系
		      
Java讲义
		      
李丽
	     
	     
		      
轻量级Java EE企业应用实战
		      
李刚
	     
	    
	    
	     
		      
iOS体系
		      
Swift讲义
		      
李庭
	     
	     
		      
疯狂iOS讲义
		      
李框
	     
	    
   

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

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

	
   	
   	
通过CSS设置表格背景色为黑色，单元格之间的间距为1px
	通过设置背景色为黑色可以实现边框效果
   
	    
     疯狂Java体系图书
    
	    	    		     		     		     		     	    	    
	     
		      
书名
		      
作者
		      
价格
	     
	    
	    
	     
		      
现总计：2本图书
	     
	    
	    
	     
		      
Java讲义
		      
李丽
		      
109
	     
	     
		      
轻量级Java EE企业应用实战
		      
李刚
		      
89
	     
	    
   

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