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代码···

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

线性代数(应用篇):第五章:特征值与特征向量、第六章:二次型

文章目录 第5章 特征值与特征向量、相似矩阵(一) 特征值与特征向量1.定义2.性质3.求解(1)具体型矩阵试根法、多项式带余除法&#xff1a;三阶多项式分解因式 (2)抽象型矩阵 (二) 相似1.矩阵相似(1)定义(2)性质 2.相似对角化(1)定义(2)相似对角化的条件&#xff08;n阶矩阵A可相…

python机器学习(五)逻辑回归、决策边界、代价函数、梯度下降法实现线性和非线性逻辑回归

线性回归所解决的问题是把数据集的特征传入到模型中&#xff0c;预测一个值使得误差最小&#xff0c;预测值无限接近于真实值。比如把房子的其他特征传入到模型中&#xff0c;预测出房价&#xff0c; 房价是一系列连续的数值&#xff0c;线性回归解决的是有监督的学习。有很多场…

【微服务】springboot整合mongodb使用详解

目录 一、mongodb简介 1.1 什么是mongodb 1.2 mongodb特点 二、mongodb中的核心术语 2.1 mogodb与数据库对比 2.2 mongodb中的核心概念 2.3 与关系数据库的差异 2.3.1 半结构化 2.3.2 支持多级嵌套 2.3.3 关系弱化 三、mongodb 技术优势和应用场景 3.1 mongodb 技术…

【C#】并行编程实战:并行编程中的模式

本章将介绍并行编程模式&#xff0c;重点是理解并行代码问题场景并使用并行编程/异步技术解决他们。本章会介绍几种最重要的编程模式。 本教程学习工程&#xff1a;魔术师Dix / HandsOnParallelProgramming GitCode 1、MapReduce 模式 引入 MapReduce 是为了解决处理大数据的问…

睡眠健康数据分析

项目背景 背景描述 本数据集涵盖了与睡眠和日常习惯有关的诸多变量。如性别、年龄、职业、睡眠时间、睡眠质量、身体活动水平、压力水平、BMI类别、血压、心率、每日步数、以及是否有睡眠障碍等细节。 数据集的主要特征&#xff1a; 综合睡眠指标&#xff1a; 探索睡眠持续时…

UNISOT让食品欺诈无处遁形

​​发表时间&#xff1a;2023年5月11日 全世界的消费者开始越来越关注食物的来源和采购方式。这是因为人们渴望吃得更健康、更用心&#xff0c;同时人们也认识到了购买可持续且合乎伦理道德的产品的必要性。 近年来&#xff0c;人们对食品溯源的渴望进一步加速&#xff0c;原…

Python读取csv、Excel文件生成图表

简介 本文章介绍了通过读取 csv 或 Excel 文件内容&#xff0c;将其转换为折线图或柱状图的方法&#xff0c;并写入 html 文件中。 目录 1. 读取CSV文件 1.1. 生成折线图 1.1.1. 简单生成图表 1.1.2. 设置折线图格式 1.2. 生成柱状图 1.2.1. 简单生成图表 1.2.2. 设置柱…

文章详情页 - 评论功能的实现

目录 1. 准备工作 1.1 创建评论表 1.2 创建评论实体类 1.3 创建 mapper 层评论接口和对应的 xml 实现 1.4 准备评论的 service 层 1.5 准备评论的 controller 层 2. 总的初始化详情页 2.1 加载评论列表 2.1.1 实现前端代码 2.1.2 实现后端代码 2.2 查询当前登录用户的…

Docker安装es以及ik分词器

1、拉取镜像 docker pull elasticsearch:7.10.12、下载对应版本的ik分词、并将它们解压到ik文件夹下&#xff0c;如图 https://github.com/medcl/elasticsearch-analysis-ik/releases 3、在服务器上创建文件夹 mkdir /usr/elklog/elk/es mkdir /usr/elklog/elk/es/data mkdi…

【C进阶】回调函数(指针进阶2,详解,小白必看)

目录 6. 函数指针数组 6.1简单计算器 6.2函数指针数组实现计算器 7. 指向函数指针数组的指针(仅作了解即可) 8.回调函数 8.1关于回调函数的理解​编辑 8.1.1用回调函数改良简单计算器 8.2qsort库函数的使用 8.2.1冒泡排序 8.2.2qsort的概念 8.3冒泡排序思想实现qsor…

