html标签的使用

最新推荐文章于 2024-03-30 11:13:51 发布

wopoli

最新推荐文章于 2024-03-30 11:13:51 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/wopoli/article/details/126170716

版权

java 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

html标签的使用

一、HTML语言

1、基本概念

HTML是一种网页开发语言，全程为 Hyper Text Markup Language，即超文本标记语言。该语言有html标签、CSS样式、JavaScript脚本组成。
超文本:超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
标记语言:由标签构成的语言。<标签名称> 如 html，xml，标记语言不是编程语言。
html标签：用于浏览器网页显示的文字或者图片、视频、音频组件。
CSS样式：用于设置html标签怎样显示，例如确定HTML标签显示位置、大小等。
JavaScript脚本：用于给网页添加各种各样的动态功能。

2、使用步骤

1、创建一个html文档，文档以“.html”或者“.htm”结尾。
2、在html文档中写入总体框架，格式如下所示：

Hello World 3、在标签中写入需要显示的标签 4、根据实际需要在中定义CSS样式。 5、根据实际需要添加JavaScript脚本。

二、常用的html标签

2.1、文件标签

功能：组成html文档的最基本的标签，包含、、、标签。

：html5中定义该文档是html文档。

html:html文档的根标签。
head：头标签。用于指定html文档的一些属性。引入外部的资源。
body：体标签，用于布置在浏览器网页上显示的标签。
基本使用格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    需要显示的标签
</body>
</html>

2.2、注释标签

功能：在文档中添加注释内容的标签，多用于对各种标签、样式、脚本功能进行解释。注释标签是不会在网页上显示的。
基本使用格式：

<!-- 注释内容 -->

2.3、h1-h6标签

功能：标题标签，用于给文本赋值标题语义，h1到h6标签文字显示大小顺序是从大到小。
基本使用格式：

<h1>需要显示的文字</h1>
<h2>需要显示的文字</h2>
<h3>需要显示的文字</h3>
<h4>需要显示的文字</h4>
<h5>需要显示的文字</h5>
<h6>需要显示的文字</h6>

2.4、p标签

功能：用于赋值段落语义，p标签包裹文本时表示该文本时一个段落。p标签自带换行功能。
基本使用格式：

<p>文本或者标签</p>

2.5、hr标签

功能：用于在网页中显示一条下划线，常用的属性有color、width、size、align，这些属性根据实际需要使用，同时属性一般是通过CSS样式进行设置，而不是通过标签直接使用。
基本使用格式：

<hr color="颜色" width="宽度" size="字体大小" align="对齐方式">

color：用于设置下划线颜色，值可以使用颜色名或者#xxxxxx来取值。
width：用于设置下划线宽度，值可以是数字或者百分之几来取值，到取百分之几时是相对于网页大小来确定宽度。
size：用于设置下划线的高度，值为数字，并且越大下划线越高。
align：用于设置下划线对齐方式，取值有left（左对齐）、center（居中对齐）、right（右对齐）。

2.6、img标签

功能：用于在网页上显示一张图片的标签，该标签不会在网页上独占一行。必须要有的属性是src，可选属性有title、alt、width、height。
基本使用格式：

<img src="图片存储路径" title="鼠标悬停时显示的内容" alt="图片加载失败时显示的内容" width="宽度" height="高度">

src：用于指定需要显示的图片在电脑上的位置，可以使用相对路径或者绝对路径，推荐使用相对路径。
title：设置鼠标悬停在图片上时显示的文字信息。
alt：设置图片加载失败时显示的文字信息。
width：设置图片宽度，注意同时设置width和height属性时图片可能会变形，因此一般只设置其中一个属性。
height：设置图片高度，注意同时设置width和height属性时图片可能会变形，因此一般只设置其中一个属性。

2.7、br标签

功能：给标签提供换行功能，存在多少个br标签就会换多少行。
基本使用格式：

<br>

2.8、a标签

功能：链接标签，用于控制网页之间的跳转，当点击a标签包裹的内容时会跳转到指定网页的指定位置。必须要有的属性是href，可选属性有target、title。
基本使用格式：

<a href="需要跳转的网页界面" target="跳转后界面的打开方式" title="鼠标悬停时显示的文本信息">用于点击的文本或者img标签(用于当链接时图片时使用)</a>

