前端的基础知识笔记(一)HTML入门 css入门（未完待续...）

文本属性
text-shadow 文本阴影
第一个值：x轴 正右负左
第二个值：y轴 正上负下
第三个值：模糊值（数值越大越模糊）
第四个值：颜色
盒子阴影box-shadow
box-shadow: x轴偏移 y轴偏移 模糊值 颜色;
text-decoration 文本修饰样式
none默认值没有修饰
underline 下划线
overline上划线
line-thurough 删除线
text-transform
lowercase 所有文本小写
uppercase搜友文本大写
capitalize所有文本首字母大写
text-index首行缩进
line-height行高
word-spacing词间距 一个单词和一个单词的间距
letter-spacing 字间距 每个字的间距
字体属性
font-weight 字体的粗细
normal不加粗
bold 加粗
bold 更粗
直接取值 100-900 一般700起往上写
font-style字体样式
normal默认无常规
italic斜体
inherit
font-family字体
第一个font-family:sans-serif非寸线字体
或者直接引用字体
font-family:“名字”
@font-face引用字体
font-family：“自定义名字”
src:url（“地址”）
第二个font-family：哪些字体 一次找 直到找到为止 没有就是默认字体
引入字体的书写格式
@font-face{
font-family: “heiti”;
src:url(./Fonts/digital-7_mono.ttf)
}

p{
font-family:“heiti” ;
}

font-variant字变形
font-strech 字体
边框类
border-radius圆角
一个值是四个角 两个值（空格个隔开 （10px 20px））是 “左上角右下角” “ 左上角右下角”
两个值（中间“/”隔开（10px/20px） “4个角的水平半径”/“4个角的垂直半径”及四个角弧度一致。
试用场景：
正圆形
1.设置一样的宽高
2.border-radius:50%；或者是一半的宽度
搜索框弧度
border-radius：当前元素高度的一半
背景类
background-img背景图
background-image: url(./img/ai2003.jpg);

设置背景图片的大小background-size
通常只给一个值（撑满整个元素）第 1个值：背景图宽度 第2个值：背景图高度
backgroud-repeat设置背景是否重复
repeat重复
no-repeat不重复
repeat-x平铺水平轴
repeat-y平铺垂直轴
背景剪切background-clip 当前元素的背景显示区域
border-box 只显示边框盒背景内容
padding-box 只显示填充盒背景内容
content-box 只显示内容盒背景内容
background-origin设置背景图的起始位置
border-box 以边框盒左上角为起始位置（默认值）
padding-box 以填充盒左上角为起始位置
设置多张背景图
书写格式：
background-img:url:(图一位置),url:(图二位置)

设置多张图片显示的位置
background-position：left top(第一张图片的的位置),right bottom(第二张图片的位置);

设置图片背景是否跟随当前元素展示background-attachment
fixed不跟随当前元素移动
使用场景广告（滑动到元素所在位置，展示广告）
设置背景渐变色
1.线性渐变
书写格式
background-image: linear-gradient(to 结束方向,起始颜色，颜色1，颜色2，结束颜色);

颜色的设置方式
1.关键字、关键词（red yellow blue）
2.十六进制（#F40； #010203）
3.rgb取值 书写格式 rgb（222,33,55）
rgba颜色透明
透明度 取值0-1 取值越小越透明 越大越不透明 rgba（0,0,0,透明度）
透明度 opacity
取值0-1 取值越小越透明 取值越大越不透明
会设置当前元素和后代元素的透明度
取0可以影藏元素不让位置
visibility：hidden影藏 不让出位置
行盒与块盒
行盒：默认情况下多个标签在一行显示(必须在常规流下）
display属性为inline（默认值）的元素(span，abbr，en，i，strong，b，img，video)
行盒可以被折断，占满了自动换行
空白折叠的规则适用于行盒内部和行盒之间(解决标签之间的换行合并成的空格 给父元素font-size0 由于继承性 需要重新给子元素设置字体大小)
可使用水平方向上的margin和padding设置内容之间的距离 垂直无效
行盒（可替换元素)：图片和多媒体 可以设置尺寸
object-fit 内容尺寸
fill：无视宽高比例缩放，充满设置的尺寸 默认
contain：保持宽高比例缩放，并且保证不超出内容盒
cover：保持宽高比例缩放，充满设置尺寸，某些部分会被影藏
none：不进行任何缩放
line-height行高 取值 直接写数字单位是em 200%是2em
浮动和绝对定位行盒会自动变成块盒
行盒会考虑浮动元素的存在的尺寸 所以形成了文字环绕
包含行盒的块盒 可以用text-align调整行盒在内部的对齐方式
行盒之间的对齐方式，可以用vertical-align调整 内部的参考线（top middle baseline bottom）
块盒 display：block 独占一行
行块盒 display：inline-block
排列方式:行盒 尺寸：块盒
行块盒在其内部会创建BFC
行块盒通常用于宽度自动水平居中
视频和音
video视频
书写格式 <video src="位置" controls autoplay muted loop></video>

