HTML5教程（三）- 常用标签

1 文本标签-h

  • 标题标签（head）：

    • 自带加粗效果，从h1到h6字体大小逐级递减
    • 一个标题独占一行

  • 语法

     <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>

在这里插入图片描述


2 段落标签-p

  • 介绍

  • 用于定义段落，将整个网页分为若干个段落形式显示。

  • 语法

    <p>段落文本</p>

  • 特点

    1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
    2. 段落和段落之间保有空隙。

  • 使用
    在这里插入图片描述


3 普通文本标签-span

  • 介绍

    • 行内块，用来组合文档中的行内元素。

  • 语法

    <span>行分区标签，用于对特殊文本特殊处理</span>

  • 使用

    在这里插入图片描述


4 格式标签

  • 浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。

    <br>     换行
<b>加粗文本</b>    <!-- bold -->   <strong>加粗文本</strong>
<i>斜体文本</i>       <!-- italic -->   <em>加粗文本</em>
<code>电脑自动输出</code>
<sub>下标</sub> 
<sup>上标</sup>
<strong>加重文字</strong>
<del>删除字<del>    
<u>下划线</u>

在这里插入图片描述

5 字符实体

  • 某些情况下，浏览器会将一些特殊字符按照HTML的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写

     使用 &lt; 在页面中呈现 "<"使用 &gt; 在页面中呈现 ">"使用 &nbsp; 在页面中呈现一个空格使用 &copy; 在页面中呈现版权符号"©"使用 &yen; 在页面中呈现人民币符号"￥"

在这里插入图片描述

在这里插入图片描述


6 容器标签-div

  • 常用于页面结构划分，结合CSS实现网页布局

    <div id="top">页面顶部区域</div>
<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>

在这里插入图片描述


7 图片标签-img

  • 图片标签：用于在网页中插入一张图片。

    1. src：用于给出图片的URL【必填】
    2. width/height：用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
    3. title：用于设置图片标题，鼠标悬停在图片上时显示
    4. alt：用于设置图片加载失败后的提示文本

  • 语法

    <img src="" width="" height="" title="" alt="">

    在这里插入图片描述

  • 其他用法

    • 路径
      • 绝对路径
        • 目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
      • 相对路径
        • 以引用文件所在位置为参考基础，而建立出的目录路径。
    相对路径分类符号说明
    同一级路径图像文件位于HTML文件同一级，如：<img src=‘刘亦菲.png’>
    下一级路径/图像文件位于HTML文件下一级，如：<img src=‘image/刘亦菲.png’>
    上一级路径…/图像文件位于HTML文件上一级，如：<img src=‘…/image/刘亦菲.png’>
    <body><!-- 使用 img 标签来加载网络图片(必须要联网) --><!-- src 表示用来加载图像的路径（网络/本地） --><img src="https://img10.360buyimg.com/img/jfs/t1/176863/16/41608/14330/668e3421F64b41094/15c9d9130b980a51.png" alt="京东logo"><!-- alt 当图片加载失败时，在网页中显示的文字信息 --><img src="images/logo.png" alt="天府学院logo"><!-- 使用 img 标签来加载本地图片（常用） --><!-- 图像的路径：绝对路径 --><img src="C:\Users\blning\下载\刘亦菲.jpg" alt=""><!-- 图像的路径：相对路径（推荐） --><img src="./image/刘亦菲.png" alt=""><!-- img 其他的属性 --><img src="./image/刘亦菲.png" alt="图片加载失败显示的信息"title="鼠标放在图像上显示的信息"width="200px"height="150px"border="3px">
</body>

8 超链接标签-a

  • 超链接（anchor，锚）：用户可以点击超链接实现跳转至其他页面

    1. href：用于设置目标文件的URL【必填】
    2. target：用于设置目标文件的打开方式，默认在当前窗口打开（取值：“_self”），设置新建窗口打开目标文本(取值：“_blank”)
    <a href="http://www.taobao.com" target="_self">淘宝</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

    在这里插入图片描述

  • 其他用法

    <body><h1 id="title">标题</h1><!-- 外部链接：已经进行域名备案的网站 --><a href="http://www.taobao.com" target="_self">淘宝</a><a href="http://www.baidu.com" target="_blank">百度</a><!-- 内部链接：本地html文件 --><a href="h_tag.html">a标签</a><!-- 空链接：跳转到自身 --><a href="#">首页</a><!-- 下载链接：href 里面地址是一个文件或者压缩包 --><a href="HTML简介.pptx">PPT</a><!-- 网页元素链接：网页中的各种元素：图片、音频、视频、表格等 --><a href="../Day01/image/刘亦菲.png">刘亦菲</a><!-- 锚点链接：点击链接快速定位到页面中的某个位置 设置标签：id --><a href="#contents">看内容</a><div style="width: 300px; height: 800px; background-color: aquamarine;">块</div><div id="contents">内容</div><a href="#title">回标题</a>
