H5基本开发2——（HTML常见标签）

news2025/7/19 19:11:34

 常见标签说明

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>常见标签</title>
</head>
<body>
<!-- 标题标签，一般标题标签占一行 -->
<!-- 一个文档中一般只有1个 -->
<h1 id="top1">标题1</h1>
<!-- h2 不超过3个-->
<h2>标题2</h2>
<!-- h3 随便用 -->
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!-- 段落标签p -->
<p>
告知搜索引擎，该标签中，放的是大段的文字
内部只能放文字，不能放 其他(block,inline-block)标签
</p>
<p>
在具体的文本中，浏览器不区分回车换行符和空格，都处理为一个空格、如果需要多个空格
时请使用&nbsp;实体字符.如果需要换行符则使用<br/>标签
</p>
<!-- header标签 -->
<header>页眉</header>
<!-- 文章标签 -->
<article>文章</article>
<!-- 边栏 -->
<aside>边栏</aside>
<!-- 页脚 -->
<footer>页脚</footer>
<!-- 表强调 -->
<strong>我最牛逼～</strong>显示效果和<b></b>一致,内容加粗显示
<b>我就是牛逼～</b>
<!-- 表强调 -->
<em>斜体</em>
<i>斜体</i>
<!-- 时间 -->
<time>9:23</time>
<!-- 地址 -->
<address>地址</address>
<!-- 无序列表 -->
<ul>
<li><div>111</div></li>
<li>玄幻小说</li>
<li>都市小说</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>红楼梦</li>
<li>西域记</li>
<li>水浒传</li>
</ol>
<h1>使得分胜负</h1>
<!--
以上标签，称为语义化标签，标签的语义化与最终渲染效果无关，标签在页面上的渲染效
果只与对应的样式有关。
使用语义化标签可以让搜索引擎更容易搜到我们编写html文档，便于项目的推广。
语义化标签的问题：语义化标签虽然拥有一些默认的初始样式，但是在不同的浏览器上，
语义化的标签，其初始化样式，可能存在一些差异，因此再使用语义化标签时，要优先考虑将有差异的
样式统一初始化。
常见差异样式： margin padding
SEO :搜索引擎优化
关键字
SEM :搜索引擎商业 竞价排名
-->
<!-- 图片标签 -->
<img src="../../img/1.png" alt="图片加载中">
<!--
相对路径：是指以使用该图片资源的html文档为起点
去查找该图片，而形成的路径
当前目录用 ./表示 可以省略
上级目录用 ../表示
实际开发中，如果发现图片不能正常显示，优先查看
控制台中的console部分。查看报错，路径是否有错误
图片标签，在界面中依然是一个矩形盒子，在设置样式的
时候，一般只设置宽度，高度会根据图片的宽高比例自适应
-->
<!-- 锚点标签：带交互的标签，可以实现跳转
target：属性用来设置跳转后页面的打开方式
_self :在当前窗口打开
_blank:在新窗口打开
-->
<!-- 跳转到万维网 -->
<a href="http://www.baidu.com" target="_blank">百度一下你就知道</a>
<!-- 跳转到其他文档 -->
<a href="1_周报回顾.html">1_周报回顾</a>
<a href="img/1.png">图片</a>
<a href="课程包计划.xlsx">课程包</a>
<!-- 跳转到当前文档的指定位置 -->
<a href="#top1">回到顶部</a>
<!--
跳转到文档指定位置，是通过在文档的特定位置标签上
设置id属性，在a标签的href属性中填入该id属性值
在点击时，整个文档就会发生移动，将该行显示在浏览器
可视区域中
应用场景： 回到顶部，目录列表
-->
</body>
</html>

header定义页面的或区域的头部

nav定义导航链接

article 定义文章的内容
section 定义网页中的一个区块，例如章节、页眉、页脚等
aside 定义网页页面部分的侧边栏
footer 定义网页的尾部

html标题

HTML 标题 Heading 是通过 <h1> - <h6> 等标签进行定义的
标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题
块级元素
但是这里会涉及搜索引擎的优化和推广的问题，一般建议一个 html 文档中只有 1 个 h1 ， 3 个左右的 h2

html段落

