首先介绍一个学习HTML标记的网站：
http://www.w3school.com.cn/html/html_intro.asp
HTML 参考手册
http://www.w3school.com.cn/tags/index.asp
HTML 标准属性
http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
HTML（Hyper Text Markup Language）= 超文本标记语言
文件后缀：
可使用.html, 也可以使用.htm, 但是更推荐使用.htm，因为传统的系统和软件只允许3个字母的文件后缀。
大小写：
html标记对大小写不敏感，但是标准更偏向于用小写的标记
头信息
设置html的MIME类型和字符集
<head>
<title>提交表单数据</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p>段落标签</p>
链接
<a href="http://www.baidu.com">绝对链接</a>
<a href="/index.html">相对链接</a>
<a href="http://www.baidu.com" target="_blank">链接百度</a>
锚
<p>
<a href="#last">链接书签</a><br />
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">
Visit the Useful Tips Section</a>
<a name="last">最后一行</a></p>
<a href="/index.html" target="_top">请点击这里！</a>
链接到邮件
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>
* %20 为空格的转义
页面编码
<meta http-equiv="content-type" content="text/html; charset=utf-8">
图片
图片显示
<img src="image.jpg" width="48" height="48" / >
含链接的图片
<a href="http://www.baidu.com/">
<img src="gift.jpg" /></a>
<br /> 换行
<hr /> 水平线
<!-- 注释 -->
<h1 align="center">居中属性</h1>
<body bgcolor="yellow">背景颜色为黄色</body>
<body bgcolor="#FFFF00">背景颜色为黄色</body>
表格
<caption>表格标题</caption>
<tr>
<th align="left">col1</th>
<th align="right">col2</th>
<th align="center">col3</th>
</tr>
<tr>
<td bgcolor="red"colspan="2">定义表格的边框宽度为1</td>
<td rowspan="2">跨列</td>
</tr>
<tr>
<td background="gift.jpg"> </td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
有外边框的表格
<table frame="box">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
frame的各种属性
frame="box" 外边框
frame="above" 上边框
frame="below" 下边框
frame="hsides" 上下边框
frame="vsides" 左右边框
无序列表
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
type 类型：
默认：实心圆形
type="disc" 菱形
type="circle" 空心圆形
type="square" 方形
有序列表
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
type 类型：
默认：数字
type="A" 大写字母
type="a" 小写字母
type="I" 大写罗马字母
type="i" 小写罗马字母
自定义列表
<dl>
<dt>项目1</dt>
<dd>行1</dd>
<dt>项目2</dt>
<dd>行1</dd>
<dd>行2</dd>
</dl>
表单
action属性表示用户点击submit后，html的转向
<form name="input" action="html_form_action.asp" method="get">
<input type="reset" name="Reset" value="重置">
<input type="submit" name="Submit" value="提交">
</form>
input元素
<input type="text" name="username">
<input type="password" name="password">
<input type="reset" name="Reset" value="重置">
<input type="submit" name="Submit" value="提交">
<input type="checkbox" name="checkbox1" value="苹果">
<input type="radio" name="radio1" value="女">
<input type="button" value="Hello world!">
checkbox的使用
<form name="form1" method="post" action="multichoice">
<input type="checkbox" name="checkbox1" checked="checked" value="苹果">
苹果
<input type="checkbox" name="checkbox1" value="西瓜">
西瓜
<input type="checkbox" name="checkbox1" value="桃子">
桃子
<input type="checkbox" name="checkbox1" value="葡萄">
葡萄
<input type="reset" name="Reset" value="重置">
<input type="submit" name="Submit" value="提交">
</form>
radio的使用
<form>
<input type="radio" name="sex" value="male" checked="checked"/> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
selector的使用
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
文字格式设置
<b>This text is bold. 粗体</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big 大字号</big>
<br />
<em>This text is emphasized 强调体</em>
<br />
<i>This text is italic 斜体 </i>
<br />
<small>This text is small 小字号</small>
<br />
This text contains
<sub>subscript 下标</sub>
<br />
This text contains
<sup>superscript 上标</sup>
pre标签，预格式文本
<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>
code标签，计算机输出标签
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>
地址标签，address
<h2>唐老鸭的地址：</h2>
<address>
Donald Duck<br />
BOX 555<br />
Disneyland<br />
USA<br />
</address>
缩写标签，鼠标在缩写标签上悬停时，显示缩写的全称：
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<br>
文字方向，bdo，trl表示从右到左显示
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
块引用，quote
这是长的引用：
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
这是短的引用：
<q>
这是短的引用。
</q>
<p>
使用 blockquote 元素的话，浏览器会插入换行和外边距，而 q 元素不会有任何特殊的呈现。
</p>
删除和插入字效果
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
文字样式
<p style="font-family:verdana;color:red;font-size:40px;background-color:green;text-align:center">
This text is in Verdana and red</p>
特殊字符
空格
textarea 文本域
<textarea rows="10" cols="30"/>
The cat was playing in the garden.
</textarea>
扫一扫
4684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
