HTML常用标签浅谈

1、排版标签

1）标题标签

单词缩写： head,头部、标题。
在HTML中为了使网页更具语义化，一共提供了6等级的标签，及<h1>....<h6>
基本语法格式： <hn> 标题文本 </hn>
其中一级标题h1主要给logo使用。

2）段落标签

单词缩写：paragraph ，段落
用于在网页中将文字有条理的的进行排版，分段之后使得文档结构清晰，层次分明。
基本语法格式：<p> 文档内容 </p>

2）水平线标签

单词缩写：horizontal 横线
用于在网页中分割内容，在网页显示默认样式的横线。
基本语法：<hr /> //这是一个单标签

4）换行标签

单词缩写： break 打断、换行
基本语法：<br /> 换行文本

5）div span标签

div span标签没有具体的语义
div 就是division的缩写 分割，分区的意思，大多数时候用来组合网页
span 跨度，范围
基本语法： <div> hello </div> <span> wold </span>

2、文本格式化标签

<b>定义粗体</b> = <strong> 强调加粗 </strong>
<i>定义斜体</i> = <em> 强调倾斜</em>
<u>定义下划线</u> = <ins> 强调加入下划线 </ins>
	rtui<del>定义删除线</del>
<sup>定义上标</sup>
<sub>定义下标</sub>

3、标签属性

属性既是特性，HTML在制作网页时，如果想让HTML标签提供更多的信息，可以设置相关属性。

• 一个标签可以有多个属性，必须写在开始标签之中，位于标签名后面。
• 数值之间不分先后顺序，标签名与属性、属性与属性之间均用空格隔开。

基本语法： <标签名 属性1=“属性值1” 属性2=“属性值2”..> 内容 </标签名>

eg：<hr width="500" color="black" />

4、图像标签

单词缩写：image 图像

<!--1、基本图像插入-->
<img src="img.jpg"/>
<!--2、带有alt的图像-->
<img src="img.jpg" alt="这是一张图片"/>
<!--、带有title的图像-->
<img src="img.jpg" title="这是图片title" />

5、链接标签

单词缩写： anchor的缩写。基本解释为 锚，铁锚的
咋HTML中使用简单，只需要使用标签焕然链接对象即可
基本语法格式如下：

<a herf="跳转目标" target="目标窗口的弹出方式" > 文本或图像 </a>

• herf:用于指定连接目标的URL地址，当应用了herf属性时，该链接就是一个超连接。
• target：用于指定链接页面的打开方式其取值有两种，self为默认打开方式，blank为在新窗口中打开。

注：

• 外部链接需要加上 http://www.baidu.com
• 内部链接则直接连接内部页面名称即可，如： <a herf="index.html">首页</a>
• 如果没有明确连接目标时则使用“#”定义herf属性值即可

6、锚点定位

通过创建锚点，通过链接跳转到锚点位置。
实现步骤：

1. 创建链接：
2. 创建锚点

eg:
<a herf="＃锚点1"> 我的锚点1 <\a> <!--创建链接 -->
<h3 id="锚点1"> 我的标题 </h3>  <!--创建锚点-->

7、特殊字符转换

8、列表标签

列表是最大特点是整洁有序。
列表分为无序列表、有序列表和自定义列表。
无序列表基本语法如下：

<ul>   <!-- <ul>标签中只能放<li>标签-->
<li>列表项1</li>   <!-- <li>标签中能放其他标签-->
<li>列表项2</li>
.....
</ul>

有序列表基本语法如下：

<ol> <!--同样的只能存放<li>标签-->
<li>有序项1</li>
<li>有序项2</li>
......
</ol>

9、表格table

1）创建表格

在HTML中创建表格，其基本语法如下：

<table>  <!--创建一个表格-->
	<th> <!--定义一个表头-->
	<td> 单元格内容</td>
	.....
	</th>
	<tr> <!--定义一行-->
		<td>第一列内容</td> <!--定义一行里一列的内容-->
		<td>第二列内容</td>
		......
	</tr>
	......
</table>

2）表格属性

属性名	含义	常用属性值
boder	设置边框	像素值
width	设置表格宽度	像素值
height	设置表格高度	像素值
align	设置表格在网页中的水平对其方式	left,center,right
cellspacing	设置单元格与边框之间的距离	像素值，默认为2
cellpadding	设置单元格边框与文字内容之间的距离	像素值，默认为1

3)合并单元格

跨行合并：rowspan
跨列合并： colspan
合并思想：在将多个内容合并时，就会有多余的东西，需要把他删除。
删除的个数=合并的个数-1

10、表单标签

1）input控件

input 标签为单标签，type属性为其最基本的属性，其取值有多种，处理type属性织袜，input标签还有一些其他属性。

eg:

用户名：<input  type="text" maxlength=10 />  <!--这是一个文本框,最大输入长度为10-->
密 码：<input type="password"/> <!--这是一个密码框-->
性 别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<!--这是一个sex单选框-->
爱 好：<input type="checkbox"/>足球<input type="checkbox"/>篮球 <!--这是一个复选框-->
上传头像:<input type="file"/> <!--文件域-->

2）label控件

label标签为input元素定义标注
作用：用于绑定一个表单元素，当点击label标签时，被绑定的元素就会获得一个输入焦点。
for属性规定label标签与哪个元素绑定。
eg:

<label for="male">Male</label>
<input type="text"  id="male" >
or:
<label>  输入账号：<input type="text"/></label>

3）textarea控件

文本域控件，当需要输入大量信息时，可使用文本域输入信息。
eg:

<textarea>请输入留言：</textarea>

4）下拉菜单

使用select控件定义下拉菜单的基本语法格式如下：

<select>
<option>选项一</option>
<option>选项二</option>
..........
</select>

注：

• select标签中必须包含至少一对option标签。
• 在option标签中定义selected=“selected”时，该选项就为默认选项

5）表单域

在HTML中，form标签被用于定义一个表单域，及创建一个表单，以实现用户信息的收集。form中的内容都会提交给服务器。
创建表单的基本语法如下：

<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
......
</form>