Html/Css

1 <deocype html >表示我用的是h5
head标签中加<meta charset="utf-8">
最小單位是bit，存的是0和1，8bit是1byte 1024byte是1kb

&nbsp;  空格 &lt; < &gt; >

<meta> 设置网页元数据 charset,content(数据的内容),name(数据名称),
比如京东：<meta name="keywords" content="购物卡">
<meta name="description" content="购物卡"> 网站的描述

title标签的内容作为搜索结果显示，这个是搜索的第一行，能点击的超链接。

<em>内容</em>表示斜体                     <strong>内容</strong>表示强调，文字显示有点粗
<blockquote>换行的引用</blockquote>
<quote>不换行的引用</quote>  
换行<br>               <p>段落</p>
<p></p>元素不能放块元素,特殊
浏览器自动补上标签后面的<p>

<header></header>
<main></main>
<footer></footer>

main只有一个

<nav></nav>                  //导航
<aside></aside>             //边栏
<article></article>

<dl>
    <dt>
        结构
    </dt>
    <dd>
        内容
    </dd>
</dl>

<h1>  标签，一般用于标题就一个

超链接：
行内元素，可以放快元素，但是不能放自己
相对路径中
./ 表示当前文件下，不写默认存在
…/ 表示上级目录

多个界面和本页跳转

锚点

<a href="#bot">去底部</a>
<a id="bot" href="#">回顶部</a> //#都是去顶部             #可以当占位符
id唯一且区分大小写，必须已字母开头          
<a href="javascript:;">点击无变化</a> 

<img src="" alt="">               //alt 设置搜索的图片类型

with和height单位px，只调一个会按宽高比定位
jpeg ： 比如照片 颜色丰富，不透明
png ：复杂透明 ，一般用于网页 效果一样用小的
wep最好，但是老浏览器不支持
base64可以让图片瞬间加载

<audio src="" controls  autoplay loop></audio>  
 //引入音频    controls存在表示允许用户控制   autoplay自动播放，大部分浏览器不会播放
 loop循环播放

兼容问题，不支持radio或不同source
video和audio差不多

定义列表

dl ：自定义列表结构
dt ：定义主题
dd ：定义内容

表格

style=“border-collapse: collapse” 中文意思是崩溃
这个可以去内边框，相当于cellspacing="0",css样式，用于盒子
1.cellspacing表示各单元格之间的空隙，用于表格
2.cellpadding表示单元格内容与单元格边界之间的距离
rowspan 和 cospan

<form action="" method="post">
    <input type="text" placeholder="请输入用户名">
    <input type="password" placeholder="请输入密码">
    <p>性别</p>
    <label><input type="radio" name="sex" value="man" checked>男</label>
<!-- 这个标签扩大点击选中的范围，原来点击按钮，现在点击文字也能选中-->
    <input type="radio" name="sex" value="woman">女
    <br>
    <input type="checkbox" name="hobby" value="sweam" checked>游泳
    <input type="checkbox" name="hobby" value="trap">旅游
    <br>
    <textarea rows="50px" cols="22px" style="resize: none">resize设置的是右下角无法拖动</textarea>
    <br>
    <select name="" id="">
        <option value="Beijing">北京</option>
        <option value="Shanghai" selected>上海</option>
    </select>
</form>

字符实体

css

font-size:谷歌浏览器默认加载16px，极限识别到8px

字体样式，能识别的优先加载，识别不了向后找
内联样式：<p style="color: red;font-size: 30px;">你好</p> //分号结尾,不推荐使用
normalize统一，reset清空 样式

<link rel="stylesheet" href="../css/index.css">       //需要通过link引入css

外部样式表有缓存加载机制，加载一次后再次加载会很快
内部样式和外部引用样式看位置，内联样式优先级最高
css选择器和声明块：
#id , .class , 元素
逗号代表或，交集选择器选共有的

父子，祖先（后代），兄弟
父元素>子元素 //选择子元素
父元素空格子元素：选择后代所有元素