HTML 段落是通过 <p> 标签进行定义的
块级元素，浏览器会自动地在段落的前后添加空行 
<h1>这是一个测试文件</h1>
<p>具体内容1</p>
<p>具体内容2</p>

html折行

不产生一个新段落的情况下进行换行（新行）使用 <br /> 标签

 

如果需要按html文档中内容的格式进行显示，可以使用标签 <pre> 

 

页面链接的基本概念 

网页的强大之处就在它的超链接，在浏览器中通过点击网页中的超链接，可以很方便地打开另外一个网页或者是图片、文件、邮件地址
一个网页中的链接分成两个部分：链接的载体和链接的目标地址
链接的载体就是在网页中文字和图片，凡是包含链接的文字和图片都称为超链接
  • 当需要从一个网页链接到另一个网页的时候，使用 <a> 元素
  • <a> 元素中的href属性说明了链接的目的地
  • <a> 元素中的内容是链接的标签。标签显示在网页上。默认情况下会在下面加下划线说明可以单击
  • 链接可以是文字或者图像
  • 当你点击链接时，浏览器装载href中指定的网页
  • 可以链接相同文件夹下的文件，也可以链接不同文件夹下面的文件
  • 使用 .. 链接父目录中的文件
  • 用 / 分割路径中的各个部分
  • 网站中的文件名或者文件夹中不能出现空格
  • 最好在构建的早期就组织好你的网页。这样网站升级时，就不需要改一堆路径了

页面链接

  • 链接有外部链接、内部链接、邮件链接3种形式
  • 绝对路径：完整的描述文件位置的路径
  • 相对路径：自己相对与目标位置
一个超链接通常由以下 3 个部分构成：
  • 超链接标记 <a></a> ，HTML链接是通过 <a> 标签进行定义的
  • 属性href及其值，href属性来描述链接的地址
  • 超链接中显示页面上显示链接的文字 <a href="http://www.sina.com.cn">新浪网</a>
a 标签基本用法 
点击<a href="https://www.baidu.com">target属性</a>可以定义

a标签在浏览器中有默认的显示效果，可以使用css覆盖定义

<a href="https://www.baidu.com">
<img src="images/29.jpg" width="200" height="100">
</a>
可以定义 target 定义被链接的文档在何处显示，记忆配置 _blank 新开窗口显示链接内容，默认 _self表示在当前窗口中进行显示

设置超链接选项

  • _blank将链接的文件载入一个未命名的新浏览器窗口中
  • _parent将链接的文件载入含有该链接的框架的父框架集或父窗口中
  • _self将链接的文件载入该链接所在的同一框架或窗口中。此目标为默认值，因此通常不需要指定它
  • _top在整个浏览器窗口中载入所链接的文件，因而会删除所有框架
<a href="http://www.baidu.com" target="_blank">百度一下你就知道</a>

内部链接

有时候，当某页的内容很多时，我们可以利用网页的内部链接，以便使用者快速的找到资料
书签：内部链接就是网页中的书签 
<a name=”书签名称”>书签内容</a>
<a href="#标签a">单击此处监视浏览器调到“标签a”处</a>

邮件链接

邮件链接可使访问者在浏览页面时，只需单击电子邮件链接就能打开默认的邮件编辑软件，向指定的地址发送邮件 
<a href="mailto:19903152@qq.com">给老师写信</a>

访问者单击电子邮件链接时，将打开默认的电子邮件编辑软件 

html图像

浏览器处理 <img> 元素的方式，与其它元素不同。以 <h1> 或者 <p> 为例。当浏览器在页面中遇到这些标签，它只需显示它们，非常简单。但是当浏览器遇到一个 <img> 元素时，就要进行特殊处理：浏览器 必须先接收图像然后再在页面上显示它们。
网页中常用的图像 jpg 、 gif 、 png
  • GIF：优点（动画存储格式），缺点（最多256色，画质差）
  • JPG：优点（文件小，利于网络传输），缺点（画质损失）
  • PNG：优点（可保存透明背景的图片），缺点（画质损失）