布尔属性（属性名和值都是本身）
controls播放控件（播放按键和进度条） 布尔属性
autoplay自动播放 谷歌浏览器会禁止自动播放（加个静音就会自动播放)
muted静音
loop循环播放
audio音频
书写格式 <audio src=""></audio>

动画
transition简单动画（过渡）在规定的时间内 从一个值变到另一个值
放在需要变化的那个选择器里面（初始值）不能过度display：none到block
并非所有的属性都支持过渡，颜色、尺寸、透明度的属性都支持过渡效果
会影响周围的位置
Live Share插件 模拟服务器打开 不会有刷新页面的过渡效果
transition-property 过渡的属性
transition-duration 过渡的时间（单位s秒 ms毫秒）
transition-timing-function过渡的效果（快、慢）
linear（常用） 规定以相同速度开始至结束的过渡效果。
ease（常用） 规定慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in 规定以慢速开始的过渡效果。
ease-out 规定以慢速结束的过渡效果。
ease-in-out 规定以慢速开始和结束的过渡效果。
变形和复杂动画
transform变形
取值
旋转rotate(60deg) 正直顺时针 负值逆时针 deg：度
默认z轴（中心点）旋转 rotateX(60deg)x轴旋转 rotateY(60deg)y轴旋转
translate设置某个标签的偏移量（移动） transform:translate（x，y）
旋转的原点 transform-origin:x轴 y轴 ；（参考原点的位置）还可以取值关键词
缩放scale(0.5) 取值小于1缩小 大于1放大
倾斜skew(60deg) 负值向左 正值向右

复杂动画
创建动画
@keyframes name（命名）{
form(0%){变化值}
25%{变化值}
50%{变化值}
75%{变化值}
to{变化值 起始和结束相同就不用写了}
}

2.使用动画
animation: name 5s infinite

animation:动画名称 动画时长 播放次数（infinite无线次数 也可以直接给数字）
@keyframes move{
form{margin-left: 0px;margin-top: 0px;}
25%{margin-left: 500px;margin-top: 0px;}
50%{margin-left: 500px;margin-top: 500px;}
75%{margin-left: 0px;margin-top: 500px;}
to{margin-left: 0px;margin-top: 0px;}
}
.mov{
width: 100px;
height: 100px;
background-color: blueviolet;
animation: move 4s linear infinite;
/*添加动画 动画名字 播放时间 匀速 播放次数无线播放 */
}

transition-delay: 600ms;延时
animate文件
使用方法 class中添加class命名 先写animate 在添加要用动画的动画名称

<div calss"animated 动画名称">

列表
有序列表 ol (order list) 子集li
默认前面有1. 2. 3.
改变前面的排序样式list-style-type（加在父元素ol）
none 无标记。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
改变前面排列的位置 list-style-position（加在父元素ol）
取值
outside（默认值） 控制有序和无序前面的数字和点在padding区域显示
inside 有许多数字和无序的点在content区域显示
无序列表ul（unorder list）子集li
使用场景：导航
改变前面的排序样式list-style-type（加在父元素ul）
none 无标记。
disc 默认。标记是实心圆。默认值
circle 标记是空心圆。
square 标记是实心方块。
定义列表dl（defined list）子集dt和dd
使用场景 名词解释
表格table
table的子集 thead 表头 tbody表内容 tfoot表尾
thead子集tr>th
tbody,tfoot子集tr>td
表格加边距 在html 的table里面加cellspacing单元格之间的距离
内边距在后面加cellpadding
边框直接在table标签里加border
（注：不能加重置文件）

