html常用标签

Gurean

已于 2022-07-16 14:40:49 修改

阅读量3.4k

点赞数 15

文章标签： html 前端

于 2022-07-16 14:18:15 首次发布

本文链接：https://blog.csdn.net/weixin_51450341/article/details/125749628

版权

基本标签

<html lang="en">
    <head>
    </head>
    
    <body>
        
    </body>
</html>

<html> </html>

所有网页标签都包含在该标签中

<head></head>

用于定义文档的头部包括title,meta等标签

<body></body>

用于定义网页中的内容，包含标题标签h1-h6,段落标签<p></p>等

双标签

1.标题标签

形如<h1>内容</h1>...<h6>内容</h6>分别是一级标题，二级标题....六级标题。数字越大，字号越小，粗细程度也越细

属性：在网页中占据一整行，且能够自动换行

高度由文字本身的高度撑开(由h1标签背景色可知)

 <h1>这是一个h1标签</h1>
 <h2>这是一个h2标签</h2>
 <h3>这是一个h3标签</h3>
 <h4>这是一个h4标签</h4>
 <h6>这是一个h5标签</h6>
 <h6>这是一个h6标签</h6>

2.p标签

即段落标签，用于包裹文字，形如<p>内容</p>

属性：能够自动换行

 <p>这是一个p标签这是一个p标签这是一个p标签这是一个p标签这是一个p标签</p>
        
 <p>这是一个测试标签</p>

3.em标签

倾斜标签，包裹在其中的文字会有所倾斜，形如<em>内容</em>

属性：不会自动换行

<em>这是一个em标签这是一个em标签这是一个em标签这是一个em标签这是一个em标签</em>
    <em>这是一个测试标签</em>

4.strong标签

加粗标签，包裹在其中的文字会加粗，形如<strong>内容</strong>

属性：不会自动换行

<strong>这是一个strong标签这是一个strong标签这是一个strong标签这是一个strong标签</strong>
    <strong>这是一个测试标签</strong>

5.a链接

即超链接标签，分为页面间的链接和锚链接。形如<a href=" ">链接</a>

页面间的连接即HTML 使用超级链接与网络上的另一个文档相连，点击链接可以从一个页面跳转到另一个页面。

锚链接即跳至自身固定位置，或A页跳到B页固定位置，需锚标记

属性：

1.href:超链接地址

href=" #" 时跳转到当前页面

2.target 目标窗口的位置

_blank 新建窗口打开超链接

_self 在自身窗口打开超链接

a链接之页面间的链接

<a href="./img/png2.png" target="_blank">
    <h1>点击此处跳转</h1>
    </a>

上述代码段中，href属性中存放的超链接地址是一个图片地址，点击h1标签内包裹的链接时，跳转至该图片所在地址，并在网页中展示该图片。

target属性中存放的是打开该图片时窗口的位置。

下图为h1标签包裹的文字在网页中的样式。

a链接之锚链接

 <a name="top"></a>
 <a href="#top">回到顶部</a>

在上述代码中，第一行代码设置跳转标记，第二行代码设置跳转链接，当用户在页面中点击“回到顶部”，则浏览器自动跳转至第一行代码所在位置。当我们把第一行代码放到页面的初始位置，即可达到回到页面顶部的目的。

同理可得，我们还可以设置去往页面底部的链接

a链接之其他

1.点击图片跳转：把a链接中的链接由文字改为图片时，就可以实现点击图片跳转

  <a href="https://www.jd.com" target="_blank"> 
        <img src="img/png4.png" width="800" height="400" alt="">
    </a>

2.拨打电话：把a链接中的链接地址改为电话号码，可以实现拨打电话功能

  <a href="tel:123454321">1234542321</a>

上述代码的格式为<a href=" tel:电话号码">电话号码</a>

此处的电话号码必须保持一致。

3.下载文件： a链接本身不带有下载文件的功能，但是由于浏览器无法打开链接地址中指向的文件，故下载


    <a href="PowerPoint.pptx">下载文件</a>

浏览器无法打开的文件格式有.pptx,doc等等

列表

列表分为有序列表，无序列表和自定义列表

1.有序列表

<ol>用来声明有序列表。

<li>用来表示列表项。

有序列表的各个列表项是有顺序的。有序列表从<ol>开始，到</ol>结束，中间的列表项是<li>标签内容。

<ol>标签和<li>标签是配合使用，没有单独使用，而且<ol>标签内部不能存在任何其他标签，一般情况下只能存在<li>标签

属性： type属性，用于控制列表项符号。可以改变type属性值来调整列表项符号。

1 数字1，2，3，4....

a/A 小/大写英文字母

