还不错,反正已经有很多基础了。

简介

HTML5 中的一些有趣的新特性:

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素,比如 article、footer、header、nav、section
  • 新的表单控件,比如 calendar、date、time、email、url、search

标签

基础

<!DOCTYPE> 定义文档类型

声明必须是 HTML 文档的第一行,位于 < html> 标签之前。
html5声明

<html> 定义 HTML 文档

<title> 定义文档的标题

<body> 定义文档的主体

<body background="/i/eg_background.jpg">背景图片
<body bgcolor="yellow">背景颜色

<h1> to <h6> 定义 HTML 标题

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

align属性:left、center、right、justify
标准属性:id, class, title, style, dir, lang, xml:lang
事件属性:onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

<h1 align="center">This is heading 1</h1>标题居中

<p> 定义段落

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<br> 定义简单的换行

换行 结尾一个<br>

<hr> 定义水平线

<!--...--> 定义注释

<!--这是一段注释。注释不会在浏览器中显示。-->

<p>这是一段普通的段落。</p>

起到注释作用,可以多行注释

基础类总结:

<html>

<head>
<title>我的第一个 HTML 页面</title>
</head>

<body>
<!--这是一段注释。注释不会在浏览器中显示。--><br/>
<p>body 元素的内容会显示在浏览器中。</p><hr />
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>

</html>

运行结果:

格式

<acronym> 定义只取首字母的缩写

<abbr> 定义缩写

标记一个缩写

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

输出: The PRC was founded in 1949.

<address> 定义文档作者或拥有者的联系信息

<b> 定义粗体文本

<bdi> 定义文本的文本方向,使其脱离其周围文本的方向设置

<bdo> 定义文字方向

<big> 定义大号文本

<blockquote> 定义长的引用

<center> 不赞成使用定义居中文本

<cite> 定义引用(citation)

<code> 定义计算机代码文本

<del> 定义被删除文本

<dfn> 定义定义项目

<em> 定义强调文本

<font> 不赞成使用定义文本的字体、尺寸和颜色

<i> 定义斜体文本

<ins> 定义被插入文本

<kbd> 定义键盘文本

<mark> 定义有记号的文本

<meter> 定义预定义范围内的度量

<pre> 定义预格式文本

<progress> 定义任何类型的任务的进度

<q> 定义短的引用

<rp> 定义若浏览器不支持 ruby 元素显示的内容

<rt> 定义 ruby 注释的解释

<ruby> 定义 ruby 注释

<s> 不赞成使用定义加删除线的文本

<samp> 定义计算机代码样本

<small> 定义小号文本

<strike> 不赞成使用定义加删除线文本

<strong> 定义语气更为强烈的强调文本

<sup> 定义上标文本

<sub> 定义下标文本

<time> 定义日期/时间

<tt> 定义打字机文本

<u> 不赞成使用定义下划线文本

<var> 定义文本的变量部分

<wbr> 定义可能的换行符

表单

<form> 定义供用户输入的 HTML 表单

多种属性
action 指向url
method get/post
name

<input> 定义输入控件(未完)

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

<p>如果您点击提交,表单数据会被发送到名为 demo_form.asp 的页面。</p>

</body>
</html>

<textarea> 定义多行的文本输入控件

<button> 定义按钮

<select> 定义选择列表(下拉列表)

<optgroup> 定义选择列表中相关选项的组合

<option> 定义选择列表中的选项

<label> 定义 input 元素的标注

<fieldset> 定义围绕表单中元素的边框

<legend> 定义 fieldset 元素的标题

<isindex> 不赞成使用定义与文档相关的可搜索索引

<datalist> 定义下拉列表

<keygen> 定义生成密钥

<output> 定义输出的一些类型

框架

<frame> 定义框架集的窗口或框架

文本域

<form>
名:
<input type="text" name="firstname">
<br />
姓:
<input type="text" name="lastname">
</form>

密码域

<form>
用户:
<input type="text" name="user">
<br />
密码:
<input type="password" name="password">
</form>
<p>
请注意,当您在密码域中键入字符时,浏览器将使用项目符号来代替这些字符。
</p>

