之前大致总结过HTML5的发展。

　　这里贴出之前的随笔：http://www.cnblogs.com/jiangxiaobo/p/5199924.html

我们就从HTML5的基础总结起。希望可以提高自身的基础。

HTML5不是革命式的发展，它是对HTML以前版本的继承和发展，因此HTML5保留了以前HTML版本绝大部分标签。

1. 基本元素

　　HTML5 保留的基本元素有如下几个。

　　　　1》 <!-- ... --> 定义HTML注释。位于<!-- 与 -->之间的内容会被当成注释处理。

　　　　2》 <html> 它是HTML5文档的根元素。但HTML5允许完全省略这个元素。

　　　　3》 <head> 它用于定义HTML5文档的页面头部分。但HTML5允许完全省略这个元素。

　　　　4》 <title> 它用于定义HTML5文档的页面标题。

　　　　5》 <body> 它用于定义HTML5文档的页面主体部分，该标签可以指定id、class、style等核心属性，还可以指定onload、onunload、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup等事件属性，这些属性用于指定JavaScript脚本。

　　　　6》 <style> 该元素用于引入样式定义。

　　　　7》 <h1>到<h6> 定义标题一到标题六。

　　　　8》 <p> 定义段落，该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。

　　　　9》 <br> 插入一个换行，该标签可以指定id、class、style等核心属性。

　　　　10》 <hr> 定义水平线，该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。HTML5中<hr.../>还代表了主题结束的语义。

　　　　11》 <div> 定义文档中的节。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。

　　　　12》 <span> 与<div>基本相似，区别是该定义的节默认不会换行。该标签可以指定和<div>相同的属性。

2. 文本格式化元素

　　下面这些元素让文本内容在浏览器中呈现出特定效果。

　　　　1》 <b> 定义粗体文本。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。

　　　　2》 <i> 定义斜体文本。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。

　　　　3》 <em> 定义强调文本，实际效果与斜体文本差不多。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。

　　　　4》 <strong> 定义粗体文本。与<b>标签的作用和用法基本相同。

　　　　5》 <small> 定义小号字体文本。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。

　　　　6》 <sup> 定义上标文本。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。

　　　　7》 <sub> 定义下标文本。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。

　　　　8》 <bdo> 定义文本显示的方向。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。除此之外，该标签也可以指定dir属性，该属性值只能是ltr或者rtl。

3. 语义相关元素

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

　　　　1》 <abbr> 用于表示一个缩写。使用该元素时可指定如下属性。

　　　　　　title 该属性用于指定该缩写所代表的全称。

　　　　2》 <address> 用于表示一个地址。浏览器通常会用斜体字显示<address.../>所包含的文本。

　　　　3》 <blockquote> 用于定义一段长的引用文本。浏览器会使用缩进的方式显示这段被引用文本。使用<blockquote.../>元素时可指定如下属性。

　　　　　　cite 该属性指定该引用文本所引用的网址URL

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

　　　　5》 <cite> 用于表示作品（一本书、一部电影、一首歌曲）的标题。常常浏览器会用斜体字显示<cite.../>所包含的文本。

　　　　6》 <code> 用于表示一段计算机代码。

　　　　7》 <dfn> 用于定义一个专业术语。浏览器通常会用粗体或斜体字显示<dfn.../>所包含的文本。

　　　　8》 <del> 定义文档中被删除的文本。浏览器通常会以中画线形式显示<del>包含的文本。

　　　　9》 <ins> 定义文本中插入的文本。浏览器通常会以下画线形式显示<ins>包含的文本。

　　　　　　<del>、<ins> 两个元素都可以指定如下两个属性：

　　　　　　　　cite 该属性值为一个URL，该URL对应的文本解释了文本被删除或插入的原因。

　　　　　　　　datetime 定义文本被删除或插入的日期、时间。

　　　　10》 <pre> 用于表示该元素所包含的文本已经进行了“预格式化”。也就是说，<pre.../>元素所包含文本中的空格、回车、Tab键和其他格式字符都会被保留下来，但浏览器会处理<pre.../>元素内大部分HTML元素。

　　　　11》 <samp> 用于定义示范文本内容。

　　　　12》 <kbd> 用于定义键盘文本。该元素用于表示文本是通过键盘输入的。通常在计算机使用文本，使用说明中会经常使用到该元素。

　　　　13》 <var> 用于表示一个变量。浏览器通常会用斜体字显示<var.../>所包含的文本。

4. 超链接和锚点

　　HTML页面使用超链接与网络上的另一个资源保存关联，当用户单击页面上的超链接时，浏览器会导航到超链接所指的资源。