i/I 小/大写罗马字母

 <ol type="a">  
        <li> html</li>
        <li>java</li>
        <li>c++</li>
    </ol>
    <ol type="A">
        <li> html</li>
        <li>java</li>
        <li>c++</li>
    </ol>
    <ol type="1">
        <li> html</li>
        <li>java</li>
        <li>c++</li>
    </ol>
    <ol type="i">
        <li> html</li>
        <li>java</li>
        <li>c++</li>
    </ol>
    <ol type="I">
        <li> html</li>
        <li>java</li>
        <li>c++</li>
    </ol>

2.无序列表

<ul>用来声明无序列表。

<li>用来表示列表项。

<ul></ul>标签表示一个无序列表的开始和结束，<li>表示这是一个列表项。在一个无序列表中可以包含多个列表项。

<ul>标签和<li>标签配合使用，不能单独使用

type属性，用于控制列表项符号。可以改变type属性值来调整列表项符号。

disc 默认值，实心圆点

circle 空心圆点

square 实心正方形

none 没有列表符号

 <ul type="disc">
        <li> html</li>
        <li>java</li>
        <li>c++</li>
    </ul>
    <ul type="circle">
        <li> html</li>
        <li>java</li>
        <li>c++</li>
    </ul>
    <ul type="square">
        <li> html</li>
        <li>java</li>
        <li>c++</li>
    </ul>
    <ul type="none">
        <li> html</li>
        <li>java</li>
        <li>c++</li>
    </ul>

3.自定义列表

<dl>声明自定义列表

<dt>表示列表标题

<dd>表示列表内容

<dl>标签和<dt><dd>标签是配合使用，没有单独使用，而且<dl>标签内部不能存在任何其他标签

  <dl>
        <dt>CSDN里面有什么</dt>
            <dd>c++</dd>
            <dd>java</dd>
            <dd>html</dd>
            <dd>css</dd>
        <dt>动物园里有什么</dt>
            <dd>猴子</dd>
            <dd>大象</dd>
            <dd>水獭</dd>
    </dl>

表格

属性：

边框border 初始为0

宽度width

高度height 被表中数据平分

水平对齐的方式align

居中center

左对齐left

右对齐right

背景颜色bgcolor

1.英文单词

2.十六进制

3.rgb() 0-255

跨行跨列

rowspan

colspan

rowspan和colspan属性值为整数，表示合并几行为一行或合并几列为一列

th：表头单元格

tr:描述行

td:描述列

设置单元格之间的距离cellspacing 一般设置为0、

表单

form表单的属性接名(name)得值(value)

action:向何处发送数据

mothed:以何种方式发送数据

get

1.通过url地址栏发送数据

2.不安全

3.发送数据量小

post

1.通过通信协议https/http将表单数据发送到后台

2.相对安全

3.理论上没有限制

4.需要服务器环境支持

表单之input标签

属性

1.hidden 隐藏域，在url中隐藏用户输入的数据

2.password 密码输入框，将用户输入大的内容显示为密文

3.file 上传文件

4.radio 单选框，常用于性别选择

单选框选中后无法取消，只能通过选择另一个单选框来取消

5.checkbox 多选框

6.select 下拉列表

7.textarea 文本域，可存放大段文字

8.submit 提交按钮

9.reset 重置，可做取消使用

10.image 具有提交功能的图片

表单之label标签

用于表单中，包裹文字，以增强手指，鼠标的可用性，

在上述图片中，用户不仅可以通过单击输入框输入账号，还可以通过单击“账号”来输入

 <label for="user">/label> 
        <input type="text" name="user" id="user"><br><br>

上述代码中第二行中的name值和第一行中for的属性值必须保持一致

audio/vedio

属性：

src路径

controls 显示播放器控件

autoplay 自动播放

loop 循环

width/height 视频播放器的宽高

  <audio src="./audio/银临 - 棠梨煎雪.mp3" controls autoplay></audio>
    <video src="" controls></video>

在该文件的同级目录下必须包含这首歌的mp3文件才能打开

单标签

1.hr标签

水平线标签，可以自动换行，在网页中展示一条水平线

可设置颜色，宽度高度等基本属性

<hr>

2.br标签

换行标签，可以与其他不会换行的标签搭配使用

3.img标签

图片标签，将图片展示到网页中

属性：

1.src 图片路径属性

绝对路径

由于代码可能会运行在其他系统上，因此在项目开发过程中，很少使用绝对路径

相对路径包括以下三种

                             /     根路径

                             ./    同级路径：与该html文件存放在同一个文件夹中

                             ../   上一级路径：存放在该html文件的上一级的文件夹中

2.高度属性 height

宽度属性 width 单位均为像素px

3.alt属性图片不能正常加载时的提示

4.title属性鼠标划上去显示的内容

小结：关于html的基本标签记录完毕，如果有人看到了这篇博客，发现了其中的一些错误，恳请能够指正，非常感谢！