HTML5+CSS3知识点统计~全面超详细_html5.css3标签-优快云博客

本文详细介绍了HTML5新增的属性和标签，如contenteditable、draggable、hidden等，以及新增的表单属性如color、date等。同时，深入探讨了CSS3的选择器、新特性，如background-size、flex布局、动画效果等。此外，还涵盖了CSS3的多列布局和弹性盒模型。这些新特性极大地丰富了网页设计和开发的可能性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5新增属性(部分)：

contenteditadd "" ; 内容可编辑

draggable = ""; 拖拽文字

dir="";显示方向的元素

hidden=""; 隐藏元素

HTML5新增标签:

<header></header> 内容区域

<nav></nav>定义导航

<article></article>定义文档

<aside></aside>内容附属

<section></section>内容分块

<footer></footer>页面底部

<figure></figure>独立流内容

<figcaption></figcaption>元素组标题

<hgroup></hgroup>标题组

<details></details>描述文档

<summary></summary>显示列表

<progress></progress>进度表

<meter></meter>指定范围数值

<time></time>时间或日期

<mark></mark>高亮显示

<cite></cite>内容斜体

<audio></audio>音频

<video></video>视频

HTML5新增的表单属性:

color 颜色选择器

date 日期选择器

datetime 日期

datetime-local 本地日期

email 邮寄地址

month 月份

number 数值输入框

CSS3选择器：

E~F:兄弟选择器

E[attr="value"]:属性选择器

::伪类选择器

first-child:第一个

last-child:最后一个

nth-child():筛选

CSS3新特性:

background-image:背景图片

background-size:背景大小

background-origin：背景图片位置 border-box;padding-box;content-box

background-position：背景图片位置

background-clip:背景位置区域，进行裁剪 border-box;padding-box;content-box

font-face:自选字体

动画效果：

transition:过渡

trabsform:2D转换

translate 偏移

rotate 旋转

scale 缩放

动画：自定义动画

@keyframes：

from - to

%

animation：使用动画

animation:动画名字执行时间延时播放次数等

CSS3多列布局

columns:多列布局

column-count:列数

column-width:列宽

column-gap:列间隙

column-rule-style:边框样式

column-color：列边框颜色

 flex布局：display: flex;

  * flex使用后：子元素都会变成块级元素
  * flex使用后：子元素的宽度会受父元素的控制（如果空间不够，子元素的空间会被压缩）

* 弹性父元素属性
  * flex-direction：弹性子元素方向（主轴方向）
    * 默认主轴方向：X轴
    * 可以修改主轴方向，另外一个方向就会变成侧轴
  * justify-content：子元素主轴对齐方式
    * flex-start：从主轴确定的位置开始，挨着排
    * flex-end：从主轴确定的方向位置开始，挨着排
    * center：居中排版
    * space-between：平分剩余空间，两头挨着两端
    * space-around：平分剩余空间，每个都一样，左右都有相同空间
    * space-evenly：所有子元素之间的间隔完全一样（包括两端）

align-items：子元素侧轴对齐方式
    * flex-start：沿着侧轴起点开始
    * flex-end：沿着侧轴末端开始
    * center：居中
    * baseline：与flex-start差不多
    * stretch：让子项的高度拉伸填充整个父盒子
  * flex-wrap：子元素换行方式
    * nowrap：默认的，不换行
    * wrap：换行（优先排满，不够空间才会换行）
  * align-content：子元素各行对齐方式，与主轴上的子元素的对齐方式很像，多了一个stretch拉升效果
    * 该属性可能与align-items效果会产生重叠覆盖

* order：子元素排序位置，值越大越考后：代码结构的顺序不能阻挡
    * order 数字
  * margin：子元素对齐方式，使用auto可以让子项完美居中（水平和垂直都可以）
    * margin auto
  * align-self：子元素自己侧轴对齐方式，使用方式与主轴上justify-content差不多
  * flex：空间分配
    * flex 数字：子项占几分的问题
    * 一旦采用flex控制份数：子项的宽度就会实现（width无效）