20.1 HTML 介绍

news2024/9/30 3:32:33

image-20230726034206921

1. W3C组织

万维网联盟(World Wide Web Consortium, W3C): 是一个国际性的标准化组织, 致力于开发和推广Web标准.

W3C的使命是通过制定和推广Web技术标准, 促进Web的长期发展和互操作性, 它由许多组织和个人组成, 
包括浏览器制造商, 软件开发商, 网络服务提供商, 学术机构和个人开发者.

W3C的工作主要集中在以下几个方面:
* 1. 制定Web标准: W3C负责制定和推广各种Web标准, 如HTML, CSS, XML, DOM等.
     这些标准确保不同的Web技术在不同的平台和设备上能够一致地工作.

* 2. 技术研发和创新: W3C的团队和社区进行技术研究和开发, 探索新的Web技术和功能, 以推动Web的不断发展和创新.

* 3. 领导和协调: W3C作为一个中立的组织, 协调各方的利益和需求, 引导Web技术的发展方向, 促进合作和共识的达成.

* 4. 社区建设和教育: W3C提供各种资源和活动, 支持开发者, 设计师和利益相关者参与到Web标准的制定和实施中, 
     提供教育培训和指南, 以促进Web技术的普及和正确使用.

W3C的工作对于确保Web的互操作性, 可访问性和可持续发展至关重要.
通过遵循W3C标准, 开发者能够创建跨平台, 跨设备的Web应用程序, 并提供更好的用户体验.

2. HTML

2.1 HTML简介

HTML(HyperText Markup Language)是一种用于描述网页结构的标记语言.
它使用一系列标记标签来定义和组织网页中的各个元素, 如标题m 段落, 链接, 图像等.
通过在标记中使用不同的属性和值, 可以改变元素的样式, 行为和布局.

2.2 HTML版本

随着时间的推移, HTML经历了多个版本的演进, 每个版本都引入了新的功能和改进.

以下是一些常见的HTML版本及其主要特点:

* 1. HTML 2.0: 1995年发布, 是第一个广泛使用的HTML版本, 引入了基本的网页结构标记和链接功能.

* 2. HTML 3.2: 1997年发布, 引入了一些新的标记和功能, 如表格, 背景图片, 文字颜色和字体样式.

* 3. HTML 4.01: 1999年发布, 是一种重要的HTML版本, 引入了更多的样式控制选项, 表单验证和多媒体支持.

* 4. XHTML 1.0: 2000年发布, 基于XML的HTML版本, 强调文档结构和语法严格性, 更符合XML规范.

* 5. HTML5: 2014年推出, 是目前最新的HTML标准(现在学习的版本).
     HTML5引入了许多新的元素和API, 包括音频和视频播放, 画布绘图, 地理位置和本地存储等功能, 可以更好地支持富媒体和交互式内容.
     HTML5还提供了改进的语义化标记, 使得开发人员能够更清晰地描述网页结构, 这对于搜索引擎优化和可访问性很重要.

总之, 每个HTML版本都带来了新的功能和改进, HTML5是目前最广泛使用和推荐的版本, 它为网页开发者提供了更多的可能性和更丰富的功能.

更详细的介绍: https://blog.csdn.net/qq_46137324/article/details/120382079 .
HTML: 语言是分非常宽松, 容错性强.
XHTML: 更为严格, 要求标签必须小写, 必须严格闭合···,  因为太过严格被抛弃.
HTML5: 是HTML的基础上添加了许多的新特性, 并兼容XHTML.
例如, 'hr'分割线标签 , 'XHTML'中写为'<hr />',  在HTML中写完'<hr>', HTML5兼容XHTML和HTML所以写不写'/'都可以.

2.3 HTML文档

HTML文档: 是描述网页内容和结构的文件, 它由HTML标签和纯文本构成(HTML标签 + 纯文本 = HTML文档).
HTML标签用于标识网页中的各种元素和结构, 而纯文本包含了实际的内容, 如文字, 图片, 链接等.

浏览器是用来读取和解析HTML文档的工具, 它根据HTML文档中的标签和内容进行解析, 
然后将其渲染成可视化的网页形式, 在用户的浏览器窗口中显示出来.