复选框

<form>
我喜欢自行车:
<input type="checkbox" name="Bike">
<br />
我喜欢汽车:
<input type="checkbox" name="Car">
</form>

单选框

<form>
男性:
<input type="radio" checked="checked" name="Sex" value="male" />
<br />
女性:
<input type="radio" name="Sex" value="female" />
</form>

简单的下拉列表

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

<frameset> 定义框架集

属性 描述
cols pixels % * 定义框架集中列的数目和尺寸
rows pixels % * 定义框架集中行的数目和尺寸
<frameset cols="25%,50%,25%">

<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">

</frameset>


cols 和rows 属性
1<frameset rows="150,300,150">像素
2<frameset rows="25%,50%,25%">
3<frameset cols="100, *">
4<frameset rows="*, 100, *">在框架集的中间生成一个 100 像素高的行,并在这行的上边和下边各生成一个相同尺寸的行。
5<frameset cols="10%, 3*, *, *">生成了 4 列:第一列占据整个框架集宽度的 10%。然后浏览器把其他空间的 3/5 分配给第二个框架,第三个和第四个框架各分配其余空间的 1/5。

标准属性

id, class, title, style

<noframes> 定义针对不支持框架的用户的替代内容

<iframe> 定义内联框架

图像

<img> 定义图像(未完)

必需属性:
alt text 规定图像的替代文本
src url 规定显示图像的 URL
<img src="w3school.jpg" width="104" height="142" />
可选的属性:
height pixels % 定义图像的高度
width pixels % 设置图像的宽度

<map> 定义图像映射

<area> 定义图像地图内部的区域

<canvas> 定义图形

<figcaption> 定义 figure 元素的标题

<figure> 定义媒介内容的分组,以及它们的标题

音频/视频

<audio> 定义声音内容

<source> 定义媒介源

<track> 定义用在媒体播放器中的文本轨道

<video> 定义视频

链接

<a>定义锚

超链接
用法:<a href="http://www.w3school.com.cn">W3School</a>

<nav> 定义导航链接

列表

<ul> 定义无序列表

<ol> 定义有序列表

<li> 定义列表的项目

<dir> 不赞成使用定义目录列表

<dl> 定义定义列表

<dt> 定义定义列表中的项目

<dd> 定义定义列表中项目的描述

<menu> 定义命令的菜单/列表

<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目

<command> 定义命令按钮

表格

<table> 定义表格

<caption> 定义表格标题

<th> 定义表格中的表头单元格

<tr> 定义表格中的行

<td> 定义表格中的单元

<thead> 定义表格中的表头内容

<tbody> 定义表格中的主体内容

<tfoot> 定义表格中的表注内容(脚注)

<col> 定义表格中一个或多个列的属性值

<colgroup> 定义表格中供格式化的列组

样式/节

<style> 定义文档的样式信息

<div> 定义文档中的节

<span> 定义文档中的节

<header> 定义 section 或 page 的页眉

<section> 定义 section

<article> 定义文章

对博客或站点的文章起到封装作用

<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p>
</article>

<aside> 定义页面内容之外的内容

<details> 定义元素的细节

<dialog> 定义对话框或窗口

<summary> 为 ### <details> 元素定义可见的标题

元信息

<head> 定义关于文档的信息

<head>
<title>文档的标题</title>
</head>
标签放在文档的开始处,紧跟在 后面,并处于 标签或 标签之前。
下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

<title> 定义文档的标题,它是 head 部分中唯一必需的元素。

<meta> 定义关于 HTML 文档的元信息

<base> 定义页面中所有链接的默认地址或默认目标

<basefont> 不赞成使用定义页面中文本的默认字体、颜色或尺寸

编程

<script> 定义客户端脚本

<noscript> 定义针对不支持客户端脚本的用户的替代内容

<applet> 不赞成使用定义嵌入的 applet

<embed> 为外部应用程序(非 HTML)定义容器

<object> 定义嵌入的对象

<param> 定义对象的参数