【HTML — 构建网络】HTML 入门

在本文中,我们将介绍 HTML 的绝对基础知识。为了帮助您入门,本文定义了元素、属性以及您可能听说过的所有其他重要术语。它还解释了这些在 HTML 中的位置。您将学习 HTML 元素的结构、典型的 HTML 页面的结构以及其他重要的基本语言功能。在此过程中,也将有机会玩转 HTML!

先决条件:已安装基本软件,并具有处理文件的基本知识。
目的:获得对 HTML 的基本熟悉,并练习编写一些 HTML 元素。

什么是 HTML?

HTML(超文本标记语言)是一种标记语言,它告诉网络浏览器如何构建您访问的网页。它可以像 Web 开发人员希望的那样复杂或简单。HTML 由一系列元素组成,您可以使用这些元素来包围、包装或标记内容的不同部分,以使其以某种方式显示或操作。封闭标签可以将内容转换为超链接以连接到另一个页面、斜体字等。例如,请考虑以下文本行:

<span style="background-color:var(--code-background-block)">My cat is very grumpy
</span>

如果我们希望文本独立存在,我们可以通过将文本包含在段落 ("><p>) 元素中来指定它是一个段落:

[HTML全文]复制到剪贴板
<span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>p</span><span style="color:var(--code-token-punctuation)">></span></span>My cat is very grumpy<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>p</span><span style="color:var(--code-token-punctuation)">></span></span>
</code></span>

注意:HTML 中的标签不区分大小写。这意味着它们可以用大写或小写字母书写。例如,"><title>标签可以写成 、 、 等,这样就可以工作了。但是,为了保持一致性和可读性,最佳做法是将所有标记写成小写字母。<title><TITLE><Title><TiTlE>

HTML 元素剖析

让我们进一步探讨上一节中的段落元素:

我们元素的解剖结构是:

  • 开场标签:它由元素的名称(在此示例中,p 代表段落)组成,并用左尖括号和右尖括号括起来。此开始标记标记元素开始或开始生效的位置。在此示例中,它位于段落文本的开头之前。
  • 内容:这是元素的内容。在此示例中,它是段落文本。
  • 结束标签:这与开始标记相同,不同之处在于它在元素名称之前包含一个正斜杠。这标记了元素结束的位置。未能包含结束标记是一个常见的初学者错误,可能会产生特殊的结果。

该元素是开始标记,后跟内容,后跟结束标记。

主动学习:创建您的第一个 HTML 元素

通过用标签包装“来编辑”可编辑代码“区域中的以下行,并要打开元素,请将开始标记放在行的开头。若要关闭元素,请将结束标记放在行尾。这样做应该会给行斜体文本格式!在“输出”区域中实时查看更改更新。<em></em>.<em></em>

如果您犯了错误,可以使用“重置”按钮清除您的工作。如果您真的遇到困难,请按“显示解决方案”按钮查看答案。

嵌套元素

元素可以放置在其他元素中。这称为嵌套。如果我们想说我们的猫非常脾气暴躁,我们可以将这个词"><strong>元素包装,这意味着这个词要有strong(er)文本格式:

[HTML全文]复制到剪贴板
<span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>p</span><span style="color:var(--code-token-punctuation)">></span></span>My cat is <span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>strong</span><span style="color:var(--code-token-punctuation)">></span></span>very<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>strong</span><span style="color:var(--code-token-punctuation)">></span></span> grumpy.<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>p</span><span style="color:var(--code-token-punctuation)">></span></span>
</code></span>

筑巢有正确和错误的方法。在上面的示例中,我们首先打开了元素,然后打开了元素。为了正确嵌套,我们应该先关闭元素,然后再关闭 .pstrongstrongp

以下是错误嵌套方法的示例:

[HTML全文]复制到剪贴板
<span style="background-color:var(--background-critical)"><code><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>p</span><span style="color:var(--code-token-punctuation)">></span></span>My cat is <span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>strong</span><span style="color:var(--code-token-punctuation)">></span></span>very grumpy.<span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>p</span><span style="color:var(--code-token-punctuation)">></span></span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"></</span>strong</span><span style="color:var(--code-token-punctuation)">></span></span>
</code></span>

标签必须以它们在彼此内部或外部的方式打开和关闭。与上面示例中的重叠类型相同,浏览器必须猜测您的意图。这种猜测可能会导致意想不到的结果。

虚空元素

并非所有元素都遵循开始标签、内容和结束标签的模式。一些元素由单个标签组成,该标签通常用于在文档中插入/嵌入某些内容。这样的元素被称为虚空元素。例如,"><img> 元素将图像文件嵌入到页面上:

[HTML全文]玩复制到剪贴板
<span style="background-color:var(--code-background-block)"><code><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)"><</span>img</span><span style="color:var(--code-token-attribute-name)">src</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png<span style="color:var(--code-token-punctuation)">"</span></span><span style="color:var(--code-token-attribute-name)">alt</span><span style="color:var(--code-token-attribute-value)"><span style="color:var(--code-token-punctuation)">=</span><span style="color:var(--code-token-punctuation)">"</span>Firefox icon<span style="color:var(--code-token-punctuation)">"</span></span> <span style="color:var(--code-token-punctuation)">/></span>&

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

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

