20.1 HTML 介绍

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.mzph.cn/news/14900.shtml

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

相关文章

C++ 哈希的应用【布隆过滤器】

✨个人主页&#xff1a; 北 海 &#x1f389;所属专栏&#xff1a; C修行之路 &#x1f383;操作环境&#xff1a; Visual Studio 2022 版本 17.6.5 文章目录 &#x1f307;前言&#x1f3d9;️正文1、字符串比较2、布隆过滤器的概念3、布隆过滤器的实现3.1、基本结构3.2、插入…

一、Postfix[安装与配置、smtp认证、Python发送邮件以及防垃圾邮件方法、使用腾讯云邮件服务]

Debian 11 一、安装 apt install postfix 二、配置 1.dns配置 解释&#xff1a;搭建真实的邮件服务器需要在DNS提供商那里配置下面的dns 配置A记录mail.www.com-1.x.x.x配置MX记录www.com-mail.www.com 解释&#xff1a;按照上面的配置通常邮件格式就是adminwww.com其通过…

Python 教程之标准库概览

概要 Python 标准库非常庞大&#xff0c;所提供的组件涉及范围十分广泛&#xff0c;使用标准库我们可以让您轻松地完成各种任务。 以下是一些 Python3 标准库中的模块&#xff1a; 「os 模块」 os 模块提供了许多与操作系统交互的函数&#xff0c;例如创建、移动和删除文件和…

C#,中国福利彩票《刮刮乐》的数学算法(02)——时来运转

1 中国福利彩票 中国福利彩票始于1987年7月27日&#xff0c;以“团结各界热心社会福利事业的人士&#xff0c;发扬社会主义人道主义精神&#xff0c;筹集社会福利资金&#xff0c;兴办残疾人、老年人、孤儿福利事业和帮助有困难的人”、即“扶老、助残、救孤、济困”为宗旨。随…

【C++进阶:哈希--unordered系列的容器及封装】

本课涉及到的所有代码都见以下链接&#xff0c;欢迎参考指正&#xff01; practice: 课程代码练习 - Gitee.comhttps://gitee.com/ace-zhe/practice/tree/master/Hash unordered系列关联式容器 在C98中&#xff0c;STL提供了底层为红黑树结构的一系列关联式容器&#xff0c;在…

拓扑排序详解(带有C++模板)

目录 介绍&#xff1a; 实现原理&#xff1a; 简答来说&#xff1a; 例子 模板&#xff08;C&#xff09; 介绍&#xff1a; 拓扑排序&#xff08;Topological Sorting&#xff09;是一种针对有向无环图&#xff08;DAG&#xff09;的节点进行排序的算法。DAG是一个图&…

PHP数据库

PHP MySQL 连接数据库 MySQL 简介MySQL Create 免费的 MySQL 数据库通常是通过 PHP 来使用的。 连接到一个 MySQL 数据库 在您能够访问并处理数据库中的数据之前&#xff0c;您必须创建到达数据库的连接。 在 PHP 中&#xff0c;这个任务通过 mysql_connect() 函数完成。 …

Linux环境安装MySQL(详细教程)

1、下载MySQL MySQL官网&#xff1a;MySQLhttps://www.mysql.com/ 下载社区版&#xff08;免费&#xff0c;但不提供技术支持&#xff09; 简单说明一下rpm和tar包的区别&#xff1a; tar 只是一种压缩文件格式&#xff0c;所以&#xff0c;它只是把文件压缩打包 rpm&#xf…

【字节跳动青训营】后端笔记整理-3 | Go语言工程实践之测试

**本文由博主本人整理自第六届字节跳动青训营&#xff08;后端组&#xff09;&#xff0c;首发于稀土掘金&#xff1a;&#x1f517;Go语言工程实践之测试 | 青训营 目录 一、概述 1、回归测试 2、集成测试 3、单元测试 二、单元测试 1、流程 2、规则 3、单元测试的例…

我的第一个flutter项目(Android Webview)

前言&#xff1a;flutter开发环境搭建Flutter的开发环境搭建-图解_☆七年的博客-CSDN博客 第一个flutter简单项目&#xff0c;内容是一个主界面&#xff0c;其中&#xff1a; 1.内容点击数字自增 2.跳转一个空页&#xff0c; 3.跳转一个WebView界面 其中涉及添加主键&#xf…

