前端-html-01

news2024/9/20 22:51:00

1.HTML的标签分类

1.1常用排版标签

标签名语义和功能属性单标签还是双标签
h1 ~ h6一级标题~六级标题无双标签
p段落无双标签
hr分隔线无单标签
br换行无单标签
pre原格式显示无双标签
div无语义，用于页面布局无双标签

1.1.1h标题标签 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本标签</title>
    </head>

    <body>
        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
        <h5>h5</h5>
        <h6>h6</h6>
    </body>
</html>

1.1.2.p段落标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本标签</title>
    </head>

    <body>
        <p>豫章故郡，洪都新府。星分翼yì轸zhěn，地接衡庐。襟jīn三江而带五湖，控蛮荆而引瓯ōu越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻tà。雄州雾列，俊采星驰。台隍枕夷yí夏之交，宾主尽东南之美。都督阎公之雅望，棨qǐ戟jǐ遥临；宇文新州之懿yì范，襜chān帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。</p>
        <p>时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖cān騑fēi于上路，访风景于崇阿。临帝子之长洲，得天人之旧馆。层峦耸sǒng翠，上出重霄xiāo；飞阁流丹，下临无地。鹤汀tīng凫fú渚，穷岛屿之萦yíng回；桂殿兰宫，即冈峦之体势。</p>
    </body>
</html>

 1.1.3hr分割线

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本标签</title>
    </head>

    <body>
        <p>豫章故郡，洪都新府。星分翼yì轸zhěn，地接衡庐。襟jīn三江而带五湖，控蛮荆而引瓯ōu越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻tà。雄州雾列，俊采星驰。台隍枕夷yí夏之交，宾主尽东南之美。都督阎公之雅望，棨qǐ戟jǐ遥临；宇文新州之懿yì范，襜chān帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。</p>
        <hr>
        <p>时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖cān騑fēi于上路，访风景于崇阿。临帝子之长洲，得天人之旧馆。层峦耸sǒng翠，上出重霄xiāo；飞阁流丹，下临无地。鹤汀tīng凫fú渚，穷岛屿之萦yíng回；桂殿兰宫，即冈峦之体势。</p>
    </body>
</html>

1.1.4br换行标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本标签</title>
    </head>

    <body>
       <h1>换行标签</h1>
       豫章故郡，洪都新府。星分翼yì轸zhěn，地接衡庐。襟jīn三江而带五湖，控蛮荆而引瓯ōu越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻tà。雄州雾列，俊采星驰。台隍枕夷yí夏之交，宾主尽东南之美。都督阎公之雅望，棨qǐ戟jǐ遥临；宇文新州之懿yì范，襜chān帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
     <br>
       时维九月，序属三秋。<br>
       潦水尽而寒潭清，烟光凝而暮山紫。俨骖cān騑fēi于上路，访风景于崇阿。临帝子之长洲，得天人之旧馆。层峦耸sǒng翠，上出重霄xiāo；飞阁流丹，下临无地。鹤汀tīng凫fú渚，穷岛屿之萦yíng回；桂殿兰宫，即冈峦之体势。
    </body>
</html>

1.1.5pre 原格式显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本标签</title>
    </head>

    <body>
       <h1>原格式显示标签</h1>

       <pre>
        豫章故郡，洪都新府。星分翼yì轸zhěn，地接衡庐。
        襟jīn三江而带五湖，控蛮荆而引瓯ōu越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻tà。雄州雾列，俊采星驰。台隍枕夷yí夏之交，宾主尽东南之美。都督阎公之雅望，棨qǐ戟jǐ遥临；宇文新州之懿yì范，襜chān帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
        时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖cān騑fēi于上路，访风景于崇阿。临帝子之长洲，得天人之旧馆。层峦耸sǒng翠，上出重霄xiāo；飞阁流丹，下临无地。鹤汀tīng凫fú渚，穷岛屿之萦yíng回；桂殿兰宫，即冈峦之体势。
       </pre>
    </body>
</html>

1.1.6div页面布局标签

