HTML常用标签

最新推荐文章于 2024-01-25 22:53:26 发布

小熊空间

最新推荐文章于 2024-01-25 22:53:26 发布

阅读量181

点赞数

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/wjnhub/article/details/106382854

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

标题标签

 	<h1>我是一级标签</h1>
    <h2>我是二级标签</h2>
    <h3>我是三级标签</h3>
    <h4>我是四级标签</h4>
    <h5>我是五级标签</h5>
    <h6>我是六级标签</h6>

标签语义：作为标题使用，重要性依次递减
特点：

标题文字会变粗，字号变大
一个标题独占一行

段落标签

<p>我是一个段落</p>

**标签语义：**可以将HTML文档分割成若干段落
特点：

文本在一个段落中会根据浏览器窗口大小自动换行
段落之间会有比较大的空隙

换行标签

<br/>

标签语义: 强制换行
特点：

单标签
只是简单的换行，跟段落的大间距不一样

文本格式化标签

语义	标签	说明
加粗	`<strong> </strong>`或者`<b></b>`	推荐使用`<strong>`标签
倾斜	`<em></em>`或者`<i></i>`	推荐使用`<em>`标签
删除线	`<del></del>`或者`<s></s>`	推荐使用`<del>`标签
下划线	`<ins></ins>`或者`<u></u>`	推荐使用`<ins>`标签

加粗

我是一个<strong>加粗</strong>的文字
我是另一个<b>加粗</b>的文字

标签语义: 突出重要性，比普通文字更重要推荐使用strong标签

倾斜

我是一个<em>倾斜</em>的文字
我是另一个<i>倾斜</i>的文字

标签语义: 倾斜标签，推荐使用em标签语义更加强烈

删除线

我是一个<del>删除</del>的文字
我是另一个<s>删除</s>的文字

标签语义: 删除线标签，推荐使用del标签语义更加强烈

下划线

我是一个<ins>下划线</ins>的文字
我是另一个<u>下划线</u>的文字

标签语义: 删除线标签，推荐使用ins标签语义更加强烈

div和span标签

<div>和<span>没有语义，就是一个盒子装内容用

<div>我是一个div标签 我独自占一行</div>
<span>我是一个span标签</span>

特点：

<div>标签用来布局，但一行只能放一个div 大盒子
<span>标签用来布局一行可以多个<span> 小盒子

图像标签和路径

图像标签

<img src="url" />

src是<img>标签的必须属性，用于指定图像文件的路径和文件名
图像标签其他属性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放在图像上显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

目录文件夹： 普通文件夹，放的是网页相关素材存放的html、图片等
根目录： 打开文件夹最外面一层

VSCode打开目录文件夹

方法一：文件–打开文件夹–选择目录文件夹
方法二：直接将目录文件夹拖拽到VSCode应用中打开即可

路径

相对路径

以引用文件所在位置为参考，建立出的目录路径

相对路径分类	符号	说明
同一级路径		图像位于HTML文件同一级如：`<img src="xxx.png" />`
下一级路径	/	图像位于HTML文件下一级如：`<img src="images/xxx.png" />`
上一级路径	…/	图像位于HTML文件上一级如：`<img src="../xxx.png" />`

绝对路径

是指目录下的绝对路径

右键文件查看文件在电脑的路径(不常用)
使用网路图片地址

超链接标签

<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="index.html" target="_blank">内部网页</a>
<a href="#">空链接</a>
<a href="img.zip">下载链接</a>
<a href="http://www.baidu.com"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590582215812&di=94f22a7f7c0f37a82e559741465a84b5&imgtype=0&src=http%3A%2F%2Fp6.storage.canalblog.com%2F61%2F25%2F833312%2F72004673.gif"/></a>
<!-- 锚点链接 -->
<a href="#one"></a>
<h1 id="one">我是个大标题</h1>