一般情况下, HTML文档的后缀为.html, 表示它是一个HTML格式的文档.
对于一些早期的操作系统, 如DOS, 文件名的长度和扩展名的长度都有一些限制, 
因此在DOS操作系统上, HTML文档的后缀名通常是.htm限制为3个字符的扩展名.
无论是使用.html还是.htm作为文件扩展名, 实际上都可以正常地表示HTML文档, 并且现代的操作系统和浏览器都能正确地识别和解析这些文件.

2.4 HTML标签

标签是对文本的渲染, 描述和语义的一种方式.
HTML标签用于描述文本的结构和含义, 并告诉浏览器如何处理和显示文本内容.
标签本身并不会直接在网页中显示出来, 而是影响其周围文本的呈现效果.

每个HTML标签由以下几部分组成:

* 1. 开始标签(Opening Tag): 由尖括号(<)和标签名组成, 用于标识元素的开始.


* 2. 元素内容(Element Content): 位于开始标签和结束标签之间的部分, 可以是文本, 其他HTML元素或二者的组合.
     元素内容是标签所表示的实际内容. 

* 3. 结束标签(Closing Tag): 由尖括号和斜杠(</)以及标签名组成, 用于标识元素的结束. 

* 4. 自闭合标签(Self-closing Tag): 有些HTML元素不需要元素内容, 因此可以使用自闭合标签来表示该元素.
     自闭合标签只有一个尖括号和斜杠, 自闭合标签通常没有结束标签。

* 5. 元素属性(Attributes): HTML标签可以带有属性, 用于提供关于元素的额外信息.
     属性通常以键值对的形式出现, 写在开始标签中. 
     
一个完整的HTML标签的组成部分: <标签名 属性1="值1" 属性2="值2">元素内容</标签名>
自闭合标签: <标签名 属性1="值1" 属性2="值2" />

其中: 
- '<': 是尖括号的开始.
- '标签名': 是HTML元素的名称, 用于指定元素的类型.
- 属性1="值1" 属性2="值2": 是可选的属性列表, 用于提供额外的元素信息.
- '>': 是开始标签的结束.
- '元素内容': 是HTML元素包含的文本或其他嵌套的HTML元素.
- '</': 是结束标签的开始.
- '>': 是结束标签的结束.

不是所有HTML标签都需要开始标签, 结束标签和元素内容.
有些标签只需要开始标签和属性, 而且有些标签甚至只需要一个自闭合标签.
每个标签都有其特定的用途和规则, 因此在编写HTML代码时需要仔细理解每个标签的含义和用法.

HTML标签对大小写不敏感, 即使用大写或小写编写标签均可被浏览器正确识别和解析.
然而, 个人和业界通常更倾向于使用小写字母来编写HTML标签, 这是一种良好的编码习惯和约定俗成的规范.

2.5 HTML文档的基本结构

HTML文档的基本结构包括: <!DOCTYPE> 声明, <html>元素, <head>元素和<body>元素.
<!DOCTYPE html>
<html lang="zh">
	<head>
        <meta charset="UTF-8">
    	<title>HTML练习</title>
	</head>
	<body>
	</body>
</html>
对这个结构进行逐步解释:

* 1. <!DOCTYPE html>: 这是一个文档类型声明(DTD文档声明), 指示浏览器使用HTML5解析文档.
     在过去的HTML版本中, DTD声明在文档顶部是常见的做法, 以确保浏览器正确解析文档.
     然而, 自HTML5起, DTD声明已经不再是必需的, 因为HTML5采用了更松散的解析规则, 使得浏览器可以更容易地处理不含DTD声明的文档.

* 2. <html>: 这个元素是整个HTML文档的根元素, 其中包含了整个网页的内容和结构.
     lang属性: 是用来指定网页中所使用的语言的.
     这个属性对搜索引擎和浏览器来说很重要, 因为它们可以根据该属性来正确显示和处理网页内容.
     当你希望指定网页为英文时, 可以使用: <html lang="en"> .
     当你希望指定网页为中文时, 可以使用: <html lang="zh"> .
     通过指定正确的语言代码, 搜索引擎可以更好地理解和展示您的网页内容, 并且在搜索结果中根据用户语言偏好进行匹配.
     需要注意的是, lang属性只是一种提示, 浏览器并不依赖这个属性来决定如何显示网页内容, 但它对于搜索引擎来说很有用.