　　HTML5保留了定义超链接的<a.../>元素，该元素可以指定id、class、style等核心属性，也可以指定onclick等各种事件属性。它还可以指定如下三个重要属性。

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

　　　　target 指定使用框架集中的哪个框架来装载另一个资源。该属性的属性值可以是_self、_blank、_top、_parent四个值，分别代表使用自身、新窗口、顶层框架、父框架来装载新资源。

　　　　media 指定目标URL所引用的媒体类型。默认值为all。只有当指定了href属性时该属性才有效。

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

　　完整网址遵循的语法规则：

　　　　scheme://host.domain:port/path/filename

　　　　关于这个URL地址的解释如下：

　　　　　　scheme 指定因特网服务的类型。最流行的类型是HTTP。

　　　　　　domain 指定因特网域名。

　　　　　　host 指定此域名的主机。如果被省略，HTTP的默认主机是www。

　　　　　　port 指定主机的端口号。端口号通常可以被省略，HTTP服务的默认端口是80。

　　　　　　path 指定远程服务器上的路径，该路径也可以被省略，省略该路径则默认被定位到网站的根目录。

　　　　　　filename 指定远程文档的名称。如果省略该文件名，通常会定位到index.html、index.htm等文件，或定位到Web服务器设置的其他文件。

　　　　画个表吧：

URL流行的scheme以及对应资源

scheme 对应资源
file 访问本地磁盘上的文件
ftp 访问远程FTP服务器上的文件
http 访问WWW服务器上的文件
news 访问新闻组上的文件
telnet 访问Telnet链接
gopher 访问远程Gopher服务器上的文件

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

　　　　插入定位锚点需要指定name属性，name属性值就是该锚点的名称。例如如下代码：

　　　　　　<!-- 下面代码会生成一个命名锚点 -->

　　　　　　<a name="test"></a>

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

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

5. 列表相关元素

　　HTML5 还保留了如下几个列表相关元素。

　　　　1》 <ul> 定义无序列表。该元素可以指定id、class、style等属性，还可以指定onclick等事件属性。该元素只能包含<li.../>子元素。

　　　　2》 <ol> 定义有序列表。该元素可以指定id、class、style等属性，还可以指定onclick等事件属性。该元素只能包含<li.../>子元素。除此之外，再HTML5规范中，该元素还可以指定如下三个属性。

　　　　　　start 指定列表项的起始数字。默认是第一个，如1、A等。

　　　　　　type 指定使用哪种类型的编号，例如1代表使用数字，A和a代表使用字母，I和i代表使用罗马数字。该属性在HTML5规范中已经不推荐使用了，推荐使用CSS来定义。

　　　　　　reversed 该属性指定是否将排序反转。很遗憾，目前没有任何浏览器支持该属性。

　　　　3》 <li> 定义列表项目。该元素可以指定id、class、style等属性，还可以指定onclick等事件属性。该元素里可以包含与<div.../>完全类似的内容，因此可以包含较多类型的子元素。

　　　　4》 <dl> 也用于定义列表，该元素只能包含<dt.../>和<dd.../>两种子元素。该元素可以指定id、style、class等属性，还可以指定onclick等事件属性。

　　　　5》 <dt> 定义标题列表项。该元素可以指定id、style、class等属性，还可以指定onclick等事件属性。该元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素等。

　　　　6》 <dd> 定义普通列表项。该元素可以指定id、style、class等属性，还可以指定onclick等事件属性。该元素里可以包含与<div.../>完全类似的内容，因此可以包含较多类型的子元素。

6. 图像相关元素

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

　　　　src 该属性指定图片文件所在的位置，该属性值既可以是相对路径，也可以是绝对路径。

　　　　alt 该属性指定一段文本，该文本将作为该图片的提示信息。

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

　　　　height 指定该图片的高度，该属性值可以是百分比，也可以是像素值。

　　　　width 指定该图片的宽度，该属性值可以是百分比，也可以是像素值。

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

　　　　<map> 用于定义图片映射。该元素主要可以包含一个或多个<area.../>子元素，每个<area.../>子元素定义一个区域，不同区域可链接到不同URL。

　　　　<area> 用于定义图片映射的内部区域。该元素只能是一个空元素，该元素可以指定id、style、class等属性，还可以指定onclick等事件属性，还可以指定onfocus、onblur等焦点相关属性。除此之外，还可以指定如下几个属性。

　　　　　　shape 指定该内部区域是哪种区域，该属性的默认值是“rect”，即矩形区域；除此之外，还可以是circle和ploy，分别代表圆形区域和多边形区域。

　　　　　　coords 指定多个坐标值，用于确定区域位置。

　　　　　　href 用于确定该区域所链接的资源。

　　　　　　alt 该属性指定一段文本，该文本将作为该图片提示信息。

