文章目录
2.28日2月最后一天的学习成果,留存,加油
01VScode常用插件
Vscode
插件 (左下):
Chinese,open in browser,live server(用这个打开页面,页面可以自刷新,且是真正的网络协议),beautfly,Veture
常用设置:
自动保存 auto save off-》after delay
每隔多久保存 auto save delay:1000 1s
字体大小 font size 根据自己的习惯
自动折行word wrap:off
颜色主题
02Vscode的增删改查
新建文件
HTML----xxx.html
css----xxx.css
js-----xxx.js
马克飞象------xxx.md
文档------xxxx.txt
修改文件
鼠标右键—重命名
删除文件
邮件删除 delete
增加文件
点击新建文件夹css image等
注意:可以在VScode同时打开多个项目,一个工作区—将文件夹添加到工作区-----也可以删除
03马克飞象
笔记:有道、印象、语雀、石墨
马克飞象
- 很多语法功能
-
大于号是形成一个色块
- ctrl+b 加粗 **strong text**
- <div></div>
printf
ctrl + k 是代码块
04HTML标签
网页的组成部分
HTML 标签,文字元素,图片元素,音乐,视频元素
CSS 样式表美化Html style/link
JS 交互动效
HTML
- 后缀名 xx.html 然后再输入 !摁住enter/table建 会自动生成代码块
- 代码放在body中
HTML标签
###语法:<小写标签名></小写的标签名> 结束比开始多一个/
- 没有结束标签单标签自闭合标签
- 标签分成对和不成对
- 快捷键 标签名加tab 会自动生成一组标签(成对加不成对不加)
img 插入图片
**<img src="">**
- 插入本地图片
绝对路径:C:\Users\ys129\Pictures\ico图标
相对路径:html和图片是同级关系直接写名称
下级关系 /+名称
上级关系…/+名称
<img src="0.ico">
<img src="img/1156973.png">
- 注释ctrl+\
超链接 a
标签属性:属性名=“属性值”
百度
跳转的页面不会覆盖当前页面的话 target=“blank”
百度
跳转在当前页面打开:可以用 target=“_self”,也可以什么也不写
a 超链接 href 小手
思考: a 超链接需不需要下划线 用css样式清空或增加
文字段落
全国脱贫攻坚总结表彰大会2021年2月25日在北京隆重举行。中共中央总书记、国家主席、中央军委主席习近平向全国脱贫攻坚楷模荣誉称号获得者颁奖并发表重要讲话。中共福建省寿宁县下党乡委员会获“全国脱贫攻坚楷模”荣誉称号。
复制整行代码快捷键: shift + alt + 下箭头 文字段落首行缩进:思考如何实现文字段落首段缩进,css ` `:空格符号- 标题标签:数字越大文字越小1-6,默认加粗效果
<h1></h1>
<h2></h2>
<h3></h3>
快捷生成方法
h${百度$}*6会生成
<h1>百度1</h1>
<h2>百度2</h2>
<h3>百度3</h3>
<h4>百度4</h4>
<h5>百度5</h5>
<h6>百度6</h6>
鼠标右键检查可以查看页面代码
文章大标题一般用h1
小模块h2
思考:去掉默认加粗 css
05常用四大标签问题解决
常用p标签首段缩进
text-indent:2em(1em=1个字)
css引入的多种方式
1.行内式<p style="text-indent:2em">
2.内嵌式:一般写在head里,title后面
3.外链式
<style>
p{text-indent:2em}
</style>
<style type="text/css"> </style>`
a标签需要把下划线去掉
a标签会有默认下划线和小手
<style>
a{text-decoration:none}
</style>
a默认去掉下划线,鼠标移上来就添加下划线
<style>
a:hover{text-decoration:underline;color:red}
</style>
h标签去掉加粗
- 粗体变细体 font-weight:normal 接近100
<style>
h2{font-weight:normal}
</style>
- 细变粗font-weight:bold 接近900
<style>
p{font-weight:bold}
</style>
- img 标签
06有序列表无序列表
列表
- 无序列表
快捷键:ul>li*4
<ul>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
</ul>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TivANqd2-1614523299854)(./1614500785283.png)]
- 有序列表
<ol>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
</ol>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JDql26NP-1614523299855)(./1614500905674.png)]
- 去掉小黑点和数字
<style>
li{list-style:none}
</style>
07去掉浏览器默认间距
##body和p都有间距
- 清空所有间距
外间距margin(谷歌默认8像素)
内填充padding
*{margin:0;padding:0}
*:通配符 - 为了保证页面在所有页面在浏览器中都达到一致,要把标签默认样式全部
也可以将通配符改成几个标签中间用逗号隔开
body,p,ul{padding:0;margin:0 - 重置样式表 reset.min.css 会经常用到
08块级标签
div
- div用来划分结构,容器,包裹其他元素
<div>
</div>
盒子模型样式属性
- 宽:width
- 高度:height
- 背景颜色:bac,kground-color/background
<style>
div{height: 424px;
width: 00;
background-color:aqua;}
</style>
#09行内标签span
span用来划分结构 文字元素,行内元素(span里面可以嵌套行内元素或文字元素)
<ul>
<li><span>1</span>细变粗font-weight:bold 接近900</li>
<li><span>10</span>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
</ul>
span与块级元素区别:行内元素宽高属性不起作用,他的大小由内容多少来决定
- 行内元素span设置宽高属性不起作用 需要转换成具有块级元素特点的属性,display:inline
- 块级元素div设置高度属性都是起作用的,不需要任何的转换 display:block
行内元素=>块级元素 display:block(独占一行)
display:inline-block(不会独占一行)
将span内数字占的大小变得一样
<style>
span{
display:block;
height: 20px;
width: 20;
background-color:red;}
</style>
文本内容基本以text开头
文字以font开头
可以用文本类的方法text-align: center来居中
超出span的文字用省略号实现
overflow: hidden;溢出隐藏省略号这三条件缺一不可
white-space: nowrap;强制不折行
text-overflow: ellipsis;超出文字用什么方式来显示
10几个特殊标签
em、i斜体标签
可单独控制这几个字
i也控制斜体
<li><em>细变粗font-weight:bold 接近90</em>细变粗font-weight:bold 接近900</li>
让斜体不斜
em{
color: #000;
font-style: normal;
}
strong、b标签
b标签也可以强调
<li><strong>变粗font-weight:bold 接</strong>细变粗font-weight:bold 接近900</li>
音频视频元素
###视频播放器
注:谷歌浏览器禁用了自动播放
标签:video
autoplay 自动播放 - autoplay=“autoplay”
controls 播放器控件 - controls=“controls”
loop 循环播放 - loop="loop"等同于loop
<video src="" autoplay></video>
音频播放器
标签:audio
<audio src="iTunes Library Genius.itdb"></audio>
##嵌套网页
标签:iframe
<iframe src="https://www.baidu.com" frameborder="0" width="50" height="800" >
##公司符号
©
11类选择器
写网页的时候要按照总上到下,从左到右,从外到里的顺序写
类选择器:class
后代选择器:div ul li span{}
<style>
.zfstory{height: 424px;
width: 500px;;
background-color:aqua;}
.zfstory li{
width:300px;
}
</style>
<div class="zfstory">
<ul>
<li><em>细变粗font-weight:bold 接近90</em>细变粗font-weight:bold 接近900</li>
<li><strong>变粗font-weight:bold 接</strong>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
</ul>
</div>
行内块元素对齐为基线对齐
vertical-align: middle;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ESorcz3v-1614523299856)(./1614518120260.png)]
#12行内元素和块级元素
img、a、h1-h6、p、ul、li、div、span、em、i、b、strong、audio、video、iframe
行内标签 display:inline ------a、span、 em、b、i、strong、img
- 大小是自身内容大小
- 行元素设置宽高不起作用,需要转换 display:block(上下结构)、inline-block(左右结构)
- 行内元素不能嵌套块级元素,可以嵌套行内元素或文字元素
块级元素display:block -----div、h1-h6、p、ul、li、ol、 - 它的宽度是父元素的宽度,高度是本身内容的高度
- 可以嵌套其他块级元素或者行内元素
行内块标签 display:inline-block
li>span----子级选择器 儿子元素
<li><span></span></li>
span li{}----后代选择器 儿子元素 孙子元素
<span>
<ul>
<li>
细变粗font-weight:bold 接近900
</li>
</ul>
</span>
##思考:如何让独占一行的div变成不独占一行的div
inline虽然独占一行但是内容无他就无
行内块 display:inline-block可以,但是间距固定
解决方法1:用浮动代替inline-block
解决方法2:给父元素添加属性 font-size:0,为避免子元素font-size失效要给子元素重新设置
<style>
.main{font-size: 0};
</style>
<div class="main">
<div class="children"></div>
<div class="children"></div>
<div class="children"></div>
<div class="children"></div>
</div>
转化的时候我们只有这样的情况:我们一般不会把元素转为行内元素
一般往块或行内块转化
空元素 单元素—<br>换行符<hr>分割符
##常用的HTML标签汇总
- img、a、h1-h6、p
- 三大列表:ul li、ol li、dl dt dd
- 划分快:div、span
- 文本格式化类:em、i、strong、b、small、big、del
- 视频video、音频audio
- iframe 嵌套网页
##HTML的分类 - 行内元素 display:inline -------a、em、i、strong、b、small、big、del、video、audio
- 块级元素 display:block -------div、h1-h6、p、ul li、ol li、dl dt dd
- 行内块元素img
##display的取值 - display:inline
- display:block
- display:inline-block
- display:none(默认是下拉框隐藏,鼠标移上去才能看见,移走就消失不见)
##让元素消失不见的办法
display:none
<style>
.layer{
width: 100px;
height: 100px;
background-color: bisque;
display: none;
}
.main:hover .layer{//注意这里hover后需要空一格,不空格不显示
display: block;
}
</style>
<div class="main">
<button>按钮</button>
<div class="layer"></div>
</div>
01VScode常用插件
Vscode
插件 (左下):
常用设置:
02Vscode的增删改查
新建文件
修改文件
删除文件
增加文件
03马克飞象
笔记:有道、印象、语雀、石墨
马克飞象
04HTML标签
网页的组成部分
HTML
HTML标签
语法:<小写标签名> 结束比开始多一个/
img 插入图片
超链接 a
文字段落
05常用四大标签问题解决
常用p标签首段缩进
a标签需要把下划线去掉
h标签去掉加粗
06有序列表无序列表
列表
07去掉浏览器默认间距
body和p都有间距
08块级标签
div
盒子模型样式属性
09行内标签span
10几个特殊标签
em、i斜体标签
strong、b标签
音频视频元素
视频播放器
音频播放器
嵌套网页
公司符号
11类选择器
12行内元素和块级元素
思考:如何让独占一行的div变成不独占一行的div
常用的HTML标签汇总
HTML的分类
display的取值
让元素消失不见的办法
01VScode常用插件
Vscode
插件 (左下):
Chinese,open in browser,live server,beautfly
常用设置:
自动保存 auto save off-》after delay
每隔多久保存 auto save delay:1000 1s
字体大小 font size 根据自己的习惯
自动折行word wrap:off
颜色主题
02Vscode的增删改查
新建文件
HTML—-xxx.html
css—-xxx.css
js—–xxx.js
马克飞象——xxx.md
文档——xxxx.txt
修改文件
鼠标右键—重命名
删除文件
邮件删除 delete
增加文件
点击新建文件夹css image等
注意:可以在VScode同时打开多个项目,一个工作区—将文件夹添加到工作区—–也可以删除
03马克飞象
笔记:有道、印象、语雀、石墨
马克飞象
很多语法功能
大于号是形成一个色块
- ctrl+b 加粗 strong text
printf
ctrl + k 是代码块
04HTML标签
网页的组成部分
HTML 标签,文字元素,图片元素,音乐,视频元素
CSS 样式表美化Html style/link
JS 交互动效
HTML
后缀名 xx.html 然后再输入 !摁住enter/table建 会自动生成代码块
代码放在body中
HTML标签
语法:<小写标签名></小写的标签名> 结束比开始多一个/
没有结束标签单标签自闭合标签
标签分成对和不成对
快捷键 标签名加tab 会自动生成一组标签(成对加不成对不加)
img 插入图片
插入本地图片
绝对路径:C:\Users\ys129\Pictures\ico图标
相对路径:html和图片是同级关系直接写名称
下级关系 /+名称
上级关系…/+名称
<img src="0.ico">
<img src="img/1156973.png">
注释ctrl+
超链接 a
标签属性:属性名=“属性值”
百度
跳转的页面不会覆盖当前页面的话 target=“blank”
百度
跳转在当前页面打开:可以用 target=“_self”,也可以什么也不写
a 超链接 href 小手
思考: a 超链接需不需要下划线 用css样式清空或增加
文字段落
全国脱贫攻坚总结表彰大会2021年2月25日在北京隆重举行。中共中央总书记、国家主席、中央军委主席习近平向全国脱贫攻坚楷模荣誉称号获得者颁奖并发表重要讲话。中共福建省寿宁县下党乡委员会获“全国脱贫攻坚楷模”荣誉称号。
复制整行代码快捷键: shift + alt + 下箭头
文字段落首行缩进:思考如何实现文字段落首段缩进,css
 :空格符号
标题标签:数字越大文字越小1-6,默认加粗效果
hKaTeX parse error: Expected '}', got 'EOF' at end of input: {百度}*6会生成
百度1
百度2
百度3
百度4
百度5
百度6
鼠标右键检查可以查看页面代码 文章大标题一般用h1 小模块h2 思考:去掉默认加粗 css05常用四大标签问题解决
常用p标签首段缩进
text-indent:2em(1em=1个字)
css引入的多种方式
1.行内式
2.内嵌式:一般写在head里,title后面
3.外链式
a标签需要把下划线去掉
a标签会有默认下划线和小手
a默认去掉下划线,鼠标移上来就添加下划线
h标签去掉加粗
粗体变细体 font-weight:normal 接近100
细变粗font-weight:bold 接近900
img 标签
06有序列表无序列表
列表
无序列表
快捷键:ul>li*4
<ul>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
</ul>
Alt text
有序列表
<ol>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
</ol>
Alt text
去掉小黑点和数字
07去掉浏览器默认间距
body和p都有间距
清空所有间距
外间距margin(谷歌默认8像素)
内填充padding
*{margin:0;padding:0}
*:通配符
为了保证页面在所有页面在浏览器中都达到一致,要把标签默认样式全部
也可以将通配符改成几个标签中间用逗号隔开
body,p,ul{padding:0;margin:0
重置样式表 reset.min.css 会经常用到
08块级标签
div
div用来划分结构,容器,包裹其他元素
高度:height
背景颜色:bac,kground-color/background
09行内标签span
span用来划分结构 文字元素,行内元素(span里面可以嵌套行内元素或文字元素)
<ul>
<li><span>1</span>细变粗font-weight:bold 接近900</li>
<li><span>10</span>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
<li>细变粗font-weight:bold 接近900</li>
</ul>
span与块级元素区别:行内元素宽高属性不起作用,他的大小由内容多少来决定
行内元素span设置宽高属性不起作用 需要转换成具有块级元素特点的属性,display:inline
块级元素div设置高度属性都是起作用的,不需要任何的转换 display:block
行内元素=>块级元素 display:block(独占一行)
display:inline-block(不会独占一行)
将span内数字占的大小变得一样
文本内容基本以text开头
文字以font开头
可以用文本类的方法text-align: center来居中
超出span的文字用省略号实现
overflow: hidden;溢出隐藏省略号这三条件缺一不可
white-space: nowrap;强制不折行
text-overflow: ellipsis;超出文字用什么方式来显示
10几个特殊标签
em、i斜体标签
可单独控制这几个字
i也控制斜体
- 细变粗font-weight:bold 接近90细变粗font-weight:bold 接近900
- 让斜体不斜 em{ color: #000; font-style: normal; }
strong、b标签
b标签也可以强调 - 变粗font-weight:bold 接细变粗font-weight:bold 接近900
- 音频视频元素 视频播放器 注:谷歌浏览器禁用了自动播放 标签:video autoplay 自动播放 - autoplay=“autoplay”
controls 播放器控件 - controls=“controls”
loop 循环播放 - loop=”loop”等同于loop
音频播放器
标签:audio
公司符号 ©
嵌套网页
标签:iframe11类选择器
写网页的时候要按照总上到下,从左到右,从外到里的顺序写
类选择器:class
后代选择器:div ul li span{}- 细变粗font-weight:bold 接近90细变粗font-weight:bold 接近900
- 变粗font-weight:bold 接细变粗font-weight:bold 接近900
- 细变粗font-weight:bold 接近900
- 细变粗font-weight:bold 接近900
- 细变粗font-weight:bold 接近900
vertical-align: middle;
Alt text12行内元素和块级元素
img、a、h1-h6、p、ul、li、div、span、em、i、b、strong、audio、video、iframe
行内标签 display:inline ——a、span、 em、b、i、strong、img大小是自身内容大小
行元素设置宽高不起作用,需要转换 display:block(上下结构)、inline-block(左右结构)
行内元素不能嵌套块级元素,可以嵌套行内元素或文字元素
块级元素display:block —–div、h1-h6、p、ul、li、ol、它的宽度是父元素的宽度,高度是本身内容的高度
可以嵌套其他块级元素或者行内元素
行内块标签 display:inline-block
li>span—-子级选择器 儿子元素
- span li{}—-后代选择器 儿子元素 孙子元素
- 细变粗font-weight:bold 接近900
换行符
分割符常用的HTML标签汇总
img、a、h1-h6、p三大列表:ul li、ol li、dl dt dd
划分快:div、span
文本格式化类:em、i、strong、b、small、big、del
视频video、音频audio
iframe 嵌套网页
HTML的分类
行内元素 display:inline ——-a、em、i、strong、b、small、big、del、video、audio块级元素 display:block ——-div、h1-h6、p、ul li、ol li、dl dt dd
行内块元素img
display的取值
display:inlinedisplay:block
display:inline-block
display:none(默认是下拉框隐藏,鼠标移上去才能看见,移走就消失不见)
让元素消失不见的办法
display:none<div class="main"> <button>按钮</button> <div class="layer"></div> </div>
132mcevq416
退出账号
当前文档
恢复至上次同步状态
删除文档
导出…
预览文档
分享链接
系统
设置
下载桌面客户端
下载离线Chrome App
使用说明
快捷帮助
常见问题
关于
搜索文件
我的第一个笔记本02Vscode的增删改查
我的第一个笔记本01VScode常用插件