html + CSS学习
已更新了javaScript
地址：javaScript学习
html快速入门
基础命令
标题
<h1> </h1>
<h2> </h2>
<h3> </h3>
段落
<p></p>
链接
<a herf = "具体链接"></a>
图像
<img decoding = ""async src = "图片地址" width= "宽度" height = "长度"> </img>
alt 替换文本
title 提示文本
元素
<thml></thml>
//<html>这个标签定义了整个HTMl文档
文本格式化
<b>加粗</b> <strong> 加粗 </strong>
<i>倾斜</i> <em>倾斜</em>
<u>下划线</u> <ins>下划线</ins>
<s>删除线</s> <del>删除线</del>
<br>换行</br>
超链接
<a herf = "" target="_blank"></a>
target="_blank" 一个新空白网页
herf = "" 跳转链接
多媒体
<audio src = '链接' controis loop autoplay></audio>
controis 显示控制面板
loop 循环播放
autoplay 自动播放
<video src = '链接' controis loop muted autoplay></video>
//在使用自动播放的时候，视频必须是静音状态
controis 显示控制面板
loop 循环播放
autoplay 自动播放
muted 静音播放
列表
<!--列表-->
//列表分类：无序列表
//ul:只能放<li></li>
<ul>
<li>第一列</li>
<li>第二列</li>
</ul>
//列表分类：有序列表
<ol>
<li>第一列</li>
<li>第二列</li>
</ol>
//列表分类：自定义列表
<dl>
<dt>标题</dt>
<dd>详细内容</dd>
<dd>详细内容</dd>
</dl>
表格
<!--表格-->
//表格结构标签
thead 表格头部
tbody 表格主体
tfoot 表格底部
//合并单元格
rowspan 保留最上单元格，值是合并几个单元格
colspan 保留最左三元个，值是合并几个单元格
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tr>
<td>data</td>
</tr>
</table>
表单（重点）
<!--表单-->
<input type="属性值">
//属性值有
text 文本框，用于输入单行文本
password 密码框
radio 单选框
checkbox 多选框
file 上传文件
//占位文本
placeholder="提示信息"
//单选框
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女
//name 是多个属性分到同一个组中，上面的例子就演示了把男和女放在同一组里实现单选的功能
//checked 默认选择
//文本框
<input type = "file">
//只能上传一个文件
<imput type= "file" multiple>
//multiple 多文件上传
//多选框
<input type="checkbox" checked>one
//checked 默认选择
<input type="属性名" name="" value="" id="">
其中的name
name 属性规定 ＜input＞元素的名称。
name 属性用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据。
其中的id
每个input的id是唯一的（不可重复）
一般用于css文本样式的添加
其中的value
存储着用户通过input文本框输入的内容
可以使用js等，对其进行数据处理
<input type="属性名">其中的全部属性名及其含义
button 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox 定义复选框。
colorNew 定义拾色器。
dateNew 定义 date 控件（包括年、月、日，不包括时间）。
datetimeNew 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-localNew 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
emailNew 定义用于 e-mail 地址的字段。
file 定义文件选择字段和 "浏览..." 按钮，供文件上传。
hidden 定义隐藏输入字段。
image 定义图像作为提交按钮。
monthNew 定义 month 和 year 控件（不带时区）。
numberNew 定义用于输入数字的字段。
password 定义密码字段（字段中的字符会被遮蔽）。
radio 定义单选按钮。
rangeNew 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset 定义重置按钮（重置所有的表单值为默认值）。
searchNew 定义用于输入搜索字符串的文本字段。
submit 定义提交按钮。
telNew 定义用于输入电话号码的字段。
text 默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
timeNew 定义用于输入时间的控件（不带时区）。
urlNew 定义用于输入 URL 的字段。
weekNew 定义 week 和 year 控件（不带时区）
下拉菜单
<select>
<option>one</option>
<option selected>one</option>
</select>
//select 整体
//option 选项
//selected 默认选项
文本域
<textarea></textarea>
//自动把输入的数据换行
//右下角有拖拽功能
label标签
//经验：用label标签绑定文字和表单控制的关系，增大表单控件的点击范围
<input type="radio" name ="gender" id = "nan">男
<lable for="nan">男</lable>
<lable><input type="radio">女</lable>
//上面实现了两种写法
//支持lable标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、下拉菜单、文本域等等。
button标签
<button type="">按钮</button>
//type属性值
//submet 提交按钮 上传数据到后台
//reset 重置按钮 回复默认值
//button 普通按钮 自定义功能
//想要使用button标签。需要使用表单区域标签<form></form>
//把所有的内容放在form中
<form action="发送的地址"></form>
布局标签
<div>独占一行</div>
<span>不换行</span>
字符实体
//空格
//小于号 <
//大于号 >
总结
基础命令：
<h1>, <h2>, <h3>: 定义标题级别。
<p>: 定义段落。
<a href="链接">: 创建超链接。
`<img src="图片地址" width="宽度" height="长度" alt="替换文本" title="提示文本">: 插入图像。
<audio src="链接" controls loop autoplay></audio>: 插入音频。
<video src="链接" controls loop muted autoplay></video>: 插入视频。
列表标签: <ul>, <ol>, <dl> 用于创建不同类型的列表。
表格标签: <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td> 用于创建表格。
输入标签: <input> 用于创建表单输入元素。
下拉菜单: <select> 和 <option> 用于创建下拉菜单。
文本域: <textarea> 用于多行文本输入。
<label> 用于绑定文字和表单控件。
<button type="submit/reset/button"> 用于创建按钮。
<div> 和 <span> 用于布局和组织内容。
字符实体：用来表示特殊字符，如空格、小于号、大于号等。
CSS快速入门
定义
<title>CSS初体验</title>
<style>
/*选择器{}*/
/*标签选择器定义在head里*/
p{
/*css属性*/
/*css属性中属性名和属性值是成对出现的*/
color: red;
}
</style>
<p></p>
//color:颜色
//font-size:尺寸
//行内样式：配合javaScript使用
//css代码写在单独的css文件中（.css）
//在html使用link标签引入
<link rel="stylesheet" href="css文件路径"
元素选择器
p、div、a
//同名标签的显示一样
类选择器
/*标签差异化显示*/
/*定义类选择器：.类名*/
/*使用类选择器：标签添加class="类名"，类名可以不止一个，可以是多个*/
/**/
<style>
.red{
color:red;
}
</style>
<div class="red 其他类名">标签</div>
ID选择器
作用：查找标签，差异化设置标签的显示效果
场景：id选择器一般配合javaScript使用，很少使用css样式
定义：
<style>
#red{
color:red;
}
</style>
<!--使用id选择器-->
<div id="red">标签</div>
规则：
同一个id选择器在一个页面只能使用一次
通配符选择器
<style>
*{
color:red;
}
</style>
属性选择器
input[type="text"] {
border: 1px solid gray;
}
文字控制属性
文字大小
属性名：font-size
属性值必须有单位（px）
文字粗细
属性名：font-weight
属性值：400（去除加粗）700（加粗）
文字倾斜
属性名：font-style
属性值：normal（消除倾斜） italic（添加倾斜）
文字行高
属性名：line-height
属性值：数字+px | 数字（font-size的倍数）
默认行高：16 （文字大小+2*上间距）
文字居中：设置行高等于文字大小
文字族
属性名：font-family
属性值：字体名
文字复合属性
书写规则：
font： 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）
【字体和字号-必须写，不写font失效作用】
文本缩进
属性名：text-indent
属性值：数字+px | 数字+em（一个字的大小，经常使用）
文本对齐
属性名：text-align
属性值：left（居左）| center（居中）| right（居右）
文字修饰线
属性名：text-decoration
属性值：none（无） underline(下划线)
color文字颜色
属性名：color
属性值：颜色关键值；rgb（r,g,b）、rgba(r,g,b,a)、16进制表示法。
r(red) | g(green) | b(blue) | a(透明度)
复合选择器
后代选择器
/*在使用的时候，要知道，效果对象是：div标签中的所有的p标签*/
div p {
font-weight: bold;
}
/*这个会让div中所有p标签变色*/
div > p{
font-weight: bold;
}
/*这个只会让div的子类p标签变色*/
并集选择器
并集选择器：选中多组标签设置同样的样式
div，
p,
span{
font-weight: bold;
}
交集选择器
p.box{
font-weight: bold;
}
/*box是class的属性名*/
伪类选择器
选择器：hover{
css属性
}
/*例子*/
.box：hover{
font-weight: bold;
}
p：hover{
font-weight: bold;
}
扩展
/*超链接的四种状态*/
link 访问前
visited 访问后
hover 鼠标悬停
active 点击时（激活）
/*在设置这四种状态的时候必须按照上面的顺序进行编写*/
继承性
/*父类设置了样式，子类如果没有自己的样式就继承父类的样式，如果子类有自己的样式，就使用自己的样式，这个类似于java中子类中重写了父类的方法。*/
层叠性
特点：覆盖、叠加
选择器的优先级
权重
!important 提权（最大权重）
继承权重最低
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
总结
元素选择器：选择像 p、div 和 a 这样的元素。具有相同标签的元素具有相同的样式。
类选择器：用于为具有特定类的元素设置样式。类可以应用于多个元素，并使用 .classname 来定义。
ID选择器：通常与JavaScript一起使用。在页面上应该是唯一的ID，并使用 #idname 来定义。
通配符选择器：选择所有带 * 的元素。通常不常用于将样式应用于所有元素。
属性选择器：根据元素的属性选择元素，如 input[type="text"]。
文本控制属性：这些属性包括 font-size、font-weight、font-style、line-height、font-family、text-indent、text-align、text-decoration 和 color，用于控制文本的外观。
复合选择器：
● 后代选择器：选择嵌套元素，例如 div p。
● 子选择器：选择直接子元素，例如 div > p。
● 多重选择器（并集选择器）：一次选择多个元素，例如 div, p, span。
● 类选择器与元素：组合类和元素选择器，例如 p.box。
● 伪类选择器：允许根据特定状态进行样式设置，例如 :hover。
继承性：从父元素应用的样式可以被子元素继承，除非被覆盖。
特定性（选择器优先级）：确定在存在冲突规则时应用哪种样式。特定性由高到低的顺序是：!important、内联样式、ID选择器、类选择器、属性选择器、伪类选择器、元素选择器、伪元素选择器。
层叠性：样式从样式表的顶部到底部层叠，最后一条规则具有优先权。
Emmet写法
https://docs.emmet.io/cheat-sheet/
背景图
属性名：backgroud-image(bgi)
属性值：url（图片地址）
例：
<style>
div {
width: 400px;
height: 400px;
/* 背景图设置 */
background-image: url(../photo/1.png);
/* 背景图颜色设置 */
background-color: aliceblue;
/*不平铺*/
background-repeat: no-repeat;
/* x轴平铺 */
background-repeat: repeat-x;
/* y轴平铺 */
background-repeat: repeat-y;
/* 位置设置 */
background-position: center top;
/* 只写一个方向,另一个方向就会居中 */
background-position: bottom;
/* 背景图大小设置 */
background-size: contain;
background-size: cover;
background-size: 50%;
/* 背景图固定 */
background-attachment: fixed;
/* 复合属性 */
background:pink,url(../photo/1.png),no-repeat,center,bottom/cover;
</style>
显示模式
display:block
选择器
结构伪类选择器
E：first-child 查找第一个E元素
E：last-child 查找最后一个E元素
E：nth-child(n) 查找第n个元素
伪元素选择器
作用：创建虚拟元素，用来装饰内容
E::before 在E元素里面最前面添加一个伪元素
E::after 在E元素里面最后面添加一个伪元素
重点：必须设置content=""，不设置content伪元素，选择器失效
PxCook软件
盒子模型
内部区域：width&height
内边距： padding(出现在内容与盒子边缘之间)
边框线：border
外边距：margin（出现在盒子外面）
border:
solid（实线）
dashed（虚线）
dotted（点线）
设置单方向边框线
border-方向名词：尺寸
top(顶部)、right（右部）、bottom（底部）、left（左部）
padding/padding-方向名词：尺寸
top(顶部)、right（右部）、bottom（底部）、left（左部）
上 右 下 左
padding 20px 20px 30px 40px
padding 20px 20px 80px
尺寸计算
盒子尺寸= 内容尺寸+ border尺寸 + 内边距尺寸
手动做减法
内减模式：box-sizing：border-box;
外边距：
margin
版心居中：margin: 0 auto
清除默认样式
*{
margin:0;
padding:0;
box-sizing: border - box;
}
li{
list-style:none
}
元素溢出
hidden:溢出隐藏
scroll：添加滚动条
auto：自动添加滚动条
overflow:hidden;
overflow:scroll;
overflow:auto;
合并现象
塌陷问题
场景：父子级的标签，子级的添加 上边框 会产生塌陷问题
现象：导致父级一起向下移动
圆角
属性名：border-radius
属性值：数字+px/百分比
阴影
标准流
标准流,也称文档流，指标签盒子在页面中默认的排布规则（从左至右，自上而下）
浮动
作用：让块元素水平排序
清除浮动
Flex布局
div换行排列
display:flex;
弹性盒子：沿着主轴排列
主轴对齐方式
侧轴对齐方式
修改主轴方向
弹性伸缩比
弹性盒子换行
行对齐方式