HTML 图像是通过 <img> 标签进行定义的，单标签。 <img> 是内联元素，前后不会插入换行
src 源属性的值是图像的 URL 地址，这里的地址可以是当前应用中的内容，也可以是网络上的资源 
<a href="https://www.baidu.com"><img src="images/29.jpg" width="200" height="100"></a>

 alt属性用来为图像定义一串预备的可替换的文本，如果图片可以正常显示则不会显示替换文本

 

常见属性width和height设置图片显示的宽和高 

 

 一般建议针对图片可以专门提供大图和小图，不建议针对大图进行设置压缩大小

html水平线

<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。

 

可以设置水平线的宽度 width=80%

html文本格式化

<b> 与 <i> 定义粗体或斜体文本
<strong> 或者 <em> 显示样式类似 b 和 i ，但是重要的是意味着要呈现的文本是重要的，所以要突出显示
<b> 京东价 </b>
<i> 商品的销售价 </i>
<q> 和 <blockquote> 表示引用，但是浏览器的默认显示效果是有区别
还有很多的文本效果，但是一般建议使用 css 进行格式化

html标签上的style属性

内联样式设置： <p style="color:blue ; margin - left:20px ; "> 这是一个段落。 </p>

列表元素

创建列表的方式
将每一个列表项目放入 <li> 中
用 ol 或者 li 封装列表元素

无序列表 

<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul type="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
通过 type 属性指定列表样式
值描述
disc默认值。实心圆
circle空心圆
square实心方块
有序列表
通过 type 属性指定列表样式，通过 start 属性指定从哪开始， start 的值是数字 
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
type 属性规定在列表中所使用的标记类型，有 1 、 A 、 a 、 I 、 i 五种
<ul> 和 <li>
<ol> 和 <li>

 

Html5的语义标签

一个语义元素能够清楚的描述其意义给浏览器和开发者，无语义元素 div 和 span 无需考虑内容；语义元
素 form 、 table 和 img 清楚的定义了它的内容
语义标签目标是创建更好的页面结构
  • <article> 定义页面独立的内容区域
  • <aside> 定义页面的侧边栏内容
  • <footer> 定义 section 或 document 的页脚
  • <header> 定义了文档的头部区域
  • <nav> 定义导航链接的部分
  • <section> 定义文档中的节（section、区段）
都是块级元素

div元素

<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。显示样式一定使用 CSS 进行格式控制
<div> 元素没有特定的含义，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用， <div> 元素可用于对大的内容块设置样式属性。
<div> 元素的常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。 table 元素的作用是显示表格化的数据。

span元素

<span> 元素是内联元素，可用作文本的容器，没有特定的含义。当与 CSS 一同使用时， <span> 元素可用于为部分文本设置样式属性
  • span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化 
<p class="tip"><span>提示：</span>正常显示文本信息</p>
p.tip span {
   font-weight:bold;
   color:#ff9955;
}

div布局

div 元素是用于分组 HTML 元素的块级元素。
  • <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的class或id应用额外的样式，那么该标签的作用会变得更加有效
  • 不必为每一个 <div> 都加上类class或 id，虽然这样做也有一定的好处
  • 可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是， class 用于元素组（类似的元素或者可以理解为某一类元素），而 id 用于标识单独的唯一的 元素
  • <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何 格式与其关联 
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/17373.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Elasticsearch安装

Elasticsearch安装

1.Linux下使用Elasticsearch 本教程所有操作均在CentOS 7.x环境下进行。 elasticsearch基于java进行开发&#xff0c;所以在运行elasticsearch之前需要安装jdk yum -y install java-1.8.0-openjdk 1.1.安装和配置 即将开始在centos 7 下安装Elasticsearch 1.1.1.新建一个用…
阅读更多...
（四）QCustomPlot柱形图动态显示实例开发

（四）QCustomPlot柱形图动态显示实例开发

系列文章目录 提示&#xff1a;这里是该系列文章的所有文章的目录 第一章&#xff1a; &#xff08;一&#xff09;QCustomPlot常见属性设置、多曲线绘制、动态曲线绘制、生成游标、矩形放大等功能实现 第二章&#xff1a; &#xff08;二&#xff09;QCustomPlot生成热力图/矩…
阅读更多...
【数据结构与算法】递归全流程详细剖析 | 详解图的深度优先遍历