　　　　　　target 指定使用框架集中的哪个框架来装载另一个资源。该属性的属性值可以是_self、_blank、_top、_parent四个值，分别代表使用自身、新窗口、顶层框架、父框架来装载新资源。

　　　　　　media 指定目标URL所引用的媒体类型。默认值为all。只有当指定了href属性时该属性才有效。

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

　　　　　　　　<img src="logo.jpg" width="300" height="120" border="0" usemap="#test" alt="logo图片" />

　　　　　　　　<!-- 定义图片映射 -->

　　　　　　　　<map name="test" id="test">

　　　　　　　　　　<!-- 为该图片映射定义2个区域 -->

　　　　　　　　　　<area shape="circle" coords="57,55,25" href="http://www.baidu.com" alt="百度一下" />

　　　　　　　　　　<area shape="poly" coords="188,28,185,50,200,74,224,72,246,51" href="http://www.baidu.com" alt="百度一下" />

　　　　　　　　</map>

7. 表格相关元素

　　HTML5 保留了定义表格的如下标签：

　　　　1》 <table> 用于定义表格，<table.../>元素只能包含0个或1个<caption.../>子元素（定义表格标题），0个或1个<thead.../>子元素（定义表格头），0个或1个<tfoot.../>子元素（定义表格脚），多个<tr.../>子元素（定义表格行），多个<tbody.../>子元素（定义表格体）。该元素可以指定id、style和class等普通属性，也可以指定onclick等事件属性。除此之外，该元素还可以指定如下几个属性。

　　　　　　cellpadding 指定单元格内容和单元格边框之间的间距。该属性值即可是像素值，也可是百分比。

　　　　　　cellspacing 指定单元格之间的间距。该属性值即可是像素值，也可是百分比。

　　　　　　width 指定表格的宽度，该属性值即可是像素值，也可是百分比。

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

　　　　3》 <tr> 定义表格行，该元素只能包含<td.../>或者<th.../>两种元素，该元素可以指定id、style、class等核心属性，还可以指定onclick等事件属性。

　　　　4》 <td> 定义单元格，该元素和<div.../>元素一样，可以包含各种类型的子元素，包括在<td.../>元素里包含<table.../>子元素再次插入一个表格。该元素可以指定id、style、class等普通属性，也可以指定onclick等事件属性，除此之外，该元素还可以指定如下几个属性。

　　　　　　colspan 指定该单元格跨多少列，该属性值就是一个简单的数字。

　　　　　　rowspan 指定此单元格可以横跨的行数。

　　　　　　height 指定该单元格的高度，该属性值可是像素值，也可是百分比。

　　　　　　width 指定该单元格的宽度，该属性值可是像素值，也可是百分比。

　　　　5》 <th> 定义表格页眉的单元格，和<td>标签的用法几乎完全一样，只是浏览器呈现<th.../>元素时有一定差别。

　　　　6》 <tbody> 定义表格的主体，该元素只能包含<tr.../>子元素，该元素可以指定id、style、class等普通属性，也可以指定onclick等事件属性。

　　　　7》 <thead> 定义表格头，用法与<tbody.../>基本相似，指定功能稍微有差别。

　　　　8》 <tfoot> 定义表格脚，用法与<tbody.../>基本相似，指定功能稍微有差别。

　　　　除此之外，如果需要在页面中为某列整体指定属性，HTML5保留了如下两个标签。

　　　　9》 <col> 该元素用于表格中的一个或多个列指定属性值。该元素只能出现在<table.../>元素或<colgroup.../>元素内。该元素可以指定id、style、class等普通属性，也可以指定onclick等事件属性。除此之外，该元素还可指定如下属性。

　　　　　　span 指定该列可横跨多少列。

　　　　10》 <colgroup> 该元素用于为表格中的一个或多个列指定属性值。该元素只能出现在<table.../>元素或<colgroup.../>元素内。该元素可以指定id、style、class等普通属性，也可以指定onclick等事件属性。

　　　　示例：

　　　　　　<!-- 定义所有列的背景色都是白色 -->

　　　　　　<colgroup style="background-color:white;">

　　　　　　　　<!-- 设置第一列宽 160px -->

　　　　　　　　<col style="width:160px" />

　　　　　　　　<!-- 定义横跨两列，设置这两列各宽100px -->

　　　　　　　　<col span="2" style="width:100px" />

　　　　　　</colgroup>

8. 框架相关元素

　　HTML5 不在推荐在页面中使用框架集，因此HTML5删除了<frameset.../>、<frame.../>和<noframes.../>这3个标签。

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

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

