HTML 基础概念:什么是 HTML ? HTML 的构成 与 HTML 基本文档结构

news2024/11/5 13:55:38

文章目录

    • 什么是 HTML ?
    • HTML 的构成 ?
      • 什么是 HTML 元素?
      • HTML 元素的组成部分
      • HTML 元素的特点
    • HTML 基本文档结构
      • 如何打开新建的 HTML 文件
      • 代码查看

在这里插入图片描述

什么是 HTML ?

HTML(超文本标记语言,HyperText Markup Language)是一种用来告知浏览器如何组织页面的标记语言。它定义了网页的内容结构,通过不同的标签,HTML 可以定义网页内容的结构和层次,包括文本、图片、视频、表格等。每个标签都有特定的语义和功能,能够帮助浏览器正确显示网页内容。

HTML 是上个世纪90年代由欧洲核子研究中心的物理学家 蒂姆·伯纳斯-李(Tim Berners-Lee)发明。它的最大特点就是支持超链接,点击链接就可以跳转到其他网页,从而构成了整个互联网。

可以说,HTML是所有网页的骨架,并且与 CSSJavaScript 组合使用,能够实现网页的样式设计和交互功能。

在这里插入图片描述

1999年,HTML 4.01 版发布,成为广泛接受的 HTML 标准。2014年,HTML 5 发布,这是目前正在使用的版本。

浏览器的网页开发,涉及三种技术:HTML、CSS 和 JavaScript。

HTML 语言定义网页的结构和内容,CSS 样式表定义网页的样式,JavaScript 语言定义网页与用户的互动行为。

HTML 语言是网页开发的基础,相当于网页的“骨架”,CSS 和 JavaScript 都是基于 HTML 才能生效,但即使没有这两者,HTML 本身也能使用,可以完成基本的内容展示。

HTML 的构成 ?

HTML 由一系列的元素组成,这些元素可以用来包围或标记不同部分的内容,使其以某种方式呈现或者工作。

元素是网页的一部分。在 XML 和 HTML 中,一个元素可以包含一个数据项,或是一块文本,或是一张照片,亦或是什么也不包含。一个典型的元素包括一个具有一些属性的开始标签,中间的文本内容和一个结束标签。
在这里插入图片描述

HTML 的关键特性:

  • 超文本(HyperText)意味着它可以在不同页面之间建立链接。
  • 标记语言(Markup Language)意味着它使用标签来标记文本,定义网页的结构。

什么是 HTML 元素?

元素是 HTML 的核心单位,它通常由一个开始标签和一个结束标签构成,中间包含内容或其他嵌套的元素。每个元素定义了网页的一部分结构或功能。例如:

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

在这个例子中,<p> 是段落标签,表示一个段落元素。标签之间的文本就是段落的内容。HTML 通过这样的元素来组织网页内容的层次和结构。

HTML 元素的组成部分

  1. 开始标签:标记元素的开始。例如,<p> 表示段落的开始。
  2. 内容:位于标签之间的文本或其他嵌套的HTML元素。例如,这是一个段落是段落的内容。
  3. 结束标签:标记元素的结束。例如,</p> 表示段落的结束。

一些元素(如 <img><br> )是自闭合标签,它们没有结束标签,仅包含属性,不需要包裹内容。例如:

<img src="image.jpg" alt="图片描述">

HTML 元素的特点

  • 层次性:HTML 元素可以相互嵌套,形成层次结构。浏览器会解析这些嵌套关系,以正确呈现内容。
  • 语义化:HTML 提供了语义化标签,使页面结构和内容更具可读性和可访问性。例如,<header><footer>等标签不仅用于布局,还传达了内容的意义。

HTML 元素使开发者能够灵活地组织内容,为网页的结构和表现提供了完整的基础。通过这些元素,浏览器可以理解并展示网页内容,从而实现更好的用户体验。

HTML 基本文档结构

一个标准的 HTML 文档具有以下基本结构:

<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <!-- 网页的主要内容 -->
  </body>
</html>
  • <!DOCTYPE html>: 声明文档的类型,确保浏览器按照 HTML 规范解析页面内容。
  • <html>: HTML 文档的根元素,所有 HTML 内容都嵌套在其中。
  • <head>: 包含网页的元数据,例如字符编码、页面标题、CSS 样式和脚本的引入等。
  • <meta charset="UTF-8">: 声明文档使用的字符集为 UTF-8,这几乎是所有现代网页的标准。
  • <title>: 定义网页的标题,这个标题将显示在浏览器标签页上。
  • <body>: 包含网页的主要可见内容,如文本、图像、表格和表单等。