相关文章

上传项目到GitHub

上传项目到GitHub 前期工作&#xff1a;创建GitHub仓库 1.使用git命令初始化文件夹 git init2.将文件夹里面所有的文件添加到本地仓库&#xff0c;如果想添加单个文件&#xff0c;将.换成文件名就好。 git add .3.给文件备注&#xff0c;双引号里面是文件备注的内容 git c…

大揭秘:百度云提供支持的智能审核机制是什么?

在论坛、社媒等公共空间里&#xff0c;用户不仅能自主上传信息&#xff0c;还可以通过评论、群聊等方式进行互动。 如果不对信息进行审核&#xff0c;平台可能会涌现大量包含暴力、仇恨、淫秽或其他不当内容的帖子。用人工方式一条条审核信息&#xff0c;不仅成本高、效率低、…

C 观察者模式 Demo

目录 一、基础描述 二、Demo 最近需要接触到 MySQL 半同步插件&#xff0c;发现其中用到了观察者模式&#xff0c;之前没在 C 中用过&#xff0c;遂好奇心驱使下找了找资料&#xff0c;并写了个 Demo。 一、基础描述 观察者设计模式&#xff08;Observer Pattern&#xff0…

vue2文章添加多个标签思路代码及效果展示

效果展示 思路 data数据结构 第一个数组&#xff0c;用来存放标签库&#xff0c;供创建文章时选择 第二个数组&#xff0c;用来存放从标签库选中后的标签&#xff0c; 且选中后需在可选的标签库里删除&#xff0c;否则出现同一个标签被多次添加 js代码 点击输入框&#xf…

智能APK动态防护系统:自动重命名与签名,实现安全分发

本智能APK动态防护系统通过集成先进的自动化处理技术&#xff0c;实现了对APK文件的深度定制化与安全性强化。系统核心功能包括自动反编译APK、随机生成包名与签名、代码混淆等&#xff0c;最终回编译生成独一无二的APK安装包。这一过程每5分钟&#xff08;时间间隔可自定义&am…

Windows下ORACLE数据泵expdp和impdp使用

Windows下ORACLE数据泵expdp和impdp使用 一、基础环境 操作系统&#xff1a;Windows server 2008&#xff1b; 数据库版本&#xff1a;Oracle Database 11g Enterprise Edition Release 11.2.0.4.0 - 64bit Production 数据库工具&#xff1a;PL/SQL 12.0.7 实验内容&…

学习笔记12:域名。全球加速,自定义源站,自定义CDN加速

域名。全球加速&#xff0c;自定义源站&#xff0c;自定义CDN加速 域名、全球加速、自定义源站和自定义CDN加速是网络和网站管理中常见的概念&#xff0c;主要用于提高网站访问速度和可靠性。下面我将逐一解释这些术语&#xff1a; 1. 域名&#xff08;Domain Name&#xff0…

示例:WPF中如何处理TabControl页面绑定ItemsSource切换TabItem时UI数据没有持久保存的问题

一、目的&#xff1a;在WPF开发过程中&#xff0c;经常用到TabControl&#xff0c;也会遇到类似问题&#xff0c;用TabControl绑定数据源ItemsSource时&#xff0c;切换TabItem时&#xff0c;UI上的数据没有持久保存&#xff0c;本文介绍一种处理方式&#xff0c;可以做到缓存页…

什么是云服务器ecs,为什么要选择云服务器

云服务器 ECS&#xff08;Elastic Compute Service&#xff09;是阿里云&#xff08;Alibaba Cloud&#xff09;提供的一种基于云计算的虚拟服务器服务。它允许用户在云端虚拟化环境中配置和管理服务器&#xff0c;无需投资物理硬件、提高资源利用率、降低维护成本、实现快速部…

