|
首要，新建一个文件夹，标题为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键 能够使其整体右移
| 
发表于 