20.1 HTML 介绍

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(超文本标记语言): 是一种用于创建和组织网页内容的标记语言.
它由一系列的元素(标签)和属性组成, 用来描述网页的结构和语义.

通过使用HTML, 可以创建网页的结构, 包括标题, 段落, 列表, 链接等.
此外, 还可以插入图像, 音频, 视频以及其他媒体内容.

HTML是一种标记语言, 与样式和行为相分离. 
想要为网页添加样式和交互性, 可以使用CSS(层叠样式表)和JavaScript等其他技术.

当浏览器读取HTML文档时, 它会解析文档中的标签, 并根据这些标签来呈现页面的内容和布局.
浏览器会根据标签的规则解释页面的元素, 例如标题, 段落, 链接, 图像等, 并以可视化的形式显示在用户界面上.
浏览器会忽略HTML标签本身, 而是将其用于正确地解释和显示页面的内容.

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. 属性(Attributes): 属性提供了关于标签的额外信息, 它们是以键值对的形式出现在开始标签内部.

* 3. 内容(Content): 某些标签可以包含内容, 在开始标签和结束标签之间显示.

* 4. 结束标签(Closing tag): 结束标签是用尖括号(</>)包围的元素名称, 表示一个标签的结束.

* 5. 自闭合标签(Self-closing tag): 某些标签不需要内容. 并且可以在开始标签中立即关闭. 它们以尾部斜杠/结束.

标签的一般形式是: <标签名 属性1="值1" 属性2="值2">内容</标签名> , 其中: 
    - '<': 是尖括号的开始.
    - '标签名': 是HTML元素的名称, 用于指定元素的类型.
    - 属性1="值1" 属性2="值2": 是可选的属性列表, 用于提供额外的元素信息.
    - '>': 是开始标签的结束.
    - '元素内容': 是HTML元素包含的文本或其他嵌套的HTML元素.
    - '</': 是结束标签的开始.
    - '>': 是结束标签的结束.
   例: <a href="http://www.wangan.com">点击这里进入</a> .

或者对于自闭合标签(自封闭标签): <标签名 属性1="值1" 属性2="值2"/> .
例: <input type="text" name="username"> .

实际上, 对于自闭合标签, HTML标准规定不要在结束标签中使用斜杠(/).
在HTML中, 例如 <input> 标签就是一个自闭合标签, 不需要使用斜杠(/)来进行闭合.

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

2023-08-08_00003

2.5 HTMLHTML基本结构

HTML的基本结构由以下几个部分组成:
* 1. 文档类型声明(Document Type Declaration): 用来告诉浏览器当前文档使用的是哪个HTML版本.

* 2. HTML根元素(Root Element): HTML文档的根元素是<html>标签, 它包含了整个HTML文档的内容.

* 3. 头部元素(Head): <head>标签用来定义文档的头部部分, 它包含了一些不会在页面中显示的信息, 比如标题, 链接, 样式表等.

* 4. 主体元素(Body): <body>标签用来定义文档的主体部分, 它包含了页面上显示的实际内容, 比如文本, 图像, 链接等.

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- 页面头部内容 -->
    <meta charset="UTF-8">
    <title>页面标题</title>

</head>
<body>

<!-- 页面主体内容 -->
<h1>内容标题</h1>
<p>内容</p>

</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".

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

* 6. 运行html.

2023-07-25_00016

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

3.2 模板设置

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

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'

4. HTML注释语法

<!-- 单行注释 -->

<!--
多行注释1
多行注释2
多行注释3
-->

HTML代码非常杂乱, 通常用注释来划分区域, 方便后续的查找.

<!-- 导航条开始 -->

    导航条HTML代码···

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

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

    左侧菜单栏HTML代码···

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

1. W3C组织

2. HTML

2.1 HTML简介

2.2 HTML版本

2.3 HTML文档

2.4 HTML标签

2.5 HTMLHTML基本结构

3. PyCharm中编写HTML代码

3.1 创建html文件

3.2 模板设置

3.4 自动换行

3.3 常用快捷键

4. HTML注释语法

猜你喜欢