WEB前端-HTML标签

HTML标签

标题标签:<h1>、<h2>、<h3> 注：  h1 标签因为重要，尽量少用, 一般h1 都是给logo使用。

段落标签: <p>

水平线标签: <hr /> 注:是单标签

换行标签: <br />

盒子标签： div span div ：分区 span：度，跨距

文本格式化标签： 
<b></b><strong></strong> 文本加粗 
<i></i><em></em> 文本倾斜
<s></s><del></del> 文本删除线
<u></u><ins></ins> 文本下划线

标签属性

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

标签属性场景

<!---水平线--->
<hr width="400" />
<!---图像--->
<img src="图像URL" />
<!---链接--->
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

列表标签

<!---
 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
---->

<!---无序列表--->
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

<!---有序列表--->
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

<!---自定义列表--->
<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
</dl>

表格标签

<table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="center">
  <caption>表格标题</caption>
    <thead>
    	<tr>
    		<th>姓名</th>
    		<th>性别</th>
    		<th>年龄</th>
    	</tr>
    </thead>
	<tbody>
    	<tr>
    		<td>小明</td>
    		<td>男</td>
    		<td rowspan="3">18</td>
    	</tr>
    	<tr>
    		<td>李磊</td>
    		<td>男</td>
    	</tr>
    	<tr>
    		<td>kitty</td>
    		<td>男</td>    		
    	</tr>
    	<tr>
    		<td colspan="3">胖虎</td> 		
    	</tr>
    </tbody>
</table>

表单标签

<form action="xxx.php" method="get" name="userMessage">
		用户名: <input type="text" value="提示"/>   <!-- 这是一个文本框 --> <br/>
		密&emsp;码: <input type="password" maxlength="6"/> <br/>  
		性&emsp;别:&emsp;
		<input type="radio" name="sex"/> 女
		<input type="radio" name="sex" checked="checked"/> 男
		<br/>
		<!-- 单选框  如果是一组，我们通过相同的name值 来实现-->
		爱&emsp;好:&emsp;
		<input type="checkbox" name="hobby" checked="checked"/> 足球
		<input type="checkbox" name="hobby"/> 篮球
		<!-- 复选框 可以同时选择多个 --><br/>
		按钮： <input type="button" value="按钮"/>  <!-- 普通按钮 --><br/>
		<input type="submit" value="提交表单"/><!-- 提交按钮 -->
		<input type="reset" value="重置表单"/><!-- 重置按钮 --><br/>
		<input type="image" src="im.jpg"/><!-- 图像按钮 --><br/>
		上传头像:
		<input type="file"/>  <!-- 文件按钮 -->
</form>