Html + Css 学习
一、VSCode常用 ( 前端还在学习, 待更新… )
* 新建文件：ctrl + N
* 切换自动换行：alt + Z
* 复制当前行：ctrl + C；ctrl + V；
* 执行在默认浏览器 ：alt + B;
* 设置vscode文件折叠属性: 打开设置 -> 搜索compact -> 勾选
* (Win10桌面上)直接打开Powershell窗口: shift+右键
* 打开终端: "ctrl+`"
* vue_shop项目: 每次复制过去,记得导入node_modules和npm install; 开启:先开node app.js;再开vue ui;
1.Debugger for Chrome:
2.A Touch of Lilac Theme:
3.Auto Close Tag: 同时关闭首尾标签?
4.Auro Rename Tag
5.background: 设置图片背景?
6.Beautify: 美化代码?
7.Bracket Pair Colorizer:
8.Chinese: 中文显示?
9.CSS Peek:
10.css-class-intellisense:
11.EditorConfig for VS Code:
12.ESLint:
13.FreeMarker:
14.GitLens -- Git supercharged:
15.Highlight Matching Tag:
16.HTML CSS Support:
17.HTML to CSS autocompletion:
18.JavaScript (ES6) code snippets:
19.Live Server:
20.markdownlint:
21.Meterial Icon Theme: 文件图标?
22.open in browser: 打开在浏览器?
23.Path intellisense:
24.Vetur: vue代码颜色插件.
25.Vue Theme: vue颜色主题?
26.JS-CSS-HTML Formatter: 格式化代码
27.Prettier-Code formatter:
28.
29.
30.
3.1 设置代码自动保存: 文件→首选项→设置→搜索框输入"autosave"→设置为afterDelay模式,1000ms自动保存!
3.2
二、HTML
2.1 HTML 初识
2.2.1 html常用标签
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 标题标签,有<h1>~<h6>六个标签.
<p> 段落标签;
<hr> 水平线标签;
<br> 换行标签;
<div> 和 <span>: 网页布局中最主要的2个盒子标签, 没有语义.
<b>和<strong> 文字以粗体显示标签;
<i>和<em> 文字以斜体显示
<s>和<del> 文字以加删除线显示
<u>和<ins> 文字以加下划线显示
<img src="images/pic.jpg" width="300" height="300" border="3" alt="图像不能显示时的替换文本" title="鼠标悬停显示内容" />
<a href="#/跳转目标" target="目标窗口的弹出方式">*文本或图像*</a>
target="_self": 默认窗口弹出方式
target="_blank": 新窗口弹出
<a href="#two"><h3 id="two">第2集</h3>: 锚点
<table>
<caption>表格标题, 居中显示在表格之上</caption>
<tr>
<th>表头单元格标签</th>
...
</tr>
<tr>
<td>单元格</td>
...
</tr>
...
</table>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
<ol type="A">
<li>列表项1</li>
<li>列表二</li>
<li>列表三</li>
</ol>
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
<input type="属性值" value="你好">
//常用的type属性如下:
<input type="text" name="username" value="请输入用户名" maxlength="6"> =>单行文本输入框
<input type="password" name="pwd"> =>密码输入框
<input type="radio" name="sex" value="女" checked="checked"> =>单选按钮
<input type="checkbox" name="hobby" value="打豆豆" checked="checked"> =>复选框
<input type="button" value="获取短信验证码"> =>普通按钮
<input type="submit" value="免费注册"> =>提交按钮
<input type="reset" value="重新填写" > =>重置按钮
<input type="image" > =>图像形式的提交按钮
<input type="file" > =>文件域
<label> 用户名：
<input type="radio" name="usename" value="请输入用户名">
</label>
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
<textarea >
文本内容
</textarea>
<select>
<option selected ="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<form action="url地址" method="提交方式:get/post" name="表单名称">
各种input表单控件
</form>
* iframe 标签用于在一个页面中嵌入另一个页面.
* 配合 a 标签使用时, 可以用a标签指定 iframe指向的页面.
<a href="http://www.so.com" target="iframe-test1">显示360搜索</a>
<iframe name="iframe-test1" width="600" height="600" src="./12-select下拉表单.html"></iframe>
- GET 和 POST 的区别
- GET在浏览器回退时是无害的，而POST会再次提交请求。
- GET请求会被浏览器主动cache，而POST不会，除非手动设置。
- GET请求只能进行url编码，而POST支持多种编码方式。
- GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
- GET请求大小一般是(1024字节)，http协议并没有限制，而与服务器，操作系统有关，POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。
- 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
- GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
-
link和@import的区别？ 1、从属关系区别：
link属于html标签，而@import是css提供的。
2、加载顺序区别：
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载。
3、兼容性区别：
import只在IE5以上才能识别，而link是html标签，无兼容问题。
4、dom可操作性区别：
可以通过JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式
5、权重区别：
如果已经存在相同样式，@import引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出link方式的样式权重高于@import的权重这样的直观效果。
（简而言之，link和@import，谁写在后面，谁的样式就被应用，后面的样式覆盖前面的样式。）
-
src与href的区别？ 1、href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
2、src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
2.2.2 HTML特殊字符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kKVIfWMJ-1636971054504)(learnPic\html特殊字符.jpg)]
2.3 HTML5 新增的语义化标签
* <header>: 头部标签
* <nva>: 导航标签
* <article>: 内容标签
* <section>: 块级标签(定义文档某个区域)
* <aside>: 侧边栏标签
* <footer>: 尾部标签
<audio>: 音频
<vedio>: 视频
<input type="** number/ tel/ search/** email/ url/ date/ time/ month/ week/ color">
<form action="">
<input type="search" name="sear" id=""
required="required" //表示必填.
placeholder="文字提示" //表单的提示信息.
autofocus="autofocus" //鼠标自动聚焦属性.
autocomplete="off/on" //显示浏览器基于之间键入过的值.>
<input type="file" name="" id=""
multiple="multiple"> //可以多选文件提交.
<input type="submit" value="提交">
</form>
三、CSS
3.1 初识CSS
- **「 CSS」**CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表)。
- 「CSS注释」
/* 这是CSS中的注释. */
3.1 引入CSS样式表
「1.行内式(内联样式)」
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
例如：
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
「2.内部样式表(内嵌样式表)」
<head>
<style type="text/CSS">
选择器(选择的标签) {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
「3.外部样式表(外链式)」
<link rel="stylesheet" href="index.css">
3.3 CSS选择器: 基础选择器, 复合选择器, 伪类选择器
3.3.1「 CSS基础选择器总结」
| 选择器 | 作用 | 缺点 | 用法 |
|---|
| 标签选择器 | 可以选出所有相同的标签. | 不能差异化选择. | p { color：red;} | | 类选择器 | 可以选出1个或者多个标签. | 可以根据需求选择. | .nav { color: red; } | | id选择器 | 一次只能选择器1个标签. | 只能使用一次(不推荐使用). | #nav {color: red;} | | 通配符选择器 | 选择所有的标签. | 会匹配页面所有的元素，降低页面响应速度(不推荐使用). | ***** {color: red;} |
3.3.2「 CSS复合选择器总结」
| 选择器 | 作用 | 特征 | 隔开符号及用法 |
|---|
| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代. | 符号是空格: .nav a | | 子代选择器 | 选择 最近一级元素 | 只选亲儿子. | 符号是> : .nav>p |
/* 8.1 链接伪类选择器: 跟链接相关, 注意记住LVHA的声明顺序-> :link/:visited/:hover/:active;
8.2 :focus选择器: 跟表单相关, 记住input:focus{…} */
3.3.3 「CSS3 - 属性选择器」
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kx4RiPIK-1636971054506)(learnPic\CSS3属性选择器.png)]
3.3.4 「CSS3 - 结构伪类选择器」
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JCqG1V77-1636971054506)(learnPic\CSS3 - 结构伪类选择器.png)]
nth-child(n)参数n详解: n可以是数字、关键字、公式; 常见的关键字有 even 偶数、odd 奇数;
常见的公式如下(如果n是公式，则从 0 开始计算, 必须写成类似`2n 或 2n+1 或 -n+5`的公式), 但是第 0 个元素或者超出了元素的个数会被忽略.
3.3.5 「CSS3 - 伪元素选择器」
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cvj4hllt-1636971054508)(learnPic\CSS3 - 伪元素选择器.png)]
伪元素选择器注意事项
1. before 和 after 必须有 content 属性; before 在内容前面，after 在内容后面.
2. before 和 after 创建的是一个元素，但是属于行内元素
3. 创建出来的元素在 Dom 中查找不到，所以称为伪元素. 伪元素和标签选择器一样，权重为 1
3.4 常用属性样式?
-
CSS基础属性
font-style: 用于定义字体风格，如设置斜体、倾斜或正常字体.
font-weight: 用于设置字体粗细(normal, bold, 100~900).
font-size: 用于设置字号(em, *px*, in, cm, mm, pt).
font-family: 用于设置哪一种字体.
font: 综合设置字体样式.
color: 用于定义文本的颜色.
text-align: 用于设置文本内容的水平对齐方式，相当于html中的align对齐属性(left, right, center).
line-height: 用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高(要设置在font属性下面，否则无效).
text-indent: 用于设置首行文本的缩进.
text-decoration: 用于给链接修改装饰效果(none, underline, overline, line-through).
background-color: 颜色值; ->用于设置背景颜色.(默认的值是 transparent透明的).
background-image: none | url (url); ->用于设置背景图片.
background-repeat : repeat | no-repeat | repeat-x | repeat-y; ->用于设置背景平铺;
background-position : position || position; ->用于设置背景位置.
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
background: rgba(0, 0, 0, .3); ->用于设置背景半透明.
opacity: .2; ->用于设置盒子半透明(设置opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度).
display:inline; 块元素转为行内元素.
display:block; 行内元素转为块元素.
display: inline-block; 块、行内元素转换为行内块.
3.5 CSS三大特性
-
CSS 层叠性 1.所谓层叠性是指多种CSS样式的叠加.
2.样式冲突，遵循的原则是就近原则。 哪个样式离着结构近，就执行哪个样式。样式不冲突，不会层叠。
-
CSS 继承性 1.子标签会继承父标签的某些样式，如文本颜色和字号。
2.子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）.
-
CSS 优先级 1.选择器相同，则执行层叠性; 选择器不同，就会出现优先级的问题。
2.CSS 权重计算问题:
2.1 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
2.2 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
2.3 div { color: pink !important; }
-
权重计算公式：
| 标签选择器 | 计算权重公式 |
|---|
| 继承或者 * | 0,0,0,0 | | 每个元素（标签选择器） | 0,0,0,1 | | 每个类，伪类 | 0,0,1,0 | | 每个ID | 0,1,0,0 | | 每个行内样式 style="" | 1,0,0,0 | | 每个!important 最重要的 | ∞ 无穷大 |
3.6 盒子模型 ( css学习三大重点: CSS盒子模型, 浮动, 定位 )
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z1CnUvIV-1636971054509)(learnPic\CSS盒子模型.png)]
- 标准 w3c 盒子模型的范围包括 margin、border、padding、content
3.6.1 盒子模型
box-sizing: content-box;
box-sizing: border-box;
border-width
border-style
border-color
border : border-width || border-style || border-color;
border-top /bottom /left /right:宽度 样式 颜色;
border-collapse: collapse;
padding: 上内边距 右内边距 下内边距 左内边距 ；
padding: 上内边距 左右内边距 下内边距;
...
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
border-radius: length;
border-radius: 左上角 右上角 右下角 左下角;
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度
box-shadow: offset-x offset-y [blur [spread]] [color] [inset];
3.6.2 浮动
-
CSS 提供了3种机制来设置盒子的摆放位置，分别是普通流**（标准流）、浮动 和 定位**;
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制(脱标),不占位置; 移动到指定位置。
* 让多个盒子(div)水平排列成一行，使得浮动称为布局的重要手段。
* 可以实现盒子的左右对齐等等。
* 浮动最早是用来控制图片，实现文字环绕图片效果。
* float属性会改变元素的display属性，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们前面的行内块极其相似。
float: none | left | right;
W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如:
<div style="clear:both"></div>，或则其他标签br等亦可。
可以给父级添加： overflow: hidden| auto| scroll 都可以实现。
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
3.6.3 定位
-
将盒子**「定」在某一个「位」**置 自由的漂浮在其他盒子(包括标准流和浮动)的上面。 -
定位是用来布局的，它有两部分组成：定位 = 定位模式 + 边偏移. ( **「边偏移」: **top、bottom、left 和 right 属性定义元素的边偏移.)
选择器 { position: 属性值; }
static 「静态」定位
relative「相对」定位
absolute「绝对」定位
fixed 「固定」定位
top 上边偏移
bottom 下边偏移
left 左边偏移
right 右边偏移
绝对定位/固定定位的盒子不能通过设置margin: auto设置水平居中 在使用绝对定位时要向实现水平居中，可以按照下面的方法：
一. left: 50%; 让盒子的左侧移动到父级元素的水平中心位置.
二. margin-left: -100px; 让盒子向左移动自身宽度的一半。
三. 同理垂直居中。
1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；(数字后面不能加单位)
2. 如果属性值相同，则按照书写顺序，后来居上；
3. z-index只能用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
前面提过， display 是显示模式，可以通过以下方式改变显示模式:
① 可以用inline-block 转换为行内块.
② 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
③ 绝对定位和固定定位也和浮动类似， 默认转换的特性转换为行内块。
-
定位小结
| 定位模式 | 是否脱标占有位置 | 移动位置基准 | 模式转换（行内块） | 使用情况 |
|---|
| 静态static | 不脱标，正常模式 | 正常模式 | 不能 | 几乎不用 | | 相对定位relative | 不脱标，占有位置 | 相对自身位置移动 | 不能 | 基本单独使用 | | 绝对定位absolute | 完全脱标，不占有位置 | 相对于定位父级移动位置 | 能 | 要和定位父级元素搭配使用 | | 固定定位fixed | 完全脱标，不占有位置 | 相对于浏览器移动位置 | 能 | 单独使用，不需要父级 |
3.6.4 CSS属性书写顺序：
建议遵循以下顺序?：
- 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
- 自身属性：width / height / margin / padding / border / background
- 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
3.7 CSS3的新特性
-
CSS3新增属性
transition: all 0.3s;
transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);
transform: rotate(45deg);
transform-origin: 50px 50px;
transform: scale(2, 2); => transform: scale(2)
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
@keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
animation-name: move;
animation-duration: 2s;
}
div:hover {
animation-play-state: paused;
}
transform: translateX(100px) translateY(100px) translateZ(100px);
=> ransform: translate3d(x,y,z);
perspective: 200px;
transform: rotateX(45deg) 沿着x轴正方向旋转45deg.
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotate3d(x,y,z,deg); ->transform: rotate3d(1, 0, 0, 45deg);
transform-style: preserve-3d;
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。
1.私有前缀
-moz-: 代表firefox浏览器私有属性·
-ms-∶ 代表ie浏览器私有属性.
-webkit-: 代表safari、chrome私有属性·
-O-: 代表Opera私有属性.
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
3.8 CSS常见问题及解决方法 (CSS高级技巧)
a {
color: gray;
text-decoration: none;
}
a:hover {
color: red;
}
li {
list-style: none;
}
* {
padding:0;
margin:0;
}
.search button {
float: left;
width: 50px;
height: 42px;
border: 0;
background: url(images/btn.png);
}
.text {
height: 35px;
line-height: 35px;
text-align: center;
}
.news-bd ul li {
height: 24px;
line-height: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
盒子内的文字水平居中是 text-align: center; 而且还可以让行内元素和行内块居中对齐.
块级盒子水平居中: 左右margin 改为 auto
<style>
input,textarea {
outline: none;
}
textarea {
resize: none;
}
</style>
display: none; 隐藏对象.
display: block; 除了转换为块级元素之外，同时还有显示元素的意思。
visibility: visible; 对象可视
visibility: hidden; 对象隐藏
overflow: visible | hidden | scroll | auto;
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉(重要).
scroll 不管超出内容否，总是显示滚动条
auto 超出自动显示滚动条，不超出不显示滚动条
style="cursor:default/pointer/move/text/not-allowed"
平时都是去掉的,最直接的写法: outline: 0; 或者 outline: none;
<textarea style="resize: none;"></textarea>
vertical-align : baseline |top |middle |bottom;
解决方法：
①给img 添加 vertical-align:middle | top| bottom等等。让图片不要和基线对齐。
②给img 添加 display：block; 转换为块级元素就不会存在问题了。
需要使用CSS的:background-image、background-repeat、background-position属性进行背景定位，其中最关键的是使用background-position 属性精确地定位。
总结：
a 设置背景左侧，padding撑开合适宽度。
span 设置背景右侧， padding撑开合适宽度 剩下由文字继续撑开宽度。
之所以a包含span就是因为 整个导航都是可以点击的。
div {
width: 0;
height: 0;
...
border-top: 10px solid red;
}
四.网站项目开发
4.1 网站TDK 三大标签SEO优化 ( 以后可能用于定飞优化 ):
1.SEO ( Search Engine Optimization)汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
2.SEO的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。
3.页面必须有三个标签用来符合SEO优化: title, description, keyword.
title: title具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点.
description: 简要说明我们网站主要是做什么的.
keword: keywords是页面关键词，是搜索引擎的关注点之一。keywords最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2的形式。
4.为SEO人员提供以下三大标签:
<title></title>
<meta name="keywords" content="..." />
<meta name="description" content="..." />
|