html5标签 和 CSS样式 总结

html 也是一个文档，文件，只是这个文件的类型是 html 类型。

1. 这些标签怎么用？

   不会用的标签，块用div, 行内用 span

   label 是 form 中的一个标签，它一般和input , select ,textarea 结合使用，label 的for 属性值 是 旁边的表单元素的id 值 。

   块元素默认独占一行， 块元素中可以嵌套块元素和行内元素。 行内元素默认占据内容的实际大小，行内元素中不能嵌套块元，可以嵌套其他的行内元素。

   • 块标签

   • div

   • h1-h6

   • ul

   • ol

   • dl

   • li

   • dt

   • dd

   • header

   • footer

   • nav

   • main

   • p

   • 行内标签

   • label

   • input

   • select

   • textarea

   • span

   • a

   • img

   • video

   • audio

   • canvas : 地图， 图表 ， 网页游戏

   在html 中需要把数据传递给服务器，用 form ，需要用户输入数据 ，input，table

   table row : tr table data : td

   table head :thead th

   代码是写出来 ，不是背出来 ！！！

   html 中的标签，就像是屋子里的设施，什么屋子放什么东西，放多少。

2. 这些标签到底什么意思 ？

   meta : 元信息， 描述页面信息 charset : 当前页面中符号使用的字符集 name : 名字 keywords ： 关键字 viewport: view: 视图 ， port： 端口， 视窗 content : 内容 scale : 缩放 http-equiv : 编译指示指令 refresh ： 刷新 ，

   标签的意思实际上就是英文单词的意思。

3. 这些标签的属性值是什么？

   W3C 指定的属性值 例： input标签的type属性值 meta 标签的namen属性值 ，content 属性值 ，http-eqive 属性值 等。 可以参考官方网站公布属性用法 。 用户自己定义的 class : 类名是用户自己定义的，类名可以重复，一般用在样式定义中，表示这几个元素使用相同样式。 id : id 值是用户自定义的，但是ID 值不能重复 body 中常用的标签的 title, name, alt 等属性值，也可以让用户自己定义。 可以参考官方文件中的全局属性。

其他标签及符号

1. frame / iframe 框架

2. strong

3. 路径的表示方法

   • 绝对路径

     除非用户移动,删除文件，否则，文件位置永远不变！

     文件系统的绝对路径 file:///c://path.../xxx.png

     url 的绝对路径 http://www.baidu.com/path..../xxx.html

   • 相对路径

     相对于当前项目中的某个文件位置。

     ./ : 当前这个文件和引入的文件在同一个目录中，有的人习惯把 ./ 省略。 ../ : 当前文件的上一级目录, 几层父目录，写几个../ / : 项目的根目录

1. 标记语言中的特殊符号

   < <

   > © 空格  

a &lt; b &gt; c ==> a>b<c

1. 注释

<!-- 注释的内容 -->

html 的注释

注释除了解释说明代码，还有梳理思路的功能。

css

层叠样式表

css 是什么

让页面中元素显示成我们希望的样子。 页面的装饰，样式。

CSS 怎么用

1. 在元素的开始标签中通过 style 属性定义元素的样式。 -- 极端情况下使用 生效的优先级最高。

2. 通过style 标签书写当前页面中元素的样式 -- 练习、学习的时候方便 在当前页面中可以重复使用； 样式代码只在当前页面中生效； css 代码和 html 代码初步分离。

3. 通过link 标签引入外部CSS资源文件。-- 推荐 样式可以在多个页面中生效; CSS 代码和 HTML 代码完全分离

CSS 代码生效的时候，看最后定义的，匹配的规则 ： 靠近原则 。

最后定义，指的是同一个属性，谁最后定义。

CSS 代码怎么写

语法：  选择器 {属性列表...  }
选择器 ：匹配页面中的某些元素

• 基本选择器

  • (通配符) : 表示页面中的所有元素 div (标签) ：表示页面中指定的标签 class (类) ：匹配页面中所有元素的class 属性名和当前相同的元素,类名可以重复，一个元素可以有多个类名，之间使用 空格 间隔。 用法： .类名 id (id) ：页面中的元素id 属性值不允许重复。用法： #id

  现代的浏览器ID 属性值重复的时候，不会报错，但是只有第一个定义的id 值生效。

