【WEB前端进阶之路】 HTML 全路线学习知识点梳理（中）

news2024/12/31 7:19:22

前言

本文是HTML零基础学习系列的第二篇文章，点此阅读 上一篇文章。

在这里插入图片描述

文章目录

  • 前言
  • 六.HTML标题
    • 1.HTML标题
    • 2.HTML水平线
    • 3.HTML 注释
  • 七.HTML段落
    • 1.HTML段落
    • 2.HTML换行
  • 八.HTML文本格式化
  • 九.HTML链接
  • 十.HTML头部
  • 十一.HTML图像
  • 十二.HTML表格
  • 十三.HTML列表
  • 十四.HTML区块
    • 1.HTML区块元素
    • 2.HTML内联元素
    • 3.HTML的 div 元素
    • 4.HTML的 span 元素

六.HTML标题

1.HTML标题

标题是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。浏览器会自动地在标题的前后添加空行，例如：

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>

标题用来正确的显示文章结构，通过不同的标题可以为文章建立索引，所以，标题是很重要的存在，所以，不要仅仅是为了生成粗体或大号的文本而使用标题。

2.HTML水平线

<hr> 标签在 HTML 页面中创建水平线，例如：

    <p>段落1</p>
    <hr>
    <p>段落2</p>
    <hr>
    <p>段落3</p>

3.HTML 注释

可以将注释插入 HTML 代码中，提高代码可读性，浏览器会忽略注释，也不会显示它们。

<!-- 这是一个注释 -->

七.HTML段落

1.HTML段落

HTML可以将文档分为不同的段落。段落是通过 <p> 标签定义的，例如：

<p>段落1...</p>
<p>段落2...</p>

2.HTML换行

使用<br>标签在不产生新的段落的情况下换行，例如：

<p>这是<br>换行的<br>演示</p>

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

八.HTML文本格式化

HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体。也可使用标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。但是两者的含义不同，<strong> 或者 <em>标签有你要呈现的文本是重要的，所以要突出显示的意思。

文本格式化的标签及其作用：

标签作用
<b>定义粗体文本
<em>定义着重文字
<i>定义斜体文字
<small>定义小号文字
……

详细的HTML标签参考标签参考手册哦

九.HTML链接

HTML 使用超级链接与网络上的另一个文档相连，点击链接可以从一张页面跳转到另一张页面。

  • HTML使用标签 <a>来设置超文本链接。
  • 在标签<a> 中使用了href属性来描述链接的地址。
  • 一个未访问过的链接显示为蓝色字体并带有下划线，访问过的链接显示为紫色并带有下划线，点击链接时，链接显示为红色并带有下划线。

例如，使用 <a> 标签定义超文本链接：

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

其中，可以定义属性实现相应的功能：

  • 使用 target 属性，你可以定义被链接的文档在何处显示。
  • id 属性可用于创建一个 HTML 文档书签。

十.HTML头部

1.HTML <head>元素：

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

2.HTML <title>元素：

<title> 标签定义了不同文档的标题。

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时，显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题

例如，下面的HTML文档代码：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>
 
<body>
<p>文档内容......</p>
</body>
 
</html>

3.HTML <base>元素：

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

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

4.HTML <link>元素
<link> 标签定义了文档与外部资源之间的关系，例如：

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

5.HTML <stytle>元素
<style> 标签定义了HTML文档的样式文件引用地址，例如：

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

6.HTML <meta>元素
<meta>标签描述了一些基本的元数据。

  • 标签提供了元数据。元数据也不显示在页面上，但会被浏览器解析。
  • 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
  • 一般放置于 <head> 区域。

7.HTML <script>元素
<script>标签用于加载脚本文件，如： JavaScript。

十一.HTML图像

在 HTML 中，图像由<img> 标签定义，<img> 是空标签。

要在页面上显示图像，需要使用源属性（src），源属性的值是图像的 URL 地址，例如：

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

alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，浏览器将显示这个替代性的文本而不是图像，例如：

<img src="boat.gif" alt="显示图像">