在 VS Code 中创建一个新 HTML 文件时(如 01.html),可以利用内置的 Emmet 快捷方式来生成基本结构。只需输入 ! 并按下 Tab 键,即可自动生成如下 HTML 基础模板:

在这里插入图片描述

在这里插入图片描述

如何打开新建的 HTML 文件

  1. 创建 HTML 文件:在代码编辑器(如 VS Code 或者是 Webstorm )中新建一个 HTML 文件,命名为 01.html,并将 HTML 基础结构输入其中。

  2. 保存文件:保存文件后,确保文件扩展名为 .html,以便浏览器能够识别它是网页文件。

  3. 在浏览器中打开文件

    • 方法 1:直接双击 01.html 文件,它会在默认浏览器中打开。
    • 方法 2:在文件上右键选择“用浏览器打开”或“Open with”选项,然后选择所需的浏览器。
    • 方法 3 ( VS Code 内置功能): 在 VS Code 中安装 “Live Server” 扩展。安装完成后,右键点击文件并选择 “Open with Live Server”,即可在本地服务器上实时查看文件,并且每次保存都会自动刷新页面。
    • 方法 4 ( Webstorm 内置功能): 在 Webstorm 中,html 文件的右上角会出现 “内置预览”、“Chrome”等小图标,点击即可打开,或者是右键菜单中选择 “运行 01.html”,即可在浏览器打开页面。

这样,您可以在浏览器中查看新建的HTML文件并检查内容效果。

代码查看

在浏览器中打开网页,右键选择“查看页面源码”(View Page Source)即可查看HTML文档的完整结构。这对了解网页的结构和调试代码非常有帮助。

在这里插入图片描述

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

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

相关文章

web安全测试渗透案例知识点总结(上)——小白入狱

目录 一、Web安全渗透测试概念详解1. Web安全与渗透测试2. Web安全的主要攻击面与漏洞类型3. 渗透测试的基本流程 二、知识点详细总结1. 常见Web漏洞分析2. 渗透测试常用工具及其功能 三、具体案例教程案例1&#xff1a;SQL注入漏洞利用教程案例2&#xff1a;跨站脚本&#xff…

基于Qt的独立线程创建与多线程执行实验Demo

一、多线程与线程池的应用目的[1][4] &#xff08;一&#xff09;多线程 一个进程内多个线程并发执行的情况就叫多线程&#xff0c;每一个线程是一个独立的执行流。多线程是一种编程模型&#xff0c;它与处理器无关&#xff0c;与设计机制有关。 需要多线程的原因包括&#xf…

基于FPGA的图像双线性插值算法verilog实现,包括tb测试文件和MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 这里实现的是256*256双线性插值到512*512的系统模块 局部放大&#xff1a; 将数据导入到matlab&#xff0c;得到插值效果…

Spring1(初始Spring 解耦实现 SpringIOC SpringDI Spring常见面试题)

Spring1 创建项目集成maven创建一个Maven项目实现&#xff1a; 初识SpringSpring简介Spring的发展历史Spring之父体系结构生态系统官方文档解耦实现JDBCSpringBoot整合MyBatis和lombok&#xff0c;开启驼峰映射三层思想 SpringIOC实现 SpringDIset注入全部代码&#xff1a;实现…

纯享受 : 力扣:234 回文链表

BLG牛逼 – 奖励自己一道题 描述&#xff1a; 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为 回文链表 。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例&#xff1a; 何解&#xff1f; 1、所谓 回文 就是正读反读都一样&…

开源项目-投票管理系统

哈喽,大家好,今天主要给大家带来一个开源项目-投票管理系统 投票管理系统主要有首页,发起投票,管理投票,参与投票,查看投票等功能 首页 为用户提供了一键导航到各个功能模块的便捷途径。 新增投票 用户可以在此轻松创建新的投票活动,设置投票主题、选项等信息。 管理…

系统架构图设计(行业领域架构)

物联网 感知层&#xff1a;主要功能是感知和收集信息。感知层通过各种传感器、RFID标签等设备来识别物体、采集信息&#xff0c;并对这些信息进行初步处理。这一层的作用是实现对物理世界的感知和初步处理&#xff0c;为上层提供数据基础网络层&#xff1a;网络层负责处理和传输…

APP获取用户的三大法则

APP内容&#xff0c;提升APP吸引力和用户留存率 A. 用户研究深化 1. **深入用户行为分析**&#xff1a; - 用户使用路径分析 - 用户行为模式识别 - 用户流失点分析 2. **定性研究与定量研究结合**&#xff1a; - 进行深度访谈和焦点小组讨论 - 利用数据分析用…

QT——串口调试助手