href：需要跳转的网页界面，可以时本机地址或者网络地址，当为本机地址时可以使用相对路径或者绝对路径指定界面路径，当为网络地址时使用url路径，并且路径前面必须是http://或https://开头，当跳转后界面还没有确定时可以设置为假链接，当需要跳转到指定界面的指定位置时可以使用锚点。
假链接：点击之后不会跳转的链接我们称之为假链接。取值为“#”或者“javascript”，两者之间的区别为“#”的假链接会自动回到网页的顶部, 而“javascript”的假链接不会自动回到网页顶部。
锚点：用于跳转到指定界面的指定位置，当界面为当前界面时只需要指定位置。
使用方式：
1、给指定跳转位置的标签的属性id设置值。
2、在a标签的href属性中指定位置，格式为：界面路径#指定位置标签id值。注意为当前界面时只需要写#指定位置标签id值。
target：设置跳转后界面的打开方式，取值有_self（用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self）、_blank（用于在新的选项卡中跳转, 也就是新建界面跳转）。
title：用于设置鼠标悬停在链接上时显示的文本信息。

2.9、base标签

功能：定义在head标签中，用于统一指定a标签界面跳转格式，当与a标签内部的跳转格式冲突时，使用a标签内部的跳转格式。
基本使用格式：

<base target="跳转格式">

target：设置跳转后界面的打开方式，取值有_self（用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self）、_blank（用于在新的选项卡中跳转, 也就是新建界面跳转）。

2.10、ul标签

功能：给一堆数据添加列表语义，标签这些数据没有先后之分，例如：中国有那些城市。
基本使用格式：

<ul type="格式">
    <li>需要显示的条目内容</li>
    <li>需要显示的条目内容</li>
    ......
</ul>

解释：
ul：用于表示这是一个无序列表，同时里面一般只能包含li标签。
li：用于表示这是无序列表中的一条数据，并且里面可以包含其他类型的标签。
type：用于设置列表数据前面圆点的格式，取值有：circle(空心圆点)、disc(实心圆点)、square(实心矩形点)，可以提供CSS样式去除前面的点。

2.11、ol标签

功能：给一堆数据添加列表语义，标签这些数据有先后之分，例如：排行榜。
基本使用格式：

<ol type="格式" start="起始数字">
    <li>需要显示的条目内容</li>
    <li>需要显示的条目内容</li>
    ......
</ol>

解释：
ol:用于表示这是一个有序列表，同时里面一般只能包含li标签。
li：用于表示这是有序列表中的一条数据，并且里面可以包含其他类型的标签。
type：用于设置列表数据前面数字的格式，取值有：A(以大写英文排序)、a(以小写英文排序)、1(以数字排序)、i(以小写罗马数字排序)、I(以大写罗马数字排序)。
start:用于指定起始数字为几。

2.12、dl标签

功能：定义列表，给一堆数据添加列表语义，先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息。
基本使用格式：

<dl>
    <dt>标题内容</dt>
    <dd>描述信息</dd>
    ......
</dl>

解释：
dl用来表示这是一个定义列表。
dt是英文definition title的缩写, 所以dt的含义就是用来定义列表中的标题。
dd是英文definition description的缩写, 所以dd的含义就是用来定义标题对应的描述的。

2.13、table标签

功能：表格标签，用于在网页上显示一个表格。
基本使用格式：

<table>
    <caption>标题</caption>
    <tr>
        <th>列名</th>
        <th>列名</th>
        ......
    </tr>
    <tr>
        <td>需要显示的内容</td>
        <td>需要显示的内容</td>
        ......
    </tr>
</table>

解释：
table：用于表示table标签包裹的数据是一个表格。
caption：用于表示包裹的数据为表格标题。
tr：用于表示包裹的数据为表格中的一行。
th：用于表示包裹的数据为一行中的一个单元格，用于显示列名
td：用于表示包裹的数据为一行中的一个单元格，用于显示数据。
常用属性：
width：设置表格宽度，当在table标签中使用时是设置整个表格的宽度，当中th或者td中使用时是设置当前单元格宽度。
height：设置表格高度，当在table标签中使用时是设置整个表格的高度，当中th或者td中使用时是设置当前单元格高度。
align：设置水平方向对齐方式，常用取值有left(左对齐)、center(居中对齐)、right(右对齐)。当在table标签中使用时是设置整个表格水平对齐方式，当在tr标签中使用时是设置当前行水平对齐方式，当在th或者td中使用时是设置当前单元格水平对齐方式，同时对齐方式是按照就近原则使用。
valign：设置垂直对齐方式，常用取值有top(上对齐)、middle(居中对齐)、bottom(下对齐)。当在tr标签中使用时是设置当前行垂直对齐方式，当在th或者td中使用时是设置当前单元格垂直对齐方式，同时对齐方式是按照就近原则使用。
bgcolor：用于设置背景颜色。当在table标签中使用时是设置整个表格背景颜色，当在tr标签中使用时是设置当前行背景颜色，当在th或者td中使用时是设置当前单元格背景颜色，同时背景颜色是按照就近原则使用。
border：用于设置表格边框线宽度，默认为0。
cellpadding：用于设置边框线与内容之间空白的多少。
cellspacing：用于设置边框线之间的间隔。
colspan：用于设置单元格列之间的合并。
rowspan：用于设置单元格行之间的合并

