程序员经验分享-hwhale

前端学习之常见标签的使用（2）

2023-11-18

目录

- h标签

- p标签

- br标签

- 字符实体

- img标签

- a标签

- mailto链接

- base标签

- 锚点

- div

- span

- video(H5新增)

- audio(H5新增)

- h标签

h标签 标题标签 在HTML中，一共有六级标题标签 h1~h6 在显示效果上，h1最大，h6最小，但是文字的大小我们并不关心 6级标题中，h1的最总要，表示一个网页中的主要内容，h2~h6重要性依次降低，对于搜索引擎来说， h1的重要性仅仅次于title，搜索引擎检索完title会立即查看h1中的内容 h1标签非常重要，它会影响到页面在搜索引擎中的排名，一个页面最好只写一个h1标签 一般的页面中，我们只使用h1 h2 h3，其他的基本不用

<h1>这是一个h1标签</h1>

- p标签

段落标签，段落标签用于表示内容中的一个自然段 使用p标签来表示一个段落 p标签中的文字，会独占一行，并且段与段之间会有一个间距

<p>
    段落标签，段落&quot;标签&quot;用于表示内容中的一个自然段,<br><hr>
    使用p标签来表示一个段落,
    p标签中的文字，会独占一行，并且段与段之间会有一个间距
</p>

- br标签

br标签 表示换行标签 br标签是一个自结束标签 br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签

-hr标签

hr标签 可以在页面中生成一个分割线

- 字符实体

空格  &nbsp;
  <  &lt;
  >  &gt;
  “  &quot;
  &  &amp;
  ‘  &apos;

- img标签

img标签 告诉浏览器要显示一张图片

img标签的格式 
<img src="" alt="">

src:设置一个图片的路径（绝对路径和相对路径，最好使用相对路径） alt:可以用来设置在图片不能显示的时，对图片的描述 img标签的其他属性 width:设置图片的宽度 height:设置图片的高度 title：用于告诉浏览器，鼠标悬停的时候，需要弹出的描述框中显示什么内容。

<img src="图片的url或本地路径地址" alt="" width="100px" height="100px" title="">

注意点：

1.px 单位名称为像素，相对长度单位，像素px是相对于显示器屏幕分辨率而言的。像素的使用性特

别广。

2.如果不设置img标签的宽度和高度，那么图片就会按照默认的样式显示，如果设置了宽高，img就

会按照设置的宽高来显示。

3.有时设置img的宽高会使图片失真，这时只需要设置宽度或者高度中的一个，另外一个会等比例调整。

4.一般除了自适应的页面，不建议设置width和height。

5.和h标签以及p标签不同的是，img标签不会独占一行

- a标签

a标签的作用 用于控制页面与页面之间跳转的 a标签的格式

<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>
<a href="https://www.baidu.com" target="_blank" title="百度">百度一下</a>

a标签中还有一个叫做target的属性，这个属性专门用于控制如何跳转 self:用于当前的选项卡中进行跳转，也就是不新建页面跳转，默认就是_self _blank:用于在新的选项卡中进行跳转，也就是新建页面跳转 a标签也有一个title属性，效果和img标签的title类似

注意点: ​ 1.a标签不仅可以让文字点击，也可以让图片被点击 ​ 2.一个a标签必须有一个href属性，否则a标签不知道要跳转到什么地方 ​ 3.如果通过a标签href属性指定一个URL地址，那么必须在地址前面加上http://或者https:// ​ 除了URL地址，还可以指定一个本地地址

- mailto链接

mailto链接是一种html链接，能够设置你电脑中邮件的默认发送信息。但是需要你电脑中安装默认的E-mail软件，类似Microsoft Outlook等等。加入您已经安装了Microsoft Outlook，那么直接点击mailto链接就可以获得默认设置的邮件信息。

使用方式：

<a href="mailto:name@email.com">Email</a>

- base标签

base标签就是专门用来统一指定当前页面中所有的a标签需要如何打开 注意点

        1.base标签必须要写在head标签之间

        2.如果既在base中指定了target又在a标签中指定了target，那么浏览器会按照a标签中指定的来执行。

- 锚点

        1.要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置

        2.如何和HTML中的标签绑定一个独一无二的身份证号码呢? 在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的

        3.所以要想实现通过a标签跳转到指定的位置分为两步 ：3.1给目标位置的标签添加一个id属性, 然后指定一个独一无二的值 3.2告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少

格式:

<a href="#center">跳转</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="center">我是中部</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

当点击跳转时就会跳到绑定的目标位置。 

- div

div是一个无语义的标签，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式，div元素主要用来进行页面基本结构的搭建

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