HTML5-CSS3-JavaScript(1)的更多相关文章

  1. HTMl5/CSS3/Javascript 学习推荐资源

    HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...

  2. HTML5&CSS3&JavaScript&PHP&MySQL学习笔记

    1.在文字间添加一条水平线  使用<hr />  注意该符号不是成对出现的 2.<q> </q>用来标记于段落中的较短引用,浏览器会在它之间的语句两端加上双引号. ...

  3. 检测 HTML5\CSS3\JAVASCRIPT 在浏览器的适应情况

    CSS3 Selectors Test : 这是CSS3.INFO网站提供的css选择器测试页面,它能够详细显示当前浏览器对所有CSS3选择器的支持情况.启动测试,浏览器会自动测验,并已列表的方式显示 ...

  4. HTML5 + CSS3 + JavaScript

    http://www.programmer.com.cn/14761/#more-14761 文/李晶 随着互联网产业的爆炸式增长,与之伴生的Web前端技术也在历经洗礼和蜕变.尤其是近几年随着移动终端 ...

  5. html5+css3+javascript 自定义提示窗口

    效果图: 源码: 1.demo.jsp <%@ page contentType="text/html;charset=UTF-8" language="java& ...

  6. html5+css3+javascript 自定义弹出窗口

    效果图: 源码: 1.demo.jsp <%@ page contentType="text/html;charset=UTF-8" language="java& ...

  7. 《HTML5+CSS3+JavaScript 从入门到精通（标准版）》学习笔记(二)

    这是一个应用的例子,学以致用嘛 <!--这些代码我就直接放在了博客园的"页首Html代码"中,用于自定义博客,效果就是页面左上角的白色文字--> <p> & ...

  8. 《HTML5+CSS3+JavaScript 从入门到精通（标准版）》学习笔记（一）

    以下是以代码形式书写的笔记,本系列会持续更新,主要内容预计是类似下文的笔记,兼或一些思考与小项目,希望对你会有所帮助 1 <!-- --> <!DOCTYPE html>< ...

  9. 好程序员技术分享html5和JavaScript的区别

    好程序员技术分享html5和JavaScript的区别,HTML5广义上讲是前端开发学科的代名词,包含HTML5.CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称.如PC端网站 ...

  10. 用HTML5/CSS3/JS开发Android/IOS应用框架大全

    现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会 ...

随机推荐

  1. ng4.0 使用[innerHTML]动态插入的富文本如何设置样式

    方法一:在css中设置样式 for CSS added to the component :host ::ng-deep mySelector { background-color: blue; } ...

  2. [原]openstack-kilo--issue(十)ERROR: openstack Unable to establish connection to http://controller:35357/v3/auth/tokens

    ====环境== openstack :kilo CentOS : 7 ====问题=== 在没有关vm的情况下,重启了controller. 问题一: 在使用nova service-list 或者 ...

  3. Phoenix系列：二级索引（1）

    Phoenix使用HBase作为后端存储,对于HBase来说,我们通常使用字典序的RowKey来快速访问数据,除此之外,也可以使用自定义的Filter来搜索数据,但是它是基于全表扫描的.而Phoeni ...

  4. 实用方法 - 解决360Doc文章不能复制的问题（实现不登录直接复制）

    问题: 有时搜索文章的时候看到一些有用的文字,或者在网上搜索一些文献资料,找到需要的部分后,通常都可以使用 Ctrl + C,或者右键复制下来.但有些网站,比如:360个人图书馆(360Doc)会强制 ...

  5. Nand: OOB BBT ECC PEB LEB

    OBB: 例如Samsung K9F1208U0B,数据存储容量为64MB,采用块页式存储管理.8个I/O 引脚充当数据.地址.命令的复用端口.芯片内部存储布局及存储操作特点: 一片Nand flas ...

  6. ie9 form submit 请求参数问题替代办法

    //隐藏表单 <input id="hdPeriod" name="period" type="hidden" value=" ...

  7. 洛谷P1029 最小公约数和最大公倍数问题【数论】

    题目:https://www.luogu.org/problemnew/show/P1029 题意: 给定两个数$x$和$y$,问能找到多少对数$P$$Q$,使得他们的最小公约数是$x$最大公倍数是$ ...

  8. jdbc ---- DBUTilDao 类

    1, 列用工具包  阿里的 DbUtils: JDBC Utility Component Examples 再次封装成通用的 update, query package com.ljs.dao; i ...

  9. java8集合--LinkedList纯源码

    package Queue; import java.util.*; import java.util.function.Consumer; /** * 双端队列主要实现list接口和Deque接口, ...

  10. angularjs 异步请求无法更新数据

    angularjs 有个问题就是第二次ajax请求数据再次赋值给 $scope.data,需要更新视图数据的时候,却不能更改视图数据,这个是因为angularjs的$watch不能监听到JS对$sco ...