* 3. <head>: 这个元素包含了文档的元数据, 如页面标题, 字符编码等, 这些信息不会在页面上直接显示.
     写在head标签内部的内容是给浏览器看的, 一般除标题外不会展示给用户.

* 4. <meta charset="UTF-8">: 这个元素指定了文档使用的字符编码, 这里设置为UTF-8, 它支持多种语言字符.
     注意: 在HTML中指定的字符集必须和保存这个文件的字符集是一致的,否则还是会出现乱码.
     
* 5. <title>: 这个元素设置文档的标题, 将显示在浏览器的标题栏或标签页上.

* 6. <body>: 这个元素包含了文档的可见内容, 如文本, 图像, 链接等.
    <body>元素内, 可以编写要显示在页面上的各种HTML标签和内容, 以构建网页的结构和布局.

这是一个基本的HTML文档结构,可以在其中添加所需的其他HTML标签和内容, 以满足特定页面的需求.

3. PyCharm中编写HTML代码

只要是一个文本编辑器就可以编写HTML代码, 只不过ide工具提供了丰富的界面, 和众多的工具, 能让我们提高开发效率.
HTML代码可以全部都写在一行, 这样不便于便于开发, 建议使用缩进和添加注释的方式对代码进行划分.

3.1 创建html文件

在PyCharm中创建一个新的HTML项目时, 确没有直接选择HTML项目类型的选项.
不过, 可以按照以下步骤来创建一个新的HTML文件并将其添加到Python项目中:

* 1. 打开PyCharm并创建一个新的Python项目.
     在欢迎界面点击"Create new project", 或者在菜单栏中选择"File" --> "New Project".

* 2. 在弹出的对话框中, 选择项目的保存路径并设置项目名称. 然后点击'Create'按钮.

2023-07-25_00010

* 3. 在项目结构树中, 找到你想要添加HTML文件的目录. 这可以是项目的根目录或其他自定义的目录.

* 4. 右键点击目标目录, 并选择'New' --> 'HTML File'. 给文件取一个名字并点击"OK".

image-20230725222743488

* 5. 现在, 你将会看到一个含有基本结构的HTML文件, 进入文件后就可以开始编写你的HTML代码了.

image-20230726033436089

* 6. 运行html.

2023-07-25_00016

* 7. 编写完你的HTML代码后, 你可以保存文件.

3.2 模板设置

新建html文件时默认带有html的基本结构, 这是使用了pycharm提供的模板文件.
设置方式: File(文件) --> Settings(设置) --> Editor(编辑) --> File and Code Templates(文件和代码模板) --> HTML File.

image-20230725224924382

3.4 自动换行

设置方式: File(文件) --> Settings(设置) --> Editor(编辑) --> General(常规) --> Soft Wraps(软包装)
--> 在Soft-wrap these files: 中添加' *.html;'  --> OK.

2023-07-25_00018

3.3 常用快捷键

