目录
method 提交方式，包括get，信息拼接（不安全，显示在地址栏），post信息打包（安全）
HTML
开发工具工具准备
vscode
百度官网下载即可，中文国内镜像也可 VSCode中文网 - Visual Studio Code中文官网 VS Code编辑器中文网站
1.汉化
2.热更新（代码保存后，浏览器自动刷新，提高效率）
浏览器
谷歌内核即可
head标签（含meta，viewport）
meta标签
表述和页面有关的信息和配置
charset，字符编码信息
<meta charset="UTF-8">keywords，关键词引入
<meta name="keywords" content="CSDN,c1">description，描述引入
<meta name="description" content="关于c1练习的文档">author，作者引入
<meta name="author" content="第一深情">viewport
配置引入
width，视口宽度
height，视口高度
initial-scale ，初始缩放比例
maximum-scale,最大缩放比例
minnimum-scale，最小缩放比例
user-scalable,是否允许用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1.0为缩放比例，一般到3就停止了link
引入外部资源
href 连接文件地址
rel 当前文档与链接文档的关系
stylesheet css样式
icon 小图标
type 目标文件的类型
<link rel="stylesheet" href="css/">style
内部样式表
script
引入js文件
块标签
特点：
独占一行，
默认高度占满父级,
高度为0，
子级内容撑开高度
区别：
受边距影响
div，h1-h6，p,ul,ol,li,article,section,aside,nav,header,footer
注意
h1大标题，标签只能写一次（title标签后，浏览器检索的就是h1，用多了会被查，然后关到到小黑屋）
h2副标题，最多写八个
h3之后不受限制，但是只有h1-h3具备搜索权重
ul与li组合，无序列表
<ul>
<li>久旱逢甘霖</li>
<li>他乡遇故知</li>
<li>洞房花烛夜</li>
<li>金榜题名时</li>
</ul>
ol与li组合 ，有序列表
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
语义化标签
article,文章
nav，导航栏
header,头部信息
aside，侧边栏
section，区域的意思
footer，底部信息
行标签
span
a, href:链接地址，target：打开方式
i
b
sub
sup
em
strong
特点：
同排序跟显示，遇到父级边界换行
不支持宽高，内容撑开宽高
不支持上下边距
不正常显示上下内边距
换行被解析（编译器里换行被浏览器解析成空格）
区别：不受边距影响
去除边距
*{} ，通配选择器
*{
margin: 0%;
padding: 0%;
}行块标签
内容img
src：资源路径
title:鼠标悬停提示文本
alt:图片无法正常显示时提示文本
特点:只给宽高度，会等比例变化
特点
同序跟显示，遇到父级边界换行
没有宽高时撑开高度
换行被解析（解析为空格）
行块标签转换
inline： 指定对象为行内元素
block： 指定对象为块元素
inline-block：指定对象为行内块元素
display常用属性值
1. none：隐藏对象
1.1 不用none前：
1.2 用了none的时候：
2. inline： 指定对象为行内元素
3. block： 指定对象为块元素
4. inline-block：指定对象为行内块元素
5. table-cell：指定对象为表格单元格
6. flex：弹性盒
6.1 未使用flex前：
6.2 使用flex后：
7. inline转块级元素
display属性详解_木森林哥哥的博客-CSDN博客_display属性
任务补充知识点
i，em 斜体
nav，导航栏
head中包含的标签（例如写两个）
title,style,script,link,meta,base
表单
信息收集与提交
form
属性
action 信息提交地址
method 提交方式，包括get，信息拼接（不安全，显示在地址栏），post信息打包（安全）
表单元素
text,文本框
password，密码框
radio,单选框，（结合name，同一个name，只能单选）；（checked，默认选项 ）
checkbox，复选框
button，按钮
submit，提交
reset，重置
file，文件
hidden，隐藏
placeholder,提示文本
<input type="text" name="" value="">value
https://blog.csdn.net/WinstonLau/article/details/88537552?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166013541416780357276698%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=166013541416780357276698&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~hot_rank-2-88537552-null-null.142%5Ev40%5Epc_rank_34_2,185%5Ev2%5Econtrol&utm_term=input%E7%9A%84value&spm=1018.2226.3001.4187name，很重要
select/option 下拉选择框（搭配option）
textarea 多行文本域（默认可调整，style修改）
特别
form表单下的input 块元素（form本身也是），其他为行块
配套使用
br，换行标签
实现百度一下
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<form action="https://www.baidu.com">
<input type="text" name="wd">
<input type="submit" value="百度一下">
</form>
</body>
</html>
<!-- https://www.baidu.com -->
<!-- <form action="https://www.baidu.com/s"> -->可实现查询后自动跳转
任务16
正则表达式（规则），js，jq学习重点解决
pattern 属性规定用于验证输入字段的正则。
title标签：悬浮提示
习题1
习题二
习题三
css入门
css引入方式
外部（另起文档，然后引入）
内部（style部分的css）
内联（标签内部设置style）
注意
link引入与import引入区别
背景颜色
bgc(快捷键)
rgba（4个值，最后数值为设置透明度，可省0）
#(编码表示)
常见样式
背景
背景色
背景图，
background-image: url();//图片地址链接
background-size: 200px;//一个值，等比例
background-repeat: no-repeat;//不平铺设置
background总结
文本
字体颜色，
字体大小，浏览器最小14px（默认16px），开发版本除外（html.body.body内标签p，css样式可以使字体大小累乘）
字体样式，font-family
对齐方式，text-align
行高，
首行缩进，text-align
字体间距，text-indent;单词间距，letter-spacing
文本装饰线，a标签
a{
text-decoration: line-through;
//文本装饰线
font-size: 30px;
}文本大小写字母，
text-transform: uppercase;
/* 大写 */
text-transform: lowercase;
/* 小写 */
text-transform: capitalize;
/* 首字母大写*/文本排版方式，（随用随百度，几乎用不到）
（比较新，一些浏览器可能不支持，css动画旋转也可以实现）
参考此处文章：
c1认证学习（css+html+js部分）_小白村第一深情的博客-CSDN博客
通配
class
.box{
}id选择器
注意：同一个html文件，id名只能用一次，否则网页检索爬虫会因为原则性问题不检索你的网站，比如h1只能用一次
#box{
}标签名
后代（空格隔开）
div p{
}//更精准，缩小范围子代
群组选择器（，隔开）
div ，p{
}//属性选择器
[class]{
color: ;
}
//所有含class均受影响
[class="yes"]{
color: ;
}
//指定class下名为yes的受影响选择器优先级
id（100）>class（10）>tag（1）
内联样式1000
！important，不在五行之中了属于是
盒子模型
觉得官方这个图做的好，笔者当前还不熟练这种图表示知识点 ，拿来学习（绝不是懒）
圆角
boder-radius：50%（或xpx）
圆环
border：20px solid red；
梯形
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
.s{
border: 20px solid pink;
border-right-color: gold;
border-top-color: greenyellow;
border-bottom-color: tomato;
}
</style>
</head>
<body>
<div class="s"></div>
</body>等腰梯形变三角形
短边宽高设为0
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
.s{
width: 0%;
height: 0%;
border: 20px solid pink;
border-right-color: gold;
border-top-color: greenyellow;
border-bottom-color: tomato;
}
</style>
</head>
<body>
<div class="s"></div>
</body>转化为三角
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
.s{
width: 0%;
height: 0%;
background-color: transparent;
border: 20px solid pink;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: rgba(0,0,0,0);
}
</style>
</head>
<body>
<div class="s"></div>
</body>margin
盒子之间的边距，外边距
重要：叠压和塌陷
叠压：常态下，兄弟标签间的间距以大值为准
怪异盒子
d2{
box-sizing: border-box;
}奥运五环
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
border:10px solid red;
border-radius: 50%;
}
.green{
border-color: green;
}
.red{
border-color: red;
margin-left: 220px;
margin-top: -220px;
}
.yellow{
border-color: yellow;
margin-left: 440px;
margin-top: -220px;
}
.black{
border-color: black;
margin-left: 110px;
margin-top: -110px;
}
.bule{
border-color: blue;
margin-left: 330px;
margin-top: -220px;
}
</style>
</head>
<body>
<div class="green"></div>
<div class="red"></div>
<div class="yellow"></div>
<div class="black"></div>
<div class="bule"></div>
</body>任务23盒子高度
padding-top:10px;是指容器内的内容距离容器的顶部有10个像素，是包含在容器内的；
margin-top:10px;是指容器本身的顶部距离其他容器有10个像素，不包含在容器内；
top:10px;是指容器本身的顶部距离页面的顶端有10个像素。
margin赋值规则
顺时针，上右下左
CSDN案例
浮动
脱离文档流，撑开高度
主要是涉及是否脱离文档流
当height和line-height值相同，则居中
清除浮动
推荐使用
overflow:hidden, 解除塌陷，清除浮动
浮动练习
text-align: center;//父级居中，则子级继承margin-left: ;//块与块边距任务25
图文组合1-6
多行文本最后的是....（图片不清楚）
说实在，写着这篇博客，写到这，1万字了，属实是累有些，毕竟也是第一次写这么专业，这么长的文章，估计如果用一篇写完，草率点也要得5万字以上了，允许我偷个懒仈，QaQ，写真么长，自己也会看蹦的....
看了下一万字好像也没多少东西，还是手写吧，估计写个20遍才能记在心里，好久不忘，笔者之前学过一段时间，加上前面csdn任务训练复习了一遍，但还是东西确实是，知道怎么查，现用先查只能做到，多动手，多写
相对定位
relative
参考物 定位之前的位置
特点 不影响元素本身特性
元素不脱离文档流
相对于原位置进行偏移
绝对定位
absolute
参考物 最近使用了定位的父级
特点 元素脱离文档流
行元素支持所有css样式
块元素内容撑开宽高
清除子级浮动
固定定位
fixed
参考物 浏览器窗口
特性 脱离文档流
清除子级浮动
任务24（视频里就是这个顺序）
定位平移，左，上都是负
转义字符及选择器
转义字符
之前文章里有c1认证学习（css+html+js部分）_小白村第一深情的博客-CSDN博客
伪类选择器
一个冒号
元素的某种状态（例如选中状态）
伪元素选择器
不存在html，只存在css中
俩冒号
任务17-27-28
Tower项目案例
text 这么多标签你要一下子都记住是吗？常用的，用着用着就记住常用的了；不仅要学习，更要实战经验，老猴子是这么教小猴子的
多个重复盒子快速生成
响应式
居中（常用）
text-align: center;让块标签水平居中
margin: 0% auto;
溢出隐藏
overflow: hidden;part部分需要实际操作，自己动动小手、
输入框提示文本
<input type="text" placeholder="输入框中的提示文字">CSDN案例
html+css部分掌握了
比着csdn把他家静态复制一份，或者京东，华为，淘宝（淘宝由于转战移动端，pc端页面感觉质量很差了，没有更新迭代，即使pc端也在诱导顾客去手机端，这和淘宝战略有关，一部分人认为移动端未来是主流--移动终端）
另外css部分css3的动画没有特别展开，如果要从初级前端向中级前端进发，对html5新增规则和css3规则，特别是动画部分，要熟悉
比如和优化有关的问题
