HTML世界之第二重天

目录

一、HTML 格式化

1.HTML 文本格式化标签

2.HTML "计算机输出" 标签

3.HTML 引文, 引用, 及标签定义

二、HTML 链接

1.HTML 链接

2.HTML 超链接

3.HTML 链接语法

4.文本链接

5.图像链接

6.锚点链接

7.下载链接

8.Target 属性

9.Id 属性

三、HTML 头部

1.head元素

2.title元素

3.base元素

4.link元素

5.style元素

6.meta元素

7.head标签

四、HTML 图像

1.图像标签（ ）和源属性（Src）

2.Alt属性

3.设置图像的高度与宽度

五、HTML 表格

1.HTML 表格

2.HTML 表格和边框属性

3.HTML 表格表头

4.HTML 表格标签

一、HTML 格式化

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

然而，这些标签的含义是不同的：

<b> 与<i> 定义粗体或斜体文本。

<strong> 或者 <em>意味着要呈现的文本是重要的，所以要突出显示。

1.HTML 文本格式化标签

标签

描述

<b>

定义粗体文本

<em>

定义着重文字

<i>

定义斜体字

<small>

定义小号字

<strong>

定义加重语气

<sub>

定义下标字

<sup>

定义上标字

<ins>

定义插入字

<del>

定义删除字

2.HTML "计算机输出" 标签

标签

描述

<code>

定义计算机代码

<kbd>

定义键盘码

<samp>

定义计算机代码样本

<var>

定义变量

<pre>

定义预格式文本

3.HTML 引文, 引用, 及标签定义

标签

描述

<abbr>

定义缩写

<address>

定义地址

<bdo>

定义文字方向

<blockquote>

定义长的引用

<q>

定义短的引用语

<cite>

定义引用、引证

<dfn>

定义一个定义项目。

二、HTML 链接

1.HTML 链接

HTML 使用超级链接与网络上的另一个文档相连，是一种用于在不同网页之间导航的元素。

链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联，允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。

2.HTML 超链接

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。

访问过的链接显示为紫色并带有下划线。

点击链接时，链接显示为红色并带有下划线。

注：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

3.HTML 链接语法

①HTML 中创建链接的基本语法：

<a> 元素：创建链接的主要HTML元素是<a>（锚）元素。

②<a>元素具有以下属性：

href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。

target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。

title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。

rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。

③链接的 HTML 代码

<a href="url">链接文本</a>

href 属性描述了链接的目标。

④实例

<a href="https://www.baidu.com/">访问百度</a>

上面这行代码显示为：访问百度

点击这个超链接会把用户带到百度的首页。

提示: "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

4.文本链接

最常见的链接类型是文本链接，它使用 <a> 元素将一段文本转化为可点击的链接。

<a href="https://www.example.com">访问示例网站</a>

5.图像链接

在这种情况下，<a> 元素包围着 <img> 元素。

<a href="https://www.example.com">

  <img src="example.jpg" alt="示例图片">

</a>

6.锚点链接

在同一页面内创建内部链接，称为锚点链接。

要创建锚点链接，需要在目标位置使用 <a> 元素定义一个标记，并使用#符号引用该标记。

<a href="#section2">跳转到第二部分</a>

<!-- 在页面中的某个位置 -->

<a name="section2"></a>

7.下载链接

链接用于下载文件，使用 download 属性。

<a href="document.pdf" download>下载文档</a>

8.Target 属性

使用 target 属性，可以定义被链接的文档在何处显示。

<a href="https://www.baidu.com/" target="_blank" rel="noopener noreferrer">访问百度</a>

注：将 target 属性设置为 "_blank", 链接将在新窗口打开。

9.Id 属性

id 属性可用于创建一个 HTML 文档书签。

注: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

①在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

②在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：

<a href="#tips">访问有用的提示部分</a>

③从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：

<a href="https://www.baidu.com/html/html-links.html#tips">

访问有用的提示部分</a>

注：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.baidu.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.baidu.com/html/"。

三、HTML 头部

1.head元素

<head> 元素包含了所有的头部标签元素。

在 <head>元素中可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

2.title元素

①<title> 元素：

定义了浏览器工具栏、不同文档的标题；

当网页添加到收藏夹时，显示在收藏夹中的标题；

显示在搜索引擎结果页面的标题；

<title> 在 HTML/XHTML 文档中是必需的。