- span

span没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式

- video(H5新增)

作用：播放视频 webm 网页中专用的视频格式

格式:<video src=""></video>

video标签的属性 src:告诉video标签需要播放的视频地址 autoplay:用于告诉video标签是否需要自动播放视频 controls:用于告诉video标签是否需要控制条 poster:用于告诉video标签视频没有播放之前显示的占位图片 loop:一般用于做广告视频，用于告诉video标签视频播放完毕之后是否需要循环播放 muted:静音 width/height: 和img标签中的一模一样 video的第二种格式

1.格式:

<video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>

2.第二种格式存在的意义: 由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的 这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式 video标签的第二种格式存在的意义就是为了解决浏览器适配问题 video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放

3.注意点:

        3.1当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放

        3.2在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现

<video autoplay="autoplay" controls="controls">
    <source src="images/sb1.webm" type="video/webm"></source>
    <source src="images/sb1.mp4" type="video/mp4"></source>
    <source src="images/sb1.ogg" type="video/ogg"></source>
</video>

- audio(H5新增)

作用: 播放音频

格式:

<audio src=""></audio>
<audio>
    <source src="" type="">
</audio>

注意点: audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样 只不过有3个属性不能用, height/width/poster。

内容如有错误，欢迎大家在评论区指出，谢谢各位的浏览。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

HTMLCSSJS

html5

html

前端

学习

前端学习之常见标签的使用（2） 的相关文章

  • 以编程方式将网页保存到静态 HTML 文件的最佳方法

    我做的研究越多 前景就越黯淡 我正在尝试使用 Python 进行平面保存或静态保存网页 这意味着将所有样式合并到内联属性 并将所有链接更改为绝对 URL 我尝试过几乎所有免费的转换网站 api 甚至 github 上的库 没有一个是那么令人

  • HTML 页面中的目录选择器

    如何在 html 页面中创建目录选择器 如果我使用输入文件元素 我只能选择文件 但我需要选择目录 我需要这样做 因为用户应该在他的计算机内选择正确的路径 有什么解决办法吗 试试这个 我想它会对你有用

  • CSS 中的重叠文本 - 如何更改它？

    我正在尝试更改 css 文件中的重叠元素 文本 一行文本 在常规浏览器中 在移动设备中显示为两行文本 重叠在一起 此更改适用于网站的移动版本 横向平板电脑的 media 部分 目前 标题 h2 文本在 iPad 平板电脑上重叠 来自 h2

  • 停止pandoc自动添加id

    我在用Pandoc对Markdown的扩展 http pandoc org MANUAL html pandocs markdown来生成 HTML 以下降价 test specificId test2 test3 生成以下 html h1

  • KineticJS - 如何在按钮单击时更改图像 src

    我试图通过单击按钮来更改kineticjs阶段中图像的src 我有一个可拖动的图像 在本例中为达斯维德 和顶部的静态图像 在本例中为猴子 单击按钮后 我希望能够用新图像替换可拖动图像 yoda JSFiddle 可以在这里看到 http j

  • 如何在 css 中对重新定位的 div 进行 z 索引

    Context 我正在尝试制作明显集中的菜单项 当鼠标悬停时改变颜色并扩大尺寸 虽然设置另一种颜色很容易 但尝试将其横向移动是一项比我想象的更复杂的任务 运动本身按其应有的方式工作 但项目的 z 索引变得混乱 Issue 背景颜色已按其应有

  • iOS Voice Over 和 Android 无法播报 Span 标签中的文本

    我们希望屏幕阅读器在节点关闭后宣布 项目已关闭 有趣的是 Chrome 上的 NVDA 正确地播报了该消息 而 Android 和 iOS Voice Over 则未能播报此消息 这是打字稿代码 HostListener keydown t

  • 如何将输入 type="date" 转换为时间戳？

    我需要转换一个

  • Internet Explorer 8 不会修改打印样式表中的 HTML5 标记

    我之前正在制作打印样式表 并遇到了 IE8 的问题 我正在使用 HTML5 和几个布局标签 包括页眉 导航和页脚 由于某种原因 在我的打印样式表中显示 无 这些标签上的声明在 IE8 中被忽略 我只能假设后续的较低版本 我首先认为 IE9

  • 如何在 JavaScript 中访问自定义 html 属性？

    您好 我在这个 html 文档中遇到问题 请帮助我 我对此很陌生 也许我很愚蠢 错过了一些东西 我在这里只放了有用的来源来解决请 a Hurray a br 我希望它显示

  • JQuery .submit() 在 IE9 中失败

    下面是一个 Jsfiddle 和最近提出的问题的链接 如果您在 FF 或 Chrome 中进入 jsfiddle 页面并单击 Click Me 您可以选择一个文件 一旦确定该文件 页面将查找 php 脚本 在 IE 中 它不会查找 php

  • d3 转换改变了哪些属性？

    我试图了解 d3 中到底发生了什么转换 例如 var bars svg selectAll null data my values enter append rect statement before transition attr x 1

  • 使用 Bootstrap 粘性导航栏进行 Href 跳转 [重复]

    这个问题在这里已经有答案了 因此 我有一个带有下拉菜单的粘性导航栏 可以让我跳转到页面的不同部分 但是 当我跳转到不同的部分时 导航栏会覆盖我跳转到的 div 的开头 我检查了导航栏 它的高度为 58 带有填充和所有内容 如何将跳转偏移 5

  • input[type=hidden] 和visibility="hidden" 之间的区别

    有什么区别input type hidden and visibility hidden 第一个是输入元素 第二个用于 CSS2 中的样式 visibility hidden 可见性属性指定元素是否可见 输入 类型 隐藏 http www

  • 使用 jQuery 将播放/暂停/结束功能绑定到 HTML5 视频

    我正在尝试绑定play pause and ended使用 jQuery 的事件但有一个问题 当我右键单击视频并选择播放或暂停时 图标会正确更改 当我单击播放按钮时 它会更改为暂停 但如果我单击暂停按钮继续播放视频 它不会更改为再次播放 谁

  • 滚动到 HTML 网站中的顶部 JavaScript

    我正在尝试在我的网站中实现滚动到顶部功能 www arrow tvseries com 网站上可以看到 按钮 但它无法正常工作 因为单击时它不会滚动到页面顶部 更重要的是 我希望 滚动到顶部按钮 在向下滚动 例如一半页面 时可见 这是 Ja

  • 在智能手机上选择尺寸为正常尺寸

    在我的网络应用程序中 我创建了一个选择size 5 正确显示 您可以从图像中看到 当我在移动设备上打开应用程序时 我得到的是这个维度 您如何看到尺寸不正确 我通过代码而不是CSS设置尺寸 我再说一遍 这在桌面上有效 但在移动设备上不起作用

  • 将表格行换行到下一行

    table tr td testtesttesttest td td testtesttesttest td tr table 我想如果表格不适合屏幕 那么表格的第二个单元格将被转移到另一行 不是单元格中的文本 而是整个单元格 将单元格更改

  • 在进程注册后显示 div，woocommerce

    在网站注册过程后 我想显示一个隐藏的div div 位于同一页面中 但注册后 页面将加载并显示相同的页面 这是表单处理程序 php public static function process registration nonce valu

  • 网站上出现奇怪的符号（L SEP）？

    我在我的网站上注意到 http www cscc org sg http www cscc org sg 出现了这个奇怪的符号 上面写着 L SEP 在 HTML 代码中 它显示相同的内容 有人可以告诉我如何删除它们吗 那个角色是U 202

