本
文
摘
要
首先，新建一个文件夹，标题为html-demo-1，可以拖到vscode打开，接着在文件夹中新建文件index.html。html文件有一个基本格式，输入感叹号，然后tab键，就会出现。由于我们写的是一篇中文网页，故要做一些改动，把lang后面的en改成zh-CN，基本准备工作到这里就结束了。下次新建html文件基本上都是用这种方法。
依次用的标签有，
表示标题的<h>标签，<h>标签有<h1>到<h6>六个层级，标题从大到小。
代表文章一个段落的的<p>标签，不仅是文本，任何想以段落显示的内容，比如图表和表单项，都可以放进<p>元素。
注意它与<div>的区别，<div>是无语义的块级元素，只要样式上需要多个块级元素组合在一起，就可以使用<div>。但是，这应该是最后的措施，带有语义的块级标签始终应该优先使用，当且仅当没有其他语义元素合适时，才可以使用<div>。
<nav>标签定义导航链接的部分。
<ol>标签是一个有序列表容器，会在内部的列表项前面产生数字编号。列表项的顺序有意义时，比如排名，就会采用这个标签。<ol>标签内部可以嵌套<ol>标签或<ul>标签，形成多级列表。
<ul>是一个无序列表容器，会在内部的列表项前面产生实心小圆点，作为列表符号。列表项的顺序无意义时，采用这个标签。
<li>表示列表项，用在<ol>或<ul>容器之中。
新建一个目录名叫images，把图片下载好后直接拖入vscode的images目录中，在src后输入images可以选择目录中的文件，alt属性用来设定图片的文字说明，图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。但是我们还需要加一些宽度和高度的设定，一旦设置了这两个属性，浏览器会在网页中预先留出这个大小的空间，不管图片有没有加载成功。不过，由于图片的显示大小可以用css设置，所以不建议使用这两个属性。如果一定要设置，只要设置其一防止图片变形，一般来说图片不能超过300k，否则加载速度会变慢，建议压缩，想要有点击图片产生高清大图的效果，除了a标签内链接外，一般还要添加target="_blank"，
内容写完后，我们可以使用谷歌浏览器检查功能预览网页在手机上的效果。也可以用处在同一wifi下的手机调试。也可以用chorme远程调试。
最后一步是部署到github pages，注意它在生成网址后加上路径index.html，在仓库中一定要加上预览地址，任何作品都应该如此，方便面试官浏览。
预览地址如下：拖延心理学
提高效率的小技巧 ：
1.输入包围缩写个别行：ctrl+shift+P（显示相关插件的命令），输入wrap，选择输入包围缩写个别行，选中该需要修改的部分，再次输入Emmett wrap，点击输入缩写包围个别行，ul>li*，即可快速达到想要效果。（注意使用缩写包围和使用缩写包围个别行的区别）
2.同时删除 *** [ ]中的内容：点击编辑，替换，使用正则表达式， 用完之后注意取消
3.按住alt键可以多选 全选所需部分 并按tab键 可以使其整体右移
