html 速查表
http://www.w3cschool.cc/html/html-quicklist.html
所有标签适用范围
http://www.w3cschool.cc/tags/html-elementsdoctypes.html
参考手册：
http://www.w3cschool.cc/tags/html-reference.html
所有的标签语言都是说给浏览器、搜索引擎听的;推荐使用小写属性；
-
<!DOCTYPE html> 在HTML5中也是描述了文档类型。
<!DOCTYPE>声明有助于浏览器中正确显示网页。 -
html标题 ，
<h1>..<h6>
段落<p></p>
链接<a href="**"> **</a>
Pic<image src="" > -
有些标签元素有空内容，这样的标签在开始标签中关闭；
<br>更可靠的写法是<br/>
所有的元素尽量都必须被关闭；消除潜在的隐患； -
html 属性
属性一般都是名称/值对成对出现 name="value"出现在开始标签；
<a href="baidu.com">this is a link </a>
value一般用双引号，如果属性值本身有双引号，必须使用单引号；
name =' jone "hello " ckalr' -
注释： ``
水平线<hr/>
标题 仅用来构建标题，被搜索引擎编制索引；<h1>****</h1>
段落<p>**</p>
换行<br/> -
链接
<a href ="http://www.baidu.com" target="_blank"> tesbaidu</a>
id 属性用来创建一个html书签标记；
<a id="tips">useful tips section</a>
<a href="#tips">go to usetip</a> -
head 头部
- <title> 标题
- <base>默认链接地址
- <meta> 元数据，描述给搜索引擎用的
- <style> 样式引用地址
<style type="text/css"> h1 {color:yellow;}</style> - <script> 加载的脚本文件
- <link> 定义了一个文档和外部资源之间的关系
- 如何使用css
- 外部使用 - 使用外部css文件
<head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> - 内部样式表 -html <title>中区域使用<style>元素包含css
<head> <style type="text/css"> body {background-color:yellow;} </style> </head> - 内联样式 ，元素中使用style属性
<p style ="color:bule;margin-left:20px;">hello style</p>
<style> 定义文本样式
<link> 定义资源引用地址
- 图像
<img src="hello" alt="替换文字（图片加载失败时）" width="10" height="10" border="0"/>
创建图片链接
<a href="http://***"><img src=""/></a>
html 图片热区 area
<img src="hha.gif" width="200" height="200" alt="" usermap="#planet">
<map name="planet">
<area shape="rect" coords="0,0,100,100" href="***1">
<area shape="rect" coords="x1,y1,x2,y2" href="***2">
<area shape="circle" coords="x1,y1,r" href="***2">
</map>
- table
<table border="1" cellpadding="10 cellspacing="10"> //padding横向间距 cellspacing 垂直间距
<caption>Monthly savings</caption> // 表格的标题
<tr>
<th>Month</th> // 表格的头部 table header
<th>Savings</th>
</tr>
<tr>
<td colspan ="2">January</td> // 表格横跨2列
<td>$100</td>
</tr>
<tr> //table row
<td>February</td> // table body
<td rowspan="2">$50</td> // 表格横跨2行
<td>This cell contains a list // 表格内嵌套其他元素
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
</tr>
</table>
- 列表
//list-style-type:disc/circle/square
<ul style="list-style-type:disc">
<li>say hi</li>
<li>say heello</li>
<li> say ha</li>
</ul>
<ol start="50" type="A"> //type=''A/a/I/i"
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
- 区块
<div></div>
没有特殊含义，与css搭配，用来设置大的内容块的样式；另外可用于文档布局；
<span></span>内联元素，没特殊含义；与css搭配，用来为文本设置样式 - 布局
可用div布局或者table布局，不建议使用table来布局，不是布局标签； - 表单
表单元素，允许用户在表单中输入内容；
<form name="input" action="..php" method="get">
<fieldset>
<legend>Personal information:</legend>
name :<input type="text" name="firstName"><br/>
pass: <input type="password" name="pwd"><br/>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<input type ="checkbox" name="vehicle" value="bike">i hava a bike<br>
<input type= "checkbox" name="vehicle" value="car" checked="checked"> i have a car<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="button" value="Hello world!">
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
<input type="submit" value="submit">
</fieldset>
</form>
- 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
<iframe src="url" width =200 height=200 frameborder="0" name="ifamre_a"></iframe>
<p><a href="http://www.baidu.com" target="ifamre_a">baidu</a></p>
- 脚本
<script>document.write("Hello World!")</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript> //脚本不能运行时的显示
-
URL 只能使用 ASCII 字符集.
-
xhtml
xml+html = xhtml
是一种更严格的html
-
文档结构
XHTML DOCTYPE 是强制性的
<html> 中的 XML namespace 属性是强制性的
<html>、<head>、<title> 以及 <body> 也是强制性的 -
元素语法
XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素 -
属性语法
XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性不允许简写
错误示例：
<input checked>
<input readonly>
<input disabled>
<option selected>
正确示例：
<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
网友评论