属性	作用
href	指定链接目标的url地址 `必须设置`
target	指定链接页面打开方式 `_self`为默认值当前窗口打开，`_blank` 打开新窗口

链接的分类

外部链接
内部链接
空链接
下载链接：文件或者压缩包
网页元素的链接：如文本图像表格音频视频等都可以添加超链接
锚点链接：可以快速定位到当前页面中的某个位置
- 设置属性值#名字的形式如<a href="#one">跳到大标题去</a>
- 找到目标位置，添加id属性=对应名字如<h1 id="one">我是个大标题</h1>

表格标签

表格主要作用

主要是用来显示展示数据，可以规整的显示数据，可读性更好，条理清晰

表格的基本语法

<table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>静静</td>
            <td>女</td>
            <td>18</td>
        </tr>
    </table>

<table></table>用于定于表格标签
<tr></tr>用于定于表格中的一行必须嵌套在 <table></table>中使用
<td></td> 用于定义表格中单元格必须嵌套在 <tr></tr>中使用
注： td（table data）即单元格内容数据

表头单元格

表头单元格也是单元格，通常在第一行，加粗显示

<table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>静静</td>
            <td>女</td>
            <td>18</td>
        </tr>
    </table>

表格属性

不咋常用，一般通过CSS来设置

属性名	属性值	描述
align	left、center、right	规定单元格相对周围元素的对齐方式
border	1或""	规定单元格是够用用边框，默认""表示没有边框
cellpadding	像素值	规定单元格边框与内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或者百分比	规定表格的宽度

<table align="center" border="1" cellpadding="20" cellspacing="0" width=500>
     <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
     <tr> <td>静静</td> <td>女</td> <td>18</td> </tr>
     <tr> <td>小明</td> <td>男</td> <td>20</td> </tr>
</table>

在这里插入图片描述

表格结构标签

表格实际使用中可能会很长，这时候可以将表格分割成表格头部和表格主体两部分
分别用<thead>标签表格头部区域、<tbody>标签表格主体区域

<table align="center" border="1" cellpadding="20" cellspacing="0" width=500>
     <thead>
         <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
     </thead>
     <tbody>
         <tr> <td>静静</td> <td>女</td> <td>18</td> </tr>
         <tr> <td>小明</td> <td>男</td> <td>20</td> </tr>
     </tbody>
</table>

合并单元格

多个单元格合并为一个单元格
合并单元格方式：

跨行合并：rowspan=“合并单元格的个数”
跨列合并 colspan = “合并单元格的个数”

目标单元格
跨行： 最上侧单元格作为目标单元格写合并代码
跨列： 最左侧单元格作为目标单元格写合并代码

合并单元格步骤

确定单元格是跨行还是跨列
找到目标单元格写上 合并方式=合并数量 比如：<td colspan = "2"></td>
删除多余单元格

<table align="center" border="1" cellpadding="20" cellspacing="0" width=500>
    <tr align="center"><th colspan="3">个人简介</th><</tr>
    <tr> <td></td> <td></td> <td></td> </tr>
    <tr> <td rowspan="2"></td> <td></td> <td></td> </tr>
    <tr> <td></td> <td></td> </tr>
</table>

效果
在这里插入图片描述

列表标签

作为布局使用，更加整齐有序
列表分为三大类：无序列表、有序列表、自定义列表

标签名	定义	说明
`<ul></ul>`	无序列表	只能包含`<li>`标签，无序，使用较多
`<ol></ol>`	有序列表	只能包含`<li>`标签，有序，使用较少
`<dl></dl>`	自定义列表	只能包含`<dt>`和`<dd>`

无序列表

<ul>标签标示无序列表，一般以项目符号呈现列表，列表项使用<li>标签定义

<ul>
    <li>iOS</li>
    <li>Android</li>
    <li>Web</li>
</ul>

没有顺序之分，都是并列的
<ul></ul>里只能放<li><li>标签不允许放其他标签和文字
<li></li>标签里可以放任何元素
自带样式属性（无用），实际开发中会用CSS来设置

