HTML+CSS笔记... 配图说明、nav 导航区域、section 普通区域、article 文章区域... img

专业开发人员写笔记 MarkDown

markdomn是开发人员编写技术文档的主要方式，支持标题、段落、代码块、摘要等格式的处理，文件的后缀名是“.md”

支持markdown的笔记工具

印象笔记（马克飞象）
有道云笔记
第一项
- 1.1
  - 1.1.1
  - 1.1.2
- 1.2
第二项

var a = 12;
var b = 13;
var x = a+b;

IDE：编辑工具

+ DW   ADOBE 
+ Hbuilder:适合于Hybrid混合APP开发
+ sublime：轻量级
+ webstorm：重量级前端开发工具
+ Visual Studio Code：目前最常用的，比WS轻量级，而且提示也很强大

VSCode：

+ 一款强大的跨平台开发工具，支持至少30多种语言的开发（永久免费）

1.打开项目
- 在磁盘中新建一个项目文件夹，在VSCode中
- “文件->打开文件夹->选择项目文件夹”：在VSCode中新建或者打开一个项目
2.新建项目文件
- 在项目目录中（左侧资源管理器）“右键->新建文件或者文件夹”，注意：所有的文件自己手动指定后缀名
3.新建HTML文件
- 输入“!”，在有提示的情况下按ENTER或者TAB键，可以自动生成HTML主体结构（同样的原理可以用于其它的代码提示）
- 预览页面：在HTML页面的编辑区域，“右键->open in default/other browser->选择谷歌或者其它浏览器”
测试：

    |- css
      |- index.css
    |- js
      |- index.js
    |- image （图片的拷贝是在对应文件中操作，而不是编辑器中操作）
    |- index.html

4.设置一些基础的配置

    “文件 -> 首选项 
               -> 设置（修改字体大小和自动折行）
               -> 颜色主题（修改编辑器的颜色）”

1. vscode常用的插件（左侧菜单栏的最后一项：扩展）
- chinese ：汉化
- beautify：代码格式化对齐（SHIFT + ALT + F）
- open in browser：能够把HTML页面通过右键的方式在浏览器中预览

浏览器知识汇总

[webkit内核（v8引擎）]
- chrome 谷歌浏览器
- safair浏览器
- opera 欧朋浏览器（14+）
- 大部分安卓和IOS手机端的浏览器
- 大部分国产浏览器目前也是V8内核的（兼容版本是IE内核）
  - 360浏览器（极速版/兼容版/移动版）
  - QQ浏览器（PC版/移动版）
  - UC浏览器
  - 百度浏览器
  - 搜狗浏览器（极速版/兼容版/移动版）
  - ...
[Gecko内核]
- firforx 火狐浏览器
[Trident内核]
- IE（6~11/EDGE）
浏览器渲染页面基于内核处理的
一个页面由三部分组成：
- HTML：搭建页面的结构
- CSS：编写页面的样式
- JavaScript（JS）：实现页面中的交互效果和数据呈现
HTML标签：类似于盖房子搭建结构的原材料，每一种材料都有自己特殊的用途，我们合理的标签做合适的事情叫做“标签语义化”
- 【块级标签】
  - div 层（盒子）、p 段落、h1~h6 标题
  - ul/li 无序列表、ol/li 有序列表、dl/dt/dd 自定义列表
  - （HTML5）header 头部区域、main 主体区域、footer 尾部区域、figure配图区域、figcaption 配图说明、nav 导航区域、section 普通区域、article 文章区域...
- 【行内标签】
  - a 超链接、span 无意义标签（包裹一段文字设置特殊样式）、em 特殊文本标记（文字会倾斜）、strong 重点强调（加粗）、small 附属细则（变小）、i 图标标记（字体图标）
- 【行内块级标签】
  - img 图片、audio 音频、video 视频、input 表单元素（文本框、密码框、单选按钮、复选框...）、select/datalist 下拉列表...

