ICHARM
HTML标签基础
HTML标签基础

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 /> <!--回车符-->
		&nbsp; <!--空格符-->

		<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>

发表评论

textsms
account_circle
email

ICHARM

HTML标签基础
HTML(HyperText Markup Language)超文本标记语言——标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文…
扫描二维码继续阅读
2015-11-06