有序列表

<ol>标签表示有序列表,列表排序以数字显示，其他属性跟无序列表一样

<ol>
    <li>金牌 100</li>
    <li>金牌 88</li>
    <li>金牌 66</li>
</ol>

自定义列表

<dl>标签用于自定义列表，该标签会与<dt>（定义项目/名字）和<dd>（描述每个项目/名字）一起使用

<dl>
    <dt>名词</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
    <dd>名词解释3</dd>
</dl>

<dl></dl>里面包含<dt>和dd
<dt>和<dd>没有数量限制，一般一个<dt>对应多个<dd>

使用场景： 常用于对术语或者名词进行解释和描述，定义列表的列表项没有任何项目符号
在这里插入图片描述

表单标签

完整表单组成：表单域、表单控件和提示信息构成

表单域

包含表单元素的区域
在HTML标签中，<form>标签用于定义表单域，用于实现用户信息的收集和传递数据给服务器

<form action="url地址" method="POST" name="表单域名称">
    各种表单控件
</form>

属性	属性值	作用
action	url地址	指定接收并处理表单数据的服务器地址
method	get/post	提交方式get或post
name	名称	指定表单的名称，以区分同一页面中的多个表单域

表单控件

允许用户在表单中输入或者选择的控件

input表单元素

<input>标签为单标签，在<input>标签中包含一个type属性根据不同属性值，输入字段拥有多种形式例如：文本字段、密码框、复选框、单选框、按钮等

<input type="属性值" />

属性值	描述
text	单行文本输入，默认宽度为20个字符
password	密码字段字符被掩码
hidden	隐藏的输入字段
button	可点击按钮，常用于JavaScript启动脚本
radio	单选按钮必须拥有相同name才能实现多选一
checkbox	复选框
file	输入字段和“浏览”按钮，供文件上传
image	图像形式的提交按钮
reset	重置按钮，清除表单所有数据
submit	提交按钮，发送给后台服务器

<form action="url地址" method="GET" name="表单域名称">
    用户名： <input type="text" name="username" value="xiaoming" maxlength="10" placeholder="请输入用户名"> <br/>
    密码： <input type="password" name="pwd"> <br/>
    性别： <input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女 <br>
    爱好： <input type="checkbox" name="hobby"> 吃饭 
          <input type="checkbox" name="hobby"  checked="checked"> 睡觉 
          <input type="checkbox" name="hobby"> 打豆豆<br>
    <input type="submit" value="免费注册">
    <input type="reset" value="重新填写">
    <input type="button" value="获取短信验证码"> <br>
    <input type="file">
</form>

属性	属性值	描述
name	用户自定义	定义input元素的名称要求`单选按钮`和`复选框`要有`相同`的name值
value	用户自定义	规定input元素的值主要是给后台人员用
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

label标签

<label>标签为input元素定义标注（标签）
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点转到或者选择对应的表单元素上，增加用户体验
for属性应当与id一样

<input type="radio" name="sex" id="man" ><label for="man">男</label> 
<input type="radio" name="sex" id="woman"><label for="woman">女</label>

select表单元素

多个选项提供给用户选择，节约空间可以采用<select>标签定义下拉列表
<select>中至少包含一对<option>
在<option>中定义selected属性指定默认选中项

<form action="url地址" method="GET" name="表单域名称">
    技能：
     <select>
        <option>iOS</option>
        <option>Android</option>
        <option selected>Web</option>
        <option>PHP</option>
        <option>Flutter</option>
        <option>Vue</option>
    </select>

</form>

textarea表单元素

<textarea>定义多行文本的输入控件
属性： cols每行多少文字 rows显示多少行（都没啥用）实际开发用CSS指定文本框区域

<form>
    反馈：
    <textarea cols="50" rows="5"> 请输入需要反馈的内容</textarea>
</form>

完整的教程可以查看文档
 MDN Web文档