标签：
<html>
<head>
<title>常用元素标签</title>
<style type="text/css">
/*CSS样式一般写在这儿,这是CSS注释*/
body{
color:red;
}
</style>
</head>
<body>
<!-- html中的注释格式 -->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<em>斜体文字(一般歪果仁强调语义的字体)</em>
<br /><!-- 换行符(空标签) -->
<strong>粗体文字(一般中果仁强调语义的字体)</strong>
<p>段落</p>
<q>简单的引用</q>
<blockquote>对长文本引用,左右会有缩进的效果</blockquote>
<span>没有语义,用于表示特殊的样式</span>
<!-- html代码忽略回车,以及1个以上的空格,多个空格应使用" ",例子如下 -->
<p>没想到输入 空格 这么麻烦,23333</p>
<hr /><!-- 不华丽的分割线(空标签) -->
<address>电子邮件,住址,签名,文档的作者身份</address>
<code>加入一行代码,var = "hello world";</code>
<!-- pre元素,保留语言代码段,保留空格,回车,例子如下 -->
<pre>
foreach(var item in strArray){
Console.writeLine(item);
}
</pre>
<ul>
<li>ul-li,无序的信息列表
</li>
<li>ul-li,无序的信息列表
</li>
</ul>
<ol>
<li>ol-li,有序的信息列表:1
</li>
<li>ol-li,有序的信息列表:2
</li>
</ol>
<table summary="HakunaMatata摘要是不会显示出来的)">
<caption>表格标题</caption>
<tbody>
<tr>
<th>名字</th>
<th>爱好</th>
</tr>
<tr>
<td>彭彭</td>
<td>吃</td>
</tr>
<tr>
<td>丁满</td>
<td>跳舞</td>
</tr>
</tbody>
</table>
<!-- target="_blank" 使用新页面打开 -->
<a href="http://www.baidu.com" title="鼠标滑过显示" target="_blank">打开百度</a>
<!-- mailto可以发邮件,关键字有,cc(抄送地址),bcc(蜜饯抄送地址),;(多个隔开),
subject(邮件主题),body(邮件内容)
第一个关键字用?分割,后面的用&分割-->
<a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感。body=你好，对此评论有些想法。">对此影评有何感想，发送邮件给我</a>
<img src="图片http地址" alt="图片无法显示,用此文字替代" title="电影介绍" >
</body>
</html>
<html>
<head>
<title>表单</title>
</head>
<body>
<!-- method可以选择"get/post"2种,action是提交表单后执行交互的页面 -->
<form method="post" action="save.php">
<!-- label标签的for属性,与其他控件的name进行关联,在点击label时,把焦点移到与之关联的控件上 -->
<label for="username">用户名:</label>
<!-- id属性,是后台获取值时使用的. type是控件类型 -->
<input type="text" name="username" id="username" value="" />
<label for="pass">密码:</label>
<input type="password" name="pass" id="pass" value="" />
<!-- 表单有2个按钮,submit确定,reset重置 -->
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
<textarea cols="50" rows="10">在文本域中输入内容,在这里输入内容...</textarea>
<!-- 单选,注意name标签,一定要一致 -->
<input type="radio" name="loveChoose" value="喜欢" checked="checked">
<input type="radio" name="loveChoose" value="不喜欢">
<input type="radio" name="loveChoose" value="无所谓">
<!-- 多选 -->
<input type="checkbox" name="checkbox1" value="跑步" checked="checked">
<input type="checkbox" name="checkbox2" value="游泳">
<input type="checkbox" name="checkbox3" value="拳击" checked="checked">
<!-- 下拉列表框 -->
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
<!-- 下拉列表框,按住ctrl可多选,不直观,鬼知道要按ctrl -->
<select multiple="multiple">
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</from>
</body>
</html>
<html>
<head>
<title>表单</title>
</head>
<body>
<!-- method可以选择"get/post"2种,action是提交表单后执行交互的页面 -->
<form method="post" action="save.php">
<!-- label标签的for属性,与其他控件的name进行关联,在点击label时,把焦点移到与之关联的控件上 -->
<label for="username">用户名:</label>
<!-- id属性,是后台获取值时使用的. type是控件类型 -->
<input type="text" name="username" id="username" value="" />
<label for="pass">密码:</label>
<input type="password" name="pass" id="pass" value="" />
<!-- 表单有2个按钮,submit确定,reset重置 -->
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
<textarea cols="50" rows="10">在文本域中输入内容,在这里输入内容...</textarea>
<!-- 单选,注意name标签,一定要一致 -->
<input type="radio" name="loveChoose" value="喜欢" checked="checked">
<input type="radio" name="loveChoose" value="不喜欢">
<input type="radio" name="loveChoose" value="无所谓">
<!-- 多选 -->
<input type="checkbox" name="checkbox1" value="跑步" checked="checked">
<input type="checkbox" name="checkbox2" value="游泳">
<input type="checkbox" name="checkbox3" value="拳击" checked="checked">
<!-- 下拉列表框 -->
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
<!-- 下拉列表框,按住ctrl可多选,不直观,鬼知道要按ctrl -->
<select multiple="multiple">
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</from>
</body>
</html>
三、css选择器
<html>
<head>
<title>CSS的选择器</title>
<style type="text/css">
/*
CSS的选择器一般使用下面的这种格式
选择符{
属性1:值;
属性2:值;
}
*/
/*例1,匹配<p>元素*/
p{
font-size:20px;/*设置文字字号*/
}
/*例2,类选择器,匹配class为"apple1"的元素*/
.apple1{
color:red;/*设置文字颜色*/
}
.apple2{
font-size:50px;
}
/*例3,ID选择器,匹配id为"potato"的元素*/
#potato{
font-size:15px;
}
/*例4,子选择器,用>符号,匹配first第一代后代生效,第二代之后不生效*/
span{
color:red; /*给span一个默认的样式*/
}
.first>span{
color:blue; /*只有first类的第一代span才有的蓝色样式*/
}
/*例5,包含选择器,用空格符号,匹配"second"类下的所有"span"元素*/
.second span{
border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
}
/*例6,通用选择器,匹配html中的所有标签元素*/
*{
color:green;/*绿色*/
}
/*例7,伪类选择符,用:符号,如在超链接鼠标滑过时改变css样式*/
a:hover{
color:pink;
font-size:30px;
}
/*例8,分组选择符,用逗号,匹配".firstDiv"类,"secondDiv"元素*/
.firstDiv,.secondDiv{
color:purple;
}
</style>
</head>
<body>
<p>匹配到(例1)</p>
<p class="apple1">匹配到(例2)</p>
<span class="apple1 apple2">类选择器词列表方法(例2)</span>
<p id="potato">匹配到(例3)</p>
<p class="first">
<span>蓝一代(例4)
<span>红二代(例4)
</span>
</span>
</p>
<p class="second">
<span>第一代(例5)
<span>第二代(例5)
</span>
</span>
</p>
<a href="http:www.baidu.com">百度(例7)</a>
<div class="firstDiv">分组匹配,firstDiv类(例8)</div>
<div class="secondDiv">分组匹配,secondDiv类(例8)</div>
</body>
</html>
总结：1.html表单标记提供一套元素和属性，用来创建表单，收集网页参考。
2.heml表单标记元素和属性可以分为两种类型：定义表单整体结构，使用浏览器知道如何处理表单数据的元素;创建输入对象的元素
3.创建表单结构标记为<form>和</form>
4.在form中，我们必须使用两个关键属性是action和method。其中action属性使用一个URL来指定表单处理程序的位置，method属性指定表单数据是如何传送到表单处理程序。
5.<form>标记的method=“post”，则表单数据通过HTTP头传送
标签：
原文地址：http://www.cnblogs.com/TU-wei/p/5005684.html