无具体显示仅仅做页面布局时使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本标签</title>
    </head>

    <body>
       <h1>页面布局标签</h1>
       <div>
        豫章故郡，洪都新府。星分翼yì轸zhěn，地接衡庐。
        襟jīn三江而带五湖，控蛮荆而引瓯ōu越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻tà。雄州雾列，俊采星驰。台隍枕夷yí夏之交，宾主尽东南之美。都督阎公之雅望，棨qǐ戟jǐ遥临；宇文新州之懿yì范，襜chān帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
       </div>
       <div>
        时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖cān騑fēi于上路，访风景于崇阿。临帝子之长洲，得天人之旧馆。层峦耸sǒng翠，上出重霄xiāo；飞阁流丹，下临无地。鹤汀tīng凫fú渚，穷岛屿之萦yíng回；桂殿兰宫，即冈峦之体势。
       </div>

    </body>
</html>

1.2.文本标签

标签名语义和功能属性单标签还是双标签
em强调，默认表现斜体字无双标签
strong强调，默认表现粗体字无双标签
ins表示增加的内容，默认添加下划线无双标签
del表示删除的内容，默认添加删除线无双标签
sub下标字无双标签
sup上标字无双标签
span无语义，配合CSS给文字设置样式无双标签

1.2.1em与strong强调标签 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本标签</title>
    </head>

    <body>
       <h1>强调标签</h1>
        <em>豫章故郡，洪都新府。星分翼yì轸zhěn，地接衡庐。襟jīn三江而带五湖，控蛮荆而引瓯ōu越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻tà。雄州雾列，俊采星驰。台隍枕夷yí夏之交，宾主尽东南之美。都督阎公之雅望，棨qǐ戟jǐ遥临；宇文新州之懿yì范，襜chān帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。</em>
        <hr>
        <strong>时维九月，序属三秋。</strong>潦水尽而寒潭清，烟光凝而暮山紫。俨骖cān騑fēi于上路，访风景于崇阿。临帝子之长洲，得天人之旧馆。层峦耸sǒng翠，上出重霄xiāo；飞阁流丹，下临无地。鹤汀tīng凫fú渚，穷岛屿之萦yíng回；桂殿兰宫，即冈峦之体势。
       

    </body>
</html>

1.2.2ins与del标签 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本标签</title>
    </head>

    <body>
       <h1>新增与删除标签</h1>
        <del>￥999</del>
        <ins>￥100</ins>
       

    </body>
</html>

1.2.3.sub与sup上下标线 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本标签</title>
    </head>

    <body>
       <h1>上下标线标签</h1>
        2<sup>10</sup> = 1024
        <br>
        H<sub>2</sub>O
    </body>
</html>

1.2.4span标签 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本标签</title>
    </head>

    <body>
       <h1>上下标线标签</h1>
       <span style="color: blue;">
        2<sup>10</sup> = 1024
       </span>
        
        <br>
        H<sub>2</sub>O
    </body>
</html>

 1.3图片标签

标签名语义和功能属性单标签还是双标签
img引入图片src：设置图片地址。<br>alt：设置图片替代文字。<br>width：设置宽度。<br>height：设置高度单标签

1. alt 设置图片替代文字，当图片无法正常显示，显示alt中的文字
2. 如果单独设置宽度或者高度，另一个方向根据比例自动计算。同时设置宽高容易导致图片拉伸失真。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本标签</title>
    </head>

    <body>
       <h1>图片标签</h1>
        <img src="pics/0d40c24b264aa511.jpg" alt="华为手机">
    </body>
</html>

 

1.3.1 base64 图片

base64编码工具： https://tool.chinaz.com/tools/imgtobase/

1. 本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
2. 原理：把图片进行 base64 编码，形成一串文本。
3. 如何生成：靠一些工具或网站。
4. 如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。
5. 使用场景：一些较小的图片，或者需要和网页一起加载的图片。

1.3.2相对路径和绝对路径 

以当前代码所在的文件夹为起点

1.3.2.1绝对路径
1.3.2.1.1网络绝对路径：

目标文字在网上的绝对地址，如https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png，前端开发主要使用网络绝对路径。

1.3.2.1.2本地绝对路径：