②一个简单的 HTML 文档：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>文档标题</title>

</head>

<body>

文档内容

</body>

</html>

3.base元素

<base> 标签描述了基本的链接地址/链接目标，作为HTML文档中所有的链接标签的默认链接:

<head>

<base href="http://www.runoob.com/images/" target="_blank">

</head>

4.link元素

<link> 标签定义了文档与外部资源之间的关系，通常用于链接到样式表:

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

5.style元素

<style> 标签定义了HTML文档的样式文件引用地址，可以直接添加样式来渲染 HTML 文档：

<head>

<style type="text/css">

body {

background-color:yellow;

}

p {

color:blue

}

</style>

</head>

6.meta元素

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<meta> 一般放置于 <head> 区域

①为搜索引擎定义关键词：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

②为网页定义描述内容：

<meta name="description" content="免费 Web & 编程 教程">

③定义网页作者：

<meta name="author" content="Rob">

④每30秒钟刷新当前页面：

<meta http-equiv="refresh" content="30">

7.head标签

标签

描述

<head>

定义了文档的信息

<title>

定义了文档的标题

<base>

定义了页面链接标签的默认链接地址

<link>

定义了一个文档和外部资源之间的关系

<meta>

定义了HTML文档中的元数据

<script>

定义了客户端的脚本文件

<style>

定义了HTML文档的样式文件

四、HTML 图像

1.图像标签（ <img>）和源属性（Src）

在 HTML 中，图像由<img> 标签定义，<img> 是空标签，只包含属性并且没有闭合标签。

在页面上显示图像，需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" alt="some_text">

URL 指存储图像的位置。如果名为 "pit.jpg" 的图像位于 www.baidu.com 的 images 目录中，那么其 URL 为 http://www.baidu.com/images/pit.jpg。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

2.Alt属性

alt 属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。

3.设置图像的高度与宽度

height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素:

<img src="pit.jpg" alt="Pit rock" width="304" height="228">

图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

注：假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以建议是：慎用图片。

注：加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

五、HTML 表格

1.HTML 表格

HTML 表格由 <table> 标签来定义，是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（由<th>标签定义）用于定义列的标题。

tr：tr 是 table row 的缩写，表示表格的一行。

td：td 是 table data 的缩写，表示表格的数据单元格。

th：th 是 table header的缩写，表示表格的表头单元格。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

HTML 表格实例：

<table>

  <thead>

    <tr>

      <th>列标题1</th>

      <th>列标题2</th>

      <th>列标题3</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>行1，列1</td>

      <td>行1，列2</td>

      <td>行1，列3</td>

    </tr>

    <tr>

      <td>行2，列1</td>

      <td>行2，列2</td>

      <td>行2，列3</td>

    </tr>

  </tbody>

</table>

以上的表格实例代码中

<table> 元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>。

<thead > 用于定义表格的标题部分：在 <thead > 中，使用 <th > 元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。

<tbody > 用于定义表格的主体部分：在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。

通过使用 <th > 元素定义列标题，可以使其在表格中以粗体显示，与普通单元格区分开来。

表格实例

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

在浏览器显示如下：

2.HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。使用边框属性来显示一个带有边框的表格：

<table border="1">

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>

3.HTML 表格表头

表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

在浏览器显示如下：

4.HTML 表格标签

标签

描述

<table>

定义表格

<th>

定义表格的表头

<tr>

定义表格的行

<td>

定义表格单元

<caption>

定义表格标题

<colgroup>

定义表格列的组

<col>

定义用于表格列的属性

<thead>

定义表格的页眉

<tbody>

定义表格的主体

<tfoot>

定义表格的页脚

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

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

相关文章

王树森《RNN Transformer》系列公开课

王树森《RNN Transformer》系列公开课

本课程主要介绍NLP相关&#xff0c;包括RNN、LSTM、Attention、Transformer、BERT等模型&#xff0c;以及情感识别、文本生成、机器翻译等应用 ShusenWang的个人空间-ShusenWang个人主页-哔哩哔哩视频 (bilibili.com) &#xff08;一&#xff09;NLP基础 1、数据处理基础 数…
阅读更多...
Spring Boot 笔记 007 创建接口_登录

Spring Boot 笔记 007 创建接口_登录