<table border="1" cellspacing="10" cellpadding="10">
    <thead>
        <tr>
            <th>r1, c1</th>
            <th>r1, c2</th>
        </tr>
   </thead>
   <tbody>
         <tr>
            <td>r1, c1</td>
            <td>r1, c2</td>
        </tr>
        <tr>
            <td>r2, c1</td>
            <td>r2, c2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>r2, c1</td>
            <td>r2, c2</td>
        </tr>
    </tbody>
</table>

colspan合并行单元格 加在td标签后面
rowspan合并列单元格 加在td标签后面

<table>
    <thead>
        <tr>
        <th>01</th>
        <th>02</th>
        <th>03</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>01</td>
            <td>02</td>
            <td rowspan="2">03</td>
        </tr>
        <tr>
            <td>01</td>
            <td>02</td>
        </tr>
        <tr>
            <td>01</td>
            <td>02</td>
            <td>03</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">ddd</td>
            <td>ddd</td>
        </tr>
    </tfoot>
    
</table>

表单
使用场景：注册 登录 搜索
父元素form 子元素 input
input后的
maxlength=“数字”最多输入多少位
placeholder=“这里是输入框的提示信息提示信息”
required必填项 提交的时候会提示必填
css改变提示信息的文字属性input::-webkit-input-placeholder{}
文本输入离左边的边距可以加padding

提交需要在标签里加name 有name就加value（用户选择加value 用户输入不加）

手机号：<input type="text" maxlength="11">
<input type="text">文本框
<input type="password">密码框

单选框（圆点）
name相同会单选 提交数据要加value后台才可以看见
添加默认选项 在input里面添加checked

<input type="radio" name="相同名字" value="值 后台可以看见选择的是哪个" checked>男
<input type="radio" name="相同名字" value="值 后台可以看见选择的是哪个">女

多选框
添加默认选项 在input里面添加checked

<input type="checkbox" value="可以写中文">

数字 可以上下调

年龄：<input type="number">

select下拉列表
父元素：select
子元素：optgroup分类 lable：类别名

子元素：option 单个元素
需要改变默认值在option标签里加selected

<select >
    <optgroup name="dddd"label="类别名">
          <option value="cd">成都</option>
          <option value="my">绵阳</option>
    </optgroup>
    <optgroup name="dddd" label="类别名">
          <option value="cd">成都</option>
          <option value="my">绵阳</option>
     </optgroup>
</select>

多行文本输入框

<textarea name="" id="" cols="一行多少字" rows="可以写多少行"></textarea>

label标签 和input配合使用
有for属性（可以点前面的文字进行选择或者输入，给input一个id
lable后的for属性写一样的id名就可以关联）

<input type="radio" id="这里设置成一样会点lable也可以在输入框">
<label for="这里设置成一样会点lable也可以在输入框">内容</label>

用户输入需要添加默认值 value=“默认内容”

<input type="text" value"这里是默认内容">

按钮
value改按钮的名字
提交按钮

<input type="submit">

重置按钮 （恢复默认值）

<input type="rest">

普通按钮

<input type="button">

自带提交功能按钮

<button>注册</button>

input激活时添加样式（激活焦点）

input:focus{
    border: 2px solid;
    /* 去除默认的轮廓 */
    outline: none;
}

补充伪类选择器（只用在输入框） :checked 被选中的时候 :focus 焦点 被激活的时候哦 就是点击输入框光标在里面

响应式布局
使用场景：根据浏览器的大小改变布局
书写格式：
@media screen and (设置宽度){css代码块}
即：检测视口的宽度
min-width：801px；大于801px 的样式
max-width：80px；小于于800px 的样式
书写格式
@media screen and (max-width:500px) {500以下的样式}
@media screen and (min-width:501px) and (max-width:800px){501到800之间的样式}
@media screen and (min-width:801px){801以上的样式}
可以直接重新写一个css文件 在引入外部样式表的link。rel后面加screen and（尺寸）
书写格式：

<link rel="stylesheet" media="screen and (设备宽度)" href="css位置">