1.开发工具的选择VScode 安装地址
2.工具包的安装
- 2.1 Auto Rename Tag 如果一对标签写错了，比如 <head></head>，改一个另一个就会跟着改动
- 2.2 Chinese（简体中文）让我们的编译器变为中文
- 2.3 htmltagwrap 选中一段文字，
windows电脑按alt+w,Mac电脑按option+w会自动给这段文字加p标签 - 2.4 Live Server 编辑了代码以后只需要Command+S保存下，网页会动态跟着改变
- 2.5 View-in -browser 可以直接在编辑器里打开网页，省去了在去找对应的文件在打开
3.对网页简单的了解
<!--常规标记，也叫双标记 写法：<标记></标记>，可以带属性，多个属性用空格分割 <标记 属性= "属性值" 属性= "属性值" 属性= "属性值"></标记> -->
<!--空标记也叫单标记 写法：<标记/> 可以带属性 <标记 属性= "属性值" 属性= "属性值" 属性= "属性值" />-->
<!--告诉浏览器按照html5来解析页面,特殊且固定的文档声明标签-->
<!DOCTYPE html>
<!-- 语言的缩写，en英文，zh-CN 代表中文-->
<html lang="en">
<head>
<!-- 文档声明与字符编码-->
<!--
charset 字符集： ASCII 美国信息交换标准代码，
ISO-8859-1-拉丁字母表的字符编码，
GB2312-汉字编码字符集，
UTF-8-Unicode 万国码字符编码
-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<center>您好</center>
</body>
</html>
4.常见的标签
<!--
文本标题标签的特点：自带加粗效果，有自己的文本大小，并且独占一行，有默认的间距
h1 爬虫一般会把这个标签当成这篇文章中最要要的内容百度搜他的话当成关键词了，一篇文章
只用一个h1就行了
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--
P标签：段落
-->
<p>
国庆节是由一个国家制定的用来纪念国家本身的法定节假日。
<br>它们通常是这个国家的独立、宪法的签署、元首诞辰或其他有重大纪念意义的周年纪念日；也有些是这个国家守护神的圣人节。
</p>
<p>
“国庆”一词，本指国家喜庆之事，最早见于西晋。西晋的文学家陆机在《五等诸侯论》一文中就
<br>曾有“国庆独飨其利，主忧莫与其害”的记载。在我国的封建时代，国家喜庆的大事，莫大过于帝王的登基、诞辰等。
<br>因而我国古代把皇帝即位、诞辰称为“国庆”。今天称国家建立的纪念日为国庆节。
</p>
<!--hr标签：分割线，本身带阴影， noshade去除阴影-->
<hr>
<hr noshade >
<hr color="green" width="300px" align="left">
<!--加粗有两个标签，推荐（strong）-->
<b>加粗b</b><!--只是显示加粗-->
<strong>加粗strong</strong> <!--突出的文本-->
<!--倾斜有两个标签，推荐（em）-->
<em>倾斜em</em>
<i>倾斜i</I>
<!--删除线有两个标签，推荐（del）-->
<del>删除del</del>
<s>删除s</s>
<u>下划线</u>
我的<sub>下标</sub>
我的<sup>上标</sup>
<!--< 左尖角号-->
<
<!--Lorem可以随机生成一对文字-->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, unde? Eos quasi accusamus deserunt? Molestias dolorem suscipit, cum iste corrupti minima natus quam eum dolores reiciendis? Aliquam vero nostrum eum!
<!--> 右尖角号-->
>
<!-- 该空格占据宽度受字体影响，明显而强烈-->
123445 <br>
<!--  占据的宽度正好是1个中文宽度，且基本上不受字体影响-->
  456789 <br>