2.14、form标签

功能：表单标签，是专门用来收集用户信息的。
基本使用格式：

<form action="提交的位置" method="提交方式">
    表单元素
</form>

解释：
form：用于表示这是一个表单，将来点击提交按钮时，表单元素中的内容提交给服务器。
表单元素：HTML中的一些标签, 只不过这些标签比较特殊, 在浏览器中所有的表单标签都有特殊的外观和默认的功能，常用的表单元素有input标签、label标签。
常用属性：
action：用于指定表单中内容提交到哪里去。
method：用于设置提交方式。
常用取值：
get：直接将发送的数据拼接到url中，参数大小有限制，不太安全。
post：将表单数据封装在http请求体中发送，参数大小无限制，安全。

2.15、input标签

功能：表单项标签，可以通过type属性值，改变元素展示的样式。
基本使用格式：

<input type="表单项">

2.15.1、标签

功能：明文文本输入框，常用于输入用户名、地址等操作。
基本使用格式：

<input type="text" id="id名" name="名称" value="默认值">

type=“text”：表示这是一个明文文本输入框。
id：用于给标签设置一个特有的名称，不能重复。常用于和label标签一起使用。
name：用于给标签设置一个名字，可以重复。
value：用于设置文本框默认显示的文字。

2.15.2、标签

功能：暗文文本输入框，常用于输入密码等操作。
基本使用格式：

<input type="password" id="id名" name="名称" value="默认值">

type=“text”：表示这是一个暗文文本输入框。
id：用于给标签设置一个特有的名称，不能重复。常用于和label标签一起使用。
name：用于给标签设置一个名字，可以重复。
value：用于设置文本框默认显示的文字。

2.15.3、标签

功能：单选框标签。
基本使用格式：

<input type="radio" id="id名" name="名称" value="默认值" checked="checked">

type=“radio”：表示这是一个单选框标签。
id：用于给标签设置一个特有的名称，不能重复。
name：用于给标签设置一个名字，可以重复。当存在多个单项框标签时，想产生互斥效果，名字必须相同。
value：用于设置提交时使用的数据。
checked=“checked”：存在该属性时表示默认选择，当多个单选框标签同时存在该属性时，在最后一个标签上选中。

2.15.4、标签

功能：多选框标签。
基本使用格式：

<input type="checkbox" id="id名" name="名称" value="默认值" checked="checked">

type=“checkbox”：表示这是一个多选框标签。
id：用于给标签设置一个特有的名称，不能重复。
name：用于给标签设置一个名字，可以重复。当多个多选框表示同一含义时，名字必须相同。
value：用于设置提交时使用的数据。
checked=“checked”：存在该属性时表示默认选择，当多个单选框标签同时存在该属性时，在定义了该属性的标签上都会选中。

2.15.5、标签

功能：普通按钮标签，用于配合JS完成一些操作。
基本使用格式：

<input type="button" value="按钮显示的值" onclick="alert('弹窗内容')">

type=“button”：表示这是一个普通按钮标签。
value：用于设置按钮上的文字信息，不设置时默认为空白。
οnclick=“alert(‘弹窗内容’)”：用于设置点击按钮后，网页弹出的内容。

2.15.6、标签

功能：图片按钮标签，用于配合JS完成一些操作。
基本使用格式：

<input type="image" src="图片存储路径" onclick="alert('弹窗内容')">

type=“image”：表示这是一个图片按钮标签。
src：用于指定按钮上显示的图片路径。
οnclick=“alert(‘弹窗内容’)”：用于设置点击按钮后，网页弹出的内容。

2.15.7、标签