【数据结构与算法】递归全流程详细剖析 | 详解图的深度优先遍历

&#x1f680; 作者 &#xff1a;“大数据小禅” &#x1f680;文章简介&#xff1a;本篇文章属于数据结构与算法系列文章&#xff0c;这篇文章会对算法中的递归进行一个详细的介绍&#xff0c;不仅是概念&#xff0c;而是从运行过程中的每一步进行详细分析。并使用递归的方式来…
阅读更多...
Vue3 - 使用 mitt.js 进行组件通信（兄弟关系）

Vue3 - 使用 mitt.js 进行组件通信（兄弟关系）

前言 在 Vue2 中&#xff0c;两个同级&#xff08;兄弟关系&#xff09;的组件传递数据&#xff0c;都是利用一个叫 EventBus 事件总线&#xff0c;利用这根总线&#xff0c;可以让两个毫无关系的组件进行通信。 其实这个问题的本质核心解决方案&#xff0c;就一句话。通过第三…
阅读更多...
开传奇需要什么技术要什么条件

开传奇需要什么技术要什么条件

开传奇需要什么技术要什么条件 对于这个问题&#xff0c;近期问的人比较多。这也是热爱传奇这个游戏的朋友会问到的一个问题&#xff0c;因为喜欢玩这个游戏&#xff0c;也想要自己去开一个经营一个 不管是电脑端还是手机端。但是对于一些新手确实不知道该如何开始操作从哪些方…
阅读更多...
基于PHP+MySQL的校园二手旧书回收捐赠系统

基于PHP+MySQL的校园二手旧书回收捐赠系统

校园内因为所教授的课程比较多,人数基数也比较大,所以每年都会产生大量的二手废旧图书,很多时候这些图书还可以进行二次利用,如果直接当废品进行回收很暴殄天物的,所以为了能够让这些校园内的二手图书得到更多的利用,我们开发了PHP校园二手旧书回收捐赠系统 本系统分为前台和后…
阅读更多...
「Redis数据结构」压缩列表（ZipList）

「Redis数据结构」压缩列表（ZipList）

「Redis数据结构」压缩列表&#xff08;ZipList&#xff09; 文章目录「Redis数据结构」压缩列表&#xff08;ZipList&#xff09;一、概述二、结构三、连锁更新问题四、压缩列表的缺陷五、小结参考ZipList 是一种特殊的“双端链表” &#xff0c;由一系列特殊编码的连续内存块…
阅读更多...
基于协同过滤进行金融产品个性化推荐 代码+数据

基于协同过滤进行金融产品个性化推荐 代码+数据

1.案例简介 (1)方法概述: 本教程包含如下内容： 从原始的数据文件中加载数据，进行训练集和测试集的切分。 对数据分batch, 利用用户侧信息，和商品侧信息，进行双塔模型的训练 结果展示 (2)宏观流程图 (3)案例知识点 pytorch 视频CTR预估指标 博客point wise 以及 pair wise …
阅读更多...
从0到1图文教你如何将spring boot项目部署到minikube中去

从0到1图文教你如何将spring boot项目部署到minikube中去

这里是weihubeats,觉得文章不错可以关注公众号小奏技术&#xff0c;文章首发。拒绝营销号&#xff0c;拒绝标题党 源码 本项目博文的源码已上传github&#xff0c;有需要自取 github: https://github.com/weihubeats/weihubeats_demos/tree/master/spring-boot-demos/spring-…
阅读更多...
C#界面里Control.Enabled 属性的使用

C#界面里Control.Enabled 属性的使用

C#界面里Control.Enabled 属性的使用 在开发中即使一个细节也可以决定成败。 前段时间刚好是毕业季，公司招聘了很多应界毕业生， 由于项目非常多，许多老手都已经分配到各个项目上去，还有一些小项目不得不让这些新生力军来接手。 这些初生牛犊不怕虎，天天加班，夜夜苦战…
阅读更多...
idea打开之前的项目不能正常编译/idea中项目Compile output丢失问题

idea打开之前的项目不能正常编译/idea中项目Compile output丢失问题