height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。默认单位是像素，例如：

<img src="baidu.jpg" alt="百度" width="200" height="100">

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

十二.HTML表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等，例如：

<table border="1">
        <tr>
            <td>你好</td>
            <td>你好</td>
        </tr>
        <tr>
            <td>你好</td>
            <td>你好</td>
        </tr>
    </table>

大多数情况我们需要给表格加上边框，也可以不使用边框。

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

十三.HTML列表

HTML 支持有序、无序和定义列表:

  • 无序列表使用 <ul> 标签定义，使用粗体圆点（典型的小黑圆圈）进行标记，每个列表项始于 <li> 标签，例如：
    <ul>
        <li>java</li>
        <li>python</li>
    </ul>

在这里插入图片描述

  • 有序列表使用<ol> 标签定义，使用数字进行标记，每个列表项始于 <li> 标签，例如：
    <ol>
        <li>java</li>
        <li>python</li>
    </ol>

在这里插入图片描述

  • 自定义列表以 <dl> 标签开始，每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始，自定义列表是项目和注释的组合，例如：
    <dl>
        <dt>java</dt>
        <dd>-诞生于1995年</dd>
        <dt>python</dt>
        <dd>-诞生于1991年</dd>
    </dl>

在这里插入图片描述

十四.HTML区块

HTML 可以通过 <div> 和 <span>将元素组合起来。

大多数 HTML 元素被定义为块级元素或内联元素。

1.HTML区块元素

块级元素在浏览器显示时，通常会以新行来开始和结束。

2.HTML内联元素

内联元素在浏览器显示时通常不会以新行开始。

3.HTML的 div 元素

HTML <div> 元素是块级元素，它是用于组合其他 HTML 元素的容器。

例：让文档中的一块区域显示为红色，另一块区域加粗且显示为蓝色，HTML文档代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <h1>望庐山瀑布</h1>
    <h2>唐 李白</h2>
    <div style="color:red">
        <p>日照香炉生紫烟，</p>
        <p>遥看瀑布挂前川。</p>
    </div>
    <div style="font-weight:bold;color:blue">
        <p>飞流直下三千尺，</p>
        <p>疑是银河落九天。</p>
    </div>
</body>

</html>

显示效果：

在这里插入图片描述

<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

4.HTML的 span 元素

HTML <span> 元素是内联元素，可用作文本的容器。

例：对文档中的一部分文本进行着色，HTML代码如下。

 <h2><span style="color:chartreuse">唐</span> -李白</h2>

显示效果：

在这里插入图片描述

<span> 用于对文档中的行内元素进行组合。

在这里插入图片描述

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

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

相关文章

C#:Krypton控件使用方法详解(第十二讲) ——kryptonCheckButton

C#:Krypton控件使用方法详解(第十二讲) ——kryptonCheckButton

今天介绍的Krypton控件中的kryptonCheckButton。下面先介绍外观属性&#xff1a;Checked属性&#xff1a;表示控件是否处于已启用状态&#xff0c;属性值为Bool类型&#xff0c;属性值为true时&#xff0c;表示控件处于已选中状态。属性值为false时&#xff0c;表示控件处于不选…
阅读更多...
黄河流域公安院校网络空间安全技能挑战赛 QAQ 题解

黄河流域公安院校网络空间安全技能挑战赛 QAQ 题解

目录 一.获取pyc文件 二.反编译出.py源码 三.程序逻辑 1.第一个限制条件 2.第二段 3.第三段 这题是对python打包成的可执行程序逆向 如果对如何反编译.pyc和.py文件有疑问可以参考: Python逆向基本操作步骤——以杭电新生赛hgame week2 reverse stream(python3.10逆向)…
阅读更多...
IOC（概念和原理）

IOC（概念和原理）

文章目录1. IOC容器概念2. IOC底层原理3. IOC&#xff08;接口&#xff09;4. IOC操作Bean管理&#xff08;概念&#xff09;5. IOC操作Bean管理&#xff08;基于xml方式&#xff09;5.1 基于xml创建对象5.2 基于xml方式注入属性5.2.1 DI&#xff1a;依赖注入&#xff0c;就是注…
阅读更多...
Unable to find a valid cuDNN algorithm to run convolution