随机推荐

  • 左程云 Java 笔记--链表

    文章目录 1哈希表 2有序表 3链表 3 1打印两个有序链表的公共部分 3 2判断一个链表是否为回文结构 3 3将单向链表按某值划分成左边小 中间相等 右边大的形式 3 4复制含有随机指针节点的链表 3 4 1使用哈希表 3 4 2方法二

  • Tachyou alluxio初识

    Tachyou是基于内存的分布式文件系统 如果把hdfs上层再弄一层Tachyou去存储数据 那么速度将会更快 Tachyou现在改名为Tachyou alluxio

  • 【数字电源】数字电源核心理论-"伏妙平衡"与"安秒平衡"

    1 聊一聊 今天跟大家分享的是迈克在本公众号的第三首歌曲 在bug菌心里迈克的歌早就不仅仅只是一首歌曲了 更是件值得一直品味的艺术品 本文开启数字电源的第一篇原创文章 数字电源核心理论 伏秒和安秒平衡 2 主题前言 在公众号简介中bug菌跟

  • 为什么要进行埋点？如何理解数据埋点

    我们在做网站运营 APP运营的时候 要关注事件级分析 比如按钮点击事件 漏斗转化率 只看PV UV是无法得到行动指导的 UV多了一点少了一点 无法能反映出来 我们流量的多与少 与用户真正的完成转化还差很多 举例 我们想看加入购物车和提交订单

  • Qt中 gui 模块和 widgets 模块的区别

    1 gui 模块提供了基本的图形系统抽象层 包括QPaintDevice QPainter等类 这些类构成了Qt的绘图基础 2 widgets 模块在 gui 模块的基础上 提供了完整的桌面级用户界面控件 如按钮 列表 滑块等 这些控件继承

  • VS最新安装教程

    1 访问Visual Studio官方网站 下载 Visual Studio Tools 免费安装 Windows Mac Linux microsoft com https visualstudio microsoft com zh ha

  • .NET 发展历程

    早期 NET NET Framework 1 0 4 8 1 时间 2002 02 2019 04 2002 年 2 月 23 日最早的 NET Framework 1 0 发布 终止于 2022 年 8 月 9 日发布的 NET Fram

  • ie11对象不支持此属性和方法 ie11的缓存问题

    更改eclipse的js代码 在ie11上调试 发现调用新更改的方法 在ie11的console输出里 一直提示 对象不支持此属性和方法 点击右上角设置图标 然后点击Internet选项 在常规选项卡里的 浏览器历史记录 点击设置 在弹出的

  • 【分布式系统搭建】Zookeeper完全分布式集群的搭建

    Zookeeper完全分布式集群的搭建 一 集群模式 1 单机模式 用于测试环境 在zoo cfg中只配置一个server id就是单机模式了 2 伪分布式 用于测试环境 在zoo cfg中配置多个server id 其中ip都是当前机器

  • AntV-f2开发文档

    安装 浏览器引入 复制代码 npm 安装 安装 npm install antv f2 save复制代码 引入 const F2 require antv f2 复制代码 上手 步骤 创建 Chart 图表对象 指定图表 ID 指定图表的宽

  • Qt开发经验（转载）

    0 前言说明 本文转载于https qtchina blog csdn net type blog feiyangqingyun的博客 感谢大佬的经验分析 1 开发经验 01 001 010 当编译发现大量错误的时候 从第一个看起 一个一个

  • C++ 常量引用

    黑马程序员C P94 常量引用 感觉这部分有很多内容 但目前我的理解就是在形参前加上const 防止误操作 先占个坑后面再补充

  • 第二章节：期货市场组织结构与投资者

    各组织的性质 职能 形式 组织架构 权利 义务等 期货结算制度 期货投资者种类等 第一节 期货交易所 本节考点 一 期货交易所的性质 宗旨与职能 重点掌握 二 期货交易所的组织结构 重点掌握 三 我国境内期货交易所 重点掌握 一 期货交易所

  • Java中的static关键字解析

    一 static关键字的用途 在 Java编程思想 P86页有这样一段话 static方法就是没有this的方法 在static方法内部不能调用非静态方法 反过来是可以的 而且可以在没有创建任何对象的前提下 仅仅通过类本身来调用static

  • HDU-7304 2023“钉耙编程”杭电多校赛（3）Out of Control

    2023 钉耙编程 中国大学生算法设计超级联赛 3 Out of Control 题目大意 有 n n n个数 x 1 x

  • 区块链三加一：深度论区块链的联盟链意义与作用

    随着区块链技术的发展 越来越受个人及企业的关注 而和区块链联系最为紧密的 恐怕就是金融行业了 然而虽然区块链大受热捧 但毕竟区块链是属于公有区块链 公有区块链有着其不可编辑 不可篡改的特点 这就使得公有链并不适合企业使用了 毕竟如果某金融企

  • UE4右键菜单(上篇ContentBrowser的补充)

    在上篇中我们讲到拓展我们的ContentBrowser的文件夹右键菜单 看回上篇代码可以发现其实真正起实现拓展 看到效果 的代码就只有一行 在代码中我们可以看到 MenuBuilder 这个东西是可以为我们创建一个菜单的 今天我们继续来改造

  • VOC格式数据集转适用YOLOv8格式

    直接设置VOC数据集的文件夹目录 生成的v8格式数据集存放目录以及标签的名字就行了 直接执行后就会是下面这图这样重新创建一个文件夹存放符合yolov8格式的数据集 yolov8直接加载那个yaml文件就行 我下边只有一类 注意最后的yaml

  • 计算机网络物联网论文,物联网对计算机网络技术发展分析

    摘要 随着科学技术和计算机网络技术的快速发展 物联网行业呈现出了巨大的发展潜力并且不断完善 这几年在物联网概念的强力刺激下 很多的公共服务和商业服务也加入到这一技术的应用当中 计算机网络是构成物联网的基础 所以计算机网络技术的发展和物联网是

  • 前端学习之常见标签的使用（2）

    目录 h标签 p标签 br标签 字符实体 img标签 a标签 mailto链接 base标签 锚点 div span video H5新增 audio H5新增 h标签 h标签 标题标签 在HTML中 一共有六级标题标签 h1 h6 在显示

热门标签