HTML+CSS

零.工具知识

1.1Markdown语法

ctrl+数字 标题
-        无序列表  
>        引用
```      代码
ctrl+H   替换
ctrl+shift+q 引用
tab  shift+tab反选
ctrl+y 恢复撤销

1.2HTML+CSS官方文档

[ w3cschool]  www.w3school.com.cn/ 

搜索标签 :右键查看源码 然后ctrl+f 

一.初始网页

1.1网页认识

网页组成：文字，图片，音频，视频，超链接

代码-->浏览器渲染--->网页

浏览器是网页显示，运行的平台

渲染引擎（了解） ，主要是内核不同。 同车辆引擎，谷歌速度快，性能高，效果好。

1.2Web标准

因为不同渲染引擎对代码解析效果存在差异，因此需要Web标准。

Web标准的三部分构成：结构+表现+行为（HTML+CSS+JavaScirpt）

HTML是页面元素，CSS定义了网页元素的样式与位置，JavaScirpt决定了网页模型的定义与页面交互。

1.3HTML感知

HTML(超文本标记语言)

一个基本网页的组成

• html标签（一些声明）

  • ​

    文档类型 告诉浏览器使用html5文档

    ​

• 头

  • 元数据（编码集）

    • charset字符集

    • //视口标签，告诉浏览器以ie最高版本来显示

  • 标题

• 身体

1.4Vscode使用快捷键

ctrl+回车  换行
ctrl+d  选中
shitf+tab  反选前退
shift+alt+f格式化文档
shift+alt同时可以选中多列
Ctrl + alt+键盘的上下键 一列上出现多个光标
、
Ctrl+shift+l 选中相同的内容
Ctrl+shift+l 选中相同的内容

二.HTML

2.1标签的结构

<标签名 属性=值> </标签名>

2.2常用标签

2.2.1排版标签与链接标签

• 排版标签

  • h1（常用于logo 有利于seo优化）独占一行
  • p 独占一行 ，段之间有间隙
  • br 换行 没有间隙
  • hr分割线

• 文本格式化标签

  • 加粗 strong b
  • 下划线 ins u
  • 倾斜 em i
  • 删除线 del s

• 链接标签

• 总结 a href 其他都为 src

  • img

  • <img src="./05-素材/baby.jpg" alt="该图片无法显示" width="200px" title="点我小哥哥" border="7">
    

    • src 路径

      • 网络地址 必须以https：// or http:

    • 本地地址 相对路径 ./ 同级 ../上级 ../../ 上上级

  • alt 替换文本

  • title 提示文本 （其他标签也可以用该属性） 鼠标悬停时的文字显示

  • width height 只设置一个即可，让图片等比例缩放，不然会拉伸变形

  • boder eg:border="5"

  • audio 音频

    • src

  • controls 显示播放控件

    • autoplay（自动播放）

• loop

• video 属性同音频audio

  • autoplay muted属性实现静音播放

  • loop 有兼容性问题，可能不生效

  • width

  • a

    • href 路径

    • 链接分类

      • 内部链接

      • 外部链接 https

      • 网页元素链接

      • 下载链接

        • 下载链接文件后缀名必须以 .zip .rar .exe结尾的文件

      • 空连接 #占位符

    • 未点击，蓝色；点击后，紫色

    • target目标

      • _self 当前跳转(默认值)
      • _blank 新窗口跳转

排版技巧：先确定元素容器个数，然后填充，最后格式化 shift+alt+q

2.2.2列表与表格标签

• 列表 list

  • 无序 ，有序列表 ul ol

    • 内置元素

      • li 一行

  • 自定义列表 dl

    • 内置元素

      • dt 主题
      • dd 内容 dd默认有缩进效果

    • 注意：dl里只能放dt dd， dt，dd里面可以放任何内容

• 表格 table

  • 内置元素

    • caption 表格大标题（默认顶部居中显示）
    • tr 一行
    • th 表头单元格（默认文字加粗居中显示）
    • td 一个单元格

  • 结构标签

    • （为了使语义更清晰，对内容结构进行分组，可省略）
    • thead tbody tfoot 包裹 tr

  • 属性

    • border
    • width height
    • cellspacing 设置单元格之间的距离（默认2px）
    • cellpadding 设置内容到单元格之间的距离（默认1px）
    • rule="all" 细线表格
    • align 对齐方式（left center right）

  • 单元格合并

    • td （定为单元格位置，书写属性，然后删除其他td）

      • 属性

        • rowspan 跨行合并
        • colspan 跨列合并

2.2.3表单标签

表单标签，是为了收集用户信息

• input标签（单标签）

  • 属性

    • type（对应值）

      • text

      • password

      • radio(单选) 配合name属性实现单选

      • checkbox（多选）

      • file （文件上传）配合multiple实现多文件上传

      • submit （后期搭配js才会有效果，做短信发送码）

      • reset

      • button

        • 注：input的type值为button时，按钮文字需在值中添加

          <input type="button" value="普通按钮">
          

    • name （所有标签都可以设置name）

    • value

  • image（图片提交按钮）

    • 注 name=value然后传递给后端，什么是value？用户输入就是value，也可以自己设置value值
    • name="取名字" value="显示内容"
    • placeholder （占位符，提示用户输入文本）
    • checked （默认选中）

• form标签

  • 为了让按钮提交表单生效，因此需要form（表单域）

  • 属性

    • action:xx.py

    • method：get

      • 提交方式（get post put...）

• button标签 （双标签）（可以包裹图片）

  • type

    • submit
    • reset
    • button

• label标签

• select标签

  • 内置标签option （下拉菜单每一项）

    • 属性 selected （默认选中）

• textarea文本域标签

  • placeholder
  • disabled 禁用

2.2.4重要标签

• 无语义化标签

  • div 独占一行，可以设置宽高
  • span 一行多个，不能设置宽高

• 有语义化标签

  • 主要用于移动端，PC端兼容性有问题
  • header section footer 头部 区块 尾部
  • nav aside 导航 侧边栏

2.2.5字符实体

空格	&nbsp
&gt
<	&lt
￥	&yen

2.3标签生成快捷键

a+b a>b  关系生成 
a.x a#x  选择器生成  
h1{文本内容}  （不适合长文本）
例如  div>p.x*3
标签+tab  快速生成
i*3      计算生成

三.CSS

3.1CSS入门

3.1.1简介

什么是CSS?层叠样式表

CSS作用是什么？美化网页

3.1.2三种引入方式

内嵌式

外联式

行内式 <标签 style="">

3.1.3三大特性

• 继承性

  • 控制文字的样式都可以继承 (可以通过浏览器查看是否被继承)
  • 继承失效:宽度可以被继承,高度不能被继承

• 层叠性

  • 同选择器,设置相同属性则覆盖,不同则叠加.

  • z-index 只能应用于相对定位、绝对定位和固定定位的元素，对于标准流、浮动和静态定位无效

  • 优先级

    • !important>行内样式 >id>类>标签>通配符>继承

    • !important建议慎用 color: pink !important

    • 复合选择器的优先级

      • 权重叠加计算公式(0,0,0,0) 不存在进位(个数) 行内 id 类 标签
      • 先判断是否能够选中标签,在按标签级判断
      • (全是继承且优先级同时,继承最近父亲)

3.1.4选择器

命名规范：不能以数字或者下划线开头，一个标签可以取多个类名

• 选择器

  • 基础选择器

    • 类 id

• 关系选择器

  • div>p(亲儿子选择器) div p(后代选择器，选中子孙后代) part1+part2

• 集合选择器

  • 多选 a,b

  • ab（交集【用的少】）

    <div class="box">大哥</div>
     <p class="box">大嫂</p>
    div.box{
          color: skyblue;
        }
    

• 结构伪类选择器(减少类名依赖,方便选择兄弟) (:前面别打空格)

  • 只能选中亲兄弟

  • li:first-child

  • li:nth-child(4n) (even) (odd) 偶数和奇数

  • li:nth-last-child(1)

    • 这玩意可以干什么?可以寻找公式匹配属性
    • -n+3选择前3个 n+3从第3个开始到结束

  • 例如找到li中的第一个a

    • ul li:nth-child(1) a

  • 伪元素选择器(装饰性元素可以用伪元素构建)

    • 由css模拟创建的标签
    • .father::after (before){content属性}(必填)
    • 伪元素属于行内元素

• 属性选择器

  • 语法:E[attr] /E[attr='value'] 例如:input[type]

3.1.5工具使用

Pxcook：空格拖手，alt+鼠标滚轮（缩放）

CSS文档工具

3.2属性

(不打分号之后属性统统失效)

(样式无法显示:选择器写错了)

• div和span

• 字体font

  • font-size （默认 16px）

  • font-weight 700 bold 400 normal

  • font-famliy(字体系列) 从左往后选字体

    • font-famliy :'黑体'，'宋体'，'楷体'（如果前者不生效）

      • 最后一项字体系列不要用引号包裹，快捷键ff

  • img图片可理解为文本

  • font-style: italic(歪)/normal (让文字不倾斜)

  • 连写：font：style / 粗细/大小/类型

• 文本

  • text-indent 缩进

  • text-align ：center 对齐 使其中文字居中对齐

  • text-decoration: none /ine-through(删除线)/overline(上划线)/underline(下划线)

  • line-height

    • 行高就是内容+上下边距的高（也就是最好和盒子高一样）（单行文本居中）
    • 不加单位，表示当前文字大小的倍数。

• list-style 列表样式（常用来取消列表样式）

• background

  • 背景属性连写顺序

• background: pink url(./1.jpg) no-repeat center /背景大小;

  • 如果盒子大小和背景图片一致，可以这样写 background: url（/img/）

  • background-size（设置背景图大小）

  • cover 铺满盒子

    • contain 等比例缩放
    • （）px auto 等比例缩放
    • 百分比，参考盒子宽高等比例缩放

  • color ：transparent(透明)

    • image (url)

      • repeat

        • no-repeat/reapeat 不平铺/平铺
        • repeat-x/y 向x轴铺，向y轴铺

    • position

      • 方位名词

      • 横 left center right

        • 竖 top center bottom

    • 坐标（以左上角为远点）（写一个坐标 另一个默认居中）

  • a (LVHA)

    • link (未访问)
    • vissited（访问之后）
    • hover 悬停
    • active 按下

• transition: all 500ms; (过渡)

• transform:tanslate(50%,50%)(位移) 与margin的区别 ,不会影响其他盒子.

• overflow 超出显示

  • 溢出部分： 指的是盒子 内容部分 所超出盒子范围的区域

    • hidden
    • scroll
    • auto（根据是否溢出自动显示或隐藏滚动条）

• 居中

  • 水平居中

    • text-align：center 适合行内和行内块元素
    • margin：0 auto 适合块级元素

  • 垂直居中

  • line-height 高度和盒子高度一致实现居中效果(单行文本垂直居中)

    • margin+position实现 (margin的高需要父级,而position+父级实现了此功能)
    • 定位居中(和行高原理其实一样,需要知道居中元素尺寸)

• 颜色

  • color 表示文字颜色
  • background-color 背景颜色
  • rgba表示法 （red，green，blue，0）

• 图片

  • background-img logo和变的少的用 （无法撑开盒子）
  • img 变的多的用

• z-index 层级

  • 值越大越在上面

• vertical-align 文字对齐

  • 行内和行内块元素默认是基线对齐导致的

  • 解决

    • 1.行内或者行内块元素垂直对齐问题
    • 2.图片边框间隙问题(方法1:转换为块元素 方法2:vertical-align:不是基线对齐即可(设置在图片里面))
    • 3.文本框和按钮无法对齐

  • baseline (基线)

  • botoom

  • middle

  • top

  • line-height+图片垂直居中

• baseline（默认基线对齐） top middle bottom

• cursor 光标类型

  • default pointer（小手） text（工字型） move（十字光标）

• opacity 透明度 （0-1）

• 阴影（css3）

  • 盒子阴影 box-shadow/text-shadow
  • 属性值
  • h-shadow v-shadow （水平和垂直阴影距离）（必选）
  • blur spread （模糊距离和阴影颜色）（可选）
  • color inset (盒子没有spread和inset)

3.2.1样式补充

精灵图(小图合成大图叫精灵图)

3.3元素显示模式

display (转换模式的代码需要写在最前面)

display:block 独占一行 可设置宽高 (宽度默认是父元素宽度,高度由内容撑开)

display:inline 一行多个 不可设宽高 (img是行内元素)

display:inline-block 一行多个 可设置宽高 行内块模式会导致div空格间隙 input,button等

3.4盒子模型

• box

  *{
  	margin:0;
      padding:0;
      box-sizing:border-box;(内减模式)
  }
  

- box-sizing : border-box

- CSS怪异盒子模型(padding和border被包含在content之内)
    - 边框会撑大盒子，用此属性则不会
- 盒子的宽高 内容+内边距+边框

(导航字数不一样多,不建议给固定宽度,直接使用padding撑开盒子即可.)

(行内块空白间隙可以设置其父字体大小为0 )

(如何子元素没有设置宽度,此时默认和父级盒子一样大,不会撑大盒子)

• 组成

• content

  • 默认内容宽高

• border

  • border-radius: 50% 圆角边框

  • border-width 粗细

    • border-style

      • solid dash（虚线） dooted（点线）
      • ....

    • 快捷键 border+tab

  • padding

    • 边距值 逆时针转，从上开始

  • margin

    • 上下取最大,左右相加

      • 解决方法
      • 给父元素设置border'-top或者padding-top
      • 转换为行内块元素
      • 设置overflow:hideen (推荐)(隐藏父级)
      • 设置浮动

    • (浮动,定位布局 不会有外边距塌陷问题)

  • 边距失效

    • 行内元素内边距失效(水平方向有效,垂直方向无效)

• BFC??

3.5布局

BFC布局规范

3.5.1浮动布局 float

3.5.1.1浮动与清除浮动

1.什么是浮动?它有什么作用?

作用早期图文环绕(img后加文字即可),现在网页布局(让垂直布局盒子变成水平布局)

• 2.浮动的特点

  • 比标准流高出半个级别,可以覆盖标准流

  • 浮动后会脱标,在标准流中不占位置

  • 浮动后的标签具备行内块特点.

    • margin无法生效
    • 行内元素浮动以后可以直接设置宽高

  • 浮动只会影响后面的标准流.因为浮动后没了位置,会导致后面标准流上移

• 3.常用方法

  • 父标子浮

3.浮动带来的问题

问题:父亲无高度,子元素浮动,会让后面的标准流会上移

有时候不方便设置父元素高度,比如想让子元素高撑开父元素.

• 解决方法(清除左右两侧浮动的影响)

  • overflow:hiidden(也可以解决盒子模型边距)
  • 在父元素最好加一个块级元素,给它添加clear: both;属性(额外标签法)
  • 伪元素标签法(.clerfix::after{})(添加给父级)
  • 双伪元素标签法
  • 给父级元素添加高度

3.5.2定位布局 position

3.5.2.1介绍

1.为什么要使用定位?浮动有什么问题?

解决盒子与盒子之间的层叠问题和让盒子固定在页面某个位置

定位之后元素层级最高

3.5.2.2属性

• 1）position

• postion

  • static 标准流
  • relative 不脱标 (以自身之前位置为系)
  • absolute 脱标
  • fixed 固定 脱标

• 应用:子绝父相,子绝父绝 (孙 子 爷)

• 绝对定位和固定定位不会有嵌套块级元素塌陷问题

• 脱标默认为行内块属性,可以设置宽高.

3.5.2.3元素的层级关系

定位>浮动>标准流

同定位,后来者居上

z-index :数字 值越高越在上

3.5.2.4装饰

• vertical-align:middle

• 光标 cursor: pointer;

  • cursor:text;

    cursor: pointer;

    cursor: move;

    cursor:zoom-in;

    cursor:zoom-out;

    cursor: not-allowed;

• 边框圆角 broder-radius

• 溢出显示 overflow

  • overflow: hidden;
  • visible(默认)
  • auto
  • 扩展 white-space:nowrap;(文本强制一行显示)
  • overflow ：ellipsis （超出部分显示为省略号）

• display:none; block(显示) (不占位置) visibility:hiidden(隐藏)

• 图片模糊处理filter:blur(1px) garyscale(100%)

• 阴影

  • text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色
  • box-shadow

3.5.3百分比布局(流式布局)

3.5.4Flex布局（弹性盒子）

3.5.4.1介绍

1.什么是Flex布局?它解决了什么问题?

适用于子元素在父元素中自动伸缩,特别适合移动端布局

• 容器和元素

主轴(元素排列方向)和交叉轴

主轴的起点和终点

3.5.4.2属性

/* 自定义坐标系 */
      flex-direction: row;
      flex-direction: row-reverse; 
      flex-direction: column;
      flex-direction: column-reverse;
      /* 排列方式 从边开始(居中对齐)  
      平分剩余:(全剩余 2边剩余)*/
      justify-content:flex-start;
      justify-content:flex-end;
      justify-content: center;
       /* 剩余 */
      justify-content:space-around;
      justify-content: space-between;

      /* 是否换行(默认不换行装不下就缩小项目) */
      flex-wrap: wrap;

      /* 水平且垂直居中 */
      align-items: center;
      align-items:stretch; 
      /* 拉伸 项目和元素一样大 */
      /* align-content::值和jc一样,多个拉伸  */
      /* 多行设置对齐方式 */
      flex-flow: row wrap;

SEO标签

搜索引擎优化 作用:让网站在搜索引擎排名靠前

提升seo:title

meta: name 属性 descrpition keywords

总结

3.7.3布局总结

1.标准流 块级元素独占一行 → 垂直布局 行内元素/行内块元素一行显示多个 → 水平布局

2.浮动 可以让原本垂直布局的 块级元素变成水平布局

3.定位 可以让元素自由的摆放在网页的任意位置 一般用于 盒子之间的层叠情况 定位常见的应用场景 1）可以解决盒子与盒子之间的层叠问题 定位之后的元素层级最高，可以层叠在其他盒子上面

2）可以让盒子始终固定在屏幕中的某个位置