HTML标签

已于 2024-08-03 08:23:30 修改
阅读量606 收藏 21
点赞数 22
文章标签： html 前端
于 2024-08-02 20:07:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_76081438/article/details/140856301
版权

目录

1.文本标签

​编辑

2.标题标签

3.div标签

4.段落标签

5.跳转标签

资源路径

窗口打开方式

6.锚点标签

7.图片标签

路径

alt

宽高，style

8.列表标签

9.表格标签

表格

单元格合并

10.框架标签

11.音频

12.视频

13.收集用户信息的标签

Html(超文本结构化标记语言)包含很多标签，有供显示的标签和供收集信息的标签

1.文本标签

span(可以加样式，例如颜色)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--1.文本标签 span-->
    <span style="color: red;">hello</span>

</body>
</html>

运行结果：

2.标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!--标题标签h1~h6-->
    <h1>标题标签</h1>
    <h2>标题标签</h2>
    <h3>标题标签</h3>
    <h4>标题标签</h4>
    <h5>标题标签</h5>
    <h6>标题标签</h6>

</body>
</html>

运行结果：

3.div标签

div标签是竖着布局的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!--div-->
    <div>1</div>
    <div>2</div>
    <div>3</div>

</body>
</html>

运行结果：

4.段落标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!--段落标签-->
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>

</body>
</html>

运行结果：

5.跳转标签

<a></a>标签可以实现跳转

资源路径

href 设置资源路径、

窗口打开方式

target 是设置打开窗口的方式   _self 表示在本窗口打开，_blank表示在新窗口打开，也可以自己

                                                 写一个指定的窗口打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!--跳转标签-->
    <a href="https://www.baidu.com/" target="_blank">点击跳转</a>

</body>
</html>

6.锚点标签

用<a></a>标签实现

href 后是锚点值，style属性可以固定锚点的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <a name="aaaa">段落</a>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
     
    <!--锚点标签-->
    <a href="#aaaa" style="position: fixed;right: 200px;bottom: 200px;">调转到段落</a>

</body>
</html>

7.图片标签

路径

src  后是引用的图片资源，它包括两种路径

       绝对路径：资源的绝对位置

       相对路径：被访问资源的相对关系

                         兄弟关系：在同一文件夹下

                         叔侄关系：图片所在文件夹和html在同一文件夹下

                         表兄弟关系：他们的父亲(的父亲)是兄弟关系

alt

若图片不能正常显示，就会显示alt里面的内容；如果能正常显示则不会显示alt里的内容

宽高，style

可以给图片设置宽(width)高(heigh)，如果只写宽高其中一个，则会按照原来的比例进行放大缩小

style可以设置按照现在的宽高进行裁剪

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <!--图片标签-->
    <img src="https://wxls-cms.oss-cn-hangzhou.aliyuncs.com/online/2024-04-18/218da022-f4bf-456a-99af-5cb8e157f7b8.jpg" width="500px">
    <img src="img/1-1.jpg"  width="200px" height="400px" style="object-fit: cover;">
    <img src="1-3.jpg" alt="这是一张蛋糕图片">

   

</body>
</html>

       运行结果：

8.列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--列表标签-->
    <ul><!--无序列表-->
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
    <ol><!--有序列表-->
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>

   

</body>
</html>

运行结果：

9.表格标签

表格

table:放表格的容器

            border:表格有边框

            width:表格宽度  width="500" height="200"

            height:表格高度

            cellpadding="20px"(单元格填充度)

            cellspacing="0"(单元格之间的间距 0表示挨在一起)

           

        tr:行

        td/th:单元格  (th有加粗居中效果)

thead:永远在第一个

tbody:在中间身体部分

tfoot:永远在最后一个

单元格合并

colspan:合并列   colspan="2"

 rowspan:合并行   rowspan="2"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <table border="1" cellspacing="0" cellpadding="5px">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
        </tr>
        <tr>
            <td colspan="2">1</td>
            <!-- <td>张三</td> -->
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>张一</td>
            <td rowspan="2">11</td> 
        </tr>
        <tr>
            <td>3</td>
            <td>张四</td>
            <!-- <td>17</td> -->
        </tr>
    </table>
   

</body>
</html>

运行结果：

10.框架标签

iframe嵌套其他页面

src:嵌套的资源    可以设置宽高：width="800px"  height="300px"

frameborder="0"  去掉边框，把任意页面嵌套的更真实

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <a href="https://www.bilibili.com/" target="aaa">跳转到bilibili</a>
    <a href="https://www.baidu.com/" target="aaa">跳转到baidu</a>
    <br><br>
    <iframe src="https://www.bilibili.com/" width="800px"  height="300px"  frameborder="0" name="aaa"></iframe> 

   

</body>
</html>

运行结果：

11.音频

src:路径

controls:(手动播放)让这个音频显示出来(他的值是true或false)

              [写就是true(显示出来),不写就是false(不显示)]

