这是我参与「第四届青训营 」笔记创作活动的的第2天
本文是面向HTML小白使用vscode编程的同学提供的笔记，几乎没有代码，重在理解
入门介绍
网站是一些网页的集合，网页本质上是HTML(hyper text markup language)（超文本标记语言，和编程语言有很大不同）文件（后缀.HTM/HTML），需要通过浏览器打开
超文本指，除了文本之外，可以在网页中放入很多其他元素，如视频音频等
通过一个网页还可以进入其他网页
不同浏览器可以使用相同的内核，比如chrome和edge
Web标准：约束不同浏览器对相同代码的解释，主要是三个方面，结构，表现和行为，structure, presentation, behavior，分别对应的编写语言是HTML，CSS，JavaScript
三者在标签中通常以以下形式呈现：
HTML就是标签本身，CSS和JS是标签的option，CSS是唯一option：style=“”的部分，其余的option都是JS
但是style也可以作为JS属性的一个被修改
但JS和CSS有更常用的外部引入方法
语法规则
骨架
通过单标签定义一些初始值，主体是通过双标签来搭建内容
标签
单/双标签
双标签形如
《标签名》《/标签名》
的一对指示此时编写内容对应网页中的哪一部分的语法
内容写在一对标签中间
标签之间可以嵌套，例如title标签就应该包含在head之内
一个网页的所有内容都应该包括在html标签内，其中有head和body
单标签也存在，执行一些其他附加的操作
文档类型声明
《!DOCTYPE html》放在文件起始，说明使用的html语言的版本
设置语言
《html lang=”语言种类”》，放在html标签之前，表示这个网页的默认语言种类，并非强制要求
en是英文，zh-CN是中文
设置字符编码
《meta charset=”UTF-8”》
“UTF-8”是包含了所有国家文字的字符编码系统
生成标题系统
《h1》标题《/h1》
数字可以是1到6，一共6级标题，和word显示效果相似（逐级递减，字加粗），标题应该包含在body中，标题是自动自成一段的
文字分段和换行
在body中写下的文字并不会原封不动地出现在浏览器中，文字并不会分段，并且无论多少个空格都只会显示出一个
想要分段，必须使用分段标签（paragraph）
《p》内容《/p》
则内容自成一段，前后都不接触其他文字
强制换行使用单标签（break）： 《br /》
分段比起换行多增加了一个垂直的间距
当横向缩小浏览器窗口时，文字会移动保证所有的文字都仍在窗口内可见（这和日常浏览网站时不同），但分段和换行仍然存在
本文格式化
网页布局
div和span标签没有语义，用于分割内容，进行网页布局，div自成一行，span自成一格，前者更大
图像插入
单标签：《img src=”图片路径” options /》
可以是绝对和相对路径（参见linux(ubuntu)笔记），相对路径中..同样可以表示上一级路径
但是和linux路径不同之处在于，linux路径都是用/分割，而html语言中绝对路径用\分割，相对路径用/分割
（windows中虽然可以使用/，但系统显示和推荐使用都是\）
绝对路径也可以是网络地址
只有src是必须存在的，如果同时使用height和width，图片可能会被压缩
超链接
在网页中点击该链接可以跳转到其他网页
为双标签
《a href=”网页地址/内部html文件名 options”》文本/图像等《a /》
此标签将文本/图像等设置成一个链接，点击即可跳转，跳转到的网页和图像一样，分为内部和外部网页（对应链接格式的相对，绝对路径和域名）
可以用#占位链接，必要时再改成具体路径
如果链接指向的是一个压缩包或者文件，点击链接会下载该文件
锚点链接：用于跳转到本页面的某处
使用方法：超链接化文本的方式和内外部链接相同，路径改为#ID
而在跳转目的地的对应双标签（可以是p或者h）的头标签后写上id=”ID”，类似于一个标记接收跳转的效果
注释标签
《!--注释--》
Vs code中快捷键ctrl+/
表格
一个表格有三层双标签嵌套，最外层是table，第二层是tr，代表table row，第三层是td，代表table data，因此table按照行来完成，table data可以是超链接
表格的第一行一般是属性名，将td替换成th（table head）可以实现元素加粗居中
一般用双标签thead和tbody标记表格的第一行（头部行）和其余行，不可替换tr，只能作为其父标签使用
colspan=”n”
rowspan=”n”
写在td双标签的第一个标签末尾，n代表合并单元格个数
列表
列表是一列整齐的数据，分为无序列表和有序列表，无序列表浏览器显示的元素没有序号，有序列表有序号
无序列表使用双标签ul，每个元素使用双标签li
有序列表使用双标签ol，每个元素使用双标签li
制作有头的列表（有特殊项）用双标签dl，头元素（可以有多个）用双标签dt，其余元素用dd
表单
表单可以接收用户的输入信息并传送到后台
首先设置表单域
双标签form，表单域之内的用户输入信息会被传送到后台（需要设置提交按钮）
设置输入框用单标签《input type=”属性”》
属性代表不同的输入方法，例如password输入框不会显示输入具体字符
这些属性可以在页面上显示密码框，选择按钮等特殊符号，配合上自己设置的文本，即可实现表单效果
其中name对于同一个选择题来说需要设置成相同的，value的值会显示在密码框内（如果有的话），例如“请输入密码”
下拉双标签select可以把选项收藏起来，通过下拉的方式展示
Select中有option双标签，表示选项
Option标签中中加入option：selected=”selected”，设置默认选项
如果不设置默认选项，会以第一个代码中的选项为默认，可以设置第一个选项为“请输入--”来提示用户输入
多行文本输入时使用双标签textarea，中间包裹默认文本，首标签中可以加options规定cols和rows，rows不是代表总行数，而是显示出的行数，cols代表总列数
制作表单时通常使用表格保持元素的整齐性
表单中的input标签可以修改为以下的type，在输入时就会自动监测格式是否正确（错误不会弹出信息，但会有提示）
利用input type=submit可以生成提交按钮
提交信息的时候系统会检测格式是否正确，错误会弹出信息
Label
Label标签可以为非表单元素打上某表单元素的标签，达到点击前者，后者选中的目的
使用方法：
《label for=”ID”》
《Input id=”ID” / 》
按钮
button双标签，标签内文本显示在按钮上
视频
双标签video
可选属性为如下
注意video的大小可以在style中设定，也可以作为一个单独的对象中的属性设定
音频
双标签audio，使用方式和视频基本一致
保持内容格式
Pre双标签，其中的内容会在页面上保持格式（换行符，空格不省略）显示出来，通常用于代码等格式对可读性影响较大的内容
Favicon图标
某个页面的logo，显示于浏览器该网页栏左侧
用link标签在head以rel=shortcut icon再添加src的方式引入，图片格式应为ico
语义标签
显示效果和div无区别，但是可以从代码看出该区域内容的含义
特殊字符
空格之类的特殊字符可以用下列代码实现
有些字符虽然在键盘上有，但由于被用作类似html的关键字了，在可能产生歧义的地方最好使用字符代码而不是其本身
Visual Studio Code
Vs code 不是一款IDE（VS则是），它是一款代码编辑器，可以用来打开html文件并进行编辑
初始化
文件/首选项/设置/font size可以调整字体大小
Ctrl+加号键/减号键可以快速调整字体大小，但这种方法作用于包含状态栏所有的字体，而font size仅作用于代码
查看/自动换行 可以自动在一行文字太长的情况下进行换行
编写代码
在html文件中输入一个html:5，选中跳出选项的第一个（或者使用tab键），即可以得到一个html文件的骨架
输入标签的名字，再按下tab，即可获得一个完整的该标签框架
插件
快捷键ctrl+shift+X，来到安装插件的界面，可以搜索需要的插件
添加目录文件夹
文件/打开文件夹 选择目录文件夹，可以设置vs code当前的工作文件夹，此后可以在左侧便捷管理该文件夹下内容。左上角资源管理器按钮可隐藏和显示该文件夹
Emmet快速生成
emmet语法是一种简化html和css 编写的方法，vscode中设置了这种语法
这些简化的表示方式，都需要按下tab键使其变成真正的html语法
第五条的一般语法是 标签名.类名/#id名
第六条的一般语法是 标签名.类名/#id名$*n
Web网页访问
服务器本质上是一台电脑，供其他网络用户访问
将自己的电脑设置为服务器，称为本地服务器，可被一个局域网内的成员访问
在网络上购买的云服务器称为远端服务器，可被所有网络用户访问
网页实际上就是一台服务器（电脑）中的一个应用程序，输入代表该服务器的域名或IP号，会默认跳转到该应用程序中
