00.HTML简介

2020-02-19 本文已影响0人小艾同学喔

一.HTML简介

1.什么是HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

超文本的基本特征就是可超链接文档，有2层含义：

a.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。

b.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超链接文本）。

二、Web标准

web标准石油W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标注化组织。

1.Web标准的构成

主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

标准	说明
结构	结构用于付网页元素进行整理和分类，现阶段主要学的是HTML。
表现	表现对于设置网页元素板式、颜色、大小等外观样式，只要是指CSS
行为	行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript

Web标准提出的最佳体验方案是：结构、样式、行为相分离。

即结构写到HTML文件中，表现写到CSS中，行为写到Javascript中。

三、开发工具VScode

1.插件安装

Chinse Language：汉化插件
Open in brower：在浏览器中打开
安装方法：
第一步点击左边最下面的图标，或者按ctrl+shift+x调出应用商店
第二步搜索chin，找到简体中文；open in 找到Open in brower
第三步点击install即可。

插件安装.png

2.json配置

json.png

加入以下两行代码能使代码保存时自动格式化代码。
"editor.formatOnType": true,
"editor.formatOnSave": true,

3.快捷键

!+tab 快速生成

Ctrl+Shift+N 打开新的编辑器窗口

Ctrl+Shift+W 关闭编辑器

Ctrl + X 剪切

Ctrl + C 复制

Alt + up/down 移动行上下

Shift + Alt up/down 在当前行上下复制当前行

Ctrl + Shift + K 删除行

Ctrl + Enter 换行

Ctrl + Shift + Enter 在当前行上插入新的一行

Ctrl + ] 该行向左缩进一个tab距离

Ctrl + [ 该行向右缩进一个tab距离

Home 光标跳转到行头

End 光标跳转到行尾

Ctrl + Home 跳转到页头

Ctrl + End 跳转到页尾

Ctrl + up/down 行视图上下偏移，相当于滚轮上/下滑

Alt + PgUp/PgDown 屏视图上下偏移，相当于上/下一页

Ctrl + Shift + [ 折叠区域代码

Ctrl + Shift + ] 展开区域代码

Ctrl + / 添加单行注释

Shift + Alt +A 块区域注释

导航快捷键

Ctrl + T 列出所有符号

Ctrl + G 跳转行

Ctrl + P 跳转文件

Ctrl + Shift + O 跳转到符号处

Ctrl + Shift + M 或 Ctrl + J 打开问题展示面板

F8 跳转到下一个错误或者警告

Shift + F8 跳转到上一个错误或者警告

Ctrl + Shift + Tab 切换到最近打开的文件

Alt + left / right 向后、向前

Ctrl + M 进入用Tab来移动焦点

Ctrl + F 查询

Ctrl + H 替换

Alt + Enter 选中所有出现在查询中的

Ctrl + D 匹配当前选中的词汇或者行，再次选中-可操作

多行光标快捷键

Alt + 鼠标左键插入光标-支持多个

Ctrl + Alt + up/down 上下插入光标-支持多个

Ctrl + U 撤销最后一次光标操作

Shift + Alt + 鼠标左键插入光标到选中范围内所有行结束符-支持多个

Ctrl + F2 选择所有出现在当前选中的词汇-操作

Shift + Alt + right 从光标处扩展选中全行

Shift + Alt + left 收缩选择区域

Ctrl + Shift + Alt + PgUp/PgDown 插入多行光标的[整屏生效]

Shift + Alt + F 格式化代码

F12 跳转到定义处

Alt + F12 代码片段显示定义

Ctrl + K F12 在其他窗口打开定义处

Ctrl + . 快速修复部分可以修复的语法错误

Shift + F12 显示所有引用

F2 重命名符号

Ctrl + Shift + . / , 替换下个值

编辑器管理快捷键

Ctrl + F4, Ctrl + W 关闭编辑器

Ctrl + |切割编辑窗口

Ctrl + 1/2/3 切换焦点在不同的切割窗口

Ctrl + Shift + PgUp/PgDown 切换标签页的位置

文件管理快捷键

Ctrl + N 新建文件

Ctrl + O 打开文件

Ctrl + S 保存文件

Ctrl + Shift + S 另存为

Ctrl + F4 关闭当前编辑窗口

Ctrl + W 关闭所有编辑窗口

Ctrl + Shift + T 撤销最近关闭的一个文件编辑窗口

Ctrl + Enter 保持开启

Ctrl + Shift + Tab 调出最近打开的文件列表，重复按会切换

Ctrl + Tab 与上面一致，顺序不一致

Ctrl + P 复制当前打开文件的存放路径

Ctrl + R 打开当前编辑文件存放位置【文件管理器】

四、HTML基本骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=f, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

1.<!DOCTYPE>声明标签

文档类型声明标签，作用就是告诉浏览器使用哪种html版本来显示网页。

<!DOCTYPE html>

这句话的意思是：当前页面采取的是HTML5版本来显示网页。
注意：

a.<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。

b.<!DOCTYPE>不是一个 HTML标签，它就是文档类型声明标签。

2.lang语言种类

用来定义当前文档显示的语言。

<html lang="en">定义语言为英语。
<html lang="zh-CN">定义语言为中文
<html lang="Fr">定义语言为法语。
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
这个属性对浏览器和搜索引擎的作用是让浏览器指导你是哪种语言的网页，例如在定义为法语的情况下输入中文网页会提示翻译。

3.Character set字符集

1.字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。

2.charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符.

3.写法：在<head>标签内，可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。 <meta charset="UTF-8">

4.注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用且统一写成“UTF-8”编码。

五、HTML语法规范

5.1基本语法规范

HTML标签是由尖括号包围的关键字，例如<html>。
HTML标签通常是成对出现的，例如<html>和</html>,我们称为双标签。标签对中第一个出现的是开始标签，第二个出现的是结束标签。结束标签通常是在前面加一个“/”。
有些特殊的标签必须是单个标签（极少情况下），例如br标签，我们称为单标签。

5.2标签关系

双标签关系可以分为两类：包含关系和并列关系。
1.包含关系（父子关系）：

<head>
    <title></title>
</head>

此时head标签与tittle标签就是包含关系，head标签是父元素，tittle标签是子元素。
2.并列关系（兄弟关系）

    <head></head>          
    <body></body>