Unable to find a valid cuDNN algorithm to run convolution

Unable to find a valid cuDNN algorithm to run convolution 今天在复习HumanNerf的时候发现了这个报错&#xff0c; import torch print(torch.cuda.is_available()) 使用上面的代码发现GPU是可以用的&#xff0c;可自己的torch版本对应。 后面继续看帖子&#xff0c;总结有…
阅读更多...
【C++】30h速成C++从入门到精通（STL介绍、string类）

【C++】30h速成C++从入门到精通（STL介绍、string类）

STL简介什么是STLSTL(standard template libaray-标准模板库)&#xff1a;是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架。STL的版本原始版本Alexander Stepanov、Meng Lee 在惠普实验室完成的原始版本&…
阅读更多...
2D图像处理：九点标定_上（机械手轴线与法兰轴线重合）（附源码）

2D图像处理：九点标定_上（机械手轴线与法兰轴线重合）（附源码）

文章目录 1. 九点标定2. 九点标定流程2.1 机械手轴线与法兰轴线重合代码实现1. 九点标定 在2D视觉抓取项目中，如果想要让机械手准确的抓取到工件，前提是需要知道机械手应该移动到哪里（位姿）。而移动到哪里（位姿）的获取就需要对相机和机械手进行标定。因此，九点标定（2D视…
阅读更多...
ESP32设备驱动-MAX6675冷端补偿K热电偶数字转换器

ESP32设备驱动-MAX6675冷端补偿K热电偶数字转换器

MAX6675冷端补偿K热电偶数字转换器 1、MAX6675介绍 MAX6675执行冷端补偿并将来自K型热电偶的信号数字化。 数据以 12 位分辨率、SPI™ 兼容的只读格式输出。 该转换器可将温度解析为 0.25C，读数高达 +1024C，并且在 0C 至 +700C 的温度范围内具有 8 LSB 的热电偶精度。 MAX…
阅读更多...
力扣旋转字符串

力扣旋转字符串

&#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;推荐专栏: &#x1f354;&#x1f35f;&#x1f32f; c语言初阶 &#x1f511;个人信条: &#x1f335;知行合一 &#x1f349;本篇简介:>:介绍字符串旋转,左旋,右旋即旋转结果. 金句分享: ✨好好干&…
阅读更多...
如何通过Java将Word转换为PDF

如何通过Java将Word转换为PDF

Word是我们日常编辑文档内容时十分常用的一种文档格式。但相比之下&#xff0c;PDF文档的格式、布局更为固定&#xff0c;不易被更改。在保存或传输较为重要的文档内容时&#xff0c;PDF文档格式也时很多人的不二选择。很多时候我们都会遇到需要将Word转换为PDF的情况。下面我就…
阅读更多...
放弃node-sass，启用sass

放弃node-sass，启用sass

在下载一个新项目时运行&#xff1a;npm run install 发现报错 npm uninstall 异常 Error: Could not find any Visual Studio installation to use 或是 ------------------------- You need to install the latest version of Visual Studio npm ERR! gyp ERR! find VS incl…
阅读更多...
嵌入式Linux（二十四）系统烧写

嵌入式Linux（二十四）系统烧写

将uboot&#xff0c;linux kernel&#xff0c;.dtb&#xff0c;rootfs烧写到板子上的EMMC上&#xff0c;避免断网导致不能运行。 1. MfgTool工具介绍 一路解压之后&#xff0c;得到以下两项&#xff1a; ①Profiles文件夹&#xff1a;后续烧写文件放到这个文件夹。  其中关注…
阅读更多...
宝塔+docker+jenkins部署vue项目（保姆级教程）

宝塔+docker+jenkins部署vue项目（保姆级教程）

