拨开云雾见天日 守得云开见月明
一、visual studio code编辑器
- 快捷键：Ctrl+c复制
- ctrl+v粘贴
- ctrl+a全选
- Ctrl+s保存
- ctrl+x剪切
- ctrl+z撤销
- ctrl+y前进
- shift+end从头选中一行
- shift+alt+下箭头：快速复制一行
- alt+上箭头/下箭头：快速移动一行
- tap向后缩进 tap+shift向前缩进
- alt+鼠标左键： 多光标
- ctrl+d ：选择相同元素的下一个
一、HTML
1. 什么是HTML？
Hyper Text Markup Language超文本标记语言（一种做网站编程语言）
超文本：文本内容+非文本内容
标记：<单词>有单标签
和双标签之分
语言：编程语言
HTML负责编写网页的结构
2. 创建方式
将文件的后缀名改成 .html
3. html初始代码
在vscode中 “！+tab” 可快速写出初始代码
<!--DOCTYPE：文档类型 告诉我们的浏览器我们要使用的是什么规范-->
<!DOCTYPEhtml>
<html>
<!--head:网页头部-->
<head>
<metacharset="utf-8">
<!--title:网页标题-->
<title></title>
</head>
<!--body：网页主体-->
<body>
</body>
</html>
注释：<!-- -->（在vscode中用ctrl+/或shift+alt+a快捷键可快速注释）
优点：
1.把暂时不用的代码注释起来，方便以后使用。
2.对开发人员进行提示。
4. HTML语义化
含义：根据网页中内容的结构，选择合适的HTML标签进行编写。
好处：
1.在没有CSS的情况下，页面也能呈现出很好的内容结构。
2.有利于SEO ,让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析(如屏幕阅读器、盲人阅读器等).
4.便于团队开发与维护。
网页中：结构代码都是以"标签"形式存在
1.网页最上面的标签<!DOCTYPEhtml>用于声明当前文档是一个网页文档
2.网页的根标签
3.网页设置支持中文<metacharset=“utf-8”>
网页标题
<link rel="shortcuticon" type="image/png" href="img/aaa.jpg"/>
<!--rel="shortcuticon" 图标
type="image/png" 图片类型
href=""图片路径
-->
5. 基本标签
1.标题标签
<h1 align="center">一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
- 独占一行
- 一个网页中最多只能存在一个h1标签，
- 标题align属性，可以让标题居左/居中/居右
- 网页里面存在6级标题，值越大字越小
- h5,h6标签不常用
2. 段落标签
<p>111</p>
<p>222</p>
独占一行，会自动换行
3. 换行标签
<br/>
- 换行
4. 水平线标签
<hr color="aqua" width="50%" align="center" size="5px"/>
- 独占一行
5. 字体标签
<fontsize="7" color="aqua" face="楷体">欢迎来学html！</font>
<!
--
size:字体大小 范围 1~7值越大字体越大
color:字体颜色face:字体样式
-->
6. 特殊文字样式
<b></b>（<strong></strong>）字体加粗
<i></i><em></em>字体倾斜
<u></u>下划线
<ins></ins>下划线（促销：原价<dei>300</del>现价<ins>100</ins>）
<del></del>删除线
<strike></strike>删除线
<big></big>大字体
<small></small>小字体
<sup></sup>上角标(a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>)
<sub></sub>下角标(h<sub>2</sub>o)
<mark></mark>标记
- 加粗和斜体都表示强调作用，加粗的强调效果强
- 一般情况下ins与del连用
7. 特殊符号
空格
大于号>
小于号<
和号&
人民币¥
摄氏度°
版权符号©
注册商标®
8. 图片标签
<imgsrc="img/4.png" title="美人画骨" alt="图片丢失"
width="250px"
border="1px"
vspace="5px"
hspace="5px"/>
<!--src：图片路径 title:鼠标放到图片上显示的文字
alt：图片丢失显示的文字
width height:设置图片高度宽度
border：图片的边框
vspace:距离上边的距离
hspace:距离左边的距离
-->
引入文件的地址路径：
1.相对路径：.在路径中表示当前路径（同一文件夹下）
…在路径中表示上一级路径（不同文件夹下）
2.绝对路径：http://cmsbucket.ws.126.net/2019/04/16/7a5b31eOce5474a7515.jpeg（直接引人图片所在地址）
9. 超链接标签
<a href="http://www.4399.com" target="_blank">百度一下</a>
- a标签里面可以放文字或者图片，在这个文字或者图片上加链接
- href用户点击以后要跳转的网页
- target指定打开网页的位置
target="_self"在当前网页打开
target="_blank"在新的网页打开
target="iframe名称"
<!--iframe的name值，这个值比较特殊，它可以把某个网址在iframe中打开-->
<a href="http://www.4399.com" target="f1">百度一下</a>
<iframe width="800px" height="300px" name="f1"></iframe>
默认是_self在当前页面打开，可以用base改变默认方式
base使用方法：在head标签中申明
<head>
<base target="_blank">
</head>
锚链接
在文本关键字上带一个链接
A.从甲页面A位置跳转到甲页面的乙位置
<a href="#top">返回顶部</a>
<a href="#center">返回中间</a>
<a href="#sub">返回结尾</a>
<a name="top">顶部</a>
<h2 id="top">1111</h2>
<p>111111111</p>
<p>111111111</p>
<a name="center">中间</a>
<h2 id="center">1111</h2>
<p>222222222</p>
<a name="sub">下面</a>
还可以用#和id完成
<a href="#top">返回顶部</a>
<a href="#sub">返回结尾</a>
<a href="#center">返回中间</a>
<h2 id="top">1111</h2>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<p>111111111</p>
<h2 id="sub">1111</h2>
<p>222222222</p>
<p>222222222</p>
<p>222222222</p>
<p>222222222</p>
B、从甲页面A位置跳转到乙页面的B位置
<a href="锚链接.html#center">跳转</a>
10. 列表标签
1.无序列表
<ul type="circle">
<li>孟老师</li>
<ul>
<li>杨老师</li>
</ul>
<li>刘老师</li>
<li>班主任</li>
</ul>
- 无序列表是一对父子标签通过ul和li组合完成，ul和li之间不能有其他标签
- 列表前的样式可以通过type修改
- circle：空心圆 disc：实心圆（默认） square：实心方块
- 无序列表，有序列表，定义列表之间可以嵌套，但嵌套的地方会默认成空心圆
2.有序列表
<ol type="i">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
- 列表前的样式可以通过type修改
- 1：（1 2 3 4 5） a：（a b c d） A：(A B C D)
i：（i ii iii iv）I:(I II III IV)
3.定义列表
<dl>
<dt>男生</dt>
<dd>杨政</dd>
<dd>张龙飞</dd>
<dd>邓子强</dd>
<dt>女生</dt>
<dd>王紫薇</dd>
<dd>张落落</dd>
<dd>赵依婷</dd>
</dl>
11. 表格标签
<!DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table width="500px" border="1px" align="center" cellpadding="0"
cellspacing="0" bgcolor="aqua" bordercolor="red">
<caption><h1>表格</h1></caption>
<colgroup>
<col bgcolor="pink" width="200px"/>
<col/>
<col/>
</colgroup>
<tHead>
<tr>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
</tHead>
<tBody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr><tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</tBody>
<tr height="50px">
<td align="center">3-1</td>
<td valign="top">3-2</td>
<td valign="bottom">3-3</td>
</tr>
</table>
</body>
</html>
- table表格标签
border表格边框
width表格宽度
cellpadding设置单元格内容和边框的距离
cellspacing设置单元格和单元格之间的距离
align表格对齐方式
bgcolor背景颜色
bordercolor边框颜色 - caption设置表格的标题它是table的子标签
- colgroup用于标记列col代表表格中的每一列
- tr行
- th标题的列字体加粗自动居中
- td列（td上常用的属性align设置左右对齐方式valign设置垂直的排列）
- 语义化标签： (让表格看起来更规范，对网页没有影响)
在一个table中只能出现一次
align="left|center|right"
valign="top|middle|bottom"
跨行和跨列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table width="400px" border="1px" 
最低0.47元/天 解锁文章
3036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
