Html+CSS+JavaScript学习记录
前言
准备
- 工具 ：Visual Studio Code
- 插件 ：HTML
常用快捷键
| 名称 | 快捷键 |
|---|---|
| HTML骨架 | html:5 → Tab |
| 快速生产元素 | 元素名 → Tab |
| 自动生成多个元素 | div*5 → Tab |
| 生成H1~H6 | h$*6 → Tab |
| 复制当前行文本 | shift+alt+键盘上下箭头 |
| 删除当前行 | ctrl+shift+k |
| 选中多个光标 | 中轮选中 |
| 在任意位置换行 | ctrl+enter |
| 放大或缩小 | ctrl++/- |
一 、骨架
1 |
|
DTD
必须出现在第一行，用于向浏览器解释文件格式，警示符号
<!>1
html标签
整个网页必须被包裹，包含和
两部分，关闭符/,标签必须有关闭符。1
2
3
4
5
6<html lang="en">
<head>
</head>
<body>
</body>
</html>
- \\ → 网页配置
- \\ → 网页可视区域，用于网页内容布局
- \ → 表示网页整体语言,
en表示英文，中文的表示法zh、cn、zh-CN
字符集
<mata charset>mata表示元的意思，几乎所有的配置都写在mata标签中，是网页的配置项目
1
<meta charset="UTF-8">
UTF-8，国际化的字库，每个汉字占3个字节，主要面向世界。
gb2312，只有汉族的文字和少量其他符号，每个汉字占2个字节，主要面向国内，。
gbk，gb2312的增强版，文字略多，每个汉字占2个字节，主要面向国内。
字符集使用的不同，网页加载速度也不同，不同类别的字符集不相互贯通，改变原有的字符集，原位置的字符会随之改变。
浏览器设置
设置浏览器的兼容性，此处
content="IE=edge"表示设置兼容性为让edge和ie的渲染方式一样。1
<meta http-equiv="X-UA-Compatible" content="IE=edge">
拓展：加上这个标签，表示尽可能的用更高级的内核打开网页页面。
1
<meta name="renderer" content="webkit">
视口标签
主要用以适配移动端窗口，如果不加载此标签，移动端窗口将会以俯瞰的方式呈现。
1
<meta name="viewport" content="width=device-width, initial-scale=1.0">
keywords 关键字
SEO
1
<meta name="keywords" content="关键字, XXX,XXX,XXX">
descriptio 页面描述
页面描述就是被搜索引擎搜到之后所展示的文字描述
1
<meta name="description" content="网页的描述">
title 标签
网页的顶部配置，就是网页在浏览器选项卡位置显示的文字标题
1
<title>网页标题</title>
二、HTML的基本语法
（一）标签
- 标签名必须书写在一对尖括号
<>内部。 标签氛围单标签与双标签，双标签必须
成对出现，有开始标签和结束标签。结束标签必须有关闭符
/。根据标签内部存放的内容不同，可将不同的标签划分为
两个级别。根据标签的种类可将标签划分为容器级和文本级| 容器级 | 文本级 |
| :————————————————————————: | :———————————————————: |
| （元素内部除了可以存放文本之外，还可以嵌套标签） | （元素内部只能存放文本或者文本标签） |
|div、ol、ul|span、img|
|li、dt、dd、h1~h6|b、u、i|
（二）标签属性
标签属性是标签身上的一些特殊性质
书写位置，下开始标签或单标签的标签名后面，添加一个空格，空格后面书写属性。
属性包含
属性名（key）和属性值（value）两部分，根据英文表示，习惯性的将属性书写法成为键值对写法：k = ”v“1
<a href="https://like977.vercel.app" title="like977"></a>
(上面代中，
title即是属性名也就是k，=后面的值like977即是属性值v)
（三）标签之间对空白换行缩进不敏感
标签与其他标签之间对空白、换行、缩进等不敏感，不影响浏览器加载效果。文字的位置不会根据书写位置决定，而是根据标签的种类决定
1
2
3
4
5<body>
<p>文字</p>
<p>文字</p>
<span>正常文字</span>
</body>换行、空白、缩进等不影响浏览器加载效果，但占有一定的字节，影响文件的大小。
在完成网页制作时可对代码进行压缩，以减少文件体积，提升浏览器加载速度：https://www.runoob.com/csspack
HTML语法中，认识标签的开始和结束，无论有没有换行、缩进、空格等字符，都只认开始与结束标签。
标签之间存在
嵌套关系文本级标签无法嵌套1
2
3
4
5
6
7<body>
<div>
<p>
<a href="" title="嵌套"></a>
</p>
</div>
</body>（无法嵌套的标签，浏览器会自动处理错误，但不会提示bug）
空白折叠
在普通文字之间，如果有空格、换行、缩进导致的空白，浏览器加载时会被折叠成一个空格显示，而不是多个空格。正常显示空格可以使用字符实体替换书写，在代码中书写
即可代替一个字符，换行则使用br单标签书写1
2
3
4
5
6
7<body>
<!-- #文字空格-->
<p>文 字 </p> <!---浏览器显示：文 字------->
<p>文 字</p><!---浏览器显示：文 字------->
<!-- #文字换行 -->
<p>第一行<br>第二行<br>第三行<br>第四行</p>
</body>
HTML的常用标签
（一）h系列标签 英文：headline （标题）
类型：双标签、容器级标签
内容：\
\
包含六级标题，分别为h1、h2、h3、h4、h5、h6作用：给内部内容添加对应级别标题的语义。
标签根据重要性不同，认为权重不同，所有的标题标签都比别的标签要高。
1
2
3
4
5
6
7
8
9<body>
<!-- #region 快捷键：h$*6 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>根据对文本的定义，权重就是文本的权重，设置h标签的文字就赋予了标题的语义，以浏览器的角度考虑，它的权重在搜索引擎的优化，搜索引擎的优化除了会抓取
mata标签配置的keywords之外还会优先抓取标题的内容，通常情况下h1标签的权重是最高的，一个页面只使用一个h1，用来制作网页的logo。如果一个网页存在或使用多个h1标签，浏览器则视其为作弊,从而降低排名。
（二）P标签 英文：paragraph（段落）
类型：双标签、文本级标签。
内容：\
\
1
2
3
4
5
6
7
8
9
10
11
12
13
14<body>
<!-- #region 标题-->
<h1>标题</h1>
<!-- #region 段落-->
<p>
第一段
</p>
<p>
第二段
</p>
<p>
第三段
</p>
</body>作用：添加一个完整段落的语义。
（三）Img标签 英文：image （图片）
类型：单标签，文本级标签
属性：
src：用来引入图片的路径
alt：图片无法加载时所展示的替换文本
width：宽度
height：高度
title：设置图片焦点标题，鼠标悬停文本
border：边框 (单位：像素)仅了解即可，通常采用css加边框
通常情况下，宽度与高度不会同时设置，两者同时设置图片会进行等比例调整
CSS涉及1
2
3
4
5
6<body>
<!-- #region 图片加边框并设置颜色-->
<img src="图片路径" alt="图片异常提示" style="border:10px dashed red">
<!-- #region 图片缩放33%-->
<img src="图片路径" alt="图片异常提示" style="zoom: 33%;" >
</body>内容：
1
2
3
4
5<body>
<!-- #region 图片引入-->
<img src="图片路径" alt="图片异常提示">
<img src="图片路径" alt="图片异常提示" width="10px" height="10px" border="10px" >
</body>作用：在指定位置插入一张图片
（四）相对路径与绝对路径
相对路径：从所引入的文件位
（html文件）置起，找到所引入的文件位置绝对路径
- 盘符：
C:/User/img/1.jpg - 网址：
http://blog.li9.top/img/1.jpg
- 盘符：
进入指定文件：
/图片与html文件同文件出基础文件：
../图片与html不同文件1
2
3
4
5
6
7
8<body>
<!-- #region 相对路径-->
<img src="/img/1.jpg" alt="">
<img src="../img/1.jpg" alt="">
<!-- #region 绝对路径-->
<img src="C:/User/img/1.jpg" alt="">
<img src="http://blog.li9.top/img/1.jpg" alt="">
</body>
（五）锚点 \\ 英文：anchor（锚）
类型：双标签、文本标签
作用：在指定位置添加一个超级链接
属性：
title：与img标签属性相同
href：地址 （相对、绝对均可）
target：跳转新的页面打开，值：
_blank1
2
3
4<body>
<a href="http://********.jpg" title="鼠标悬停文本">文本</a>
<a href="http://********.jpg" target="_blank" >文本</a>
</body>锚点使用
通过设置锚点，实现页面内任意位置变动
法一：设置一个空锚点，给
空锚点设置name属性值，将name属性值带#引入href值，href是锚，name、id是点，锚点的值要一致。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<h1>标题一</h1>
<a href="#maodian1">标题2</a>
<a href="#maodian2">标题3
<a href="#maodian3">标题4</a>
</a>
<h2>标题2</h2>
<a name="maodian1"></a>
<p>
文本内容1***********************
</p>
<h2>标题3</h2>
<a name="maodian2"></a>
<p>
文本内容***********************
</p>
<h2>标题4</h2>
<a name="maodian3"></a>
<p>
文本内容***********************
</p>
</body>法二：
给标题设置id增加锚点的点，id与name一样，要与锚href的值一致。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<body>
<h1>标题一</h1>
<a href="#maodian1">标题2</a>
<a href="#maodian2">标题3
<a href="#maodian3">标题4</a>
</a>
<h2 id="maodian1">标题2</h2>
<p>
文本内容1***********************
</p>
<h2 id="maodian2">标题3</h2>
<p>
文本内容***********************
</p>
<h2 id="maodian3">标题4</h2>
<p>
文本内容***********************
</p>
</body>
HTML标签的基本使用
列表
列表通常由一组标签组成，不存在单打独斗的情况,ul与ol基本使用方法一致，差别在于有序与无序
（一）无序列表
作用：
定义一个没有顺序的列表结构，由两个标签组成，ul英文：ulordered（无序列表），li英文：list item（列表项目）1
2
3
4
5
6
7
8<body>
<h1>列表标题</h1>
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
</body>注意
ul内部嵌套li，它们是父子关系，都是容器级标签，关系： ul > li
规律：
ul内部只能嵌套li，li标签内可以嵌套任何标签，甚至是ul无序列表之间没有先后顺序之分，列表项之前的前缀样式由css控制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<body>
<h1>标题</h1>
<ul>
<li>列表1</li>
<ul>
<li>分支一</li>
</ul>
<li>列表2</li>
<ul>
<li>分支二</li>
</ul>
<li>列表3</li>
<ul>
<li>分支三</li>
</ul>
</ul>
</body>
（二）有序列表
作用：定义一个有顺序的列表结构，由两个标签组成，
ol英文：ordered list（有序列表），li英文：list item（列表项目）1
2
3
4
5
6
7
8<body>
<h1>列表标题</h1>
<ol>
<li>第一项目</li>
<li>第二项目</li>
<li>第三项目</li>
</ol>
</body>注意
- ol内部嵌套li，它们是父子关系，都是容器级，关系：ol > li
- 规律：
ol标签内部必须是li，li内部可以嵌套任何标签，甚至是ol
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<body>
<h1>列表标题</h1>
<ol>
<li>
<h2>列表一</h2>
<ol>
<li>分支1</li>
<li>分支2</li>
<li>分支3</li>
</ol>
</li>
<li>
<h2>列表二</h2>
<ol>
<li>分支1</li>
<li>分支2</li>
<li>分支3</li>
</ol>
</li>
</ol>
</body>
（三）定义列表
作用：定义一个标题和内容自定义的列表结构，有三个标签组成，
dl英文：definition list（创建一个自定义列表结构），dt英文：definition term （定义主题），dd英文：definition description （解释）1
2
3
4
5
6
7<body>
<h2>列表标题</h2>
<dl>
<dt>定义标题</dt>
<dd>列表解释</dd>
</dl>
</body>
注意
dl内部只能存放dt和dd，dt和dd是同级关系 ，都是容器级标签dl后可跟多个dt，dd组合，每个dt后可跟多个dd解释，每个dd解释的是上一个最近的dt- dl、dt、dd是组合使用，每个页面可以使用多个dl组合，关系：dl > dt /n dd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27<body>
<h2>列表标题</h2>
<dl>
<!-- #region 组合使用-->
<dt>标题1</dt>
<dd>解释</dd>
<!-- #region 多个解释-->
<dt>标题2</dt>
<dd>解释1</dd>
<dd>解释2</dd>
<!-- #region 容器使用-->
<dt>标题3</dt>
<dd>
<p>文本</p>
<span>第一行</span>
</dd>
</dl>
<!-- #region 多个dl使用-->
<h2>列表2</h2>
<dl>
<dt>分支</dt>
<dd>解释</dd>
<dt>分支2</dt>
<dd>解释2</dd>
</dl>
</body>CSS涉及
border：边线float：位置width：宽度height：高度txt-align: center文本居中1
2
3
4
5
6
7
8
9
10
11
12
13
14<head>
<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>
<style>
dl{
border: 1px solid black;
float: right;
width: 100px;
height: 120px;
}
</style>
</head>
表格
表格基础
由三个标签组成，
table表格（定义了一个表格结构）tr英文：table rows（定义表格的行）td英文：table dock （定义了表格的单元格）关系：table > tr > td1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<body>
<h2>表格</h2>
<table>
<tr>
<td>第一行，第一列</td>
</tr>
<tr>
<td>第二行，第一列</td>
<td>第二行，第二列</td>
</tr>
<tr>
<td>第三行，第一列</td>
<td>第三行，第三列</td>
<td>第三行，第三列</td>
</tr>
</table>
</body>编辑器快捷键：tr*N>td*H 快速
生成 N行H列添加边框 给
table赋值1
<table border="1" style="border-collapse: collapse;">
table 属性
border = “1”设置表格边框css样式：
style="border-collapse: collapse;"th ：表头
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<body>
<h2>表格</h2>
<table border="1" style="border-collapse: collapse;">
<tr>
<th>第1列</th>
<th>第2列</th>
<th>第3列</th>
</tr>
<tr>
<td>第1行，第1列</td>
<td>第1行，第5列</td>
<td>第1行，第3列</td>
</tr>
<tr>
<td>第2行，第4列</td>
<td>第2行，第2列</td>
<td>第2行，第3列</td>
</tr>
</table>
</body>表头快捷键：tr>th*H 快速生成 H列表头
单元格合并
一部分单元格需要进行跨行跨列合并，可以给对应的td和th标签设置相关属性
- rowspan：上下跨行合并 值：math（数字即为夸的行数）
- clospan：左右跨列合并 值：math （数字即为夸的列数）
步骤
确定一行的td数量，和行数（max）
从上到下逐行在td内设置 跨行跨列的属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43<body>
<h2>表格</h2>
<table border="1" style="border-collapse: collapse;">
<!-- #region 第一行-->
<tr>
<!-- #region 左右跨2列-->
<td colspan="2">1</td>
<!-- #region 上下跨2行-->
<td rowspan="2">2</td>
<!-- #region 左右跨3列-->
<td colspan="3">3</td>
<td>4</td>
</tr>
<!-- #region 第二行-->
<tr>
<!-- #region 上下跨两行-->
<td rowspan="2">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<!-- #region 上下跨两行-->
<td rowspan="2">9</td>
<td>10</td>
</tr>
<!-- #region 第三行-->
<tr>
<td rowspan="2">11</td>
<td>12</td>
<!-- #region 左右跨两列-->
<td colspan="2">13</td>
<!-- #region 上下跨两行-->
<td rowspan="2">14</td>
</tr>
<!-- #region 第四行-->
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<!-- #region 左右跨两列-->
<td colspan="2">18</td>
</tr>
</table>
</body>style设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<head>
<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>
<style>
table{
}
td{
width: 100px;
height: 80px;
}
</style>
</head>
表格分区
一个完整的表格注意包括三个部分：表格标题、表格表头、表格主题
一个table 内部包括三个分区标签组成：
caption：定义表格主题thead：定义表格头部，内部嵌套 tr>thtbody：定义表格主题，内部嵌套 tr>td
这个内容太多了。。。。。先放放把。。。。。。
表单元素
微信- 支付宝