• css 3选择器

1. 属性选择器

表单元素匹配的时候用的比较多

[attr]：某个元素上有这个属性的 [attr=value] : 匹配指定属性和值的元素 [attr^=value] : 指定属性值以value 开始的元素 [attr!=value] : 指定属性不是 value 的元素

1. 伪类 :伪类名

   表示状态： :hover : 鼠标悬停在某个元素上的状态 :active: 激活，元素激活后的颜色 :focus: 聚焦状态 表示位置： :first-child :last-child :nth-child 结构： :empty : 除了空白字符，没有子元素 函数 ： :is() : 相当于 等于 :not() : 相当于 不等于 :where() ： 相当于 符合某个条件

2. 伪元素 ::before : 在匹配成功的元素内容之前 ::after : 在匹配成功的元素内容之后 ::placeholder : 预占信息元素

3. 组合（级联）选择器

   并列选择器 ， 选择器与选择器之间使用 ',' 间隔 空格，选择器与选择器之间使用空格间隔， 后代选择器

   , 父子选择器

   • ,前面的元素后紧跟的兄弟元素 ~ ，前面的元素后的所有兄弟元素

属性

• 字体

  font-size : 字体大小 ，px font-family : 字体， 可以有一个值 ，也可以有多个值。 多个值的时候，每个值需要加引号" '' ", 值与值 之间使用逗号间隔。字体依次使用计算机支持的字体。 font-weight: 数字 | 单词。 字重号，名字： bold | lighter

• 颜色 颜色单词-- 练习 hex(16进制) rgb(0-255,0-255,0-255) rgba(0-255,0-255,0-255,0-1)

• 尺寸单位

  • px : 像素

  • % : 百分比， 以父元素为基础单位，进行计算

  • vw / vh : v : view , w : width ,h : height vw : 视窗宽度的百分比 vh : 视窗高度的百分比

  • em : 以父元素的font-size 值为基本单位，进行计算。 eg: 父： font-size: 20px; 子元素 ：width: 20em; 子元素的实际尺寸宽度应该是 20*20 = 400px;

  • rem : r : root , 根元素的font-size 为基本单位 。一般是html 的font-size 值 ，页面中的元素使用 rem 为单位。这种用法经常用在 移动设备中。

• 盒子模型

  • IE(怪异)盒子模型 border-box

  • W3C（标准）盒子模型 content-box 盒子的width, height 的计算方式是一样的。

  • box-sizing: border-box | content-box ;

  • margin : 当前元素和其他元素之间的距离 margin-top margin-right margin-bottom margin-left

    margin : 10px; 四个方向的外边距 margin : 10px 20px; 上下 左右 方向的外边距 margin: 10px 15px; 20px; 上 左右 下 方向 margin : 5px 10px 15px 20px; 上 右 下 左 方向

  • padding : 元素的边框和内容之间的距离

  • border : 边框 border-width : 边框宽度 可以在width 前添加四个方向词，指定某个方向上的边框宽度 border-style 实线： solid 点状： dotted 虚线： dashed border-color

    border-image 边框图片

  上面的三个属性可以和四个方向结合单独设置某个方向上的信息

• css 3 中新增 @font-face

自定义字体库

@font-face { font-family: 自定义的字体名称 ; src: url(字体文件地址); }

- overflow  :
    - hidden : 超出父元素盒子的时候，隐藏内容
    - scroll: 超出父盒子，可以滚动，产生滚动条
    - clip : 以元素的边距盒进行裁剪。
    - visiable: 子元素可以正常展示 ，但是会展示在父元素盒子外边。
    可以实现轮播图效果
- background : 背景
    - background-color :
    - background-image : url("xxx.png")
                         linear-gradient
                         radial-gradient
                         repeat : 设置背景图的重复方式。repeat | no-repeat
    - background-position : 背景图的位置
- border-radius：边框圆角
- word-brak :
    brek-word: 在任意字符间断行
    keep-all : 保持一个完整的单词
- line-height  : 行高
     1.5 : 按文字的倍数设置行高
     20px ：可以让文字在该行中垂直居中
- vertical-align :
    - top
    - bottom
    - middle : 以 x 中线中间位置
- margin :
        margin : 0 auto; 可以设置块元素的居中方式
        但是要求块元素必须设置 width

