文章目录

1.HTML

HTML：超文本标记语言，使用一套标记标签来描述网页。
1.1版本
详细：
https://blog.csdn.net/qq_46137324/article/details/120382079
1.2区别
0. HTML：语言是分非常宽松，容错性强。
1. XHTML：更为严格，要求标签必须小写，必须严格闭合··· 太过严格被抛弃
2. HTML5：是HTML的基础上添加了许多的新特性，并兼容XHTML
hr 分割线标签  在 XHTML中 <hr />  在HTML中 <hr> 
HTML5兼容XHTML和HTML所以写不写 / 都可以

现在学习HTML也就是HTML5。

2.HTML文档

HTML文档是网页的描述，HTML标签 + 纯文本 = HTML文档。
HTML文档被浏览器读取，并渲染为网页的形式显示出来。
HTML文档的后缀为.html，在DOS操作系统上后缀名只能是3位数后缀为.htm。
2.1HTML标签
标签是对文本的渲染描述语义，不会显示出来。（描述语义不修改文本样式） 
标签用尖括号包围关键字，通常是成对出现的。
第一个标签是开始标签（不带斜杆），第二个标签是结束标签（带斜杆）。  
开始和结束标签页称为开放标签和闭合标签。
HTML标签对大小写不敏感但建议使用小写。
2.2元素
元素：从开始标签，到结束标签的所有代码。
标签/标记/元素都是在HTML的标签。
例：<a>  可以称为a标签/a标记/a元素。

元素内容：开始标签到结束标签之间的内容。（一对尖括号中间的内容）
空元素：在开始标签中进行关闭（标签不需要元素内容，直接以开始标签的结束而结束）
2.3属性
大多数的元素可以拥有属性。

修改属性的过程被称为修改样式:
样式：用名称保存下来的对修饰对象进行修饰所使用的一组修饰参数。
修饰对象：字符、段落、链接段落和字符（用于做超链接的段落和字符）、表格和列表。
修饰参数：字体、字号、边框底纹、对齐方式、缩进、边线等等。

属性在开始标签中规定，通常以 名称/值 对形式出现，xx="xx"。
属性值始终被包含在引号内。
2.4基本结构
<!DOCTYPE html>
<html lang="zh">
	<head>
        <meta charset="UTF-8">
    	<title>HTML练习</title>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html> 
DTD文档声明
由于HTML有很多个版本规范，每个版本的规范之间有一定的差异。

DTD文档告诉浏览器，当前的网页是用那个HTML的规范来写的，
让浏览器能够正确的编译/解析/渲染网页。

DTD文档声明向下兼容，在html标签的前面声明。
w3c规定：任何一个标准的HTML网页，DTD声明必须写在第一行。
DTD文档不是一个标签，它也不区分大小写。
（其实浏览器不依赖这个DTD文档声明，浏览器有自己的一套机制来处理，不写DTD声明也会被正常渲染出来）

html标签告诉浏览器这是一HTML文档/网页。

<html> 与 </html> 中描述网页。

lang属性向搜索引擎表示该html页面使用的言语
    页面是英文: <html lang="en">
    页面是中文: <html lang="zh">

<head> 与 </head> 为网页添加配置信息
	1.指定网站的标题
	2.添加css/js文件
	  ···
	写在head标签内部的内容是给浏览器看的，一般除标题外不会展示给用户。

<meta> 中设置使用charset属性设置字符编码。
字符集问题:
在写网页的时候没有指定字符集会出现乱码。
<meta charset="xxx"> 指定字符编码
<meta charset="UTF-8"> 
<meta charset="GBK"> 
 
UTF-8:
	存储世界上所有文字，体积大。

GBK(GB2312)： 
	存储的字符比较少，仅仅存了汉字和一些常用的外文。体积小。
	在开发网站的时候仅包含中文则使用GBK，体积小访问速度快，也就一点点。
	
注意点：
在HTML中指定的字符集必须和保存这个文件的字符集是一致的，否则还是会出现乱码。
在win10自带的文本编辑器默认是中文GB2312，在HTML文档中指定了字符集为UTF-8后，
同样，文本编辑器也要修改为UTF-8。

<title> 与 </title> 中指定网站的标题，并且指定的标题还会作为用户保存网站的默认标题。

<body> 与 </body> 中定义需要显示给用户查看的内容。
2.5标签分类
单标签：只有开始标签，没有结束标签，由一个 <> 组成。
双标签：有开始标签，也也有结束标签，由一个 <> 和一个 </> 组成。
2.6标签关系分类
并列关系（兄弟关系）
嵌套关系（父子关系）

3.编写HTML代码

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

image-20220211091951065

2.设置项目的存放路径并创建项目

image-20220211092307478

3.新建html文件

image-20220211095454077

image-20220211095618501

image-20220211095809760

4.运行html的方式
右上角选着电脑上安装的浏览器执行
右击运行

image-20220211095852356

3.2模板设置
几乎所有的html文件都使用html的基本结构，使用pycharm，创建html文件时会自动生成。
File -> Settings -> Editor -> File and Code Templates 中设置对应文件的模板。

4.pycharm快捷键

4.1新建文档
ctrl + alt + insert  弹出新建文档
4.2复制删除
ctrl + d 快速复制光标所在行。
ctrl + y 快速删除光标所在行。
4.3批量注释
ctrl + ？注释

使用pycharm时会发现html的注释是{# #}而不是<!-- – >
File – >Settings – >Languages & Frameworks – >
Template Languages-- >Template language设置为None
4.4上/下 一步
ctrl + z         上一步操作
ctrl + shift + z 下一步操作
4.5移动光标
Home 光标移动到当前行的起始位，
End  关标移动到当前行的末尾。
4.6多行编辑
同时编辑：
按住alt， 鼠标拖动/ 鼠标单点 选中多行同/多个位置
4.7嵌套
嵌套标签内容：
ctrl + alt + t + t 在选中的文本前面加<|> 后面</>
4.8自动换行
自动换行
Editor --> General --> Soft Wraps
在 Soft-wrap these files: 中添加  *.html;
4.9全选当行
settings --> Keymap
搜索 select Single line at caret 添加快捷键。自己设置为ALT + Z

image-20210901125119230

4.10移动选中行
移动选中行
ctrl + shift + 方向上下键
4.11 折叠代码
快速折叠展开单个代码块

ctrl + - 折叠
ctrl + + 展开

快速折叠展开多个个代码块
（选中多个代码块的代码）

ctrl + shift + -  折叠
ctrl + shift +  + 展开
4.12新建一行
快速回车新建一行 ( 不需要到文本的末尾按enter新建一行，直接在当前行任意位置)
shift + enter

5.注释语法

<!-- 单行注释 -->

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

HTML代码非常杂乱，通常用注释来划分区域，方便后续的查找。
<!-- 导航条开始 -->

    导航条HTML代码···

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

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

    左侧菜单栏HTML代码···

<!-- 左侧菜单栏结束 -->
# html # xhtml # 前端
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

GaussDB全密态数据库等值查询

avatar 华为开发者空间
cover

TinyEngine灵活构建个性化低代码平台

avatar 华为开发者空间
cover

一文带你搞懂GaussDB数据库性能调优

avatar 华为开发者空间