ctrl + alt + insert: 弹出新建文档.
ctrl + d: 快速复制光标所在行.
ctrl + y: 快速删除光标所在行.
ctrl + z: 上一步操作.
ctrl + shift + z: 下一步操作.
Home: 光标移动到当前行的起始位.
End: 关标移动到当前行的末尾.
多行同时编辑: 按住alt,  鼠标拖动或鼠标单点选中多行, 会出现多个光标, 这时输入信息会出现在多行.
ctrl + alt + t + t: 为文本内容设置标签.
ctrl + shift + 方向上下键: 移动选中行.
ctrl + - 折叠代码.
ctrl + + 展开代码.
ctrl + shift + -  折叠多个代码块.
ctrl + shift +  + 展开多个代码块.
shift + enter: 快速回车新建一行.
ctrl + ?: 注释.
   如果pycharm中html的注释是{# #}而不是<!--  >, 可以在将模板语法关闭, 步骤如下:
   File > Settings > Languages & Frameworks > Template Languages -> Template language 设置为None.
添加快捷键: File(文件) --> Settings(设置) --> settings(设置) --> Keymap(键位) --> ...
  例如, 全选当前所在行: 搜索'select Single line at caret' 

image-20230725233539593

image-20230725233645734

4. HTML注释语法

<!-- 单行注释 -->

<!--
多行注释1
多行注释2
多行注释3
-->
HTML代码非常杂乱, 通常用注释来划分区域, 方便后续的查找.
<!-- 导航条开始 -->

    导航条HTML代码···

<!-- 导航条结束 -->

<!-- 左侧菜单栏开始 -->

    左侧菜单栏HTML代码···

<!-- 左侧菜单栏结束 -->

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

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

相关文章

【爬虫逆向案例】某道翻译js逆向—— sign解密

声明&#xff1a;本文只作学习研究&#xff0c;禁止用于非法用途&#xff0c;否则后果自负&#xff0c;如有侵权&#xff0c;请告知删除&#xff0c;谢谢&#xff01; 【爬虫逆向案例】某道翻译js逆向—— sign解密 1、前言2、步骤3、源码4、号外 1、前言 相信各位小伙伴在写…

【Linux命令200例】chown修改文件或目录的所有者

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;本文已收录于专栏&#xff1a;Linux命令大全。 &#x1f3c6;本专栏我们会通过具体的系统的命令讲解加上鲜活的实操案例对各个命令进行深入…

软件测试测试分类(重点)

目录 按照测试对象划分&#xff08;了解&#xff09; ①界面测试 ②可靠性测试&#xff08;可用性&#xff09; ③容错性测试 容错性和可靠性之间的区别 ④文档测试 ⑤兼容性测试 ⑥易用性测试 ⑦安装、卸载测试 ⑧安全测试 ⑨性能测试 内存泄露测试 按照是否查看…

cocosCreator 之 Button

版本&#xff1a; 3.4.0 参考&#xff1a;Button组件 简介 Button组件主要用于响应用户的点击操作&#xff0c;属性检查器中的示意图&#xff1a; Button组件的主要属性有&#xff1a; Interactable 表示按钮是否可交互&#xff0c;如果未勾选表示禁用Transition表示按钮状态…

EAP设备自动化控制系统在设备数采和控制方面的优势

随着科技的不断进步和工业自动化的发展&#xff0c;EAP&#xff08;Equipment Automation Program&#xff09;设备自动化控制系统在各个行业中扮演着越来越重要的角色。作为连接MES&#xff08;Manufacturing Execution System&#xff09;和设备层的沟通桥梁&#xff0c;EAP系…

周训龙老兵参观广西森林安全紧急救援装备演练

7月21日上午&#xff0c;周训龙老兵参观广西紧急救援促进中心在南宁市青秀山举行森林安全紧急救援装备演练&#xff0c;多功能水罐消防车、无人救援机等先进设备轮番上阵&#xff0c;展示了广西应对突发事件的紧急救援速度和水平。广西壮族自治区应急厅不情愿参此次演练活动。 …

平板用的触控笔什么牌子好?ipad第三方电容笔推荐

随着技术的发展&#xff0c;出现了各种各样的平板电容笔。一支好的电容笔&#xff0c;不但可以极大地提升我们的工作效率&#xff0c;还可以极大地提升我们的学习效果。平替的电容笔&#xff0c;无论是在技术方面&#xff0c;还是在质量方面&#xff0c;都还有很大的提升空间&a…

Visio文件编辑查看工具Visio Viewer for Mac

Visio Viewer for Mac可以打开和查看Visio文件&#xff08;.vsd、.vdx和.vsdm文件&#xff09;。它具有简单易用的用户界面&#xff0c;可以快速加载和显示Visio文件。此外&#xff0c;它还支持导出文件为PDF、PNG、JPEG等格式&#xff0c;方便用户进行文件转换和共享。 Visio…

spring初识

一、如何快速创建一个spring项目&#xff1f; 1. 首先在网页https://start.spring.io/中进行项目配置 2. 将下载下来的安装包进行解压&#xff0c;并在IDEA中打开项目。 3. 在application.propertie文件中进行数据库连接的相关配置 spring.datasource.urljdbc:mysql://127.0.0…

【ICCV2023】 MRN:一种多路复用路由网络的增量多语言文本识别方法

一句话总结 这项工作作为文本识别领域在增量学习设定下的第一次尝试。我们提出了增量多语言文本识别任务&#xff0c;以及该场景独有的挑战&#xff1a;回放不平衡问题&#xff0c;实验结果和可视化表明模型成功解决了这一问题。 相关资源 论文链接&#xff1a; arxiv.org/a…

掌握Python的X篇_8_数字与字符串之间的转换(字符串转数字int;数字转字符串str)

本篇将会介绍如何使用Python中的内置函数将数字型变量与字符串变量进行相互转换。 文章目录 1. 字符串转数字2. 数字转字符串 在上篇中写如下代码会报错 In [12]: num1input("请输入num1") 请输入num1345 In [13]: print(num1*10) 345345345345345345345345345345In…

TOOD Task-aligned One-stage Object Detection 论文学习

1. 解决了什么问题&#xff1f; 目标检测通过多任务学习的方式&#xff0c;协同优化目标的分类和定位。分类任务会学习目标的判别特征&#xff0c;关注于目标的显著性或关键区域&#xff0c;而定位任务则学习准确地定位目标的边界。因为定位和分类的学习机制不同&#xff0c;这…

Java调用ChatGPT(基于SpringBoot和Vue)实现连续对话、流式输出和自定义baseUrl

目录 版本更新说明1. 配置阶段1.1 依赖引入1.2 配置application.yml文件1.3 注解添加 2. 使用2.1 生成回答2.1.1 测试 2.2 生成图片2.2.1 测试 2.3 下载图片2.3.1 测试 2.4 生成流式回答2.4.1 流式回答输出到IDEA控制台2.4.2 流式回答输出到浏览器页面2.4.3 流式回答结合Vue输出…

Python TypeError: unsupported operand type(s) for +: ‘int‘ and ‘str‘

在键入数值进行相加运算时&#xff0c;报了这样一个错误 类型错误&#xff1a;不支持操作类型为整数和字符串 错误分析&#xff1a;sumsuminput() 未被系统识别&#xff0c;导致程序错误 解决方法&#xff1a;给键入的数值定义&#xff0c;声明为整数 sumsumint(input()) 即…

开源大模型LLaMA 2会扮演类似Android的角色么?

在AI大模型没有商业模式&#xff1f;等文章中&#xff0c;我多次表达过这样一个观点&#xff1a;不要把大模型的未来应用方式比喻成公有云&#xff0c;大模型最终会是云端操作系统的核心&#xff08;新通用计算平台&#xff09;&#xff0c;而它的落地形式会很像过去的沃森&…

消息队列(一)-- RabbitMQ入门(3)

延迟队列 延迟队列是用来存放需要在指定时间被处理的元素的队列。队列内部是有序的&#xff0c;最重要的特性就体现在它的延时属性上。 使用场景&#xff1a;订单在十分钟之内未支付则自动取消。 整合SpringBoot 新建一个SpringBoot的Module 添加依赖 <!--RabbitMQ依赖-…

Kafka集群——(区别于Master/Slave架构的的分布式集群)

Kafka角色介绍&#xff1a; 1. Producer:消息生产者&#xff1a; 2. Broker: kafka实例&#xff0c;可以理解为一台kafka服务器&#xff0c;kafka cluster 是由多个broker构成的集群。 3. Topic: 消息主题&#xff0c;理解为消息队列&#xff0c;kafka数据就保存在topic里。…

vue+Element-ui实现树形组件、表格树

需求 要做出如下图所示的 树形表格&#xff0c;也就是数据之间有父子类关系的这种&#xff0c;可以点击展开、收缩 像上图这样的表格树 实现 1.使用树形组件 在学习树形表格之前&#xff0c;肯定得先搞懂普通的树形组件是怎么搞的&#xff0c;然后将其套到表格中就好了&…

基于JavaSE的手机库存管理系统

1、项目背景 基于JavaSE完成如下需求&#xff1a; 功能需求&#xff1a; 1、查询库存量 2、可以修改库存中不同品牌手机的个数 3、退出系统 实现步骤&#xff1a; 1、把List当做库房 2、把手机存放在库房中 3、使用封装的方法区操作仓库中的手机 2、项目知识点 面向对象 集合…

存储过程——case函数、while函数、repeat函数的应用、loop函数

1.case循环 存储过程中&#xff0c;几种循环格式的语法讲解。 create procedure p6(in month int) begindeclare result varchar(10);casewhen month > 1 and month < 3 thenset result : 第一季度;when month > 4 and month < 6 thenset result : 第二季度;whe…