功能：清空按钮标签，用于将所有表单元素中的内容还原回初始状态。
基本使用格式：

<input type="reset" value="替换内容">

type=“reset”：表示这是一个清空按钮标签。
value：设置按钮上显示的内容，当不设置该属性时，默认为“重置”。

2.15.8、标签

功能：提交按钮标签，用于将所有表单元素中的内容提交到远程服务器。
基本使用格式：

<input type="submit" value="替换内容">

type=“submit”：表示这是一个提交按钮标签。
value：设置按钮上显示的内容，当不设置该属性时，默认为“提交”。

2.15.9、标签

功能：隐藏域标签，用于收集一些隐私数据，该标签不会在网页上显示出来。
基本使用格式：

<input type="hidden" name="标签名称" value="值">

type=“hidden”：表示这是一个隐藏域标签。
name：用于设置标签名称。
value：需要提交的数据。

2.15.10、标签

功能：文件选择框标签，用于选择电脑上需要提交的文件。
基本使用格式：

<input type="file">

type=“file”：表示这是一个文件选择框标签。

2.16、Label标签

功能：指定输入项的文字描述信息，label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
基本使用格式：

<label for="input标签id">文本信息</label>

for：用于关联input标签，获取焦点。

2.17、Datalist标签

功能：给输入框绑定待选项。
基本使用格式：

<datalist id="id名称">
    <option>待选项内容</option>
</datalist>

使用步骤：
1、创建一个输入框
2.创建一个datalist列表
3.给datalist列表标签添加一个id
4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

2.18、select标签

功能：下拉列表标签，用于定义下拉列表。
基本使用格式：

<select>
    <optgroup label="分组名称">
        <option>列表数据</option>
    </optgroup>
</select>

解释：
select：用于表示包裹的是下拉列表。
optgroup：用于对列表数据进行分组。
option：用于表示列表数据。
注意点:
1.下拉列表不能输入内容, 但是可以直接在列表中选择内容
2.可以通过给option标签添加一个selected属性来指定列表的默认值
3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

2.19、textarea标签

功能：文本框标签，定义一个多行输入框。
基本使用格式：
格式:

<textarea rows="行数" cols="列数" name="introduce"></textarea>

属性：
textarea：用于表示这是一个文本框。
rows：设置文本框显示行数。
cols：设置文本框显示列数。
name：文本框名称。
注意点:
1.默认情况下输入框可以无限换行
2.默认情况下输入框有自己的宽度和高度
3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入
4.默认情况下输入框是可以手动拉伸的

2.20、video标签

功能：视频标签，用于网页播放视频。
基本使用格式：

<video src="视频存储路径"></video>

常用的属性：
src: 用于告诉video标签需要播放的视频地址。
autoplay: 用于告诉video标签是否需要自动播放视频。
controls: 用于告诉video标签是否需要显示控制条。
poster: 用于告诉video标签视频没有播放之前显示的占位图片。
loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放。
preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效。
muted:静音
width/height: 和img标签中的一模一样

2.21、audio标签

功能：音频标签，用于网页播放音频。
基本使用格式：

<audio src="音频存储路径"></audio>

src: 用于告诉video标签需要播放的视频地址。
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样。
只不过有3个属性不能用, height/width/poster。

2.22、details标签

功能：详情概要标签，利用summary标签来描述概要信息, 利用details标签来描述详情信息，默认情况下是折叠展示, 想看见详情必须点击。
基本使用格式：

<details>
    <summary>概要信息</summary>
    详情信息
</details>

2.23、文本标签

b(bold) 加粗文本, 没有任何语义的
u(underline) 给文本添加下划线, 没有任何语义的
i(italic) 将文本倾斜, 没有任何语义的
s(strikethourgh) 给文本添加删除线, 没有任何语义的
strong语义: 定义重要性强调的文字
ins语义(inseted): 定义插入的文字
em语义(emphasized): 定义强调的文字
del语义(deleted): 定义被删除的文字

wopoli

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html标签的使用

HTML是一种网页开发语言，全程为 Hyper Text Markup Language，即超文本标记语言。该语言有html标签、CSS样式、JavaScript脚本组成。超文本:超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。标记语言:由标签构成的语言。如 html，xml，标记语言不是编程语言。html标签：用于浏览器网页显示的文字或者图片、视频、音频组件。CSS样式：用于设置html标签怎样显示，例如确定HTML标签显示位置、大小等。...
复制链接

扫一扫