目标文字在计算上的绝对地址, 如 E:\WebProjects\html\pics，后端开发主要使用本地绝对路径。

1.3.2.2相对路径

./        当前目录（当前文件所在的目录）， ./可以省略
        如果目标文件在同级或者下级
  
../     上级目录（当前文件的上级目录）
        如果目标文件在上级或者先进入上级再访问所在目录
  
../../  上上级
../../../ 上上上级

1. img 标签引入图片
2. 超链接设置目标文件
3. video 标签引入视频
4. audio 标签引入音频
5. iframe 标签引入各种类型的文件
6. link 标签关联 css 文件
7. script 标签引入 js 文件 

1.4超链接和锚点 

标签名语义和功能属性单标签还是双标签
a超链接

href：设置目标文件地址。

target：设置目标文件在哪个窗口打开

双标签

target 属性设置目标文件在哪个窗口打开，默认值是 _self,表示本窗口打开；可以设置为 _blank, 表示新窗口打开

1.4.1超链接 

1.4.1.1目标文件是网页
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>超链接标签</title>
    </head>

    <body>
       <h1>超链接标签</h1>
       <!-- _blank设置新窗口打开 -->
       <a href="https://www.baidu.com/" target="_blank">百度</a>
       <br>
       链接自己的网页
       <a href="index.html">自己的网页</a>
    </body>
</html>

1.4.1.2目标文件是网页以外的其他类型文件

<a href="./resouces/小乐老师的业余生活.jpg">[图片]小乐老师的业余生活</a> <br>
<a href="./resouces/如何30岁之前走上人生巅峰.pdf">[pdf]如何30岁之前走上人生巅峰</a> <br>
<a href="./resouces/小乐老师的性福生活.mp4">[视频]小乐老师的性福生活</a> <br>
<a href="./resouces/如何拥有百亿资产.docx">[word文件]如何拥有百亿资产</a> <br>
<a href="./resouces/小乐老师的私房照片.7z">[压缩文件]小乐老师的私房照片</a>

目标文件分为两种：
浏览器能够打开： 点击超链接，浏览器直接打开，如网页文件、图片文件、视频文件、pdf文件等
浏览器无法打开： 点击超链接，直接下载

1.4.1.3超链接唤起指定应用

<a href="tel:10086">打电话</a> <br>
<a href="sms:10010">发短信</a> <br>
<a href="mailto:fuming@atguigu.cn">发邮件</a>

1.4.1.4href 的值是空的点击刷新 

<a href="">刷新</a>

1.4.2锚点 

1.4.2.1如何设置锚点

给标签设置一个唯一的ID属性，该标签就成为一个锚点，ID的属性值就是锚点的名字

<div id="锚点名"></div>
<p id="锚点名"></p>
<hr id="锚点名">
 1.4.2.2如何跳转到锚点（通过超链接跳转到锚点）
<!-- 跳转到本页面的锚点 -->
<a href="#锚点名"></a>

<!-- 跳转到其他页面的锚点 -->
<a href="页面地址#锚点名"></a>

<!-- 跳转到页面顶部 -->
<a href="#"></a>

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

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

相关文章

nav仿真（2）

nav仿真（2）

开启仿真和建图 打开第一个窗口启动仿真&#xff1a; source devel/setup.bash export TURTLEBOT3_MODELburger roslaunch turtlebot3_gazebo turtlebot3_world.launch # 启动仿真打开第二个窗口&#xff0c;开始建图&#xff1a; source devel/setup.bash export TURTLEBOT3_…
阅读更多...
Nginx 内存池

Nginx 内存池

目录 零、基本框架 一、基础结构 二、对外接口 三、函数实现 1、ngx_create_pool 2、ngx_destroy_pool 3、ngx_reset_pool 4、ngx_palloc 5、ngx_pnalloc 6、ngx_pmemalign 7、ngx_pfree 8、ngx_pcalloc 9、ngx_pool_cleanup_add 10、ngx_pool_run_cleanup_file…
阅读更多...
【spring】@Component注解学习

【spring】@Component注解学习

