html常用标签及属性

1. 概述

HTML是超文本标记语言HyperText Markup Language的缩写,是一种用于创建网页的标准标记语言。标签(Tag)是HTML的基本单位,它定义了HTML 文档的结构和内容。每个标签通过属性(Attributes)来定义不同的特性。

2. 常用标签

2.1 标题标签

HTML标题标签用于定义HTML文档中的标题。HTML5中标题标签h1-h6,共6级。h1是最高级标题,h6是最低级标题。在网页中,标题非常重要,搜索引擎通过解析网页的标题判断网页的主题和内容。

<h1>这是一个一级标题</h1>

<h2>这是一个二级标题</h2>

<h3>这是一个三级标题</h3>

<h4>这是一个四级标题</h4>

<h5>这是一个五级标题</h5>

<h6>这是一个六级标题</h6>

2.2 段落标签

HTML段落标签用于定义HTML中的段落。当需要在HTML文本中定义一个段落时,请使用标签p。

<p>这是一个段落。</p>

2.3 图像标签

HTML图像标签img用于在网页上显示图片。

src属性:指定图片的URL,在引号内添加图片的路径即可。

alt属性:指定替代文本,当图片无法显示时,将以文本方式替代图片。

width和height属性:指定图片的宽度和高度,单位可以是px或%。

<img src="图片路径" alt="替代文本" width="宽度" height="高度">

2.4 超链接标签

HTML超链接标签a用于在网页上插入可点击的链接,把用户引导到新的页面或相同页面的某个位置。

href属性:指定目标URL,在引号内添加连接的路径地址即可。

target属性:指定打开目标的方式,可以是_blank(在新的窗口打开链接)、_self(在相同窗口打开链接)、_parent、_top。

<a href="目标URL" target="_blank">点击打开新页面</a>

<a href="#id">跳转到相同页面的锚点位置,ID为"id"的位置。</a>

2.5 列表标签

HTML列表标签用于创建有序和无序列表。

2.5.1 无序列表标签

HTML无序列表标签ul用于创建无序列表,每个列表项前加上"点"。

<ul>

<li>列表项1</li>

<li>列表项2</li>

<li>列表项3</li>

</ul>

2.5.2 有序列表标签

HTML有序列表标签ol用于创建有序列表,每一个列表项前有序号。

<ol>

<li>列表项1</li>

<li>列表项2</li>

<li>列表项3</li>

</ol>

2.6 表格标签

HTML表格标签用于在网页中创建表格,表格是HTML中比较重要的元素之一。

2.6.1 表格标签table

HTML表格标签table用于创建表格,其下包括thead(表头)、tbody(表身)和tfoot(表尾)

在 table 标签内,可以使用 th 标签定义表头单元格,使用 td 标签定义表格数据。

<table border="1">

<thead>

<tr>

<th>表头1</th>

<th>表头2</th>

</tr>

</thead>

<tbody>

<tr>

<td>表格数据1-1</td>

<td>表格数据1-2</td>

</tr>

<tr>

<td>表格数据2-1</td>

<td>表格数据2-2</td>

</tr>

</tbody>

<tfoot>

<tr>

<td colspan="2">表脚</td>

</tr>

</tfoot>

</table>

2.6.2 合并单元格

HTML中可以将多个单元格合并成一个单元格,使用 colspan 属性可实现行中单元格的合并,使用 rowspan 属性可实现列中单元格的合并。

2.7 表单标签

HTML表单标签用于收集用户信息,包括输入框、单选框、多选框、下拉列表、文本域等控件。

2.7.1 表单标签form

HTML表单标签form用于定义页面表单,其属性可设置表单提交方式、表单所连接的服务器文件、回调JavaScript函数等。

action属性:用于指定表单数据提交路径,该属性值应该填写服务器的处理程序路径,如果不填写将使用相对路径,向当前页面的动作路径进行提交。

method属性:用于指定提交方式,分为post和get两种方式。

<form action="服务器端处理程序" method="post">

<!--表单元素-->

</form>

2.7.2 输入框标签input

HTML输入框标签input用于在表单中创建输入框,包括文本框、密码框、单选框、多选框等类型。

type属性:用于指定输入框的类型,常见的有text、password、radio、checkbox等。

name属性:用于指定输入框的名称,表单提交时使用该名称作为键名,将输入框的值作为键值提交到服务器上。

value属性:用于指定输入框的初始值。

<input type="text" name="name" value="请输入用户名">

<input type="password" name="password" value="请输入密码">

2.7.3 下拉列表标签select

HTML下拉列表标签select用于在表单中创建下拉列表。

<select name="city">

<option value="shanghai">上海</option>

<option value="beijing">北京</option>

<option value="guangzhou">广州</option>

</select>

3. 常用属性

3.1 类属性class

HTML中,class用于为元素指定一个或多个类名(classname)。类名可以在CSS中被引用,用于格式化HTML中的内容。

<p class="important">这是重要内容</p>

3.2 样式属性style

HTML中,style属性用于为元素指定样式规则,样式规则应包括属性名称及对应的属性值。

<p style="color:red;font-weight:bold;">这是重要内容</p>

3.3 id属性

HTML中,id属性用于为元素指定唯一的标识符,可以通过JavaScript等脚本语言对该元素进行引用。

<p id="content">内容</p>

3.4 href属性

HTML中,href属性是超链接标签的必选属性,用于指定链接的目标URL。

<a href="http://www.baidu.com">百度首页</a>

3.5 src属性

HTML中,src属性是图像标签的必选属性,用于指定图片文件的路径。

<img src="images/1.jpg">

3.6 alt属性

HTML中,alt属性用于为图像指定一段替代文本,当图像无法显示时,将以该文本替代。

<img src="images/1.jpg" alt="图片">

3.7 title属性

HTML中,title属性用于为元素提供一个通用的提示信息,当鼠标悬停于该元素上时,将显示该提示信息。

<a href="#" title="点击进入首页">首页</a>

4. 结语

本文介绍了HTML中常用的标签及属性,在编写HTML网页时,只要掌握了这些标签和属性,就可以很好的布局和设计自己的网页。当然,掌握CSS样式表、JavaScript等前端开发技术能更好地实现网页效果和交互功能。