HTML常用标签详解

时间：2023-10-03 07:30:01 | 来源：网站运营

时间：2023-10-03 07:30:01 来源：网站运营

HTML常用标签详解：HTML常用的一些标签不是很多，主要包括：

<div> <a> <img>

<h1>-<h6> <p>

<table> <form> <ul> <ol> <dl>




HTML属性




在介绍具体标签之前，我先介绍一下标签的属性，标签是可以设置属性的，属性一般设置在开始标签里，一个标签可以设置多个属性，多个属性用空格隔开，属性包括两部分，名称和值，格式为：名称="值"。




举个例子，<a href="http://www.baidu.com" target="_blank">我是刘小妞<a>。




<a>标签里设置了两个属性，href和target是名称，后面双引号里面的内容是对应的值。




<div>

<div>这个标签没什么含义，就是一个空白标签，可以理解为一个空盒子，所有的标签都可以理解为空盒子，只不过，有的标签有具体用途或者具体含义。

<div>主要用于网页布局，最初人们写网页的时候，特别爱用<table>布局，但是<table>相比较div+css布局，不是很灵活，也不利于网页渲染，所以，现在都是用div+css来布局，关于网页布局，我们在后面介绍css的时候再说。




<a>

<a>标签是链接标签，大部分网页是有链接的，通过点击一段文字或者一张图片跳转到别的页面，就是用到的<a>标签。

<a>标签比较常用的两个属性就是上面提到的，href和target，href设置跳转的链接地址，地址可以是相对的，也可以是绝对的。target设置打开新页面的方式，默认是在当前页面打开，我上面设置的_blank是在新窗口打开。

<a>标签的内容可以是文字也可以是图片，文字就像我们上面的例子，图片的话，就是包含一个<img>标签。

比如，<a href="http://www.baidu.com"><img src="1.png"><a/>。


<img>

<img>标签是图像标签，它是个单标签，单标签的意思就是只有开始标签，没有结束标签，设置图像地址的属性是src，图像地址可以是相对地址，也可以是绝对地址。一般我们还会给图像标签设置宽(width)高(height)属性，这个图片显示的时候，就会按照我们设置的宽高来显示，还有一个可用可不用的属性alt，它是用来描述图片的，当浏览器无法载入图片时，会显示alt里设置的内容。

举个例子，<img src="1.jpg" alt="我是刘小妞" width="30" height="30">，会显示一个宽30像素，高30像素的图片，当图片加载不出来的时候，图片的位置会显示“我是刘小妞”这五个字。


<h1>-<h6>

<h1>-<h6>这6个标签是标题标签，这6个标签的字号依次变小，h1的最大，h6的最小，默认都是加粗字体，字号具体多大，我也没测过，实际运用的时候，一般是按照设计稿的字号大小，来匹配标签设置字号大小。


<p>

<p>段落标签，一般网页里成段的文字都是被这个标签标记。<p>和<h1>-<h6>这两种标签主要是为了增强网页的可读性，其实，如果不严谨的话，<div>都可以替代它们，用这两种标签的时候不用太纠结。不过，随着HTML5的兴起，越来越提倡网页的可读性了。




<table>

<table>表格标签，先来看一个表格的示例，如下图。





表格是由若干行若干列组成的，我们在写表格的时候，先写行，再写列。

举个例子。


<table border="1" cellpadding="10" cellspacing="10">

<tr>

<th>First Name</th><th>Last Name</th><th>Points</th>

</tr>


<tr>

<td>Jill</td> <td>Smith</td> <td>50</td>

</tr>


</table>


以上是一个两行三列的表格。




<tr>标签是标记行的。

<th>是标记表头的，表头默认居中加粗。

<td>是标记列的，也叫单元格。




说一下表格常用的几个属性。

border 边框属性，如果不设置，表格默认是没有边框的；border="1"，是有边框的。


cellpadding 单元格边沿与其内容之间的空隙。

cellspacing 单元格之间的空隙。

cellpadding 和 cellspacing，HTML5已经不支持了，可以用css来设置。







<form>

<form> 表单标签。表单标签一般不会单独使用，它里面会包含各种表单标签。最常用的包括<input>、<textarea>、<select>、<option>、<button>。

<input>输入框，用的最多的一个表单标签。它有一个属性type，可以通过设置type值，来得到想要的输入框。最常用的type值有 checkbox（复选框）、file（文件上传）、hidden（隐藏输入框）、password（密码输入框）、radio（单选框）、text（默认输入框）。

<input>为单标签，它还有个常用属性是placeholder，输入框的提示信息。

<textarea>多行文本输入框，一般需要输入的文字比较多的时候，会用到它，<input>只能输入一行。


<textarea>常用的属性有cols（文本区域内可见的宽度）、rows（文本区域内可见的行数）、readonly(文本区域内为只读)。

<select>下拉列表，它也不会单独使用，它会包含着<option>（下拉列表项）使用。


写个例子。

<select name='zhushi'>

<option value='mianbao'>面包</option>

<option value='pisa'>比萨</option>

</select>

所有的表单标签都有name和value属性。表单的数据是要提交给服务器的，所以，服务器那边需要知道每个表单项对应的值，name属性是告诉服务器每个表单项的名字，value是告诉服务器每个表单项对应的值。

<button>按钮标签。在一个完整的表单里，通常会有一个提交按钮，就是用的<button>。它有一个type属性，type的值为submit（提交按钮）、reset（重置按钮）、button（默认普通按钮）。

写个表单的示例吧。

<form action="" method="post">

<input name="phone" value="" placeholder="请输入手机号">


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

<button type="submit">提交</button>


</form>

form的两个属性，action是表单提交时的服务器地址，method是提交数据的HTTP方法，一般是post或者get。

如果表单中有文件上传，还需要在form标签上设置enctype="multipart/form-data"。




<ul>、<ol>、<dl>

先看一张图片示例

<ul>无序列表，<ol>有序列表。他们俩也不会单独使用，都会包含列表项<li>。


写个示例。

无序列表

<ul>

<li>第一项</li>


<li>第二项</li>

</ul>




有序列表

<ol>

<li>第一项</li>


<li>第二项</li>

</ol>

有序列表项前面会自动生成1、2、3数字，无序列表项前面会显示一个小圆点。

<dl>自定义列表，它也不会单独使用，它的列表项比前两个多一个标签，它的每个列表项包含两个标签，<dt>(自定义列表项)、<dd>（自定义列表项的描述），多了一个描述项。<dd>的字号要比<dt>的字号小。




写个小示例。
<dl>

<dt>刘小妞</dt>


<dd>喜欢记录生活的小女生</dd>

<dt>刘工</dt>

<dd>苦逼程序员</dd>

</dl>

这三个标签，常用程度依次为ul > ol > dl。


好了，大概就是这样，稍微麻烦点的是表单标签。不过，也不用怕，不是所有的页面都需要表单的。

长按下方二维码，关注刘小妞的栖息地