之前大致总结过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. css3整理--background-origin

    background-origin语法: background-origin: padding-box || border-box || content-box 参数取值: padding-box(p ...

  2. Unity3D Shader 模型流光效果

    Shader "Custom/FlowColor" { Properties { _MainTex ("Base (RGB)", 2D) = "whi ...

  3. autodesk fbx sdk sample里面的工程无法调试解决方法

    1.项目属性->常规中的目标文件名改为1 2.链接器->调试中的生成程序数据库文件改成:$(OutDir)1.pdb 3.连接器->常规中的输出文件改成:$(OutDir)1.exe ...

  4. MFC窗口阴影

    SetClassLong(this->m_hWnd, GCL_STYLE, GetClassLong(this->m_hWnd, GCL_STYLE) | CS_DROPSHADOW);

  5. bochs

    ● 制作一个硬盘 ./bximage 步骤与制作软盘的相似,完成后将bochs软件提示的最后一句话,添加到自己的配置文件里: dd if=loader.bin of=~/Softwares/bochs ...

  6. db2 查询表前几行

    不需要那么多不需要那么多数据的时候使用fetch first xxx rows only数据的时候使用fetch first xxx rows only

  7. .NET Core 2.2发布一览

    本周终于发布了.NET Core 2.2,ASP.NET Core 2.2以及Entity Framework Core 2.2,虽然更大的新闻可能是.NET Core 3.0的特性公布,但不妨先将现 ...

  8. cvLogPolar函数详解

    对于二维图形,Log-polar转换表示从笛卡尔坐标到极坐标的变化,广泛应用在计算机视觉中.此函数模仿人类视网膜中央凹视力,并且对于目标跟踪等可用于快速尺度和旋转变换不变模板匹配. 本例程实现极坐标变 ...

  9. [No0000EE]主要的宏观经济指标查询

    主要的宏观经济指标查询 国内:东财>经济数据 _ 数据中心:http://data.eastmoney.com/center/macro.html东财>经济数据 :http://data. ...

  10. Oracle 变量之 DDL_LOCK_TIMEOUT

    DDL_LOCK_TIMEOUTProperty DescriptionParameter type IntegerDefault value 0Modifiable ALTER SESSIONRan ...