Component介绍 Component 是 Spring 框架中的一个注解&#xff0c;用于将一个类标记为 Spring 上下文中的一个组件。当一个类被标记为 Component 时&#xff0c;Spring 容器会在启动时自动扫描并实例化这个类&#xff0c;并将其注册到 Spring 上下文中。 Component 注解可以用…
阅读更多...
Gorm连接Mysql数据库及其语法

Gorm连接Mysql数据库及其语法

Gorm连接Mysql数据库及其语法 文章目录 Gorm连接Mysql数据库及其语法前期工作找到Gorm的github项目简单了解相关MySQL语法 启动数据库定义数据库模型注意点Gorm Model定义结构体标签(tag)支持的结构体标记&#xff08;Struct tags&#xff09;关联相关标记&#xff08;tags&…
阅读更多...
Facebook如何使用增强技术提升广告效果？

Facebook如何使用增强技术提升广告效果？

AR in AD - case study 脸书2021年宣布了引入AR的新方法&#xff0c;以推动其应用套件中的产品发现和购买。但他们首先考虑是技术。据脸书称&#xff0c;技术一直是增强现实在其应用程序中更广泛使用的主要障碍。这就是为什么它现在正在做出改变&#xff0c;使企业主和广告商更…
阅读更多...
DFS进阶——全排列

DFS进阶——全排列

通过后续的题目希望大家明白&#xff0c;dfs不仅仅是对图的遍历&#xff0c;他还有很多用法。 DFS进阶1——回溯 先说一下回溯的板子 dfs(){ for(......){标记信息dfs()撤销标记 } }回溯模板——递归实现排列型枚举 题目分析 其实就是对1~n的数字全排列&#xff0c;这里就…
阅读更多...
【JavaScript】JavaScript 程序流程控制 ⑥ ( while 循环概念 | while 循环语法结构 )

【JavaScript】JavaScript 程序流程控制 ⑥ ( while 循环概念 | while 循环语法结构 )

文章目录 一、while 循环1、while 循环概念2、while 循环语法结构 二、while 循环 - 代码示例1、打印数字2、计算 1 - 10 之和 一、while 循环 1、while 循环概念 在 JavaScript 中 , while 循环 是一种 " 循环控制语句 " , 使用该语句就可以 重复执行一段代码块 , …
阅读更多...
Java项目：75 springboot房产销售系统

Java项目：75 springboot房产销售系统

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 使用房产销售系统分为管理员和用户、销售经理三个角色的权限子模块。 管理员所能使用的功能主要有&#xff1a;首页、个人中心、用户管理、销售经理管…
阅读更多...
MRC是谁？- 媒体评级委员会 Media Rating Council

MRC是谁？- 媒体评级委员会 Media Rating Council

在在线广告的世界里&#xff0c;有许多不同的技术和实践用于提供和衡量广告。对于广告商、出版商和营销人员来说&#xff0c;了解这些技术是如何工作的以及如何有效使用这些技术很重要。在这方面发挥关键作用的一个组织是媒体评级委员会&#xff08;MRC&#xff09;。 1. 了解…
阅读更多...
OpenCV 形态学处理函数

OpenCV 形态学处理函数

四、形态学处理&#xff08;膨胀&#xff0c;腐蚀&#xff0c;开闭运算&#xff09;_getstructuringelement()函数作用-CSDN博客 数字图像处理(c opencv)&#xff1a;形态学图像处理-morphologyEx函数实现腐蚀膨胀、开闭运算、击中-击不中变换、形态学梯度、顶帽黑帽变换 - 知乎…
阅读更多...
Java代码基础算法练习-搬砖问题-2024.03.25

Java代码基础算法练习-搬砖问题-2024.03.25

任务描述&#xff1a; m块砖&#xff0c;n人搬&#xff0c;男搬4&#xff0c;女搬3&#xff0c;两个小孩抬一砖&#xff0c;要求一次全搬完&#xff0c;问男、 女、小孩各若干&#xff1f; 任务要求&#xff1a; 代码示例&#xff1a; package M0317_0331;import java.util.S…
阅读更多...
leetcode刷题日记-外观数组

