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 定义动画开始的数据,和结束的数据

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