HTML常见标签

最新推荐文章于 2024-09-05 21:14:26 发布
最新推荐文章于 2024-09-05 21:14:26 发布
阅读量578 收藏 1
点赞数 1
分类专栏： JavaWeb 文章标签： html elementui webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42612582/article/details/121989963
版权

目录

标题标签(h1-h6)

段落标签（p标签）

换行标签（br标签-单标签）

水平线标签（hr标签-单标签）

图片标签（img标签-单标签）

音频标签（audio标签）

视频标签（video标签）

链接标签（a标签）

无序列表/有序列表（ul/ol）

 自定义列表（dl）

 表格标签（table）

输入标签（input）

 无语义标签（div/span）

标题标签(h1-h6)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标题标签</title>
   
</head>
<body>
    <h1>1</h1>
    <h2>2</h2>
    <h3>3</h3>
    <h4>4</h4>
    <h5>5</h5>
    <h6>6</h6>
</body>
</html>

段落标签（p标签）

<p>这是一段话</p>

换行标签（br标签-单标签）

<p>这是第一行话。<br>这是第二行话</p>

水平线标签（hr标签-单标签）

<h1>HTML</h1>
<hr>

图片标签（img标签-单标签）

<img src="图片路径" alt="加载失败时显示" title="提示文本" width="宽" height="高">

音频标签（audio标签）

<audio src="音频路径" controls autoplay loop></audio>
<!--    controls&#45;&#45;显示控件-->
<!--    autoplay&#45;&#45;自动播放（chrome不支持自动播放）-->
<!--    loop&#45;&#45;循环播放-->
<!--    支持格式&#45;&#45;mp3，wav，ogg-->

视频标签（video标签）

<video src="视频路径" controls autoplay loop muted></video>
<!--    muted静音播放(chrome只有静音才能自动播放)-->
<!--    支持格式mp4,webm,ogg-->

链接标签（a标签）

<a href="1.html" target="_blank">在新建页面打开1.html</a>
<!--    跳转本地资源 1.html  在新页面打开-->
<a href="https://www.baidu.com/" target="_self">在当前页打开百度</a>
<!--    跳转百度  在当前页面打开-->
<a href="#">空链接</a>
<!-- 返回页面顶部-->

无序列表/有序列表（ul/ol）

  <ul>无序列表
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
  </ul>

  <ol>有序列表
      <li>HTML</li>
      <li>CSS</li>
      <li>JS</li>
  </ol>

 自定义列表（dl）

<dl>整体
      <dt>三剑客
          <dd>HTML</dd>
          <dd>CSS</dd>
          <dd>JS</dd>
      </dt>
      <dt>后端语言
          <dd>JAVA</dd>
          <dd>C++</dd>
      </dt>
</dl>

 表格标签（table）

<table border="true"><thead>
  <tr>
      <td>班级</td>
      <td>分组</td>
      <td>学生</td>
      <td>随便</td>
  </tr>
  </thead>
    <tbody>
    <tr>
        <td rowspan="6">葵花班</td>
        <td rowspan="3">A组</td>
        <td>张三</td>
        <td>1</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>2</td>
    </tr>
    <tr>
        <td colspan="2">王五</td>
    </tr>
    <tr>
        <td rowspan="3">B组</td>
        <td colspan="2">孙六</td>
    </tr>
    <tr>
        <td>韩七</td>
        <td>3</td>
    </tr>
    <tr>
        <td>鲁八</td>
        <td>4</td>
    </tr>
    <tr>
        <td rowspan="6">莲花班</td>
        <td rowspan="3">A组</td>
        <td colspan="2">Alice</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Charles</td>
        <td>6</td>
    </tr>
    <tr>
        <td rowspan="3">B组</td>
        <td colspan="2">Dalian</td>
    </tr>
    <tr>
        <td>Fallen</td>
        <td>8</td>
    </tr>

 table 整体包含多个tr标签，tr代表每行包含多个td标签，td代表单元格具体内容；

rowspan代表合并行+行数，colspan代表合并列+列数，不可跨结构合并（tbody，tfoot，thead）；

