Day1
01 新建文件的时候一定要有后缀 网页后缀 是html
生成网页 英文感叹号！+ 回车键/tab键
生成网页 html:5 + 回车键/tab键
open in browser 浏览器打开的插件
ctrl+/ 生成注释
注释 给开发人员备注看的 不会显示在网页中
web前端标准
复制一行 alt + shift + 下
web前端标准
html 结构标准 网页内容骨架的标记和分类
css 样式标准 网页内容排版和美化
javascript 行为标准 网页里面的功能（数据交互 特效 ）
02 html有不同版本 html1.0 2.0 3.0 4.0 严格版xhtml 5.0
DOCTYPE文档声明 作用是告诉浏览器以下网站是使用哪个版本语法 !DOCTYPE html h5版本
html代表整个网页 网页根元素
Auto Rename Tag 自动重命名标签
盒子标签 vscode-icons 显示文件图标 live servce 服务器环境打开网页
03 并列关系：同级关系 兄弟关系
包含关系：嵌套关系 父子关系
04 tab缩进
shift+tab退格
以后写代码都要缩进
ctrl+u 查看源代码
ctrl+z 撤销操作
ctrl+y 重做操作
f12 打开调试器
f5 刷新
f2 文件重命名
05 h1一级标题
p 段落标签
06 h1到h6 一级到六级 特点：加粗 独占一行 有默认间距
p 段落 特点： 独占一行 有默认间距
07 换行标签br
水平分割线 hr
08 盒子标签总结：
div 划分 一般结合css实现网页分区布局 一行只能排列一个 独占一行
span 范围 小盒子 在大盒子里面再进行划分范围 一行排列多个
html css 单词 布局属性
js 单词 逻辑
09 标签img
标签属性 k=“v” k=“v” 多个属性空格隔开 没有顺序之分
每个标签都会有不同的属性
src 必须 引入图片的路径（相对路径 绝对路径）
alt 图片不能正常显示时出现的文本提示（提高用户体验）
title 标题 鼠标移上图片悬停显示
width宽度 height高度 宽和高只设置一个可以等比例缩放
10 超链接 a
标签属性 href 设置跳转的地址
网络地址，注意需要添加协议符号https:// 或者http://
跳转到本地地址
跳转到图片文件
11 本页面跳转 锚点跳转
固定格式 id=“名称” href=“#id名称”
p{我是第$个}*100
12 emmet语法 快速生成html css
标签里面放内容 {内容}
生成个数 *
生成数字 $ 1 2 3 4
嵌套关系 >
同级关系 +
div>p3
h1+p3+h2+p*4
13 统一添加新标签打开超链接
<basetarget=“_blank”>
target=“_blank” 新标签打开超链接
<ahref=“http://www.wolfcode.cn/“target=”_self”>小狼官网
14 绝对路径
图片路径 文件路径
本地绝对路径：从盘符出发去找文件 找到文件右键属性 位置 复制 + 文件名和后缀名
网络绝对路径：在网络找到一个文件，右键 复制图片地址
注意：绝对路径不可迁移
15 相对路径：从html文件自身出发去查找目标文件
三种情况
同级查找：直接书写文件名+后缀名 或者 ./文件名+后缀名
查找下一级 文件夹名称+文件名和后缀名
查找上一级 …/向上一级
16 空格 浏览器只能识别一个 多个要使用特殊字符
Day2
01
空格
> 大于号
< 小于号
© 版权符号
02 列表根据情况去使用，一般会取消默认样式去自定义 ul>li ol>li一般用来制作导航 商品列表等
注意:不建议在ul>li/ol>li/dl>dt+dd 之间放其他标签
其他标签可放在li和dd里面,li和dd是容器,里面可存放任何标签
有序列表 ol>li
无序列表 ul>li
自定义列表 dl>dt+dd dl是自定义列表的整体 dt列表的标题 dd列表的详情和描述
03 基础选择器:标签 id 类 *通配符
类名定义和使用 class=“类名” 类名不能数字开头也不能纯数字 选择的时候要通过 .类名{css样式}
类名可以加多个,用空格隔开 class=“类名1 类名2 …”
类名的命名规范:建议使用英文命名 http://t.zoukankan.com/leolichao-p-9456206.html 好处:方便维护,方便团队合作
复合选择器:由基础选择器组成的复杂一点选择器 交集 并集 后代 子级
04 /* 语法 w3c /
/ id=“id名” #id名{css样式} /
/ id后期结合js去实现一些功能,这个功能是唯一的,为了避免功能冲突id名不能重复 /
/ 在网页里面同一个id名只能出现一次,类名可以重复使用 */
05 /* * 通配符选择器 可以选择全部标签 /
* {
/ 清除默认的列表样式 /
list-style: none;
/ 外边距 /
margin: 0;
/ 内边距 */
padding: 0;
}
06 /* 自定义字体？哥特字 /
/ 先引入 再使用 /
@font-face {
/ 自定义字体名称 /
font-family: “gete”;
/ 引入字体的路径 */
src: url(./哥特式字体.ttf);
}
p {
/* font-size: 120px; */
/* font-size: 6px; */
font-size: 100px;
/* 可以设置多个字体，用逗号隔开，浏览器会优先选择第一个字体，第一个没有就显示第二个，以此类推 */
font-family: "gete", "impact";
}
07 /* font-weight字体粗细 200细体lighter 400常规normal 700加粗bold /
/ font-style字体样式 normal常规 italic倾斜*/
/* text-decoration文本修饰 none没有 line-through删除线 underline下划线*/
08 /* 显示颜色 三种写法 /
/ 英语 red green blue tomato pink deeppink hotpink white black …/
/ rgba(0255,0255,0255,01) r红色 g绿色 b蓝色 a透明度*/
/* 十六进制哈希颜色值 0~9 a~f十六个数字或者字母组成 #开头 6位或者3位 */
09 /* 文本缩进和行高都可以用px单位 */
/* text-indent文本缩进 em相对单位 表示当前文字大小倍数 1em是一个字的大小*/
text-indent: 2em;
font-size: 16px;
/* line-height行间距 上间距+文字的高度+下间距组成 行高不带单位表示文字大小的倍数 */
line-height: 2;
10 /* 水平居中 /
text-align: center;
/ 一行文字在盒子里面垂直居中，设置行高等于盒子的高度 */
line-height: 600px;
11 css书写位置
内嵌式css 书写在head内部的style标签里面的
推荐使用：书写一次可控制一个页面的标签
在头部书写一个link标签去引入css文件
rel=“stylesheet” 样式表
href书写引入文件的路径
推荐使用，书写一次控制多个页面
行内式css 书写在标签身上style属性里面的 不推荐使用 书写一次一次只能修改一个标签
12 /* 一行排列多个的标签 都是给盒子设置 text-align: center;水平居中 */
Day3
01 /* 文字大小 /
/ font-size: 100px; /
/ 文字粗细 /
/ font-weight: 700; /
/ 文字样式 /
/ font-style: italic; /
/ 行高 /
/ line-height: 200px; /
/ 字体 /
/ font-family: “宋体”; /
/ 以上可以合写成font /
/ font:样式 粗细 大小/行高 字体; /
/ 至少要设置 大小和字体 /
/ 样式 粗细 大小/行高 字体 顺序不可调换 */
02 /* 基础选择器 id 类 标签 通配符* /
/ 复合选择器 由基础选择器组成的复杂选择器 后代（空格） 子集（>） 交集（没有符号） 并集（逗号） /
/ 后代选择器 空格表示里面的 选择器 选择器 /
/ 子元素选择器 >选择第一级子元素 选择器>选择器 只能选择亲儿子 */
03 /* 交集选择器是多个选择器连着写，可以选中同时满足这些选择器条件的标签 /
/ 注意没有符号，连着书写 */
p.cu {
font-size: 100px;
}
div.cu.aa#box {
text-align: center;
}
04 /* 并集选择器 可以书写多个选择器，用逗号隔开，表示共同选择 */
p,
.link,
divspan {
color: red;
}
1708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
