HTML（HyperText Markup Language）超文本标记语言——标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
W3Cschool提供了完整的各种标签的介绍，详细可以看这里HTML 参考手册，所以这里我们只介绍常用的标签。
下面是一个简单的网页，基本所有的常用标签都有使用，大家在实践中体会吧。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>网页标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--gb2312-->
<meta name="keywords" content="英文逗号隔开" />
<meta name="description" content="英文逗号隔开" />
<link rel="stylesheet" type="text/css" href="相对地址或URL">
<script type='text/javascript' src='相对地址或URL'></script>
</head>
<body>
<p>标题标签</p>
<h1>标题一(h1)</h1>
<h2>标题二(h2)</h2>
<h3>标题三(h3)</h3>
<hr />
<P>
<p>p是段落标签</p>
<br>
<em>em是斜体</em>
<br>
<strong>strong是粗体标签</strong>
<br>
<span>span没有具体的样式，他的作用就是方便用户设置单独的样式用的</span>
<br>
<q>q标签从语议上表引用别人的话，表现为自动为内容添加双引</q>
<br>
<blockquote>长文本的引用 浏览器解析为缩进样式</blockquote>
<br>
<hr /> <!--分割线（水平横线）-->
<br /> <!--回车符-->
<!--空格符-->
<a href=”” targrt=”_blank”></a>
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
<address> 地址标签，默认样式为斜体+另起一行</address>
<code> 单行代码 </code>
</P>
<h2>列表标签</h2>
<p>
<h3>无序列表</h3>
<ul>
<li>无序列表第一行</li>
<li>无序列表第二行</li>
<li>无序列表第三行</li>
<li>无序列表第四行</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>有序列表第一行</li>
<li>有序列表第二行</li>
<li>有序列表第三行</li>
<li>有序列表第四行</li>
</ol>
</p>
<hr />
<h2>表格标签</h2>
<table>
<caption>表格标题标签</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>学号</th>
<th>星座</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>B150</td>
<td>摩羯</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>B150</td>
<td>水瓶</td>
</tr>
<tr>
<td>王二</td>
<td>女</td>
<td>B150</td>
<td>处女</td>
</tr>
</table>
<hr />
<h2>表单标签</h2>
<form method="post" action="user.php"> <!--method="传送方式（post/get）" action="服务器文件"-->
<h3>文本输入框</h3>
<label>用户名:</label>
<input type="text" name="username" value="请输入用户名" />
<h3>密码输入框</h3>
<label>密码:</label>
<input type="password" name="password" value="" />
<h3>文本域输入框</h3>
<textarea cols="50" rows="10">请输入内容</textarea>
<h3>单选</h3>
<label>性别:</label>
<input type="radio" name="性别" value="1" checked="checked">和尚</input>
<input type="radio" name="性别" value="0" >尼姑</input>
<input type="radio" name="性别" value="2" >人妖</input>
<input type="radio" name="性别" value="3" >太监</input>
<h3>复选</h3>
<label>爱好:</label>
<input type="checkbox" name="爱好" value="0">吹牛</input>
<input type="checkbox" name="爱好" value="1">瞎BB</input>
<input type="checkbox" name="爱好" value="2">乱放屁</input>
<input type="checkbox" name="爱好" value="3">打撸</input>
<input type="checkbox" name="爱好" value="4">吃</input>
<h3>人性化单/复选</h3>
<input type="radio" name="性别" id="1">
<label for="1">和尚</label> <!--当点击label对应的文本时即会自动跳转到for里面对应的控件id里去-->
<input type="radio" name="性别" id="2">
<label for="2">尼姑</label>
<input type="radio" name="性别" id="3">
<label for="3">人妖</label>
<input type="radio" name="性别" id="4">
<label for="4">太监</label>
<h3>下拉选择框</h3>
<label>爱好:</label>
<select> <!--multiple="multiple" size="x"多选,最多选x项-->
<option value="0" select="selected">逛淘宝</option>
<option value="1">逛京东</option>
<option value="2">逛唯品会</option>
<option value="3">逛天猫</option>
</select>
<h3>提交按钮</h3>
<input type="submit" value="提交" name="submitBtn" />
<h3>重置按钮</h3>
<input type="reset" value="重置">
</form>
<hr />
</body>
</html>
发表评论