QT: 用定时器完成闹钟的实现

闹钟项目&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimerEvent> #include <QTime> #include <QDebug> #include <QTextToSpeech> #include <QMessageBox> #include <QTimer>QT_BEGIN…

Quartz项目搭建与任务执行源码分析

数据库准备 准备一个MySQL数据库&#xff0c;版本为8.0&#xff0c;然后创建一个库&#xff0c;并从quartz官方的版本包中找到名称为tables_mysql_innodb.sql的脚本执行进去&#xff08;脚本内容文后也有提供&#xff09;。 项目依赖说明 创建一个Maven项目&#xff0c;引入…

gitignore文件使用方法(gitignore教程)(git status --ignored)(git check-ignore -v <file>)

文章目录 Gitignore文件使用描述Gitignore基本语法1. 基本语法★★★★★2. 配置方法 匹配示例示例1示例2示例3 其他命令git status --ignored&#xff08;用于显示被Git忽略的文件和文件夹的状态&#xff09;git check-ignore -v <file>&#xff08;用于检查指定文件是否…

一个灵活、现代的Android应用架构

一个灵活、现代的Android应用架构 学习Android架构的原则&#xff1a;学习原则&#xff0c;不要盲目遵循规则。 本文旨在通过示例演示实际应用&#xff1a;通过示范Android架构来进行教学。最重要的是&#xff0c;这意味着展示出如何做出各种架构决策。在某些情况下&#xff0…

网络层IP协议的基本原理 数据链路层ARP协议 域名解析以及一些重要技术

目录 1 网络层IP协议协议头格式网段划分DHCPCIDR&#xff1a;基于子网掩码的划分方式特殊的IP号IP地址的数量限制私有IP地址和公网IP地址路由路由表 2 数据链路层 — 局域网的转发问题以太网认识以太网以太网帧格式局域网通信原理 MTUMTU对IP协议的影响MTU对UDP协议的影响MTU对…

人类文明进入下个纪元奇点:UFO听证会-恒温超导发现-GPT大模型

今年以来&#xff0c;科技领域出圈的事件频繁发生&#xff0c;每一个事件都意味着一个领域的重大突破的可能。这些事件是UFO听证会、恒温超导LK99的论文、GPT类大模型的广泛应用&#xff0c;我常将这些事件串在一起思考&#xff0c;细思极恐&#xff0c;一种”火鸡与农场主“的…

C语言手撕顺序表

目录 一、概念 1、静态顺序表&#xff1a;使用定长数组存储元素。 2、动态顺序表&#xff1a;使用动态开辟的数组存储 二、接口实现 1、对顺序表的初始化 2、对数据的销毁 3、对数据的打印 4、检查是否需要扩容 5、尾插 6、头插 7、尾删 8、头删 9、在pos位置插入x …

使用ComPDFKit PDF SDK 构建iOS PDF阅读器

在当今以移动为先的世界中&#xff0c;为企业和开发人员创建一个iOS应用程序是必不可少的。随着对PDF文档处理需求的增加&#xff0c;使用ComPDFKit这个强大的PDF软件开发工具包&#xff08;SDK&#xff09;来构建iOS PDF阅读器和编辑器可以让最终用户轻松查看和编辑PDF文档。 …

IDEA 模块不加载依旧是灰色 没有变成小蓝色的方块

Settings > Build, Execution, Deployment > Build Tools > Maven > Ignored Files下降对应的模块勾选掉 但通常在Maven的配置中&#xff0c;您会找到一个名为“ignoredFiles”的列表&#xff0c;其中包含被忽略的文件和目录。您可以通过取消选中所需的文件或目录…

本地非文字资源无法加载

目录 方法A.静态/动态绑定路径 方法B.require导入&#xff08;运行时加载&#xff09; 方法C.import导入&#xff08;x&#xff09;&#xff08;编译时加载&#xff09; 方法D.ref直接操作元素赋值&#xff08;x&#xff09; 相关知识 import和requir区别 模板路径&#…