HTML基础

2023-10-30

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是:一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示,本文将对 HTML 及其功能做一个基本介绍。

HTML 到底是什么

HTML 不是一门编程语言,而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。一对标签可以为一段文字或者一张图片添加超链接,将文字设置成斜体,改变字号,等等。例如,键入下面一行内容:

小学生就要好好学习

可以将这行文字封装成一个段落元素来使其在单独一行呈现:

<p>小学生就要好好学习</p>

HTML 元素详解

让我们深入探索一下这个段落元素。

在这里插入图片描述

这个元素的主要部分有:

  1. 开始标签(Opening tag):包含元素的名称(本例为 p),被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
  2. 结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。
  3. 内容(Content):元素的内容,本例中就是所输入的文本本身。
  4. 元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。

元素也可以有属性(Attribute):

在这里插入图片描述

属性包含了关于元素的一些额外信息,这些信息本身不应显现在内容中。本例中,class 是属性名称,editor-note 是属性的值。class 属性可为元素提供一个标识名称,以便进一步为元素指定样式或进行其他操作时使用。

属性应该包含:

  1. 在属性与元素名称(或上一个属性,如果有超过一个属性的话)之间的空格符。
  2. 属性的名称,并接上一个等号。
  3. 由引号所包围的属性值。

备注: 不包含 ASCII 空格(以及 " ' ` = < > )的简单属性值可以不使用引号,但是建议将所有属性值用引号括起来,这样的代码一致性更佳,更易于阅读。

嵌套元素

也可以将一个元素置于其他元素之中 —— 称作嵌套。要表明猫咪非常暴躁,可以将“非常”用 元素包围,”非常“将突出显示。

<p>小学生就要 <strong>好好学习</strong></p>

必须保证元素嵌套次序正确:本例首先使用

标签,然后是 标签,最后再结束

标签。这样是不对的:

<p>小学生就要 <strong>好好学习</p></strong>

元素必须正确地开始和结束,才能清除地显示出正确的嵌套层次。否则浏览器就得自己猜测,虽然它会竭尽全力,但很大程度不会给你期望的结果。所以一定要避免!

空元素

不包含任何内容的元素称为空元素。比如 元素:

<img src="bmseven.png" alt="测试图片" />

本元素包含两个属性,但是并没有 结束标签,元素里也没有内容。这是因为图像元素不需要通过内容来产生效果,它的作用是向其所在的位置嵌入一个图像。

HTML 文档详解

以上介绍了一些基本的 HTML 元素,但孤木不成林。现在来看看单个元素如何彼此协同构成一个完整的 HTML 页面。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试网页</title>
  </head>
  <body>
    <img src="bmseven.png" alt="我的测试网页">
  </body>
</html>

说明:

  • <!DOCTYPE html> — 文档类型。混沌初分,HTML 尚在襁褓(大约是 1991/92 年)之时,DOCTYPE 用来链接一些 HTML 编写守则,比如自动查错之类。DOCTYPE 在当今作用有限,仅用于保证文档正常读取。现在知道这些就足够了。
  • <html></html><html>元素。该元素包含整个页面的内容,也称作根元素。
  • <head></head><head>元素。该元素的内容对用户不可见,其中包含例如面向搜索引擎的搜索关键字(keywords)、页面描述、CSS 样式表和字符编码声明等。
  • <meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码,UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容,还可以避免以后出现某些问题,没有理由再选用其他编码。
  • <title></title><title>元素。该元素设置页面的标题,显示在浏览器标签页上,也作为收藏网页的描述文字。
  • <body></body><body>元素。该元素包含期望让用户在访问页面时看到的内容,包括文本、图像、视频、游戏、可播放的音轨或其他内容。

图像

重温一下 元素:

<img src="bmseven.png" alt="我的测试网页" />

像之前所讲,该元素通过包含图像文件路径的地址属性 src,可在所在位置嵌入图像。

该元素还包括一个替换文字属性 alt,是图像的描述内容,用于当图像不能被用户看见时显示,不可见的原因可能是:

  1. 用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读 alt 属性的内容。
  2. 有些错误使图像无法显示。可以试着故意将 src 属性里的路径改错。保存并刷新页面就可以在图像位置看到:“My test image”

标记文本

本段包含一些常用的文本标记 HTML 元素。

标题(Heading)

标题元素可用于指定内容的标题和子标题。就像一本书的书名、每章的大标题、小标题,等。HTML 文档也是一样。HTML 包括六个级别的标题,

-

,一般最多用到 3-4 级标题。

<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4

可以尝试在 元素上面添加一个合适的标题。

备注: 你可以看到第一级标题是有隐式的主题样式。不要使用标题元素来加大、加粗字体,因为标题对于无障碍访问等问题非常有意义。要保持页面结构清晰,标题整洁,不要发生标题级别跳跃。

段落(Paragraph)

如上文所讲,

元素是用来指定段落的。通常用于指定常规的文本内容:

<p>这是一个段落</p>

列表(List)

Web 上的许多内容都是列表,HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为:

  1. 无序列表(Unordered List)中项目的顺序并不重要,就像购物列表。用一个 <ul>元素包围。
  2. 有序列表(Ordered List)中项目的顺序很重要,就像烹调指南。用一个 <ol> 元素包围。

列表的每个项目用一个列表项目(List Item)元素 <li>包围。

比如,要将下面的段落片段改成一个列表:

<p>今天的课程表是 语文 数学 英语</p>

可以这样更改标记:

<p>今天的课程表是</p>

<ul>
  <li>语文</li>
  <li>数学</li>
  <li>英语</li>
</ul>

试着在示例页面中添加一个有序列表和无序列表。

链接

链接非常重要 - 它们赋予 Web 网络属性。要植入一个链接,我们需要使用一个简单的元素 - ‘’ - a 是“anchor”(锚)的缩写。要将一些文本添加到链接中,只需如下几步:

  1. 选择一些文本。比如“百度一下”。
  2. 将文本包含在 元素内,就像这样:
<a>百度一下</a>
  1. 为此 元素添加一个 href 属性,就像这样:
<a href="">百度一下</a>
  1. 把属性的值设置为所需网址:
<a href="https://www.baidu.com/">百度一下</a>

如果网址开始部分省略了 https:// 或者 http://, 可能会得到错误的结果。在完成一个链接后,可以试着点击它来确保指向正确。

小结

一定要自己动手去写一写,很简单的!

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

<head>
    <meta charset="UTF-8">
    <title>HTML 基础</title>
</head>

<body>
    <h1>南京大学附属小学课程表</h1>
    <img src="bmseven.png" />

    <p>今天的课程表:</p>

    <ul>
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
    </ul>

    <p>
        好好学习,天天向上!只有勤奋学习,才能成为未来的栋梁之才。让我们一起努力,追求知识的海,开启智慧的大门!
    </p>

    <p>
        学习中遇到什么问题可以
        <a href="https://www.baidu.com">百度一下</a>
    </p>
</body>

</html>
        <li>英语</li>
    </ul>

    <p>
        好好学习,天天向上!只有勤奋学习,才能成为未来的栋梁之才。让我们一起努力,追求知识的海,开启智慧的大门!
    </p>

    <p>
        学习中遇到什么问题可以
        <a href="https://www.baidu.com">百度一下</a>
    </p>
</body>

</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML基础 的相关文章

  • Gmail 无法在电子邮件上正确呈现字体

    我已经建立了一个 html 电子邮件并使用了 Google 字体 我已使用以下方法将字体包含在 head 标签中 if mso endif 并使用字体 即我这样做了
  • 在按钮之间添加空间?

    嗨 我这里有一个代码 除了一件事之外 一切都很完美 代码中每个按钮之间没有空格 我尝试过 margin 但不幸的是它是一个无序列表 所以我有点困惑 我将添加或替换什么以在两个按钮之间留出空间 帮助
  • HTML5 支持命名空间吗?

    我们是否可以使用新标签来扩展 HTML5 例如
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • 可以使用带有 HTML5 播放器的 Amazon S3/CloudFront 流式传输视频吗?

    我想使用 HTML5 视频播放器并流式传输视频 S3 CloudFront 可以实现这一点吗 我了解 Amazon 使用 RTMP 流媒体协议和 HTML5video标签不支持 RTMP 有没有办法用 HTML5 播放器播放视频 Wayne
  • 将输入中每个单词的第一个字符设为大写

    我想知道如何在输入区域自动生成单词的第一个字符 目前我的代码是 Name
  • PHP 共享标头而不使用服务器端脚本?

    到目前为止我总是通过 PHP 解决简单的问题 您有一个包含页眉 菜单 页脚和内容字段的网站 每个页面的页眉 菜单和页脚通常是相同的 在没有 PHP 或任何其他服务器端语言的情况下 如何使页眉 菜单和页脚数据仅存在于一个文件中 例如 您不会有
  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码
  • 应用旋转时,HTML5 canvas Clip() 在 Chrome 中不起作用

    我试图在画布上使用剪辑区域 一旦坐标系旋转任何非零值 它就会停止工作 window onload function var canvas document getElementById mainCanvas var ctx canvas g
  • 设置浏览器窗口最小化的最小尺寸限制?

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用
  • JSF 2.1 中的 HTML 4 <按钮>

    我想使用以下命令 The JSF
  • 增加数字输入、CSS、HTML 上的向下和向上箭头的大小

    有没有办法利用CSS来增大数字输入框右侧的上下箭头的大小 只是向上和向下箭头 而不是整个输入框 或者至少是按比例的 看这个例子 size 36 font size 36px size 12 font size 12px
  • 如何隐藏 URL 中的锚标记

    如何隐藏地址栏中以下链接 href 的哈希值 a href index php dev name 所以它会将我重定向到index php dev name 但我希望地址栏只显示index php 您可以使用 Javascript oncli
  • HTML5 历史 API

    我如何使用 HTML5 历史 api 我确实经历过https developer mozilla org en DOM Manipulated the browser history https developer mozilla org
  • 网站 YouTube 嵌入视频不断播放

    我正在使用 youtube 提供的 iframe 在我的网站上嵌入视频 我还使用了一个 css 弹出窗口 这是我从这个页面学到的http www pat burt com web development how to do a css po
  • Modernizr - 加载 polyfills / 使用自定义检测的正确方法

    我想在网页上使用一些新的 HTML5 表单属性和输入类型 有些浏览器已经支持它们 有些浏览器不支持 也永远不会支持 这就是我想使用 Modernizr 的原因 这就是我的麻烦开始的原因 据我了解 Modernizr 本身并不是一个 poly
  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些
  • 如何延迟加载嵌入在 iframe 上的 YouTube 视频?

    如何将延迟加载应用于iframe嵌入视频 我尝试添加loading eager loading auto and loading lazyload 您可以使用srcdoc你里面的属性iframe标签来加载图像 请参阅以下示例作为参考
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程

随机推荐

  • 无符号16位整形数组转float---Java

    代码 public float int16tofloat int a if 0 a length 2 a length lt 0 return null int len a length 2 float c new float len fo
  • java技术可行性分析_Java可行性分析

    Java 信息管理系统可行性研究报告 一 可行性研究前提 1 1 可行性研究背景及意义 利用计算机进行学生信息管理 不仅能够保证准确 无误 快速输出 而且 还可以利用计算机对有关信息进行查询 检索迅速 查找方便 可靠性高 存储 量大 保密性
  • java 清除字符串空格

    JAVA中去掉空格 1 String trim trim 是去掉首尾空格 2 str replace 去掉所有空格 包括首尾 中间 String str hell o String str2 str replaceAll System ou
  • 当代年轻人,为什么越来越穷?

    作者 啡小沫 来源 ID feixiaomo6 1 这个问题 在网上被浏览了400多万次 不吹不黑 我们先来看一组数据 知乎大V 经济学博弈论话题优秀回答者Manolo列举了Raj Chetty等六位研究者2017年发表在Science上的
  • Item 48:了解模板元编程

    Item 48 Be aware of template metaprogramming 模板元编程 Template Metaprogramming TMP 就是利用模板来编写那些在编译时运行的C 程序 模板元程序 Template Me
  • java 校验某对象是否存在某属性

    java 校验某对象是否存在某属性 String name username if StrKit isEmpty type JsonResult error 参数不能为空 Class class1 User class Field fiel
  • 《Attention Is All You Need》论文笔记 - 【transformer模型】

    论文来源 NeurIPS 2017 论文链接 点击进入 该篇论文提出了一个新颖的网络结构 Transformer 其没有使用循环递归结构和卷积结构 仅基于注意力机制 在两个机器任务上表明了模型能够更好的并行化计算 可以显著地减少训练时间 性
  • 大数据可视化课程笔记 1

    文章目录 第一章 数据可视化概述 1 1 什么是数据可视化 1 2 数据可视化的作用 1 3 数据可视化的分类 1 4 数据可视化的发展历史 1 5 数据可视化的未来 第一章 数据可视化概述 1 1 什么是数据可视化 数据可视化定义 将抽象
  • 【笔记】LaTex常见问题汇总(四)

    1 Texstudio显示编辑器代码行号 参考 https jingyan baidu com article f79b7cb339bbec9144023e84 html 2 Latex出现Unable to open xxxxx pdf
  • 1399: 最小生成树

    题目描述 最小生成树问题是实际生产生活中十分重要的一类问题 假设需要在n个城市之间建立通信联络网 则连通n个城市只需要n 1条线路 这时 自然需要考虑这样一个问题 即如何在最节省经费的前提下建立这个通信网 可以用连通网来表示n个城市以及n个
  • C# Study

    直接使用 t 和 n类似 字符串中文件路径的写法 3 当字符串中需要大量修改时 用StringBuilder更好 运行时间更短 4 Console ReadLine 读进来的默认是字符串string 5 C 严格区分大小写 Main需要大写
  • 蓝桥杯单片机第七届国赛笔记

    蓝桥杯单片机第七届国赛笔记 做完这届题目之后有很多感触和一些好的思想 想分享一下顺便巩固巩固 1 摆脱标志位的依赖 好的编程我认为是用最简洁 清晰的程序 最近的路径 去实现某个功能 如果遇到问题就做标志位这种方法我认为有点low了 对思维和
  • golang语言_2

    init函数 每一个源文件都可以包含一个 init 函数 该函数会在 main 函数执行前 被 Go 运行框架调用 也 就是说 init 会在 main 函数前被调用 可以做初始化操作 func init fmt Println 123 f
  • 【Python算法系列十一】二叉树的3种遍历方式

    二叉树的遍历是指从根结点出发 按照某种次序依次访问二叉树中所有结点 使得每个结点被访问一次且仅被访问一次 遍历二叉树的方法主要分 3 种 先序遍历 中序遍历和后序遍历 先序遍历指最先遍历节点本身 再遍历节点的左子树 最后遍历右子树的遍历方法
  • (一)esp8266透传简单使用

    最近闲的在捣鼓wifi 以太网连接网 不过好像没有那么多时间去研究cc3200 先从封装好的芯片模块开始玩起吧 这几天准备研究下ESP8266 由于手头上是有一个透传的模块 和一个块STM32F4的板子 而且有对应的代码例程 所以先开始研究
  • 华为OD机试 - 服务失效判断(Java)

    题目描述 某系统中有众多服务 每个服务用字符串 只包含字母和数字 长度 lt 10 唯一标识 服务间可能有依赖关系 如A依赖B 则当B故障时导致A也故障 依赖具有传递性 如A依赖B B依赖C 当C故障时导致B故障 也导致A故障 给出所有依赖
  • QT显示图片的四种方法

    QT显示图片的四种方法 原文地址 https blog csdn net flowerspring article details 113307194 1 Qt 设置背景图片的三种方式 setAutoFillBackground http
  • Error invoking remote method ‘docker-start-container‘: Error: (HTTP code 500) server error - Ports a

    文章目录 一 Error invoking remote method docker start container Error HTTP code 500 server error Ports are not available list
  • web到底是什么意思,web站点的创建方法

    web到底是什么意思 先来看看两个名词 一 超文本 hypertext 一种全局性的信息结构 它将文档中的不同部分通过关键字建立链接 使信息得以用交互方式搜索 它是超级文本的简称 二 超媒体 hypermedia 简介 WWW WorldW
  • HTML基础

    超文本标记语言 英语 HyperText Markup Language 简称 HTML 是一种用来结构化 Web 网页及其内容的标记语言 网页内容可以是 一组段落 一个重点信息列表 也可以含有图片和数据表 正如标题所示 本文将对 HTML