媒体查询

主要是解决页面在不同尺寸的设备上，显示的效果，页面布局能随时变化 --- 响应式。
​
响应式实现的方式：
- 在页面中定义根元素的 max-width ,页面定义% 。
- 使用 媒体查询 + % | rem 实现。
​
媒体查询的语法：
@media 设备类型 and | or(,) (媒体规则) ... {}
常用的规则 ：
- width
    width
    min-width
    max-width
- orientation:  检测屏幕竖屏或横屏
    landscape ： 横屏
    portrait ： 竖屏

阴影

• 元素的阴影效果：

  • 扩散方式 ： inset

  • 位移距离 ： x, y , 最多使用三个方向，想要更好的立体效果，值都不要太大

  • 模糊面积

  • 阴影颜色 , 阴影颜色会逐步淡化

• 字体阴影 text-shadow

• 盒子阴影 box-shadow

两种阴影效果定义方式一样。

常见的布局

• 静态布局 （固态布局）

  实现的方式： 所有的元素使用 px 为单位，浏览器根据元素本身的布局进行渲染。

• float 布局

  早期的时候把整个页面设置 float ，做整体布局。现在已经比较少了

• flex （弹性盒子）布局

  实际上弹性盒子有三种方式： columns , flex , grid 。 但是现在我们主要说的是 flex 。

• position

  页面中的元素进行定位 。

• 栅格

  主要实现的方式： % 或 vw/vh 实现 。

• 响应式

  • 媒体查询

  • 媒体查询 + %

  • rem 布局

动画

• transition : 过渡效果

  一般和状态伪类结合使用。 transition : property druation timing-function delay; - property : 属性名，如果需要多个属性，可以设置为 all - druation : 动画完成时间 - timing-funtion : 动画方式 - delay: 动画开始前延迟时间， 支持 2000ms , 2s

  .box {
              width: 100px;
              height: 50px;
              background-color: aqua;
          }
  ​
          .box:hover{
              width:400px;
              height: 200px;
              transition: all 3s ;
          }

  动画方式：

  • ease: 默认值,中间加速，结束减速

  • linear : 匀速运动

  • ease-in : 开始慢，逐渐加速

  • ease-out : 开始快，逐渐减速

  • ease-in-out : 开始慢--> 加速-->减速

• transform : 使...变形

  • 旋转: rotate(deg, position)

  • 缩放: scale(x,y) : scaleX() scaleY()

  • 位移：translate(x,y),translateX() ,translateY()

  • 倾斜：skew(x,y), skewX() skewY()

  eg: transform: rotate(45deg) scale(1.5, 2) translate(200px, 100px)

• animation : 动画

  aimation : name druation timing-function

  • animation-name : 一个或多个动画名

  • animation-duration ：动画完成的时间

• • animation-timing-function ： 动画方式 ease: 默认值,中间加速，结束减速 linear : 匀速运动 ease-in : 开始慢，逐渐加速 ease-out : 开始快，逐渐减速 ease-in-out : 开始慢--> 加速-->减速 cubic-bezier(p1,p2,p3,p4): 自定义三次贝塞尔曲线，p1, p3 在0-1之间 steps(n) : 步长 jump-start | start : 左连续 jump-end | end : 右连续 jump-none :

  • animation-delay ： 开始之前的等待时间

  • animation-iteration-count ： 播放次数: infinite(无限次) | n (>0) 次数不能是负数，可以是0.5次

  • animation-direction ： 播放的方向： normal ： 默认值 ，正向 reverse ： 反向 alternate ： 正反交替， 第一次是正向 alternate-reverse ：正反交替，第一次是反向 animation-fill-mode ： 动画在执行之前和之后如何将样式应用于其目标。 none : 默认值， 未开始前，不会将样式应用于目标 forwards : 目标保留最后一帧计算值 backwards : 立即应用第一关键帧定义的值 both : 遵循 forwards 和 backwards ，从两个方向上扩展动画属性。

  • animation-play-state ： 动画状态，是运行（running）还是暂停(paused)

  • animation 的值 可以是一组，也可以是多组。组与组之间用逗号间隔。

• @keyframes

  • 使用 from, to 定义动画开始的数据，和结束的数据

  • 使用百分比定义每个阶段的状态数据