文章目录
软件安装
1 vscode
插件
- 颜色主题:Atom One Dark Theme
- 中文:chinese
- 浏览器查看: open in browser、live server
- 更新文件夹图标:VSCode Great Icons
- 自动重命名标签:auto rename tag
- px 转换 rem:px to rem
- js快捷输入:ES7+ react/redux/re…
配置
- 自动保存:文件 - 自动保存
- 代码区文字大小:文件 - 首选项 - Editor
- 自动换行:文件 - 首选项 - wrap
- 空格渲染:文件 - 首选项 - render Whitespace
- 代码缩进:文件 - 首选项 - tab size
2 常用工具
Snipaste截图贴图 、GIF截图、windows on top窗口置顶
HTML
1 快捷键
说明 | 方法 |
---|---|
html外框 | ! |
嵌套输入 | div>ul>li |
2 HTML结构
2.1 整体结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
2.2 文档声明
<!DOCTYPE html>
- 告诉浏览器当前页面是
HTML5
- 必须放在 HTML文档的
最前面,不能省略
- 让浏览器用HTML5的标准去
解析识别内容
2.2 <html></html>
<html lang = "en"></html>
- < html >元素表示一个 HTML 文档的根,也称为
根元素
- css类中称为
:root
- lang属性:
lang = "en"
英文,lang = "zh-CN"
中文。帮助语音合成工具确定要使用的发音,帮助翻译工具确定使用的翻译规则。
2.3 <head></head>
- 规定文档相关的配置信息,也成为元数据,包括文档的标题
title
、引用的文档样式style
、脚本等,可以理解为对整个页面的配置 - 常见元素:
<title>网页标题</title>
<meta>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
,移动端设置
<link>
<link rel="stylesheet" href="index.css"> <!-- css表 -->
<link rel="dns-prefetch" href="网页地址"> <!-- 用户点击链接之前进行DNS查询和协议握手 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <!--站点图标-->
<link rel="stylesheet" type="text/css" href="xxx.css"> <!--作为默认样式表-->
<link rel="alternate" type="text/css" href="xxx.css"> <!--作为可替换样式表-->
2.4 <body></body>
- 所有元素:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
- 常用元素:
p
、h
,img
、a
、iframe
,div
、span
等 - 进阶学习:
ul
、ol
、li
,button
、input
,table
、thead
、tbody
、thead
、th
、tr
、td
等 - 新增元素:再说
3 body常见元素
3.1 常用元素
(1)img - 图片 - (image)
不用绝对路径,常用相对路径,结尾不用 /
(2)a - 标签 - (anchor)
网页中锚点用法
<div id="dian"></div> <a href="#dian"></a>
两个属性:地址href
、打开方式target
<a href="地址" target="_self">默认值,当前窗口</a>
<a href="地址" target="_blank">新窗口</a>
<a href="地址" target="_top">最顶层窗口打开(需结合iframe)</a>
<a href="地址" target="_parent">父级窗口打开(需结合iframe)</a>
地址常用存放方法
<a :href="url"></a>
<script>
const url = "https://........"
</script>
图片跳转链接
<a href="地址" target="_self">
<img src="地址" alt="">
</a>
其他地址
<a href="地址/xxx.zip" target="_blank">下载压缩包</a>
<a href="mailto:123@qq.com" target="_blank">发邮件给123</a>
(3)iframe
- 禁止他人访问设置:X-Frame-Options: sameorigin,只允许同源链接访问
- 基础设置
frameborder
取值:1 ---- 显示,0 ---- 不显示
<iframe src="地址" width="800" height="600" frameborder="0"></iframe>
- a 标签 + iframe
01.html
<div>第1层</div>
<a href="https://www.taobao.com/" target="_self">打开淘宝啊</a>
02.html
<div>第2层</div>
<iframe src="01.html" frameborder="1"></iframe>
03.html
<div>第3层</div>
<iframe src="02.html" frameborder="1"></iframe>
效果图:
(4)H - 标题 - (heading)
h1 -> h6
(5)p - 段落 - (paragraph)
文章段落
(6)div - (division)
分割内容的容器
(7)span
区分特殊文本,同行显示
3.2 不常用元素
strong 偶尔使用,加粗
i 内容倾斜,目前通常用css完成
code 显示代码、等宽字体
<code>一段电脑代码 print("Hello World")</code>
br 换行,已经不用
3.3 全局属性
- id:唯一标识符
- class:元素类名
- style:内联样式
- title:信息文本,鼠标移至旁边会有提示
4 列表
4.1 列表元素
- 常见的列表结构:
- div 格式
- 使用列表元素
- 按照自己的风格来布局
- 列表元素默认的CSS样式,用起来不是非常方便
- 列表元素有很多限制,如:ul / ol 中只能存放 li,li再存放其他元素,默认样式等
- 虽然我们可以通过重置来解决,但是我们更喜欢自由的div
4.2 常见列表
HTML提供了 3 组常用的列表元素
- 有序列表:ol > li
- 无序列表:ul > li
- 定义列表:dl > dt、dd
一般需要去掉默认样式padding:0; margin:0; list-style:none;
li标签内容前的小标设置 list-style-type: ;
(1)有序列表:ol > li
ol(ordered list):直接子元素只能是 li;li(list item):列表中的每一项
(2)无序列表:ul > li
直接子元素为 li
(3)定义列表:dl > dt、dd
直接子元素为 dt、dd
dt(definition term):term 是项的意思,列表中每一项的项目名
dd(definition description):内容,dt 后紧跟着一个或多个 dd
代码: 效果:
5 表格
5.1 元素
原始表格
- table 表格
- tr(table row) 行
- td (table data)单元格
增加其他元素
- thead 表头
- tbody 表格的主体
- tfoot 表格的页尾
- caption 表格的标题
- th 表格的表头单元格
表格重构如下
<table>
<caption>表格标题</caption>
<thead>
<tr><th>表格头头</th></tr>
</thead>
<tbody>
<tr><td>表格内容</td></tr>
</tbody>
<tfoot>
<tr><td>表格结尾</td></tr>
</tfoot >
</table>
效果:
5.2 边框 CSS
table {
border-collapse: collapse; /*表格内的边框:collapse 合并,separate 分开 */
}
table tr td[rowspan] {
font-size:16px;
} /* 获取元素加粗 */
5.3 合并
跨列 | ,左列和右列,1-1 和 1-2
跨行 — ,上行和下行,1-1 和 2-1
项目 | Value |
---|---|
1-1 | 1-2 |
2-1 | 2-2 |
<tr> <td colspan="2">1-1</td> <!-- <td>1-2</td> --> </tr>
<tr> <td>2-1</td> <td>2-2</td> </tr>
<tr> <td>1-1</td> <td rowspan="2">1-2</td> </tr>
<tr> <td>2-1</td> <!--<td>2-2</td> --> </tr>
6 表单
6.1 表单属性
form 通常作用表单的外壳,将表单作为一个整体来操作(如:重置、提交)
- action:提交表单数据的请求URL
- method:请求方法(get 和 post ),默认 get。
- target:参考 a 元素的 target
请求方式对比
get:http://www.baidu.com/login?number=234&password=123
post:http://www.baidu.com/login
,隐藏请求的内容“number=234&password=123”
6.2 常用元素
- form 表单,一般情况下,其他表单相关元素都是它的后代元素
- input 单行文本输入框、单选框、复选框、按钮等元素
- select 下拉选择框
- option 下拉选择框
- textarea 多行文本框
- button 按钮
- label 表单元素的标题
(1)input 输入框
input的表现为行内替换元素,但因形式多样,也是非标准的行内替换元素,input的详细描述。
- type属性:
text
文本框明文输入、password
文本框密文输入、radio
单选框、checkbox
复选框、button
按钮、reset
重置、submit
提交表单数据给服务器、file
文件上传、time
时间、date
日期 readonly
只读disabled
禁用checked
默认被选中,只有当type为redio或checkbox时可用autofocus
当页面加载时,自动聚焦name
名字value
取值
(2)布尔属性
disabled
禁用、checked
被选中、readonly
只读、multiple
多选、autofocus
自动聚焦、selected
已选择- 布尔属性可以没有属性值,写上属性名就代表使用这个属性
- 如果要给布尔属性设值,值就是属性名本身
<input type='text' disabled autofous readonly>
<!-- 等价于 -->
<input type='text' disabled='disabled' autofous='autofous' readonly='readonly'>
(3)button
有两种写法:input 按钮:<input type="button" value="按钮一">
button 按钮 <button>按钮二</button>
input 的按钮一般用于表单中的 <重置> 和 <提交> 按钮
<input type="reset" value="重置">
和<input type="submit" value="提交">
<input type="button" value="按钮一">
为普通按钮
(4)input 与 label 的关系
- label 元素一般跟 input 配合使用,用来表示 input 的标题
- label 可以跟某个 input 绑定,点击 label 就可以激活对应的 input 变成选中
( label 的 for 与 input 的 id 关联了)
<label for="username">
用户:<input id="username" type="text">
<label>
(5)radio 单选框
name 将性别男女归组,两个 radio 互斥
<label for="male">
<input id="male" type="radio" name="sex" value="male">男
<label>
<label for="female">
<input id="female" type="radio" name="sex" value="female">女
<label>
(6)checkbox 复选框
您的爱好:
<label for="male">
<input id="male" type="checkbox" name="sex" value="male">男
<label>
<label for="female">
<input id="female" type="checkbox" name="sex" value="female">女
<label>
(7)textarea 多行输入框
cols 宽度,列数,rows 高度,行数
<textarea name="info" id="inputLabel" cols="30" rows="10">
缩放的 css 设置
- 禁止缩放:resize: none
- 水平缩放:resize: horizontal
- 垂直缩放:resize: vertical
- 水平垂直缩放:resize: both
(8)select 和 option 的使用
- option 是 select 的子元素,一个 option 代表一个选项
- select 常用属性
- multiple:可以多选
- size:显示多少项
- option 常用属性
- selected 默认被选中
<select name="fruits" id="" multiple size="2">
<option value="apple" selected>苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橘子</option>
</select>
注意:每个 option 都可以加上 label
7 Emmet语法
一个提高前端开发效率的工具,输入 html 或 css 缩写后,按 tab 或 enter 自动生成代码
7.1 子代(>),兄弟(+)
div > h1 + p
7.2 多个(*),上一级(^)
ul > li * 10
,多个- 上一级:设 div 下有四个子元素:span p h1 p (兄弟关系),其中 h1 下包含元素 span 和 i,有两种写法
div > span + p + ( h1 > span + i ) + p
div > span + p + h1 > span + i ^ p
^
可以写很多个,但最终只能到 body 元素
7.3 分组( () )
( div > span + p ) + div > p
7.4 属性 内容
a[href="www.baidu.com"]{百度一下}
=<a href="www.baidu.com">百度一下</a>
- 有内容:
ul > li { 列表内容 } * 10
- 有 id:
div # main
- 有 class:
.classname
7.5 数字($)
ul > li { 列表内容 $ } * 10
- 当写
$$$
时,表示001、002、003等
7.6 隐式标签
ul > .item * 3
,自动加上 css为 item 的 li。
7.7 css简写
w100
=width: 100px;
w20+h30+m40+p50
=width: 20px;height: 30px; margin: 40px;margin: 50px
m20-30-40-50
= margin 的上右下左dib
=display: inline-block
bd1#cs
(border,1px,#ccc,solid) =border: 1px solid #ccc
8 HTML5 新增的元素
![](https://i-blog.csdnimg.cn/blog_migrate/25731dc671cf86a8cdc26751ecf9c82e.png)
8.1 语义化元素
<header>
:头部元素
<nav>
:导航元素
section
:定义文档某个区域的元素
article
:内容元素
aside
:侧边栏元素
footer
:尾部元素
8.2 音频元素 video audio
(1)视频、音频
之前是通过flash或者其他的插件来实现,但无法很好支持html/css特性、兼容性问题
视频:<video>
音频:<audio>
video
<video src="../video/xx.mp4" controls></video>
video 中间是针对浏览器不支持此元素的降级处理
<video src="xx.mp4" controls width="500" autoplay muted>
<source src="xx.webm">
<p>以上视频格式都不可用,建议更换或升级浏览器查看</p>
</video>
audio
<audio src="xxx.mp3" controls autoplay muted></audio>
<audio src="xx.mp3" controls autoplay muted>
<source src="xx.ogg">
<p>以上视频格式都不可用,建议更换或升级浏览器查看</p>
</audio>
8.3 input
input文档,扩展属性:
- placeholder:占位文字
- multiple:多个值
- autofocus:聚焦
multiple:允许用户输入多个值,input 内仅在值为email、file时生效。
另有 👇 多选方式,但该方法不好用,一般会用复选框形式
<select multiple="multiple" size="2">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
input 的 type 值:
date、time、number、tel、color 颜色选择器、email
8.4 data-* 自定义数据属性
<div data-name="pyy" data-age="60" class="girl">
定义姓名和年龄
</div>
<script>
const girl =document.querySelector(".girl")
console.log(girl.dataset)
</script>
9 前端代码步骤
(1)先完成结构
(2)重置样式(body、a、ul)
(3)先整体、后局部;从外往里,从上往下
(4)去除重复代码(css);将重复的逻辑放到一个单独的class中(.icon);不同的代码抽到不同的class(.new .hot)
重置代码常用,可前往 凹凸实验室规范 参考
body, h1, h2, h3,ol, ul, li, p, dl, dt, dd {
margin: 0;
padding: 0;
}
a {
text-decoration: none; /* 去除下划线 */
color: #000;
outline: none;
}
ul, ol, li {
list-style: none;
}
input {
outline: none;
border: none;
}
img {
vertical-align: top;
}
i {
font-style: normal;
}
10 BFC 块级格式化
BFC(Block Formatting Context - 块级格式化上下文)
IFC( Inline Formatting Context - 行内级格式化上下文)
会创建BFC的元素:
根元素<html>
、浮动元素float: 不为 none
、绝对定位元素position: absolute / fixed
、行内块元素display: inline-block
、表格单元格display: table-cell
、表格标题 display: table-caption
、匿名表格单元格元素、 overflow 计算值不为visible的块元素、弹性元素,display: flex / inline-block
元素的直接子元素、网格元素,display: flex / inline-block
元素的直接子元素、display: flow-root
BFC含义:
- box会在垂直方向上一个挨着一个的排布;
- 垂直方向的间距由margin属性决定;
- 在同一个BFC中,相邻两个box之间的margin会折叠(collapse);
- 在BFC中,每个元素的左边缘是紧挨着包含块的左边缘的;
10.1 作用一:解决折叠问题
上下相邻两个box
<div class="box1">
margin-bottom: 30px</div>
<div class="box2">
margin-top: 10px</div>
呈现的margin为最大设置值 30px
解决方案:
<div class="box-wrapper">
overflow: auto
<div class="box1">
margin-bottom: 30px </div>
</div>
<div class="box2">
margin-top: 10px </div>
.box-wrapper 的 overflow:auto 使得自身已经形成了一个新的 BFC,而 .box2 仍属于 html 的BFC,(它俩不同属一个BFC,所以不会折叠)
10.2 作用二:浮动时高度塌陷
浮动元素是脱标元素。高度塌陷是子元素有高度,父元素没有高度(忽略高度)
解决方法一:
需要使用清除浮动clear: both
,父元素加上样式 .clear_fix
.clear_fix::after {
content: "";
display: block;
clear:both;
height:0;
visibility: hidden;
}
解决方法二:
父元素加上css属性:overflow: auto
,前提!该父元素的height必须是auto(默认)
注意:设置这个 overflow 后,并非子元素给父元素汇报高度,而是父元素不断增加高度,直至包裹子内容。
解决方法三:加上空div
另外:关于定位元素的高度计算问题
相对定位(relative)未脱离标准流,所以父级仍有高度;
绝对定位(absolute)会脱离标准流,设置后父级便没了高度。
(未解决疑惑:父overflow: auto; position: relative,子position: absolute,子元素消失不见)