1.1 登录接口需求 1.2 JWT令牌 1.2.1 JWT原理 1.2.2 引入JWT坐标 1.2.3 单元测试 1.2.3.1 引入springboot单元测试坐标 1.2.3.2 在单元测试文件夹中创建测试类 1.2.3.3 运行测试类中的生成和解析方法 package com.geji;import com.auth0.jwt.JWT; import com.auth0.jwt.JWTV…
阅读更多...
【Spring】公司为什么禁止在SpringBoot项目中使用@Autowired注解

【Spring】公司为什么禁止在SpringBoot项目中使用@Autowired注解

目录 前言 说明 依赖注入的类型 2.1 基于构造器的依赖注入 2.2 基于 Setter 的依赖注入 2.3 基于属性的依赖注入 基于字段的依赖注入缺陷 3.1 不允许声明不可变域 3.2 容易违反单一职责设计原则 3.3 与依赖注入容器紧密耦合 3.4 隐藏依赖关系 总结 参考文档 前言 …
阅读更多...
网络协议与攻击模拟_16HTTP协议

网络协议与攻击模拟_16HTTP协议

1、HTTP协议结构 2、在Windows server去搭建web扫描器 3、分析HTTP协议流量 一、HTTP协议 1、概念 HTTP&#xff08;超文本传输协议&#xff09;用于在万维网服务器上传输超文本&#xff08;HTML&#xff09;到本地浏览器的传输协议 基于TCP/IP(HTML文件、图片、查询结构等&…
阅读更多...
数字IC实践项目（9）— Tang Nano 20K: I2C OLED Driver

数字IC实践项目（9）— Tang Nano 20K: I2C OLED Driver

Tang Nano 20K: I2C OLED Driver 写在前面的话硬件模块RTL电路和相关资源报告SSD1306 OLED 驱动芯片SSD1306 I2C协议接口OLED 驱动模块RTL综合实现 总结 写在前面的话 之前在逛淘宝的时候偶然发现了Tang Nano 20K&#xff0c;十分感慨国产FPGA替代方案的进步之快&#xff1b;被…
阅读更多...
自动生成测试用例_接口测试用例自动生成工具

自动生成测试用例_接口测试用例自动生成工具

前言 写用例之前&#xff0c;我们应该熟悉API的详细信息。建议使用抓包工具Charles或AnyProxy进行抓包。 har2case 我们先来了解一下另一个项目har2case 他的工作原理就是将当前主流的抓包工具和浏览器都支持将抓取得到的数据包导出为标准通用的 HAR 格式&#xff08;HTTP A…
阅读更多...
【AI】安装ubuntu20.04教程（未完待续）

【AI】安装ubuntu20.04教程（未完待续）

目录 1 制作ubuntu20.04系统盘1.1 下载ubuntu镜像1.2 使用ultraiso写入镜像 2 安装Ubuntu系统 1 制作ubuntu20.04系统盘 1.1 下载ubuntu镜像 在清华镜像站https://mirrors.tuna.tsinghua.edu.cn/下载ubuntu20.04镜像 路径为/ubuntu-releases/20.04/&#xff0c;下载ubuntu-20…
阅读更多...
操作系统（16）----磁盘相关

操作系统（16）----磁盘相关

目录 一.磁盘相关概念 1.磁盘 2.磁道 3.扇区 4.盘面、柱面 5.磁盘的分类 二.磁盘调度算法 1.一次磁盘读/写操作需要的时间 2.先来先服务算法(FCFS) 3.最短寻找时间优先(SSTF) 4.扫描算法(SCAN) 5.LOOK调度算法 6.循环扫描算法(C-SCAN) 7.C-LOOK调度算法 三.减少…
阅读更多...
9.【CPP】List （迭代器的模拟实现||list迭代器失效||list的模拟实现）

9.【CPP】List （迭代器的模拟实现||list迭代器失效||list的模拟实现）

介绍 list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指针指向其前一个元素和后一个元素。list与forward_…
阅读更多...
华为机考入门python3--（12）牛客12-字符串反转

华为机考入门python3--（12）牛客12-字符串反转

分类&#xff1a;字符串 知识点&#xff1a; 字符串是否为空 if not my_str 字符串逆序 my_str[::-1] 题目来自【牛客】 def reverse_string(s): # 判断字符串是否为空或只包含空格 if not s.strip(): return "" # 使用Python的切片语法反转字符串 re…
阅读更多...
Pytorch的可视化

Pytorch的可视化