</body>

9 导航标签-nav

  • 介绍

    • 用于定义页面的导航链接部分区域。

  • 示例

    <div><nav><a href="">HTML</a><a href="">CSS</a><a href="">JavaScript</a><a href="">JQuery</a></nav>
</div>

    在这里插入图片描述

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

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

相关文章

关于md5强比较和弱比较绕过的实验

关于md5强比较和弱比较绕过的实验

在ctf比赛题中我们的md5强弱比较的绕过题型很多&#xff0c;大部分都是结合了PHP来进行一个考核。这一篇文章我将讲解一下最基础的绕过知识。 MD5弱比较 比较的步骤 在进行弱比较时&#xff0c;PHP会按照以下步骤执行&#xff1a; 确定数据类型&#xff1a;检查参与比较的两…
阅读更多...
jmeter响应断言放进csv文件遇到的问题

jmeter响应断言放进csv文件遇到的问题

用Jmeter的json 断言去测试http请求响应结果&#xff0c;发现遇到中文时出现乱码&#xff0c;导致无法正常进行响应断言&#xff0c;很影响工作。于是&#xff0c;察看了其他测试人员的解决方案&#xff0c;发现是jmeter本身对编码格式的设置导致了这一问题。解决方案是在jmete…
阅读更多...
【文化课学习笔记】【化学】选必三：同分异构体的书写

【文化课学习笔记】【化学】选必三：同分异构体的书写

【化学】选必三&#xff1a;同分异构体的书写 如果你是从 B 站一化儿笔记区来的&#xff0c;请先阅读我在第一篇有机化学笔记中的「读前须知」(点开头的黑色小三角展开)&#xff1a;链接 链状烃的取代和插空法 取代法 一取代物 甲烷、乙烷、丙烷、丁烷的种类 甲烷&#xff1a;只…
阅读更多...
游戏逆向基础-找释放技能CALL

游戏逆向基础-找释放技能CALL

思路&#xff1a;通过send断点然后对send的data参数下写入断点找到游戏里面的技能或者攻击call 进入游戏先选好一个怪物&#xff08;之所以要先选好是因为选怪也会断&#xff0c;如果直接左键打怪的话就会断几次&#xff09; 断下来后对参数下硬件写入断点 硬件断点断下来后先…
阅读更多...
如何用pyhton修改1000+图片的名字？

如何用pyhton修改1000+图片的名字？

import os oldpath input("请输入文件路径&#xff08;在windows中复制那个图片文件夹的路径就可以):") #注意window系统中的路径用这个‘\分割&#xff0c;但是编程语言中一般都是正斜杠也就是’/‘ #这里写一个代码&#xff0c;将 \ > / path "" fo…
阅读更多...
基于SpringBoot+Vue+uniapp的海产品加工销售一体化管理系统的详细设计和实现(源码+lw+部署文档+讲解等)

基于SpringBoot+Vue+uniapp的海产品加工销售一体化管理系统的详细设计和实现(源码+lw+部署文档+讲解等)

详细视频演示 请联系我获取更详细的视频演示 项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不…
阅读更多...
基于FPGA的DDS信号发生器（图文并茂+深度原理解析）

基于FPGA的DDS信号发生器（图文并茂+深度原理解析）

篇幅有限，本文详细源文件已打包 至个人主页资源，需要自取...... 前言 DDS（直接数字合成）技术是先进的频率合成手段，在数字信号处理与硬件实现领域作用关键。它因低成本、低功耗、高分辨率以及快速转换时间等优点备受认可。 本文着重探究基于 FPGA 的简易 DDS 信号发生器设…
阅读更多...
交叉熵损失 在PyTorch 中的计算过程

交叉熵损失 在PyTorch 中的计算过程

其实就是根据 真实值的结果&#xff0c;当成索引去取的值 import torch import torch.nn as nnaaaa torch.tensor([[2.0,1.0,3.0],[2.0,4.0,2.0]])l1 nn.LogSoftmax(dim-1) result l1(aaaa) print(result) import torch import torch.nn as nn# 定义交叉熵损失函数 criterio…
阅读更多...
数据治理为何如此简单？

数据治理为何如此简单？

欢迎来文末免费获取数据治理相关PPT和文档 引言 随着大数据技术的迅速发展&#xff0c;企业积累的数据量呈现爆炸式增长。有效的数据管理已经成为企业提高决策效率、增强竞争优势的重要手段。在这样的背景下&#xff0c;数据治理逐渐成为企业数据管理中不可或缺的一环。它不仅…
阅读更多...
查看SQL执行计划 explain

查看SQL执行计划 explain

查看SQL执行计划 explain explain使用方式 alter session set current_schematest; explain plan for sql语句; --并不会实际执行&#xff0c;因此生成的执行计划也是预估的 select * from table(dbms_xplan.display); explain使用场景 1.内存中没有谓词信息了&#xff0…
阅读更多...
[Javase]深入理解跨平台原理

