初识HTML文件,创建自己的第一个网页!

  本文旨在初步介绍HTML(超文本标记语言),帮助读者理解HTML中的相关术语及概念,并使读者在完成本文的阅读后可以快速上手编写一个属于自己的简易网页。

一、HTML介绍

  HTML(全称HyperText Markup Language,超文本标记语言),自从诞生伊始就作为万维网的信息表示语言,包括我们今天所见的网页,本质上也就是HTML所描述的文件通过web浏览器显示出效果供用户使用。

  “HyperText”(超文本)指的是不同的HTML文件之间可以进行相互的连接,编写者可以在自己的HTML文件内部链接其他的HTML文件。

  “Markup”(标记)指的是HTML文件通过使用“标记”来注明文本、图片、音频、超链接等内容,我们通常把这些标记的内容称为元素。比如相对较为常见的标记有:<head>,<body>,<h1>,<p>,<li>,<img>......

  总的来说,HTML定义了网页内容的含义与结构,是网页的本体与内核,正是一个又一个HTML文件搭建出了我们目前所见到的令人叹为观止的互联网世界。

二、HTML编辑器

  与C++、python、java等编程语言不同,HTML作为一种标记语言并不需要在特殊的环境配置下进行编写,甚至可以使用系统自带的notepad(记事本)进行HTML文件的编写。当然,通过notepad来进行HTML文件的编写有诸多不方便之处,这里推荐读者使用VS Code进行HTML文件的编写操作  (笔者会在VS Code中进行代码的编写)。当然,你也可以使用其他优秀的HTML编辑器,如:Sublime Text、Brackets、HbuilderX等,或者你也可以选择在线的HTML编辑网站,如codepen(https://codepen.io/)。Anyway,it depends on you~

三、HTML文件基本框架

  在这一部分,我们将介绍一个简单的HTML文件的基本组成。

  首先,我们需要创建一个空白的HTML文件,后缀为.html。

  在VS Code中内置了HTML的基本框架,我们输入!,按下回车,一个基础的HTML文件框架就出现了。

  我们主要关注两个部分,首先是head部分,head部分是HTML文件的头文件,包含了该HTML的一些基本信息,比如说明了该HTML界面采用UTF-8编码格式,<title></title>标签之间的就是该页面的标题。我们按下F5运行网页,会出现一个空白的浏览器界面,标题即为Document,此外在之后学习更多的知识后,我们会知道在<head>标签下还包括了一些链接文件,如链接到CSS文件、JavaScript文件等。

  然后是body部分,body部分就是我们用来设计网页的地方了,现在body部分没有任何内容,因此显示的是一个空白界面,接下来笔者将介绍如何编写我们HTML文件的body部分的代码。

四、HTML文件的标记元素

  在前面我们提到过HTML不是一门编程语言,而是一种由定义内容结构的标记元素组成的标记语言。我们可以使用这些标记元素来包围各种各样的内容,使之在页面上被区分成不同的区块,呈现出不同的样式和效果。标记元素的基本写法是<xx></xx>(xx为标记元素名称),前者称为开始标记、后者称为结束标记,作用如字面所示,标志着元素的开始与结束,中间盛放元素的具体内容。

  接下来我将给出一系列在HTML文件中经常出现的元素,掌握了这些元素之后,制作一个简单的网页是不成问题的。

①章节标题元素:<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,表示六个不同级别的章节标题,h1级别最高,区别在于字号大小的不同。

②列表元素:<ol>表示有序列表,<ul>表示无序列表,二者包含条目元素<li>。

③段落元素:<p>表示文本的一个段落。

④超链接元素::<a>通过该标签的href属性实现超链接的功能。

⑤容器元素:<div>、<span>都表示容器,用于将HTML文件划分成不同区域。

⑥文字处理元素:<em>表示着重符号、<b>表示加粗符号、<i>表示斜体符号、<strong>表示粗体符号、<sub>表示下标符号、<sup>表示上标符号。

⑦图片和多媒体元素:<audio>表示音频元素、<img>表示图片元素、<video>表示视频元素。

⑧其他常见功能元素:<br>标记换行符号;<input>常见基于表单的交互式控件......

五、实战HTML文件编辑,创建属于自己的第一个网页!

  掌握了HTML文件的基本元素概念及写法之后,我们就可以开始着手编写自己的代码了,笔者在这里做一个简单的诗歌展示页作为示范。(其中img和audio是笔者事先准备好的素材,大家可以选用自己喜欢的素材与文本内容自由发挥~)

(代码如下,供参考)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Poem</title>
</head>
<body><h1>不可知</h1><h3>【阿根廷】博尔赫斯</h3><br><img src="moon.jpg" alt=""><br><p><i>月亮不知道她的恬静皎洁,</i></p><p><i>甚至不知道自己是<strong>月亮</strong>;</i></p><p><i>砂砾不了解自己是砂砾。</i></p><p><i>任何事物都不了解它独特的模样。</i></p><p><i>象牙的棋子和摆弄它们的手,</i></p><p><i>和抽象的棋艺都毫无关系。</i></p><p><i>人们欢少倍多的<strong>命运</strong></i></p><p><i>也许是冥冥中某个主宰的工具,</i></p><p><i>这些事我们<strong>不得而知</strong>;</i></p><p><i>把他叫做上帝并不解决问题,</i></p><p><i>恐惧、疑虑和有头无尾的祈祷,</i></p><p><i>都是白费力气,<strong>徒劳无益</strong>。</i></p><p><i>哪一张弓射出我这只箭?</i></p><p><i>目标又是哪一座<strong>高山之巅</strong>?</i></p><audio controls src="music.mp3"></audio>
</body>
</html>

  最后呈现出来的界面效果是这样的:

  当然这个界面是不太美观的(很有自知之明),在后续的学习中我们将进一步深入学习CSS来对我们的HTML界面进行美化操作:如文字的大小变化、颜色变化、位置变化,以及整个页面的布局操作等。

  HTML文件的初步介绍与初战HTML编写到这里就结束了,感谢阅读!

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

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

相关文章

【C++】位图 + 布隆过滤器

目录 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. 布隆过滤器3.4. 总结 1. 位图 1.1. 概念 位图是一种用于高效地存储和操作集合的数据结构。它的基本思想是使用一个二…

高并发内存池(四)Page Cache的框架及内存申请实现

目录 一、Page Cache的框架梳理 二、Page Cache的实现 2.1PageCache.h 2.2VirtualAlloc 2.3std::unordered_map _idSpanMap,> 2.4Page Cache.cpp 一、Page Cache的框架梳理 申请内存&#xff1a; 1. 当central cache向page cache申请内存时&#xff0c;page cache先检…

PHP $_GET 变量

PHP 中的 $_GET 变量是一个超全局变量&#xff0c;用于收集表单数据&#xff08;当 method"get" 时&#xff09;或 URL 参数。当用户通过点击链接访问 PHP 页面时&#xff0c;该链接的查询字符串&#xff08;query string&#xff09;中的参数会被解析&#xff0c;并…

Intel 13/14代不稳定 微星率先发声:密切监视、8月中旬更新微码

不久前&#xff0c;Intel针对14/14代酷睿i9 K系列不稳定的问题发布了最新声明&#xff0c;确认问题源于微代码算法缺陷与电压过高&#xff0c;并承诺将在8月中旬完成新版BIOS的验证&#xff0c;随后发放。现在&#xff0c;微星在各家主板厂商中第一个站出来&#xff0c;表明了态…

IntelliJ IDEA使用Maven导入项目依赖引入报错解决

在使用IntelliJ IDEA工具构建Maven项目时&#xff0c;可能会遇到导入依赖后出现红色波浪线的情况。这种情况通常表示找不到相应的依赖或者依赖冲突。以下是解决这些问题的一些常用方法&#xff1a; 1. 检查 Maven 设置 IDEA 设置: 在 IntelliJ IDEA 中打开 File—>Setting…

Flutter 开发环境搭建教程

配置 Flutter 开发环境主要包括安装 Flutter SDK、设置 IDE&#xff08;如 Android Studio 或 Visual Studio Code&#xff09;、配置 Android 模拟器等。 以下是详细的步骤&#xff1a; 1. 系统要求 确保你的系统满足 Flutter 的最低要求&#xff1a; Windows、macOS 或 Lin…

Java 使用 POI 导出Excel,实现单元格输入内容提示功能

在使用Apache POI的库生成Excel导入模板的时候&#xff0c;有时候需要对单元格能够输入的内容进行一个提示&#xff0c;该如何实现这个特性呢&#xff1f;下面是一个示例代码&#xff0c;演示如何实现单元格输入内容提示功能。 代码 import org.apache.poi.ss.usermodel.*; im…

Frienda 4 件套幽灵狩猎猫球运动发光猫球 LED 运动激活猫球运动点亮猫狗互动玩具宠物发光迷你跑步健身球

来自 美国亚马逊&#xff1a;商品评论: Frienda 4 件套幽灵狩猎猫球运动发光猫球 LED 运动激活猫球运动点亮猫狗互动玩具宠物发光迷你跑步健身球玩具(亮色) (amazon.com) Kim 1.0 颗星&#xff0c;最多 5 颗星 Battery does not last/ cant replace 2024年5月29日 在美国审核…

MongoDB 管理工具

MongoDB 管理工具 MongoDB 是一个流行的 NoSQL 数据库,它提供了灵活的数据模型、高吞吐量和自动伸缩等特性。为了更有效地管理和操作 MongoDB 数据库,有许多管理和开发工具可供选择。本文将介绍一些流行的 MongoDB 管理工具,包括它们的特性、优势和使用场景。 1. MongoDB …

lora微调Qwen模型全流程

LoRA 微调 Qwen 模型的技术原理概述 LoRA&#xff08;Low-Rank Adaptation&#xff09;是一种用于大模型高效微调的方法。通过对模型参数进行低秩分解和特定层的微调&#xff0c;LoRA 能在保持模型性能的前提下显著减少训练所需的参数量和计算资源。接下来是对 LoRA 微调 Qwen…

鸿蒙开发—黑马云音乐之首页导航栏

目录 1.底部导航 2.点击导航栏的时候点亮 3.新建tabbar对应的页面并加载 1.底部导航 Entry Component struct Index {State message: string 首页BuildertabBuilder(text:string,img:Resource) {// 未选中状态样式处理Column({ space: 5 }) {Image(img).width(25).border…

[C++进阶]抽象类

一、抽象类 1.抽象类的概念 在虚函数的后面写上 0 &#xff0c;则这个函数为纯虚函数。包含纯虚函数的类叫做抽象类&#xff08;也叫接口类&#xff09;&#xff0c;抽象类不能实例化出对象。派生类继承后也不能实例化出对象&#xff0c;只有重写纯虚函数&#xff0c;派生类才…

微信小程序-粘性组件

再次完善&#xff1a;将区域设置为粘性时&#xff0c;会脱离原有文档&#xff0c;使得出现下方页面突然遮盖一部分&#xff0c;不平滑 解决&#xff1a;给出一个新的空白区域&#xff0c;宽高与粘性区域一致&#xff0c;wx:if 控制其显示 /****************/ 后续补充&#…

unity3d:TabView,UGUI多标签页组件,TreeView树状展开菜单

概述 1.最外层DataForm为空壳编辑数据用。可以有多个DataForm&#xff0c;例如福利DataForm&#xff0c;抽奖DataForm 2.Menu层为左边栏层&#xff0c;每个DataForm可以使用不同样式的MenuForm预制体 3.DataForm中使用ReorderList&#xff0c;可排列配置 4.有定位功能&#xf…

Clickhouse 生产集群部署(Centos 环境)

文章目录 机器环境配置安装 JDK 8安装 zookeeperClickhouse 集群安装rpm 包离线安装修改全局配置zookeeper配置Shard和Replica设置image.png添加macros配置启动 clickhouse启动 10.82.46.135 clickhouse server启动 10.82.46.163 clickhouse server启动 10.82.46.218 clickhous…

《InheriBT行为树》For Unity

InheriBT: Unity Editor中的行为树编辑框架 行为树&#xff08;Behavior Tree&#xff09;是一种广泛应用于人工智能&#xff08;AI&#xff09;领域的决策模型&#xff0c;特别是在游戏开发中。行为树通过分层结构和节点的组合&#xff0c;实现了复杂行为的简洁表达。然而&am…

CPU350% JVM GC频繁并GC不掉EXCEL导出

背景&#xff1a; 有个Excel导出的需求&#xff0c;测试的时候&#xff0c;只要连续导出大量的数据就会导致FAT机器反请求反应迟钝&#xff0c;甚至卡死&#xff0c;无法恢复。 排查&#xff1a; 1 跳板机跳到机器上&#xff0c;查看 项目 ipd 执行ps -ef | grep 项目名称.j…

23.rabbitmq幂等性

介绍 用户对同一操作发起的一次请求或多次请求的结果是一致的。 方式用户重复提交。 也就是消息被重复消费了。 消费者在消费mq中的消息时&#xff0c;mq已经把消息发送给消费者&#xff0c;消费者在给mq返回ack时网络中断&#xff0c;故mq未收到确认消息&#xff0c;该条消…

Python面试题:结合Python技术,如何使用SQLAlchemy进行数据库操作

使用SQLAlchemy进行数据库操作是一种非常灵活和强大的方式&#xff0c;它支持多种关系型数据库&#xff0c;并提供了ORM&#xff08;对象关系映射&#xff09;和核心&#xff08;SQL Expression Language&#xff09;两种使用方法。以下是详细的步骤和示例&#xff0c;展示如何…