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等前端开发技术能更好地实现网页效果和交互功能。