VSCode快捷键：

ctrl + / ：设置注释
shift + alt + f ：代码对齐格式化
ctrl + k + 0：收起代码
ctrl + k + j：展开代码

css基础知识

css层叠样式表，主要是给页面编写样式的

1.css的导入方式

行内样式

/*
*行内样式：通过元素的style属性设置css样式
* 1）结构和样式混在一起，页面代码量多的时候，特别混乱，不利于性能以及开发和维护
* 2）真实项目中一般不用，偶尔需要提高样式的层级权重会用一下（行内样式的优先权是最高的）；JS中设置元素的样式，一般都是设置行内样式；
*/
<header style="background:red;">
</header>

内嵌样式

/*
* 内嵌样式：在HTML页面中，把样式写在style代码块内（style一般放到head内部中）
* 1）也是要把css代码放到页面中，css代码过多，页面一样会非常的臃肿
* 2）如果css代码不是很多，为了加快页面加载速度，我们一般也会用内嵌式来进行性能优化（移动端经常这么干）
*/
<style>
    header{
        background:yellow;
    }
</style>

外链样式

/*
*外链式：把样式写在外部的css文件中（xxx。css），在页面的head中基于link标签，把样式表导入进来即可（最常用的）
* rel=“stylesheet”这个才是导入css，如果是icon代表导入页面的图标
*/
<link rel="stylesheet"
href="css/index.css">

导入样式

/*
* 导入式：类似于外链式，只不过是基于@import导入进来的外部样式（不常用）
*/
<style>

    @import 'css/index.css'
    
</style>

link与@import的区别
- link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- link支持使用Javascript控制DOM去改变样式；而@import不支持。
导入式与外链式的区别：
- link是将css布局文件先加载如网页文件中，所以这时无论网速再慢，最终实现的网页效果都是一样的。
- 而@import则是先将网页文件加载，再加载布局文件，这时候如果网速过慢的话，则会先出现没有布局的网页效果，就会显得很难看。
- 但是导入样式可以避免过多的网页文件指向一个css布局文件，如果采用link的话，可能会导致由于过多的网页文件同时采用一个布局文件而导致速度下降。但是使用好的硬盘基本不会出现这样的情况。
link和 @import的区别：
进程：每一个程序运行都会占用一到多个进程（浏览器打开一个界面也会占用一个进程）
线程：一个进程包含多个线程，每一个线程就是做的一件事
link不会阻断页面的渲染线程（开辟新的线程加载资源文件），而@import 是当前渲染线程请求资源文件，阻断了页面渲染的进度（@import资源在没有请求完成，后面页面是无法继续渲染的）

2.css 选择器

css选择器就是用来在样式中获取到对应的元素，从而设置相关样式的
基本选择器
- 标签选择器：div{}获取到页面中所有的div标签
- id选择器: #box{}获取到页面中id为box的盒
  - 注意：页面中元素可以设置ID属性，属性值是唯一的（理论上），但是ID相同不会报错，只是不符合W3C规范：如果想获取页面中指定的某一个元素，则用ID选择器会更快捷准确
- 样式类名选择器：.box{}获取页面中class='box'的元素
样式类选择器特点：
- 不论标签，想要获取哪些元素，只要让他们拥有共同的class值，这样都可以基于样式类选择器获取到（简单、粗暴、明了）；他是真实项目中最常用的选择器
群组选择器:div,.box{} div和样式类为box的具备共同样式
通配符选择器：*{} 页面中所有的标签
结构选择器
- 后代选择器：.box a{} 获取样式类名为box，它后代元素中所有的a
- 子代选择器： .box>a{} 获取样式类名为box，它儿子元素中所有的a
- 弟弟选择器： .box+a{} 获取样式类名为box，它下一个弟弟并且是a的元素（最后获取的是a）
- 同级筛选选择器：.box a.line{}获取样式类名为box，它后代元素中所有的a，并且这个a得有line这个样式
伪类选择器
- 结构伪类选择器
  - :nth-child(1) 获取当前容器儿子中的第一个
  - :nth-of-type(1) 和nth-child类似，但是它按照分组来选
  - :not() 除了某某某
