网页设计模板html代码盒子单页网站排名优化
一.使用VSC--全称：Visual Studio Code
vscode用来写html文件，打开文件夹与创建文件夹：①选择文件夹 ②拖拽文件
生成浏览器的html文件的快捷方式： ！+enter
运行代码到网页的方法：
普通方法：找到书写代码的文件夹，点击使用浏览器打开
在vscode快速使用：需要添加插件：Open In Bower，然后右击选择：Open In Default Brower(默认浏览器) ，Open In Other Brower(选择其他浏览器)----推荐使用，更快捷方便。
vscode快捷键：
| shift+alt+F | 代码格式化 |
| alt+↑/↓ | 将选则的代码向上或向下 |
| shift+alt+↑/↓ | 快速复制一行向上或向下 |
| ctrl+s | 保存▲ |
| ctrl+F | 快速查找 |
| ctrl+H | 快速替换 |
二.HTML简介和基础骨架
Html5：是一种超文本标记语言，用来描述网页的一种语言。
标记语言<----标记标签<----双标签：<html></html> ,单标签：<img>
HTML5的DOCTYPE声明：
<!DOCTYPE html> 位于H5声明文档的最上面，处于标签之前，是网页的必备组成，避免浏览器的怪异模式
HTML5的基础骨架：
<html>标签:定义HTML文档，浏览器看到后就是个html文档了，所有其他元素就包裹在它里面，html标签限定了文档的开始点和结束点。
<head>标签：用于定义文档的头部，在头部描述了文档的各种属性和信息，包括文档的标题，在web的位置。
<body>标签：元素定义的文档的主体，body元素：包含文档的所有内容(比如文件，超链接，图像，表格和列表)，会直接在页面显示，也是直接看到的内容。
以上就是Html5的基础骨架
拓展基础标签：
title 标签：
可以定义文档的标签，显示在浏览器的标题或状态栏上
<title>标签是<head>标签中唯一必须要求包含的东西，就是在<head>中必须有<title>。
<title>的增加有利于SEO优化----SEO搜索引擎优化的英文缩写，通过对网站内容调整，满足搜索引擎的排名需求
mate标签：
meta标签用来描述网页文档属性，关键词等，更多的都是字符编码： charset="UTF-8",也是在<head>标签里的
三.标题标签：
标题(Heading)通过：<h1>--<h6>标签进行定义
<h1>定义最大的标题 ,<h6>定义最小的标题。
这里的align是指内容的位置属性，默认居左，可以选择left | center |right
生成h1到h6快捷键： h$*6
注意：要正确的使用标题标签，HTML的标题标签只用于标题，不仅仅只是为了生成粗体或者头号字体而使用，正确使用有利于SEO，h1--h6是先后顺序的且重要程度也是由重到轻。
四.标签--段落，换行，水平线
段落：通过<p>标签定义，
换行：希望将一个段落进行换行，就在分割处加一个<br>或者<br />都可以
效果如下：
水平线： <hr />单行标签：在HTML页面会创建水平线具体属性有：
color---颜色，width--长度，size--大小，alig--对齐方式(默认居中)，也可取值left | right。
具体实例在上图。
五.标签--图片
插入图片， <img>标签定义HTML页面中的图像：
<img src="" alt"" title="" width="" height="" >
<img>是单标签，不需要进行闭合操作
src--(图片地址与名字)路径
alt--图像替换文本，若图像加载失败，就会显示文本信息
width--宽度
heigth--高度
title--鼠标放在图片会有提示
感谢各位大佬的观看！求免费的点赞收藏关注喔！！！