[Javase]深入理解跨平台原理

文章目录 一、Java 跨平台原理深度解析二、代码的编译与解释1、编译型语言2、解释型语言 三、Java 跨平台的核心 —— 虚拟机1、什么是虚拟机2、为什么能实现跨平台 四、JDK&#xff1a;Java 开发的强大工具包1、JDK 的介绍2、JDK 的重要组件 五、JRE&#xff1a;Java 运行的基…
阅读更多...
基于SpringBoot+Vue的益农智慧服务平台【提供源码+答辩PPT+参考文档+项目部署】

基于SpringBoot+Vue的益农智慧服务平台【提供源码+答辩PPT+参考文档+项目部署】

一、项目技术架构&#xff1a; 本项目是一款SpringBoot益农平台的设计与实现。 该SpringBootVue的益农平台的设计与实现&#xff0c;后端采用SpringBoot架构&#xff0c;前端采用VueElementUI实现页面的快速开发&#xff0c;并使用关系型数据库MySQL存储系统运行数据。本系统分…
阅读更多...
java-uniapp小程序-引导关注公众号、判断用户是否关注公众号

java-uniapp小程序-引导关注公众号、判断用户是否关注公众号

目录 1、前期准备 公众号和小程序相互关联 准备公众号文章 注册公众号测试号 微信静默授权的独立html 文件 2&#xff1a; 小程序代码 webview页面代码 小程序首页代码 3&#xff1a;后端代码 1&#xff1a;增加公众号配置项 2&#xff1a;读取公众号配置项 3&…
阅读更多...
MySQL中查询语句的执行流程

MySQL中查询语句的执行流程

文章目录 前言流程图概述最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;今天我们一起探讨一下执行一条查询的SQL语句在MySQL内部都发生了什么&#xff0c;让你对MySQL内部的架构具备一个宏观上的了解 流程图 概述 对于查询语句的SQL的执行流程&#xff0c;主要可以分为…
阅读更多...
【Linux】＜互斥量＞解决＜抢票问题＞——【多线程竞争问题】

【Linux】＜互斥量＞解决＜抢票问题＞——【多线程竞争问题】

前言 大家好吖&#xff0c;欢迎来到 YY 滴Linux系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的《Lin…
阅读更多...
[Windows]文件搜索利器Everything(附zip)

[Windows]文件搜索利器Everything(附zip)

前言 写代码过程中&#xff0c;老大突然发一条信息 老大&#xff1a;这周周报发一下。 我&#xff1a;好的。 然后我就 显示桌面打开-我的电脑找到E盘&#xff0c;找到周报文件夹寻找到所有周报中今天的周报复制发送 当我用上Everything之后 打开&#xff0c;输入周报copy发…
阅读更多...
Oracle T5-2 ILOM配置

Oracle T5-2 ILOM配置

ILOM管理口ip地址配置 连接控制器&#xff08;SP&#xff09;串口&#xff08;RJ45)&#xff0c;进行系统设置 (缺省&#xff1a;9600&#xff0c;8-n-1&#xff0c;root/changeme) …………………. ORACLESP-AK02566506 login: root Password: Detecting screen size; pl…
阅读更多...
Axure重要元件三——中继器

Axure重要元件三——中继器

亲爱的小伙伴&#xff0c;在您浏览之前&#xff0c;烦请关注一下&#xff0c;在此深表感谢&#xff01; 本节课&#xff1a;中继器 课程内容&#xff1a;认识中继器、中继器基本操作、中继器案例 应用场景&#xff1a;高级表单交互 一、认识中继器 我们不从理论视角去展示…
阅读更多...
Android Framework AMS（05）startActivity分析-2(ActivityThread启动到Activity拉起)

Android Framework AMS（05）startActivity分析-2(ActivityThread启动到Activity拉起)

该系列文章总纲链接&#xff1a;专题总纲目录 Android Framework 总纲 本章关键点总结 & 说明&#xff1a; 说明&#xff1a;本章节主要解读AMS通过startActivity启动Activity的整个流程的整个流程的第二阶段&#xff1a;从ActivityThread启动到Activity拉起。 第一阶段文…
阅读更多...
【Vue】Vue（八）Vue3.0 使用ref 和 reactive创建响应式数据

【Vue】Vue（八）Vue3.0 使用ref 和 reactive创建响应式数据

ref 创建&#xff1a;基本类型的响应式数据 **作用&#xff1a;**定义响应式变量。语法&#xff1a;let xxx ref(初始值)。**返回值&#xff1a;**一个RefImpl的实例对象&#xff0c;简称ref对象或ref&#xff0c;ref对象的value属性是响应式的。注意点&#xff1a; JS中操作…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023