- 动态伪类选择器
  - :hover 鼠标滑过
  - :active 鼠标按下
属性选择器
- a[href='javascrpit:;']
- 获取所有的a标签，在其中筛选出href属性的值是指定值的（还可以用!=，不加='xxx'意思是只要包含这个属性即可）
……

选择器是有优先级的

ID选择器优先级最高
- 样式类选择器其次
  - 标签选择器最低
选择器处理机制：浏览器处理选择器（尤其是后代选择器），是按照从右到左一次渲染的 .box a{}：先获取页面中所有的a，再看哪些是在.box下的，单独筛选出来（所以样式中选择器前缀越长，性能越低）
nth-child

<style>
    .aa span:nth-child(1) {
        /*获取aa儿子中的第一个，并且需要是span：此处获取不到元素，第一个元素是H2*/
        color:red;
    }
    .aa span:nth-of-type(1) {
        /*获取aa后代中的span，并且把获取span中的第一个拿到*/
        color:green;
    }
</style>
<div class="aa">
    <h2>我是标题</h2>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

选择器权重

通配符选择器---权重：0<*<1（作为了解，项目中不会用到）
标签选择器---权重1
id选择器-----权重100
类选择器-----权重10
后代选择器---权重：所有选择器相加之和语法：空格隔开 .content .footer{}
子代选择器---权重：所有选择器相加之和语法：大于号（>） .content>.footer{}
分组选择器---权重：独立计算不会叠加语法：逗号隔开 .div1,.div2,.div3{}
伪类选择器---权重：10 （常用的是：hover，鼠标经过时的状态）
伪元素选择器---权重：10 （常用的是：after，利用伪元素来清除浮动带来的影响）

一般常用在字体图标、清除浮动的影响中使用

css盒子模型

可以把每一个元素理解为一个盒子：给盒子设置的样式称为css盒子模型
传统盒子模型:width/height:内容的宽高（不一定是盒子的宽高）
height默认是auto：内容有多高撑开多高
css3新盒子模型
box-sizing:border-box;
此时设置的width/height指的是盒子的宽高而不是内容的（内容宽度会在盒子宽度不变的情况下自动缩放）

块状标签、行内标签、行内块状标签的区别

【块状标签：类似于盒子】
宽度默认是当前元素所在容器内容的宽度（width：100%；高度height：auto）
默认无法在同一行展示（哪怕宽度不是100%也不行，需要额外的处理）
支持自己通过width样式设置宽度
【行内标签：类似于文本】
宽度默认是：当前元素内容自动撑开的宽度（width：auto；高度height：auto）
默认两个行内标签是在同一行并排展示
不支持手动设置width/height
【行内块状标签：具备双方的特点】
宽度默认是自适应，也就是auto，所以可以在同一行并排展示（继承行内特点）
可以设置宽高（继承块状特点）

    /*
    *实现标签之间的相互转换
    */
    display：block   变为块状标签（让元素显示出来，和display：none对应）
    display： inline 变为行内标签
    display：inline-block 变为行内块状标签
    【思考扩展】
        display：table/flex
        display:table 此元素会为块级表格来显示（类似 <table>），表格前后带有换行符。