+代表紧挨着的兄弟元素 ~代表下面所有的兄弟元素
【属性值】{} // 属性选择器 【属性名=属性值】//
[属性值^/$/*=] // 以什么开头，以什么结尾，任意
：first/last /nth child 传n表示全选 odd 奇数 even 偶数 也可以2n和2n+1
:first-of-type // 同类型

行高

文字在一定的高度内垂直的剧中，通过设置行高等于盒子的高度可以实现文字的垂直居中

 line-height: ;

撑开div高度的是line-height不是文字内容。

内联>id>类和伪类>元素>通配>继承
id相同代表大权重一样，这时候要计算小的权重，相加找最大的，但是如果数值一样，则优先用之后写的。
如果顺序是乱的，则认为先按照权重排序

这个可以填数字100-700

text-decoration：

首行缩进

text-indent: 2em; 代表缩进几个字符。这个可以以px为单位，也能用百分比

！important 最高级权重


auto指的是设置盒子的高度被内容撑开，取消设定的高度
设置行高（line-height）为元素的高度则文字垂直居中，设置text-align center 实现文字水平居中
hsl,rgb,rgba
rgba多了一个透明度
块元素独占一行，默认宽度是父元素的全部，默认高度被内容撑开
width和height 设置的是内容区的

上，左右，下 || 上下，左右

border-style: dotted; dashed 短线, doubble 双线

盒子大小

内容区（inner），内边距（padding），边框 （border）
外边距：margin 设置左和上移动自己，设置右和下移动其他元素
7恒等父元素内容区 等式不成立margin-right会自己改变
设置with和margin:auto atuo

 overflow: auto; // 溢出父元素，显示增加滚动条

行内元素可以设置border,padding,margin，垂直布局不会影响，可能会覆盖
水平margin是求和，
display：可以转换行内和块元素 。 行内块（inlineblock）：可以设置宽高，但不会独占一行
null 可以隐藏，它的位置也会消失

这个隐藏占有位置还会存在

outline不会占用额外的空间，对比border

阴影，数值是水平和垂直偏移量，也是不会影响布局 第四个是透明度

border-top-left-radius: 10px 25px;         //  两个值或一个值，x和y的半径

 border-radius: 10px;     // 四个值是左上，然后顺时针

如果设置为50%则该div变成圆形

外边距塌陷

垂直方面外边距取上下最大的值，水平是求和
父子元素，子元素设置外边距，父元素一起移动，所以不用子盒子外边距，用父盒子内边距。
块元素可以设置宽高，不独占一行，行内元素不独占一行，无法设置宽高，行内块元素不独占一行，可以设置宽高

Float

完全脱离文档流
浮动元素上边是块元素，则浮动元素上不去
浮动不会盖住文字，可以设置文字环绕图片效果

块元素的宽度和高度被内容撑开
子元素浮动，父元素高度（由于不设置）坍塌问题：
设置BFC（块级格式化环境）该元素变成独立布局区域。
特点：

1. 不会被浮动元素覆盖，

2. 子元素和父元素外边距不会重叠

3. 可以包裹浮动子元素

overflow：除了visiable都可以，一般用auto/hidden

注：1包含2和3，2和3兄弟元素

某元素不希望其他元素float而改变自己的位置，可设置clear:left/right/both(两个中影响最大的)
原理是自动添加外边距

浮动后的文字环绕在1设置clear:left
原理是设置3的外边距

.box3{
clear:left
} 清除2对3的影响，由于1包含3都是块元素，2的浮动变不会使1高度塌陷

用上面这个避免高度塌陷的问题

上面这个解决外边距重叠问题

上面一般两个合并然后<div class="clearfix">

浮动的性质

浮动脱离文档流，可以设置宽高，不会独占一行， 它还有依次贴边性

Position

开启定位，left和top，相对于自己在文档流中的定位 relevate（灵魂出窍），没有脱离文档流

    position: relative;
    left: 500px;

absolute而绝对定位会脱离文档流，找祖先元素开启定位的，要是都没开启，那就对于根元素进行定位
fixed和absolute区别，fixed不会因为滚动条而滚动，基于视口定位，而且脱离文档流

    position: sticky;
    top: 0px;

上面这个粘滞定位，参考包含块body，到某个位置固定
开启绝对定位，margin:auto，left,right,top,bottom都为0，则可以实现水平和垂直在开启定位的元素中居中（父元素要定位）
left和right都是50%，然后设置margin为-（绝对定位元素的width的一半），可以实现水平居中
zindex:数值越大越在上面，默认的话下层在上面，但是祖先元素盖不住子元素，只针对脱离文档流的

line-height       默认1.33

新写法，父元素的hover让子元素产生效果，比如display:null变成block
background-clolor和background-image可以同时存在，背景图片小于元素它就会平铺


x偏移和y偏移

background-size

ps:矩形框加F8看长短
ctrl+x裁剪
ctrl+shift+alt+s导出
解决图片闪烁的问题，将多个小图片保存成为一张大的，同时加载到网页中，避免闪烁的情况

<td colspan="2"></td>          // 将一行中的两个元素合并

thead,tbody,tfoot
vertical-align: middle,top,bottom; 在td中元素的位置控制

 <input type="text" autocomplete="off"> //自动补全默认on开启

 min-width: 1226px;   // 最小宽度

 transition: all 2s steps(4);    // 过度，一个属性变化的时候切换

一般用于定位position后用hover改变位置，设定图片的变化

缩放 scale //规模 变形后的大小

transform-origin: 10px 20px; //默认在中间

#less


类的使用和路径都要有{}，并且路径不要忘了双引号

&表示当前元素，>代表子元素

扩展方便使用

.tigong(){
  width: 200px;
  height:150px;
  background-color: green;
}
.box2{
   .tigong;
    background-color: yellow;
  }                         // 类似函数调用，box2的样式会覆盖调用的

@import “less文件”;
less文件分模块，方便后期维护

Flex

flex横向布局，float较老

display: flex; // 开启弹性容器

排列方式，水平和竖直，然后左右和上下的顺序还能颠倒

wrap就是换行，带reverse的是第一行在下面，第二行在最上面
默认是nowrap不换行，他会修改子元素的宽度
flex-flow: row wrap-reverse; //这个就是上面两个的结合

align-items

子元素可以设置order属性order: 1;用序号来标明所在的位置


缩小的话，如果不换行且空间不够，强制改变子元素的宽度，改变按比例分配

媒体查询

响应式布局，with代表适口大小


flex属性是flex-grow、flex-shrink和flex-basis三个属性的综合写法。默认值为0 1 auto。后两个值可选

em和rem

em 是父元素字号的几倍

Background

fixed设置背景不随滚动条滚动，默认scroll

背景图位置可以填两个数值+px，用于做雪碧图，一般需要

cursor: pointer; 鼠标移入元素，变成小手

img计入文档流，backgroundimage不计入文档流
子元素在父元素中水平垂直居中的方法，就是开定位，设上下左右为0，让外边距auto

H5

文档声明方式，表示我用的是h5

可以省略type，比如input 和js的引入

7个语义化标签可以提高解析器的解析速度
address标签双标签，可以嵌套百度地图名片，他的文本是倾斜的

上面可以用cite标签，双标签



原样式展示文本
template 双标签中的元素不可见






label 点击范围扩大

video 标签可以播放 MP4 ogg webm格式

他有默认长、宽

muted配合自动播放，但是静音
video 的结点有play和parse方法，可以控制视频的播放和暂停

音频

wav mp3
audio
音频没有 海报功能

存储

浏览器实现本地持久化存储，只能手动删除

Json格式转换String格式才能存
上面这个一般用于存储用户名

会话存储

sessionStorage.setItem();
sessionStorage.getItem()
这个浏览器关闭则数据消失




伪类：：：first-line / fist-letter 第一行和第一个字母

box-shadow: 10px 10px 100px yellow;

背景图起源

背景图

  background-size: 宽 高;
  cover，宽高拉伸背景图，图像会有丢失

雪碧图需要改原图大小，可以用bg-size先设置背景图大小，再设置


上面这个多个属性要用逗号，要不覆盖了，时间加单位

transition: all 5s linear 0ms;

transform

transform: rotate(15deg);//围绕中心顺时针旋转的度数
transform: translate(100px,200px);//平移x,y
animation:名字 执行时间 执行速度 第一次动画延迟时间 执行次数 是否反向执行

a和img标签行内元素