设计模式在FileBrowser中的几个应用

设计模式是代码重构的最终目标&#xff0c;在程序设计中有效的运用这项技术&#xff0c;可以大大提高代码的可读性和可维护性。使整个程序设计结构趋向精致完美。在我维护的FileBrowser模块中可以针对以下方面 应用相应的模式。 1. 使用策略模式来处理文件夹扫描操作 作为网…

Sed工具

文章目录 一、sed是什么二、sed的常用操作选项三、如何使用sed1.Sed结合正则表达式输出指定行2.增加内容3.删除4.替换5.搜索替换6.插入文件7.另存为到文件8.同时编辑9.分组操作10.读取完退出11.sed脚本12.sed的高级应用 一、sed是什么 sed 命令是利用脚本来处理文本文件。它可…

[C语言]自己实现sprintf,printf函数

一、要点&#xff1a; 实现sprintf&#xff0c;printf的要点在于不定参数的接收与处理&#xff0c;即va_list的使用&#xff0c;另外使用va_list需要包含stdarg.h头函数&#xff0c;想了解详细用法可以自行查找。 另外就是涉及数据的处理与转换&#xff0c;常用的是整型转字符…

Redis的集群的搭建

1、为什么要搭建Redis集群 Redis 集群能够提供高可用性、高性能、扩展性和数据安全性&#xff0c;适用于各种需要高速缓存和数据存储的复杂应用场景 2、Redis的集群模式 主从模式哨兵模式区中心化模式 3、主从模式 redis主从模式表示一个主节点跟若干个从节点。主节点可以…

矿井水絮凝沉淀一体机处理效果高

诸城市鑫淼环保小编带大家了解一下矿井水絮凝沉淀一体机处理效果高 矿井废水的成分主要是悬浮物和可溶性无机物&#xff0c;还含少量的废机油、乳化油、废坑木腐烂物、井下粪便等有机污染物。 悬浮物SS的特点&#xff1a;含量变化范围很大&#xff0c;可以从几百到几千甚至上万…

VMware 上安装 CentOS 7 教程 (包含网络设置)

**建议先看一些我安装VMware的教程&#xff0c;有些网络配置需要做一下 1.打开VMware&#xff0c;创建虚拟机 2.勾选自定义&#xff0c;点击下一步 3.点击下一步 4.勾选“稍后安装操作系统”&#xff0c;点击下一步 5.勾选linux&#xff0c;勾选centos7&#xff0c;点击下一步…

AH1405芯片的应用领域有哪些?sot23-5封装ic

1405芯片是一种SOT23-5封装的降压转换器&#xff0c;以其出色的性能和广泛的应用领域&#xff0c;成为电子设计中的热门选择。本文将详细介绍1405芯片的技术特点以及其在不同领域的应用情况。 技术特点 1. 宽输入电压范围 1405芯片能够接受从6V至40V的输入电压&#xff0c;这…

汽车绝缘检测详细设计

粘连检测原理 粘连检测&#xff1a; 目的&#xff1a;检测继电器、开关或电气触点是否因故障而保持在接通或断开的状态。工作原理&#xff1a; 正常操作&#xff1a;继电器或开关在正常操作时会周期性地开闭。开闭过程中会有明显的电流和电压变化。粘连状态&#xff1a;如果继…

Vuex数据持久化实现

版本&#xff1a;vue 3.4.29 vuex4.1.0 1. 出现的问题 当我使用 vuex 作为状态管理组件来存储用户的一些信息之后&#xff0c;发现从/login 页面跳转到/home 界面后拿不到vuex信息。 之后查阅资料了解&#xff0c;当切换路由后&#xff0c;vue 会重新渲染&#xff0c;而vuex 也…

实战机器学习--决策树分类器在蘑菇分类中的应用

数据集&#xff1a;https://pan.quark.cn/s/4d3526600c0c 在机器学习领域&#xff0c;图像分类是一个常见的任务&#xff0c;尤其是在自然语言处理和生物识别等领域。本文将通过一个简单的例子&#xff0c;展示如何使用Python和一些流行的库来实现蘑菇的分类&#xff0c;区分可…

docker 部署 LaTeX 环境

docker 部署 LaTeX 环境 需求表述部署步骤环境补丁&#xff08;解决 picins.sty 缺失问题&#xff09; 同步发布在个人笔记docker 部署 LaTeX 环境 需求表述 想做一个项目&#xff0c;需要一个 LaTeX 的中文环境&#xff0c;由于习惯了在服务器上用 docker 部署环境&#xff0…