报错笔记 文章目录错误一&#xff1a;Cannot resolve class or package java错误二&#xff1a;Compile output丢失问题下面的报错发生情况都是打开之前写的JavaWeb文件时&#xff0c;各个文件中的代码爆红错误一&#xff1a;Cannot resolve class or package ‘java’ 在idea…
阅读更多...
【安卓应用渗透】第一篇：安卓逆向回顾和梳理-2211

【安卓应用渗透】第一篇：安卓逆向回顾和梳理-2211

文章目录安卓开发课程回顾第一课&#xff1a;安卓项目文件结构&#xff08;逻辑视图&#xff09;第五课&#xff1a;文件读取和数据库存取文件存取SQLite数据库存取安卓开发&#xff1a;案前资料库安卓逆向课程回顾第一课&#xff1a;基础逆向工具&#xff08;Apktool, Keytool…
阅读更多...
【分享】订阅金蝶云进销存集简云连接器同步销货数据至金蝶云进销存系统

【分享】订阅金蝶云进销存集简云连接器同步销货数据至金蝶云进销存系统

方案场景 在企业规模不断壮大的过程中&#xff0c;企业都是在钉钉内提交OA审批&#xff0c;并通过人工的方式统计多种审批数据&#xff0c;然后手动导入到某系统内&#xff0c;如果中间有调整又需要从头再进行核对&#xff0c;繁琐的流程严重影响了业务拓展。基于该方式企业希…
阅读更多...
[附源码]SSM计算机毕业设计重庆工程学院教师宿舍管理系统论文JAVA

[附源码]SSM计算机毕业设计重庆工程学院教师宿舍管理系统论文JAVA

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
Eolink征文活动--推荐国产神器Eolink！API优先，Eolink领先！

Eolink征文活动--推荐国产神器Eolink！API优先，Eolink领先！

前言&#xff1a; 在我们后端开发者做项目的时候&#xff0c;避免不了与前端界面的交互&#xff0c;对于我来讲&#xff0c;在做项目的时候用到过postman&#xff0c;swagger做接口测试工作&#xff0c;在公司的时候公司主要用YApi可视化接口平台&#xff0c;最近使用了一个爆款…
阅读更多...
负担过重何以轻装前行

负担过重何以轻装前行

随波逐流并不一定过得容易。 猜测负担过重原因&#xff1a; 所作的事情和预期差异大自己并不擅长目前所从事的专业恐惧失败试错成本过高基础薄弱无法持续成长简单问题复杂化复杂问题简单化…… 如何改变这种情况&#xff1f; 自我认知和外部感知都存在分析错位和信息不对称的…
阅读更多...
解决ggplot绘制散点图形状超过6个的警告

解决ggplot绘制散点图形状超过6个的警告

正常画图&#xff1a; library(ggplot2) ggplot(mpg,aes(displ,hwy))geom_point(aes(shapeclass,colorclass))可以看出形状少了一个&#xff0c;SUV没有形状 并且还会弹出这样的警告&#xff1a; Warning message: “The shape palette can deal with a maximum of 6 discrete…
阅读更多...
【附源码】Python计算机毕业设计网络求职招聘系统

【附源码】Python计算机毕业设计网络求职招聘系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
更灵活定位内存地址的方法

更灵活定位内存地址的方法

更灵活定位内存地址的方法 文章目录更灵活定位内存地址的方法1.and和or2.以字符形式给出的数据3.[bxidata]4.SI、DI与寻址方式的灵活应用1.and和or and指令&#xff1a;逻辑与指令&#xff0c;按位进行与运算(同真为真) 比如&#xff1a; mov al, 01100011B and al, 00111011B …
阅读更多...
速锐得适配进口福特烈马BRONCO车载 CAN总线应用随动转向大灯改装

速锐得适配进口福特烈马BRONCO车载 CAN总线应用随动转向大灯改装

适配进口福特烈马BRONCO车载 CAN总线应用随动转向大灯改装&#xff0c;必须先获得福特烈马BRONCO的原厂电路图纸&#xff0c;为此&#xff0c;速锐得准备了福特诊断仪、福特烈马BRONCO原厂电路图纸工具&#xff0c;适配装置、CAN数据采集设备、软件及线缆等一系列工具。 我们首…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023