1.使用宝塔安装docker 在软件商城安装Docker管理器 2.使用docker下载jenkins镜像 使用命令行 docker pull jenkins/jenkins:lts //lts表示支持版本较长3.创建并且挂载jenkins目录并赋值 jenkins_home为我创建的目录 可以修改任意目录 mkdir -p /jenkins_home cho…
阅读更多...
pytest测试框架——allure报告

pytest测试框架——allure报告

文章目录一、allure的介绍二、allure的运行方式三、allure报告的生成方式一、在线报告、会直接打开默认浏览器展示当前报告方式二、静态资源文件报告&#xff08;带index.html、css、js等文件&#xff09;&#xff0c;需要将报告布置到web服务器上。四、allure中装饰器1、实现给…
阅读更多...
【LeetCode每日一题:982. 按位与为零的三元组+从递归超时到记忆化搜索】

【LeetCode每日一题:982. 按位与为零的三元组+从递归超时到记忆化搜索】

题目描述 给你一个整数数组 nums &#xff0c;返回其中 按位与三元组 的数目。 按位与三元组 是由下标 (i, j, k) 组成的三元组&#xff0c;并满足下述全部条件&#xff1a; 0 < i < nums.length 0 < j < nums.length 0 < k < nums.length nums[i] & …
阅读更多...
Common API环境部署(保姆级教程，填充了很多坑)

Common API环境部署(保姆级教程，填充了很多坑)

Common API环境部署目录一、前言及结果展示二、Windows下安装docker1. 准备工作[1.1 Docker安装包](https://desktop.docker.com/win/main/amd64/Docker%20Desktop%20Installer.exe)[1.2 Wsl2安装包](https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.ms…
阅读更多...
【数据结构】链式二叉树

【数据结构】链式二叉树

前言 在前面我们学习了一些二叉树的基本知识&#xff0c;了解了它的结构以及一些性质&#xff0c;我们还用数组来模拟二叉树建立了堆&#xff0c;并学习了堆排序&#xff0c;可是数组结构的二叉树有很大的局限性&#xff0c;平常我们用的最多树结构的还是链式二叉树&#xff0c…
阅读更多...
【自律】学习方案

【自律】学习方案

自律来源 轶事 陆奇以精力旺盛著称&#xff0c;通常凌晨4点起床&#xff0c;先查邮件&#xff0c;然后在跑步机上跑4英里&#xff0c;边跑边听古典音乐或看新闻。早上5点至6点至办公室&#xff0c;利用这段时间不受别人干扰准备一天的工作&#xff0c;然后一直工作到晚上10点&a…
阅读更多...
搜索引擎的设计与实现

搜索引擎的设计与实现

技术&#xff1a;Java、JSP等摘要&#xff1a;随着互联网的快速发展&#xff0c;网络上的数据也随着爆炸式地增长。如何最快速筛选出对我们有用的信息成了主要问题。搜索引擎是指根据一定的策略、运用特定的计算机程序从互联网上搜集信息&#xff0c;在对信息进行组织和处理后&…
阅读更多...
ks通过恶意低绩效来变相裁员（五）绩效申诉就是「小六自证吃了一碗凉粉」

ks通过恶意低绩效来变相裁员（五）绩效申诉就是「小六自证吃了一碗凉粉」

目录 一、小六吃了一碗凉粉 二、给你差绩效 公司告诉你可以绩效申诉 1、公司的实际目的是啥 2、你一旦自证&#xff0c;就掉入了陷阱 三、谁主张谁举证——让公司证明它绩效考核的客观性和公平性 四、针对公司的流氓恶意绩效行为&#xff0c;还有其他招吗 五、当公司用各…
阅读更多...
学习方法--找书，背书，利器

学习方法--找书，背书，利器

学习方法 前言&#xff1a; 1、所谓的技术/技能&#xff0c;可比作对一类书的学习&#xff0c;那么第一步&#xff0c;就是要找这方面的书本来学习&#xff0c;简称为“找书”&#xff0c;找书既是指资料&#xff0c;也是指经验总结等等&#xff0c;第二步&#xff0c;就是背下…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023