docker存储空间报错解决(谨慎操作,会影响原来的容易镜像,不熟练切勿操作)

报错内容 [rootDream package]# docker build -t imapp . [] Building 21.0s (6/19)> [internal] load build definition from Dockerfile 0.1s> > transferring …

TCP 三次握手四次挥手浅析

大家都知道传输层中的TCP协议是面向连接的&#xff0c;提供可靠的连接服务&#xff0c;其中最出名的就是三次握手和四次挥手。 一、三次握手 三次握手的交互过程如下 喜欢钻牛角尖的我在学习三次握手的时候就想到了几个问题&#xff1a;为什么三次握手是三次&#xff1f;不是…

AnimateDiff论文解读-基于Stable Diffusion文生图模型生成动画

文章目录 1. 摘要2. 引言3. 算法3.1 Preliminaries3.2. Personalized Animation3.3 Motion Modeling Module 4. 实验5.限制6. 结论 论文&#xff1a; 《AnimateDiff: Animate Your Personalized Text-to-Image Diffusion Models without Specific Tuning》 github: https://g…

销售易和管易云接口打通对接实战

销售易和管易云接口打通对接实战 来源系统:销售易 销售易CRM支持企业从营销、销售到服务的全流程自动化业务场景&#xff0c;创新性地利用AI、大数据、物联网等新型互联网技术打造双中台型CRM&#xff1b;既能帮助B2B企业连接外部经销商、服务商、产品以及最终用户&#xff0c;…

支持多种通信方式和协议方便接入第三方服务器或云平台

2路RS485串口是一种常用的通信接口&#xff0c;可以支持Modbus Slave协议&#xff0c;并可接入SCADA、HMI、DSC、PLC等上位机。它还支持Modbus RTU Master协议&#xff0c;可用于扩展多达48个Modbus Slave设备&#xff0c;如Modbus RTU远程数据采集模块、电表、水表、柴油发电机…

【Rust学习 | 基础系列3 | Hello, Rust】编写并运行第一个Rust程序

文章目录 前言一&#xff0c;创建项目二&#xff0c;两种编译方式1. 使用rustc编译器编译2. 使用Cargo编译 总结 前言 在开始学习任何一门新的编程语言时&#xff0c;都会从编写一个简单的 “Hello, World!” 程序开始。在这一章节中&#xff0c;将会介绍如何在Rust中编写并运…

强推!大语言模型『百宝书』,一文缕清所有大模型!

夕小瑶科技说 原创 作者 | 王思若 最近&#xff0c;大型语言模型无疑是AI社区关注的焦点&#xff0c;各大科技公司和研究机构发布的大模型如同过江之鲫&#xff0c;层出不穷又眼花缭乱。 让笔者恍惚间似乎又回到了2020年国内大模型“军备竞赛”的元年&#xff0c;不过那时候…

DSA之图(4):图的应用

文章目录 0 图的应用1 生成树1.1 无向图的生成树1.2 最小生成树1.2.1 构造最小生成树1.2.2 Prim算法构造最小生成树1.2.3 Kruskal算法构造最小生成树1.2.4 两种算法的比较 1.3 最短路径1.3.1 两点间最短路径1.3.2 某源点到其他各点最短路径1.3.3 Dijkstra1.3.4 Floyd 1.4 拓扑排…

【前端知识】React 基础巩固(三十六)——RTK中的异步操作

React 基础巩固(三十六)——RTK中的异步操作 一、RTK中使用异步操作 引入RTK中的createAsyncThunk&#xff0c;在extraReducers中监听执行状态 import { createSlice, createAsyncThunk } from "reduxjs/toolkit"; import axios from "axios";export cons…

第七篇:k8s集群使用helm3安装Prometheus Operator

安装Prometheus Operator 目前网上主要有两种安装方式&#xff0c;分别为&#xff1a;1. 使用kubectl基于manifest进行安装 2. 基于helm3进行安装。第一种方式比较繁琐&#xff0c;需要手动配置yaml文件&#xff0c;特别是需要配置pvc相关内容时&#xff0c;涉及到的yaml文件太…