<!--©版权©-->
©
<!--™商标™-->
™
<!--®商标®-->
®
<!--😀 表情符号，数字可以改，是不同的表情符号-->
😀
<!-- div标签，没有具体含义，用来划分页面的区域，默认独占一行,在外力作用下使用css是他浮动起来，可以实现不独占一行 -->
<div>1111</div>
<!-- span，没有实际意义，主要应用于对于文本独立修饰的时候，内容有多宽，就占用多宽的空间距离 -->
<h3>体育<span style="color: red;">sports</span></h3>
<!-- 列表分为三类，无序，有序，自定义 (快捷键的使用比如想直接创建出来) <ul> <li>这一对，可以携程ul>li回车， li想创建标签时也填上内容可以li{}里面写内容然后回车，在li里面写完文字ctrl+回车可以换行 -->
<!-- 无序 li里面可以随意放标签，但是ul里面只能放li，默认是黑色得实心圆，
ui的属性type：disc实心圆 circle空心圆 square实心正方形 none（用的多）-->
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<!-- 有序 li里面可以随意放标签，但是ol里面只能放li，数字是自动生成的，
ol的属性type：（取值五个值）1，a，A，I，i ,
start:取值只能是一个数字 -->
<ol type="A" start="3">
<li>111111</li>
<li>222222</li>
<li>333333</li>
</ol>
<!-- 自定义列表 dl里面通常只包含一堆dt，dd，为了加样式方便，想要多对需要创建多个dl -->
<dl>
<dt>我是图片</dt>
<dd>我是文字</dd>
</dl>
<!-- 同级目录的写法
1.图片名字.jpeg
2. ./图片名字.jpeg .代表当前 / 代表路径
3.图片放到文件夹里了 文件名字/图片名字.jpeg 或者 ./文件名字/图片名字.jpeg
如果只设置高度，或者只设置宽度，另一个属性会自动等比例的去展示
-->
<img src="1.jpeg" alt="图片加载不出来的提示语" title="图片的标题描述" width="200px" height="200px">
<img src="./1.jpeg" width="200px" height="200px">
<img src="img/1.jpeg">
<!-- 不同级目录
1. ../ 代表 上一级
../../ 代表上一级的上一级 多级返回
比如 .html的文件在一个文件夹里，图片在另一个文件夹了
包含的层数多的话就一次一次返回 要在平级里面去加载图片
-->
<img src="../img/1.jpeg">
<!-- 超链接标签 ：能够实现不同页面的跳转
<a href="路径" title="鼠标悬停上去之后的提示信息" target="规定在何处打开文档">内容</a>
target 属性：规定在何处打开文档 _self:默认值 _blank:新窗口打开
-->
<a href="https://www.baidu.com" title="点我吧" target="_blank">超链接</a>
<a href="案例实操.html" target="_blank">跳转自己写的网页</a>
<a href="案例实操.html" target="_blank"> <img src="./1.jpeg" width="200px" height="200px"></a>
<!-- table属性 -->
<!-- width 单位可以是px 也可以是百分比（相对于父元素的，table外面不套东西的话父元素值得是body） -->
<!-- height 单位可以是px 也可以是百分比（相对于父元素的，但是他的高度是要靠内容撑开的并不是你设置了50%就高度是整个的一半了） -->
<!-- 边框：border 边框颜色：bordercolor 背景色：bgcolor 对齐方式：align = left，right，center
cellspacing = "单元格与单元格之间的间距" cellpadding = "单元格与内容之间的空隙"
-->
<table border="1" width="300" height="400px" align="center"
bordercolor = "red" bgcolor = "gray" cellspacing = "0" cellpadding = "100">
<!-- tr属性 高度height可调，宽度width不可调，背景色：bgcolor
文字水平对齐 align = "left,right,center"
文字垂直对齐 valign = “top，middle，bottom”
HTML5中不支持<tr>的valign属性。请改用CSS
-->
<tr bgcolor="pink" align="center" valign="bottom">
<!-- td属性 高度height设置了影响是一整行的高度
宽度width设置了影响是一整列的高度
背景色：bgcolor
文字水平对齐 align = "left,right,center"
文字垂直对齐 valign = “top，middle，bottom”
colspan="合并列的数量"
rowspan="合并行的数量"
-->
<td>1</td>
<td >1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</table>
<!-- form表单
<form action="向何处发送表单数据" method="get或者post">
<input />
A.属性 type定义输入框的类型
a.文本框 type="text" 密码框 type="password"
b.提交框 type="submit" 和 <button type="submit">提交</button>一样
c.按钮框 type="button" 单纯的按钮
d.重置框 type="reset" 清空的效果
B.属性 placeholder 描述输入字段预期值得简短的提示信息
C.属性 name必须设置，否则在提交表单的时，用户在其中输入的数据不会被发送给服务器
D.属性 value随便写
点完提交传递的数据https://www.baidu.com/?username=小猪&password=1223
-->
<form action="https://www.baidu.com" method="GET">
名字 <input type="text" placeholder="请输入你的名字" name="username"><br>
密码 <input type="password" placeholder="请输入密码" name="password"><br>
<input type="submit" value="登录">
<!-- 提交信息到action指定的地址 -->
<button type="submit">登录</button>
<input type="reset" value="重输">
<button type="reset">重输</button>
<input type="button" value="点我">
</form>
5.快捷键 Alt+shift+箭头下，复制上一行的内容
选中一段文字然后Alt+W，给那段文字加标签