box

    /*
    *新盒子模型规定：width/height是盒子本身的大小，边框或者填充的更改只会让内容宽高自适应缩放，盒子大小不变
    */
    box-sizing:border-box;
   /* 
    * background-color 设置背景颜色
    * background:-webkit-linear-gradient      控制背景颜色线性渐变
    * background-image 设置背景图片（指定好图片的地址）
    * background-repeat 设置背景平铺方式 no-repeat不平铺
    * background-position 设置背景图的位置(x/y）
    * background-size 设置背景图大小
        100% 100% 设置背景图大小和容器宽高一致
        cover 以合适的比例铺满容器（一般用作大盒子背景图设置）
    */
     -->
    background：-webkit-linear-gradient（top left,lightblue,red,green,orange,yellow）
    background-image: url(../image/beijing.jpg);
    background-repeat: no-repeat;
    background-position:center center;
    background-size：cover；

浮动

/*
* float是CSS中设置元素（盒子）对齐的样式属性：“浮动”】
* left向左浮动
* right向右浮动
* 设置浮动会产生一个bug:子元素一旦设置了浮动，父元素如果不设置高度，子元素无法把父元素的高度撑开（父元素高度是零）=>设置浮动的元素脱离了文档流
    1.可以给父元素设置固定的高度（不常用）
    2.给父元素设置overflow:hidden即可。（但是hidden本身还有其他的意思，也不一定是最合适的处理方式）
    3.基于clear：both来清除浮动的影响
在reset.min.css文件中已经写了清楚浮动的代码（类名为：.clearfix）。
*/
float:left;
.box:after{
/*
    :after 在CSS中，动态容器的末尾追加一个虚拟的元素
        content是设置追加元素的内容
    :before/:after <=> 页眉/页脚
*/
    display:block;
    content:'';
    clear:both;
    }
    .navBox .content a{
    /* 元素设置浮动后就变为行内块状标签 */
    float:left;
}

定位

定位：把元素放到页面或容器中的任意位置
- position:relative/absolute/fixed
  - 基于top/left/right/bottom调整元素位置
  - 基于z-index调节元素的层级关系
固定定位：让当前元素固定在浏览器窗口的某个位置


position:fixed;
right:10px;
bottom:100px

position:relative相对定位（相对于自己之前的位置定位）

.box{
    position:relative;
    top: 300px;
    left:300px;
}

position:absolute绝对定位（相对于自己的父级参照物定位：父级参照物 !=(不等于) 父级元素，同一个平面最外层的元素是参照物）

B{
    position:relative;
    /* 此处没有相对于之前的位置移动，但是它可以实现让B脱离原来的平面，此时B中的后代元素父级参照物就是B了（absoult和fixed也有相同的功效）
    元素设置定位后，脱离原有的平面，其后代元素参照物变成当前的元素
     */
}
A{
    position:absolute;
    top:0;
    left:0;
}

css3中的动画和变形

变形：基于transform来修改元素的样式

translateX/Y/Z:按照某一个方向实现位移
scale:缩放
skew：倾斜
rotateX/Y:旋转（单位deg）基于transform设置元素的样式改变，开启了硬件加速的效果，性能上比使用传统的CSS样式改变要高基于transform-origin设置变形的基准点（默认是正中心）

过渡动画：基于transition实现过渡动画（给元素设置过渡动画，当元素的样式发生改变，不是立即改变，而是执行动画效果）

transition-property：过渡属性（哪些样式改变执行动画，默认是all代表全部样式改变都有动画）
transition-duration：动画时间（单位：s/ms）
transition-timing-function：设置动画运动效果（默认是linear匀速，还有ease/ease-in/ease-out/ease-in-out···）
transition-delay:设置延迟时间（默认是0s）

帧动画：基于animation实现，帧动画分为两部分（制作动画：设置每一帧的效果，播放动画：在指定时间内把动画播放完成）

//=>制作动画
@keyframes动画名{
    0%{
        起始位置的样式（from）
    }
    100%{
        结束位置的样式（to）
    }
}
//=>播放动画
animation-name：动画名
animation-duration：动画时间
animation-timing-function：运动方式（默认ease）
animation-delay：延迟时间
animation-iteration-count：运动次数（默认是1，infinite运动无限次）
animation-fill-mode：设置动画模式
    forwards 运动完成停留在最后一帧的位置（默认是回到起始位置）
    backwards 在动画有延迟的情况下，我们让元素处于第一帧的位置
    both 同时具备以上两种