autoplay:(自动播放)

loop:(循环播放)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <audio src="img/bj.mp3"  controls></audio>

</body>
</html>

12.视频

src:路径

 controls:(手动播放)让这个音频显示出来(他的值是true或false)

                 [写就是true(显示出来),不写就是false(不显示)]

autoplay:(自动播放)

loop:(循环播放)

width="200px"     height="200px"（可以设置宽高）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <video src="img/1.mp4"  controls></vidio>

</body>
</html>

13.收集用户信息的标签

单行文本框

text

密码框

password

单选框

radio

复选框

checkbox

文件选择器

file

颜色选择器

color

日期选择器

date

具体时间

datetime-local

周选择器

week

滑块

range(可设置最大最小当前值)

数字

number(可设置最大最小当前值、步长)

下拉框

select

多行文本域

textarea(可设置宽高)

普通按钮button
重置按钮

reset(要有用的话，要放到form表单里面)

提交按钮

submit(要有用的话，要放到form表单里面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form>
        <input type="text">单行文本框<br><br>
        <input type="password">密码框<br><br>
        <input type="radio" name="sex">男生    <input type="radio" name="sex">女生    单选框<br><br>
        <input type="checkbox">篮球    <input type="checkbox">足球   <input type="checkbox">乒乓球  复选框<br><br>
        <input type="file">文件选择器<br><br>
        <input type="color">颜色选择器<br><br>
        <input type="date">日期选择器<br><br>
        <input type="datetime-local">具体时间<br><br>
        <input type="week">周选择器<br><br>
        <input type="range" min="0" max="100" value="90">滑块<br><br>
        <input type="number" min="0" max="20" value="10" step="2">数字<br><br>
        <select>
            <option value="">数学</option>
            <option value="">语文</option>
            <option value="">英文</option>
        </select>
        <br>
        <textarea rows="10" cols="50"></textarea>多行文本域<br>
        <input type="button" value="普通按钮">
        <input type="reset" value="重置按钮">
        <input type="submit" value="提交按钮">
    </form>

</body>
</html>

运行结果：

sin2201
关注
html标签样式
Bianca427的博客
05-31 5263
13、伪装选择器：链接标签a：link{color:yellow} 功能：作用于链接标签当鼠标移动标签时触发... 设置未被点击的时字体颜色：a：link{color:yellow} 设置已被点击的链接字体颜色：a:visited{color: brown} 设置鼠标悬停的字体颜色：a:hover{color: yellow;} 设置鼠标点击未释放字体颜色:a:active{color: blue;}...
HTML基本标签
热门推荐
m0_57898822的博客
04-02 1万+
HTML标签
HTML标签类型
Snake-Ma的博客
05-01 3236
块标签及说明 标签名 说明 div 常用块状标签 address 地址 blockquote 块引用 center 居中对齐块 dir 目录列表 dl 自定义列表 fieldset form控制组 form 交互表单 hr 水平分割线 pre 格式化文本 table 表格 ol 有序列表 ul 无序列表 h1~h6 标题 块状标签： 特点：在CSS
常用的HTML标签及属性
weixin_59246157的博客
04-02 3697
属性：action、method、name、value、placeholder、required、readonly、disabled、size、maxlength、id、class、style。5. 表格标签：table、tr、th、td；属性：border、cellpadding、cellspacing、width、height、align、valign、id、class、style。属性：src、autoplay、controls、loop、muted、preload、id、class、style。
html模板标签
ch206265的博客
03-08 5823
在VS code中写html文档时，一般会先用快捷方式生成html的基本框架，即html模版。这些自动生成的标签，比较多地出现在`head`内，好多老师讲解的时候都会让我们先不用管这些代码，但是自己又很好奇，所以搜集了一些资料，毕竟知识之间都是有联系的，一个很细微的点深究下去可能都是无底洞，所以现做如下整理，当然若以后有了更多了解还会再做补充：
html中圆点标签,HTML标签大全（类型）
weixin_42367233的博客
06-05 4345
标 签 内 容备 注基 本 标 签所有HTML文件都有的……表示文件类型为HTML文档标 题 标 签……在标题栏中显示的题目(放在内)扩 展 属 性 标 签基址标签，为解决相对编址作参考值将HTTP命令发给CONTENT=number;url允许，描述不包含在标准HTML里的文档信息。提供将现行文档与其它文档或实体关联起来的信息指明在服务器上提供文档的可以检索的索引……允许包含样式表(CSS)...
HTML标签大全
STILLxjy
04-05 8408
HTML标签列表标签：有序列表和无序列表：表格标签：图片标签：超链接标签： 画中画标签： 框架标签： 表单标签： 其他标签： 超链接顶部位置 列表标签： <!--HTML注释：列表标签，可用于做目录等 列表标签：<dl> (define list) 上层项目：<dt> (define title) 下层项目：<dd> (define d...
四、HTML标签：图片标签
weixin_46820017的博客
05-02 5198
img标签介绍 介绍 img: 英文全称 image（图像），代表的是一张图片。 如果要想在网页中显示图像，就可以使用img 标签，它是一个单标签。语法如下： <img src="图片的URL" /> 能插入的图片类型 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。 不能往网页中插入的图片格式是：psd、ai等。 HTML页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上。 img标签的src属性 这里涉及到图片的一个属性： src属
HTML常用标签
xiaoyu_alive的博客
01-24 8309
讲述了HTML各种标签用法、属性以及相应的其他知识点，超级详细！
HTML 标签
qq_67413159的博客
03-06 4027
文本是网页的基本元素，在<body> 标签中直接插入文本，即可显示在网页页面中。 例如： 标题段落标签 在网页制作规范中，网页的内容需要用标题来呈现文档结构，标题类似于文章的大纲。标题 是通过 <h1>~</h6> 标签进行定义的， <h1> 用于定义最大级别的标题。<h6> 用于定义最小级别的标题。 HTML 规则中对6级标题段落标签设置了默认样式，，包含加粗、字号、上下间距，每一级的字号和上下间距值如下表所示。运行...
java输出中写html标签,java 输出html标签
weixin_42374582的博客
05-31 2069
java 输出html标签[2021-02-01 07:37:44]简介:php去除nbsp的方法：首先创建一个PHP代码示例文件；然后通过“preg_replace("/(\s|\&nbsp\;|　|\xc2\xa0)/", " ", strip_tags($val));”方法去除所有nbsp即可。推荐：《PHP视频教jquery输出html代码的方法：1、直接输出标签元素，代码为【...
html标签各属性之间用空格隔开对吗,03-HTML标签（二）
weixin_39899691的博客
06-04 4060
一、HTML常用标签1、排版标签排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。1.1、标题标签 h1 ~ h6单词缩写： head 头部. 标题为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题。语义：作为标题使用，并且依据重要性递减语法： 标题文本 标题文本 标题文本 标题文本 标题文...
freemarker解析html标签,【转】Freemarker输出$和html标签等特殊符号
weixin_39970689的博客
06-21 1999
原文：http://blog.csdn.net/achilles12345/article/details/41820507场景：程序员都不喜欢看文档，而更喜欢抄例子。所以，我们把平台组的组件都做成例子供别人参考。我们前端展示层使用的是freemarker，所以遇到这个问题，比如我们要让前端显示freemarker自己的源码时就有问题了(因为我们例子程序的页面也是使用freemarker)。遇到的...
rn html标签,React Native展示富文本（HTML标签）最佳解决方案
weixin_32308101的博客
06-25 2401
需求背景我们最近要做一个React Native的产品详情页，里面有一部分内容展示的是服务端下发的html标签(运营人员编写的，内容不固定，且很随意)。需求点是：1、展示富文本，包括img、span、div等基本html标签；2、控制富文本的整体样式，比如业务配置的图片大小不一，我们要统一已屏幕宽度为基准，高度自适应。第三方组件react-native-htmlview要实现这个需求，我第一想到的...
HTML 与 ES6 是前端开发的两大核心技术
最新发布
qq_25416827的博客
10-02 556
HTML：主要负责页面的结构、语义化、布局和多媒体处理。ES6：提高了 JavaScript 的开发效率和可读性，尤其是模块化、异步编程和数据处理方式的革。
基于HTML、CSS和JavaScript的滚动数字显示效果，类似于老式计数器或电子表上的数字滚动效果
2201_76060199的博客
09-29 1065
这段代码创建了一个数字滚动显示效果，用户可以通过输入框输入金额，或点击按钮生成随机数字，金额数字会以滚动的方式显示。CSS负责布局和样式，JavaScript负责动画效果和逻辑处理。代码中多次使用了相同的IDcounter，这在实际开发中是不推荐的，ID应该是唯一的，这里可能是为了简化示例而重复使用。
HTML粉色烟花秀
兔子王
09-21 8305
HTML语言实现的粉红色跨年烟花秀的完整代码。
前端编程艺术（1）---HTML
lys20221113242的博客
09-30 957
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它描述了一个网站的结构骨架，使得浏览器能够展示具有特定格式的文本、链接、图片和其他内容。：主体元素，包含可见的页面内容，如文本、图片、视频、游戏、可播放的音频等。：头部元素，包含元信息，如字符集、页面标题、样式表链接、脚本链接等。标签：HTML标签用于标记文本，以便浏览器知道如何渲染它们。属性：提供关于元素的额外信息，通常在开始标签中规定。：根元素，包裹所有其他HTML元素。
HTML标签属性完全指南
"HTML标签属性大全" HTML（HyperText Markup Language）是用于创建网页的标准标记语言。这个摘要提供了HTML标签的一些基本知识，包括文档结构、文本样式、链接创建、格式排版以及图形元素的使用。 首先，HTML文档...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值