1 使用 wandb进行可视化训练过程 本文章将从wandb的安装、wandb的使用、demo的演示进行讲解。 1.1 如何安装wandb&#xff1f; wandb的安装比较简单&#xff0c;在终端中执行如下的命令即可&#xff1a; pip install wandb在安装完成之后&#xff0c;我们需要&#xff0c;去…
阅读更多...
matlab入门，在线编辑，无需安装matab

matlab入门，在线编辑，无需安装matab

matlab相关教程做的很完善&#xff0c;除了B站看看教程&#xff0c;官方教程我觉得更加高效。跟着教程一步一步编辑&#xff0c;非常方便。 阅读 MATLAB 官方教程&#xff1a; MATLAB 官方教程提供了从基础到高级的教学内容&#xff0c;内容包括 MATLAB 的基本语法、数据处理…
阅读更多...
Vue3高频知识点和写法

Vue3高频知识点和写法

一 Vue插件 二 vue3项目创建 创建完成后npm install npm run dev 三 setup 一 响应式数据 setup函数是用来代替data和methods的写法的&#xff0c;在setup函数中声明的数据和函数&#xff0c;导出后可以在页面中使用。 但是暂时不是响应式数据&#xff0c;如果要响应式数据的…
阅读更多...
C++笔记1：操纵符输入输出

C++笔记1：操纵符输入输出

C操纵符用来控制输出控制&#xff0c;一是输出的形式&#xff0c;二是控制补白的数量和位置。本文记录一下&#xff0c;在一些笔试的ACM模式可能有用。其中1-4节的部分是关于格式化输入输出操作&#xff0c;5-6节的部分是关于未格式化输入输出操作。 1. 控制布尔值的格式 一般…
阅读更多...
C语言—基础数据类型(含进制转换)

C语言—基础数据类型(含进制转换)

进制转换不多&#xff0c;但我觉得适合小白(我爱夸自己嘿嘿) 练习 1. 确认基础类型所占用的内存空间(提示&#xff1a;使用sizeof 运算符)&#xff1a; 在这里我说一下&#xff0c;long 类型通常占用 4 字节。在 64 位系统上&#xff0c;long 类型通常也可为 8 字节。 格式…
阅读更多...
LeetCode、208. 实现 Trie (前缀树)【中等，自定义数据结构】

LeetCode、208. 实现 Trie (前缀树)【中等，自定义数据结构】

文章目录 前言LeetCode、208. 实现 Trie (前缀树)【中等&#xff0c;自定义数据结构】题目链接与分类思路 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Java后端技术领…
阅读更多...
低资源学习与知识图谱：构建与应用

低资源学习与知识图谱：构建与应用

目录 前言1 低资源学习方法1.1 数据增强1.2 特征增强1.3 模型增强 2 低资源知识图谱构建与推理2.1 元关系学习2.2 对抗学习2.3 零样本关系抽取2.4 零样本学习与迁移学习2.5 零样本学习与辅助信息 3 基于知识图谱的低资源学习应用3.1 零样本图像分类3.2 知识增强的零样本学习3.3…
阅读更多...
云原生介绍与容器的基本概念

云原生介绍与容器的基本概念

云原生介绍 1、云原生的定义 云原生为用户指定了一条低心智负担的、敏捷的、能够以可扩展、可复制的方式最大化地利用云的能力、发挥云的价值的最佳路径。 2、云原生思想两个理论 第一个理论基础是&#xff1a;不可变基础设施。 第二个理论基础是&#xff1a;云应用编排理…
阅读更多...
备战蓝桥杯---图论基础理论

备战蓝桥杯---图论基础理论

图的存储&#xff1a; 1.邻接矩阵&#xff1a; 我们用map[i][j]表示i--->j的边权 2.用vector数组&#xff08;在搜索专题的游戏一题中应用过&#xff09; 3.用邻接表&#xff1a; 下面是用链表实现的基本功能的代码&#xff1a; #include<bits/stdc.h> using nam…
阅读更多...
纪念一下 开始写博客两周以来第一次入围榜单

纪念一下 开始写博客两周以来第一次入围榜单

两周里 创作博客 第一次进入热榜 虽然只有几十名 但也算是一个突破 确实没想到自己随便做的笔记就入围了 感谢各位大佬的支持&#xff01;继续进步&#xff01;&#x1f973;&#x1f973;&#x1f973;
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023