1.常用标签详解
1. 标题标签 <h1> to <h6>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>这是 1 级标题</h1>
<h2>这是 2 级标题</h2>
<h3>这是 3 级标题</h3>
<h4>这是 4 级标题</h4>
<h5>这是 5 级标题</h5>
<h6>这是 6 级标题</h6>
</body>
</html>
![](https://img.pupper.cn/img/20220726101859.png)
2. 段落 标签 <p>
、 换行 标签 <br />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>
这个段落里主要说的是 换行标签 <br />
HTML <br />标记在HTML文档中的文本内定义换行符。
</p>
</body>
</html>
![](https://img.pupper.cn/img/20220726101923.png)
3. 文本格式化标签 <strong> 、<em> 、<del> 、<ins>
语义 | 标签 | 说明 |
---|---|---|
加粗 | <strong> </strong> 或者 <b> </b> | 推荐使用 <strong> ,语义更强烈 |
倾斜 | <em> </em> 或者 <i></i> | 推荐使用 <em> ,语义更强烈 |
删除线 | <del> </del> 或者 <s> </s> | 推荐使用 <del> ,语义更强烈 |
下划线 | <ins> </ins> 或者 <u> </u> | 推荐使用 <ins> ,语义更强烈 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<strong>这是加粗字体</strong>
<b>这也是加粗字体</b>
<hr />
<em>这是斜体</em>
<i>这也是斜体</i>
<hr />
<del>这是字体删除线</del>
<s>这也是字体删除线</s>
<hr />
<ins>这是字体下划线</ins>
<u>这也是字体下划线</u>
</body>
</html>
![](https://img.pupper.cn/img/20220726102044.png)
4. 布局标签 <span> 、<div>
<span> 、<div>
没有具体的语义,它们就是一个盒子,用来装内容
<div>
表示分割
<span>
表示跨度,跨距
特点:
<div>
:标签用来布局, 但是一行只能放一个,独占一行。 ----> 大盒子<span>
:标签用来布局,一行可以有多个, ----> 小盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>我是 div ,我独占一行,大盒子</div>
<div>我是 div ,我独占一行,大盒子</div>
<span> 我是 span 1 号, </span>
<span> 我是 span 2 号, </span>
<span> 我是 span 3 号,我们都在一行,小盒子 </span>
</body>
</html>
![](https://img.pupper.cn/img/20220726102403.png)
5.图形标签 <img>
和 路径
图像标签的属性:
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本, 图片在不能显示时,显示的文字 |
title | 文本 | 提示文本, 鼠标放在图片上时,显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的表框 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h4>这是一个图像标签</h4>
<img
src="image1.jpg"
width="150"
height="150"
border="5"
title="图像标签"
/>
<h4>这是 图像标签的 alt 属性</h4>
<img src="image.jpg" alt="这是一个图片" />
</body>
</html>
![](https://img.pupper.cn/img/20220726102436.png)
图像标签的特点:
- 图像标签的 地址属性(src)必须写在最前边
- 标签与属性、属性与属性 之间必须用 空格 隔开
- 属性采用键值对的格式
相对路径 和 绝对路径
相对路径:
相对路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 图像文件和 HTML 文件位于同一级 如 :<img src="img.jpg" | |
下一级路径 | / | 图像文件 位于 HTML 文件的下一级 如: <img src="images/img.jpg" |
上一级路径 | ../ | 图像文件 位于 HTML 文件的上一级 如: <img src="../img.jpg" |
绝对路径:
- 在本地文件中,以盘符作为起始的路径
- 网络中的 http 路径
6. 超链接 标签 <a>
<a>
:定义超链接,从一个页面 链接到 另一个页面
标签属性:
属性 | 值 | 说明 |
---|---|---|
href | url | 用于指定链接目标的 url 地址 (必须属性) |
target | _blank | 在新窗口打开 链接 |
_self | 在原窗口打开 链接, (默认) | |
_parent | 在父窗口打开 链接 | |
_top | 在整个窗口打开 链接 | |
framename | 在指定窗口打开 链接 | |
download | filename | 指定下载链接 |
链接分类:
外部链接:链接到外部网页
<a href="https://www.baidu.com" target="_blank"> 百度 </a>
内部链接:网站内部的链接
<a href="index.html" target="_blank"> 首页 </a>
空链接:
href="#"
没有确定链接目标时<a href="#"> 百度 </a>
下载链接:地址链接的是某个文件
<a href="image1.jpg"> 下载文件 </a>
网页元素的链接:将网页元素嵌套在 超链接中
<a href="image1.jpg"> <img src="img.jpg" /> </a>
锚点链接: 点击链接,可以快速跳转到网页中的某个位置
- 链接文本中,href 属性的值为
#名字
的形式 - 根据 href 属性值,找到标签位置
<a href="#two"> 第二集 </a> <h3 id="two">第二集</h3>
- 链接文本中,href 属性的值为
阻止链接跳转
<a href="javascript:void(0);"></a> <a href="javascript:;"></a>
7. 注释标签 <!--...-->
和 特殊字符
<!--...-->
: 用于代码备注 或者 使某些内容不再页面上显示
<!-- <a href="http://www.baidu.com" target="framename">百度</a> -->
常用特殊字符:
特殊字符 | 描述 | 字符代码 |
---|---|---|
空格 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和 | & |
© | 版权 | & |
™ | 商标 | ® |
8. 表格标签 <table>、<th>、<tr> 、<td>
表格不是用来布局页面的,而是用来展示数据的
标签 | 说明 |
---|---|
<table> | 定义表格 |
<th> | 定义 表头 |
<tr> | 定义 行 |
<td> | 定义 单元格 |
<caption> | 定义表格的 标题 |
<colgroup> | 定义 列的组 |
<col> | 定义 列的属性 |
<thead> | 定义 页眉 |
<tbody> | 定义 主体 |
<tfoot> | 定义 页脚 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="300" height="150">
<thead>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</thead>
<tbody>
<tr>
<td>刘德华</td>
<td>18</td>
<td>演员</td>
</tr>
<tr>
<td>郭富城</td>
<td>20</td>
<td>歌手</td>
</tr>
<td>张学友</td>
<td>19</td>
<td>歌手</td>
</tbody>
</table>
</body>
</html>
![](https://img.pupper.cn/img/20220726102503.png)
合并单元格:
rowspan
: 跨行合并,合并代码写在 最上侧的单元格
colspan
: 跨列合并, 合并代码写在最左侧的单元格
cellpadding
: 规定了 单元格边缘 与 内容 之间的空白距离,默认为 1 像素
cellspacing
: 规定了 单元格 与 单元格 之间的距离, 默认为 2 像素
align
: 规定了 对齐方式
border
: 规定了 单元格 的边框, 默认为 0 像素
<table border="1" cellspacing="0" cellpadding="0" width="500" height="200" >
<thead align="center">
<th colspan="5" height="30" bgcolor="darkkhaki">个人简介</th>
</thead>
<tbody align="center">
<tr>
<td>姓 名:</td>
<td width="100"></td>
<td>性 别:</td>
<td width="100"></td>
<td rowspan="4" width="100">照片</td>
</tr>
<tr>
<td>婚姻状况:</td>
<td></td>
<td>出生年月:</td>
<td></td>
</tr>
<tr>
<td>民 族:</td>
<td></td>
<td>政治面貌:</td>
<td></td>
</tr>
<tr>
<td>身 高:</td>
<td></td>
<td>学 历:</td>
<td></td>
</tr>
</tbody>
</table>
![](https://img.pupper.cn/img/20220726102523.png)
9. 列表标签 <ul> 、<ol> 、<dl>
表格 是用来 展示数据 的, 列表 是用来 布局 的
无序列表 <ul>
、 有序列表 <ol>
特点:
- 顺序不用:
- 无序列表:各个列表项之间没有顺序级别,是并列的
- 有序列表:各个列表项之间是有先后顺序的
- 列表标签之间 只能使用
<li> </li>
标签,其他标签或文字不允许使用; <li> </li>
标签之间可以使用任何标签- 列表会自带样式属性,可以在 css 中设置
自定义列表 <dl> </dl>
<dl>
标签用于定义描述列表(或 定义列表),该标签会与<dt>
(定义项目/名字) 和<dd>
(描述每一个项目/名字)一起使用
特点:
<dl> </dl>
里面 只能包含<dt>
和<dd>
<dt>
和<dd>
个数没有限制,经常 一个<dt>
对应多个<dd>
<dt>
和<dd>
在同一级别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width="500">
<caption>
列表
</caption>
<thead>
<th>无需列表</th>
<th>有序列表</th>
<th>自定义列表</th>
</thead>
<tr>
<td>
<ul>
<li>无需列表</li>
<li>无需列表</li>
<li>无需列表</li>
</ul>
</td>
<td>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
</td>
<td>
<dl>
<dt>自定义列表</dt>
<dd>自定义</dd>
<dd>自定义</dd>
<dd>自定义</dd>
</dl>
</td>
</tr>
</table>
</body>
</html>
![](https://img.pupper.cn/img/20220726102545.png)
标签 | 定义 | 说明 |
---|---|---|
<ul></ul> | 无需标签 | 只能包含<li> ,没有顺序,<li> 可以包含任何标签 |
<ol></ol> | 有序标签 | 只能包含<li> ,有顺序,<li> 可以包含任何标签 |
<dl></dl> | 自定义标签 | 只能包含<dt> 和<dd> ,<dt>和<dd> 可以包含任何标签 |
10. 表单标签 <form>
一个完整的表单通常由 表单域 、表单控件(表单元素)、和提示信息 3 个部分构成
表单域 <form>
表单域 是一个包含 表单元素 的区域
<form>
标签用于定义表单域,以实现用户信息的收集和传递
<form>
会把它范围内的表单信息传递给服务器
语法:
<form action="url地址" method="提交方法" name="表单域名称">表单控件</form>
常用属性:
属性 | 值 | 描述 |
---|---|---|
action | URL | 规定当提交表单时向何处发送表单数据。 |
autocompleteHTML5 | on off | 规定是否启用表单的自动完成功能。 |
method | get post | 规定用于发送表单数据的 HTTP 方法。 |
name | text | 规定表单的名称。 |
novalidateHTML5 | novalidate | 如果使用该属性,则提交表单时不进行验证。 |
target | _blank _self _parent _top | 规定在何处打开 action URL。 |
表单元素 <input>
<input>
标签用户收集用户信息,根据不用的type
属性值,输入字段拥有多种形式(可以是文本、复选框、单选框、按钮等等)
语法:
<imput type="属性值" />
特点:
<input />
标签为单标签- type 属性通过设置不同的属性值来控制类型
<input>
常用属性:
属性 | 值 | 描述 |
---|---|---|
checked | checked | checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio") |
maxlength | number | 属性指定 <input> 元素中允许的最大字符数。 |
name | text | name 属性指定 <input> 元素的名称。 |
type | button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week | type 属性规定要显示的 <input> 元素的类型。 |
value | text | 指定 <input> 元素 value 的值。 |
特点:
- name 和 value 是每个表单元素都有的属性值,主要给后台人员使用
- 单选框 和 复选框 要有 相同的 name 值
- checked 属性:主要规定了表单中的默认选择项
- maxlength 属性:规定了输入框的最大可输入字符数
type
属性值:
属性值 | 说明 |
---|---|
button | 定义可点击按钮 |
checkbox | 定义复选框 |
file | 定义输入字段和“浏览”按钮,供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段,该字段中的字符默认为掩码 |
radio | 定义单选框按钮 |
reset | 定义重置按钮,重置按钮会清空表单中的所有数据 |
submit | 定义提交按钮,提交按钮会把表单数据发送到服务器 |
text | 定义单行的输入字段,用户可以在其中输入文本 |
标注标签 <label>
<label>
标签 为 input 元素定义 标注
- 用于绑定一个表单元素,当单机
<label>
标签内的文本时,浏览器会自动将光标 转到 或 选择 对应的表单元素上<label>
标签的 for 属性值 与 相关元素的 id 属性值 相同
语法:
<label for="sex"> 男 </label> <input type="radio" id="sex" />
下拉框 <select>
语法:
<select>
<option>...</option>
<option>...</option>
<option>...</option>
...
</select>
特点:
<select>
至少包含一个<option>
- 在
<option>
中定义selected="selected"
时,当前项即为默认选项
富文本 <textarea>
<textarea>
标签:用于定义多行文本的输入控件
语法:
<textarea rows="3" cols="20">
文本内容
</textarea>
特点:
- cols = ”每行中的字符数“, rows = ”显示的行数“ , 通过改变参数值可以控制窗口大小
- 实际开发中,不会使用 cols 和 rows 参数,通过 css 来控制窗口大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="标题标签.html" method="get">
<div >
<label for="username">用户名称:</label>
<input type="text" placeholder="请输入用户名" id="username">
</div>
<div >
<label for="password">密 码:</label>
<input type="password" placeholder="请输入密码" id="password">
</div>
<div >
<label>性 别:</label>
<input type="radio" name="sex" checked="男" id="sex_nj" value="男">
<label for="sex_nj"> 男 </label>
<input type="radio" name="sex" id="sex_nv" value="nv">
<label for="sex_nv"> 女 </label>
</div>
<div >
<label>爱 好:</label>
<input type="checkbox" name="aihc" id="aihc_d" value="打酱油">
<label for="aihc_d"> 打酱油 </label>
<input type="checkbox" name="aihc" id="aihc_m" value="摸鱼">
<label for="aihc_m"> 摸鱼 </label>
<input type="checkbox" name="aihc" id="aihc_f" value="发呆">
<label for="aihc_f"> 发呆</label>
</div>
<div >
<label for="jigr">籍 贯:</label>
<select name="" id="jigr">
<option value="浙江" selected="selected">浙江</option>
<option value ="甘肃">甘肃</option>
<option value ="江苏">江苏</option>
</select>
</div>
<div >
<label>上传头像:</label>
<input type="file">
</div>
<div >
<label>验 证 码:</label>
<input type="text" maxlength="6" placeholder="请输入验证码">
<input type="button" name="" id="" value="发送验证码" />
</div>
<div >
<input type="reset" maxlength="6" value="重新填写">
<input type="submit" name="" id="" value="提交信息" />
</div>
<div id="">
<label>自我介绍:</label>
<textarea rows="" cols=""></textarea>
</div>
</form>
</body>
</html>
![](https://img.pupper.cn/img/20220726102613.png)