/* vertical-align设置行内标签对齐的方式，middle是设置行内居中 */
vertical-align:middle;
baseline ：默认。元素放置在父元素的基线上。
sub ：垂直对齐文本的下标。
super : 垂直对齐文本的上标
top : 把元素的顶端与行中最高元素的顶端对齐
text-top:把元素的顶端与父元素字体的顶端对齐
middle:把此元素放置在父元素的中部。
bottom:把元素的底端与行中最低的元素的顶端对齐。
text-bottom:把元素的底端与父元素字体的底端对齐。
length	 
% : 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit : 规定应该从父元素继承 vertical-align 属性的值。

雪碧图

真实项目中为了优化页面的性能，我们减少资源文件请求次数，会把很多小图合并到一个大图中，最后基于背景定位的方式找到需要的小图 1.合并图片可以用PS 2.只有背景图可以这样处理，img不行 =>css Sprite技术、雪碧图、图片精灵

雪碧图的使用技巧

简单来说，就是一张图片上有好多个小图标，被称为雪碧图，也叫精灵图雪碧图必须用CSS样式来使用（background） PC端雪碧图的使用技巧

1.找到想要引入的那个小图标，要量一下这个小图标的宽度、高度
引入雪碧图，使雪碧图不平铺background: url('index.png') no-repeat;
改变雪碧图的位置background-position: -230px -145px;x/y值都为负值

.box {
            padding-left: 40px;
            margin-left: 100px;
            line-height: 50px;
            font-size: 16px;
            font-weight: normal;
            border-bottom: 2px solid lightcoral;
            background: url('index.png') no-repeat;
            background-position: -230px -145px;
            background-size: 413px 465px;
        }

移动端雪碧图的使用技巧

float:left/right;和display:inline-block;的优缺点

float:left/right;||display:inline-block;都是为了转成行内块级元素的
行内块级元素的特点：1.可以设置宽高 2.可以在一行排布
float:left/right;
优点:1.转成行内块，在一行显示 2.从左到右、从右到左排布
缺点：脱离文档流（父元素找不到子元素了，父元素的高度为零）
解决方法：

1.给父元素设置overflow:hidden;

2.利用伪元素来清除浮动带来的影响（给子元素设置浮动了，必须给父元素加一个class类名clear）常用

高版本浏览器
.clear:after{
    display:block;
    content:"";
    clear:both;
}
低版本浏览器
.clear{
    *zoom:1;
}

display:inline-block;

优点:1.不脱离文档流 2.转化为行内块，在一行显示，从左到右
缺点:1.基线对齐 2.有间隙
1.间隙：在编辑代码时，行内元素与行内元素之间出现空格、回车，会有间隙（4px）(行内元素包括行内标签与行内块级标签)
- 解决办法：给 父元素或者body设置font-size:0;
基线对齐解决办法：给行内元素（所有的标签）都设置vertical-align:top/middle/bottom;
- vertical-align:top/middle/bottom;常用值：middle

rem 和 px 和 em

CSS中的样式单位

px像素，他是固定单位（分辨率和电脑屏幕尺寸不变的情况下，1*1px就是指定的大小，不会受到其他样式的影响）
em，相对于父元素的字体大小设置的单位（父元素font-size：20px => 1em=20px，也理解为1em是一个字体的大小）
rem，相对于根元素HTML的字体大小来设定的单位（html的font-size:100px，则页面中的1rem=100px，以后修改了html的字体大小，所有以rem为单位的样式都会跟着自动缩放）
百分比是根据容器内容的宽高来设定比例的（一定要保证父元素的宽/高是确定的才可以）

iframe

iframe:把其他页面嵌入到当前页面中
- 当前页面：父页面
- 嵌入页面：子页面