leetcode刷题日记-外观数组

题目描述 解题思路 初始化字符串 init 为 “1”&#xff0c;作为外观数列的第一项。 通过循环迭代生成外观数列的下一项&#xff0c;循环次数为 n-1&#xff0c;因为已经初始化了第一项。 在每次迭代中&#xff0c;通过两个指针 pos 和 start 来遍历当前项 init&#xff0c;po…
阅读更多...
联合体/共用体

联合体/共用体

一、联合体类型的声明 联合体是由一个或多个成员构成&#xff0c;这些成员可以是不同的类型。 编译器只会为最大的成员分配足够的内存空间。 联合体的特点是全体成员共用一块内存空间&#xff0c;故联合体也叫共用体。 联合体中&#xff0c;给一个成员赋值&#xff0c;那么其他…
阅读更多...
Spring Boot + MyBatis

Spring Boot + MyBatis

一、配置依赖 <!-- MyBatis --> <dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>3.5.3</version> </dependency> <!-- junit测试依赖 --&g…
阅读更多...
套娃式大小AI群体导致AI觉醒吗？

套娃式大小AI群体导致AI觉醒吗？

一、“套娃式”AI训练 目前&#xff0c;我们所讨论的人工智能&#xff08;AI&#xff09;主要是基于机器学习和深度学习技术的算法系统。它们通过不断学习、优化和改进以完成特定任务&#xff0c;但并不具备自我意识或者独立的创造性思考能力&#xff0c;即“觉醒”。 “套娃式…
阅读更多...
代码随想录算法训练营第33天|1005.K次取反后最大化的数组和|134. 加油站|135. 分发糖果

代码随想录算法训练营第33天|1005.K次取反后最大化的数组和|134. 加油站|135. 分发糖果

代码随想录算法训练营第33天|1005.K次取反后最大化的数组和|134. 加油站|135. 分发糖果 1005.K次取反后最大化的数组和 本题简单一些&#xff0c;估计大家不用想着贪心 &#xff0c;用自己直觉也会有思路。 https://programmercarl.com/1005.K%E6%AC%A1%E5%8F%96%E5%8F%8D%E5%…
阅读更多...
c++翁恺

c++翁恺

1、面向对象 Data&#xff1a;杯子的属性 Opera&#xff1a;杯子提供的服务 老师上课&#xff1a; C&#xff1a;按流程执行 C&#xff1a;定一个教室&#xff0c;有很多学生&#xff0c;投影仪&#xff0c;灯&#xff0c;每个学生反映不一样。 这个场景有什么东西&#xff0c…
阅读更多...
Android开发 --- Android12外部存储权限问题

Android开发 --- Android12外部存储权限问题

1.问题 Android12使用如下权限&#xff0c;将不会获得读写文件的权限 <uses-permission android:name"android.permission.WRITE_EXTERNAL_STORAGE" /> 2.解决 if (!Environment.isExternalStorageManager()) {Intent intent new Intent(Settings.ACTION_M…
阅读更多...
Excel 打开后提示：MicrosoftExcel无法计算某个公式。在打开的工作簿中有一个循环引用...

Excel 打开后提示：MicrosoftExcel无法计算某个公式。在打开的工作簿中有一个循环引用...

目录预览 一、问题描述二、原因分析三、解决方案四、参考链接 一、问题描述 MicrosoftExcel无法计算某个公式。在打开的工作簿中有一个循环引用&#xff0c;但无法列出导致循环的引I用。请尝试编辑上次输入的公式&#xff0c;或利用“撤消”命令删除该公式&#xff0c;如下图&…
阅读更多...
人工智能（Educoder）-- 搜索技术 -- 启发式搜索

人工智能（Educoder）-- 搜索技术 -- 启发式搜索

任务描述 本关任务&#xff1a;八数码问题是在一个33的棋盘上有1−8位数字随机分布&#xff0c;以及一个空格&#xff0c;与空格相连的棋子可以滑动到空格中&#xff0c;问题的解是通过空格滑动&#xff0c;使得棋盘转化为目标状态&#xff0c;如下图所示。 为了简化问题的输…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023