目录 1.QSerialPort类包含了很多有关串口的API 2.实现串口的打开 2.1 方法一&#xff1a;通过函数实现 2.2 方法二&#xff1a;在ui界面右下角实现 3. 实现定时发送 3.1类的私有成员中添加定时器QTimer timer并去构造函数中初始化它 3.2帮助文档中有QTimer类相关的说明 …

全自动一键批量创建站群网站插件 | Z-BlogPHP 堆词起站工具

在当今竞争激烈的数字营销世界&#xff0c;如何快速提升网站曝光率和流量&#xff1f;答案就是智能站群系统。 本文将结合实际效果&#xff0c;介绍一款功能强大的站群系统&#xff0c;重点讲述其堆词功能、泛目录管理、一键批量创建、内容转码、自定义标签和GPT内容生成与发布…

计算机毕业设计Spark+大模型知识图谱中药推荐系统 中药数据分析可视化大屏 中药爬虫 机器学习 中药预测系统 中药情感分析 大数据毕业设计

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

Linux云计算 |【第五阶段】CLOUD-DAY7

主要内容&#xff1a; 在kubernetes平台上理解掌握各种控制器的用法&#xff1a;掌握kubectl管理命令、掌握POD原理、掌握集群调度的规则、熟悉控制器资源文件&#xff1b; 一、kubectl 常用命令 Kubectl是用于控制Kubernetes集群的命令行工具&#xff1b; - 格式&#xff1…

json-server的使用(根据json数据一键生成接口)

一.使用目的 在前端开发初期&#xff0c;后端 API 可能还未完成&#xff0c;json-server 可以快速创建模拟的 RESTful API&#xff0c;帮助前端开发者进行开发和测试。 二.安装 npm install json-server //局部安装npm i json-server -g //全局安装 三.使用教程 1.准备一…

在VS中安装chatGPT

2、在VSCode中打开插件窗口 3、输入ChatGPT 4、这里有个ChatGPT中文版&#xff0c;就它了 5、安装 6、这时候侧边栏多了一个chatGPT分页图标&#xff0c;点击它 7、打个招呼 8、好像不行 9、看一下细节描述 10、根据要求按下按下快捷键 Ctrl Shift P 11、切换成国内模式 12、…

# linux从入门到精通-从基础学起,逐步提升,探索linux奥秘(十九)--mysql数据库基本操作

linux从入门到精通-从基础学起&#xff0c;逐步提升&#xff0c;探索linux奥秘&#xff08;十九&#xff09;–mysql数据库基本操作 一、MySQL的基本操作&#xff08;1&#xff09;&#xff08;难点&#xff09; 1、名词介绍 以Excel文件举例&#xff1a; 数据库&#xff1a…

冒泡排序,快速排序讲义

冒泡排序 基本原理&#xff1a;对存放原始数据的数组&#xff0c;按从前往后的方向进行多次扫描&#xff0c;每次扫描称为一趟。当发现相邻的两个数据次序和排序要求的大小次序不符合的时候&#xff0c;即将这两个数据进行互换。如果从小到大排序&#xff0c;这时&#xff0c;…

智能语音助手:开启智能交互的新时代

随着人工智能和自然语言处理技术的进步&#xff0c;智能语音助手已经逐渐成为日常生活中的一部分。无论是手机上的虚拟助手、智能音箱&#xff0c;还是车载导航和智能家居控制系统&#xff0c;智能语音助手的应用越来越广泛&#xff0c;为用户提供了高效便捷的交互体验。通过语…

vue data变量之间相互赋值或进行数据联动

摘要&#xff1a; 使用vue时开发会用到data中是数据是相互驱动&#xff0c;经常会想到watch,computed&#xff0c;总结一下&#xff01; 直接赋值&#xff1a; 在 data 函数中定义的变量可以直接在方法中进行赋值。 export default {data() {return {a: 1,b: 2};},methods: {u…

uniapp ,微信小程序,滚动(下滑,上拉)到底部加载下一页内容

前言 小程序的内容基本都是滑动到底部加载下一页&#xff0c;这个一般都没有什么好用的组件来用&#xff0c;我看vant和uniapp的插件里最多只有个分页&#xff0c;没有滚动到底部加载下一页。再次做个记录。 效果预览 下滑到底部若是有下一页&#xff0c;则会自动加载下一页&…

【数据分享】2024年我国省市县三级的休闲娱乐设施数量(免费获取/18类设施/Excel/Shp格式)

KTV、棋牌室、音乐厅等休闲服务设施的配置情况是一个城市公共基础设施完善程度的重要体现&#xff0c;一个城市休闲服务设施种类越丰富&#xff0c;数量越多&#xff0c;通常能表示这个城市的公共服务水平越高&#xff01; 本次我们为大家带来的是我国各省份、各地级市、各区县…