属性包括：border 边框，width，height；

输入标签（input）

    <input type="text" placeholder="我是占位符"><br>
    <input type="password" placeholder="请输入密码"><br>
    <input type="radio" checked>文本
    <input type="checkbox" name="sex" checked>男
    <input type="checkbox" name="sex" >女<br>

    <input type="file" multiple><br>

    <input type="button" name="按钮"><br>
    <input type="submit" ><br>
    <input type="reset" ><br>

 无语义标签（div/span）

    <div>独占一行</div>
    <span>同在一行</span>

ECOSYSTeM2
关注
专栏目录
html5无意义标签,"无意义"的div和span标签
weixin_33552698的博客
06-28 1974
HTML 元素是块级元素，它是可用于组合其他 HTML 元素的容器。元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用， 元素可用于对大的内容块设置样式属性。 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法。 元素的作用是显示表格化的数据。HTML 元素是内联元素，可用作文本的容...
3没有语义的标签
beizoushi6437的博客
09-06 1802
3、没有语义的标签（div、span） HTML中大部分标签都是具有语句的（有固定格式），有语义的标签在使用时一定要注意不能乱用。还有一部分标签是没有语义的，没有语义的标签只用来进行页面布局。3.1、div标签代码：<div></div>特点：div默认占一整行，并且一行里面只能显示一个div。 3.2、span标签代码：<span></span>特...
html介绍
weixin_60039689的博客
11-17 662
html介绍
HTML的语义化标签和无语义化标签浅谈
xiaoweids的博客
06-16 443
本文主要介绍了关于HTML的语义化标签和无语义化标签,语义化的标签，旨在让标签有自己的含义，让浏览器认识这个标签所传达的信息，是干什么的有什么作用,需要的朋友可以参考下语义化的标签，旨在让标签有自己的含义，让浏览器认识这个标签所传达的信息，是干什么的有什么作用。 比如：h1标题标签的语义是用它来标识网页或其他部分最重要的标题。 然而span 标签责没有独特的含义。header元素是HTML5中新增的语义化标签，用于定义文档的页眉（介绍信息）。nav元素 定义页面的导航链接部分区域.12345678标题标签双
HTML标签(表单标签,列表标签,无语义标签)
最新发布
奈葵同学的博客
09-05 348
HTML标签(表单标签,列表标签,无语义标签)
【HTML操作指南】
weixin_54161577的博客
04-17 2267
使用工具：VSCode 一、快速生成HTML模板 输入！，并且按Tab，就可以生成一组默认的页面模板 二、在浏览器观察页面的基本结构 按F12，打开开发者工具~ 通过修改title标签修改网页标题，boby标签内部为浏览器内容，此处文章内容为hello world~，页面标题为Test。 三、添加注释 注释是：<!-- --> 可以直接通过ctrl + / 来切换注释~~ 可以看出，类似于IDEA，注释并不起到什么实质性的作业，网页中并不显示注释的...
[Java.Web培训视频]_001.HTML常见标签深入详解
07-31
在"[Java.Web培训视频]_001.HTML常见标签深入详解"这个课程中，我们将深入探讨HTML的核心标签及其用法。 1. HTML结构标签：HTML文档通常由`<!DOCTYPE>`声明、`<html>`根元素、`<head>`头部元素和`<body>`主体元素...
HTML常见标签及个人简历制作
guankunkunwd的博客
11-18 6554
一、前言 1、 HTML代码都是由各种各样的标签构成的。 2、HTML代码基础结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i
H5基本开发2——（HTML常见标签）
m0_59749255的博客
11-18 1600
header定义页面的或区域的头部nav定义导航链接article定义文章的内容section定义网页中的一个区块，例如章节、页眉、页脚等aside定义网页页面部分的侧边栏footer定义网页的尾部HTML标题Heading是通过-等标签进行定义的标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题块级元素但是这里会涉及搜索引擎的优化和推广的问题，一般建议一个html文档中只有1个h1，3个左右的h2HTML段落是通过。
HTML的常用标签
冷兮雪的博客
11-08 6467
这个标签可以在页面上画水平线。
html中没有语义的布局标签
xiaotai1234的博客
06-04 2483
html中没有语义的布局标签 div和span是没有语义的标签，一般用于页面布局使用（项目中会经常使用到） div：div盒子 <div>长亭外</div><div>古道边</div> 特点： width由屏幕宽度决定（独占一行）height自适应（由内容撑开） 默认占一整行（一行只能显示一个） 页面布局中用的最多~ span <span>芳草碧连天</span> 特点： width、height由内容来决定（都由内容撑开）
html基本标签9:无语义标签
2402_84324173的博客
04-25 343
无语义标签没有固定的用途。不独占一行，是一个小盒子。通常用来设计页面的布局。独占一行，是一个大盒子。<span>（双）；
html无效果的标签,没有实际作用只用于添加CSS样式的HTML标签
weixin_39818550的博客
06-05 1991
哪个HTML标签对它周围的文本没有任何作用，它的唯一目的是创建一个“句柄”，以便能够将CSS应用到文本?嗯，快速的答案是，这要看情况。如果你的问题是只针对于某几个字的，那么你要找的html标签可能是span标签：你要添加样式的内容在选择正确的HTML标签时，需要考虑的一个重要方面是它的语义目的以及目标内容是 "块 "还是 "内联"。例如，如果您试图将一个完整的文本段落与周围的段落不同，那么在段落标...
HTML常用标签的简单用法
xaiobit_hl的博客
09-11 523
HTML标签的简单使用
html没有任何意义的标签,没有html标签时的HTML Scraping
weixin_39981624的博客
06-30 368
我正在尝试从此website获取高程数据，以及开始和结束传递时间。到目前为止，我已经查看了源代码并且无法使用Beautiful Soup来获得我想要的东西，因为源代码没有任何关于我感兴趣的信息的标签。该信息包含在函数中，名称为spStart ，这是相应的论点。我开始使用selenium来获取Javascript处理的代码，但我最终获得了与页面上的源代码相同的内容，现在我被卡住了。这是我尝试使用se...
无意义”的标签div和span的区别
Jack huang的专栏
08-21 1538
HTML只是赋予内容的手段，大部分HTML标签都有其意义（例如，标签p创建段落，h1标签创建标题等等）的，然而div和span标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用 它们被用来组合成一大块的HTML代码并...
html中无语义的标签,HTML5 语义元素
weixin_42348371的博客
05-30 1089
HTML5 语义元素语义= 意义语义元素 = 有意义的元素什么是语义元素?一个语义元素能够清楚的描述其意义给浏览器和开发者。无语义 元素实例: 和 - 无需考虑内容.语义元素实例: , , and - 清楚的定义了它的内容.浏览器支持Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素。注意: Internet Explor...
HTML常见标签的默认display属性归类
06-10
HTML常见标签的默认display属性可以归类如下： 1. 块级元素（display: block）：这些元素会独占一行，可以设置宽度、高度、边距和填充，并且可以包含其他块级元素和行内元素。常见的块级元素有 div、h1-h6、p、ul、ol、li、header、footer、nav、article、section 等。 2. 行内元素（display: inline）：这些元素不会独占一行，只会占据所在行的一部分空间，不能设置宽度、高度、上下边距和填充，并且只能包含其他行内元素和文本。常见的行内元素有 a、span、em、strong、img、input、label、button 等。 3. 行内块元素（display: inline-block）：这些元素不会独占一行，可以设置宽度、高度、边距和填充，并且可以包含其他行内块元素和行内元素。常见的行内块元素有 input、img、button、select、textarea 等。 4. 列表项元素（display: list-item）：这些元素会像块级元素一样独占一行，但是它们具有特殊的样式，如圆点、数字或字母。常见的列表项元素有 li。 5. 表格元素（display: table）：这些元素会像表格一样显示，可以设置表格相关的样式，如边框、宽度、高度、单元格对齐等。常见的表格元素有 table、tr、td、th、caption、thead、tbody、tfoot 等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值