html5+css3初级程序员

HTML5元素

html5的简介

2014 年 10 月 28 日，W3C 组织公开发布 HTML5 标准规范。
HTML5 针对大量不规范的 HTML 文档，做到了良好的兼容性。

HTML5 和 HTML4 的区别

DTD 的变化：因为HTML4.01基于SGML，HTML5不基于SGML
HTML5 的语法变化
某些元素可以省略结束标签
```
（<p> <li> <dt> <dd> 等） 
```
没有结束标签的元素
```
(<br> 等）
```
属性值可以不用引号括起来
标签不再区分大小写
某些标志性的属性可以省略属性值，通常为 boolean 类型

HTML5 的优势

解决跨浏览器，跨平台问题
增强了 web 的应用程序（比如以前用 Flash 来播放视频，现在直接使用 HTML5 来播放视频，使得手机网页也能看视频）

HTML5废弃的标签

big center font frame frameset noframes

HTML5新增的元素

<header> 用于定义文档或节的页眉
<footer> 用于定义文档或节的页脚
<article> 用于定义文档内的文章
<section> 用于定义文档中的一个区域（或节）
<aside> 用于定义与当前页面或当前文章的内容几乎无关的附属信息
<nav> 用于定义页面上的导航链接部分

<audio> 定义声音，比如音乐或其他音频流
<video> 定义视频，比如电影片段或其他视频流

<mark> 用于定义高亮文本
<time> 用于显示被标注的内容是日期或时间（24 小时制）
<progress> 用于表示一个进度条

<figure> 
用于定义一段独立的引用，经常与说明(caption)<figcaption>配合使用，通常用在主文中的图片，代码，表格等。
<figcaption> 用于表示是与其相关联的引用的说明/标题，用于描述其父节点
<figure>元素里的其他数据。
<hgroup> 用于对多个<h1>~<h6>元素进行组合

效果

<mark>你好</mark>

<figure>
    ![](img/adv1.png)
    <figcaption>图片标题</figcaption>
</figure>

<!-- 输入框搜索 -->
<input type="text" list="list">
<datalist id="list">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="山西">山西</option>
</datalist>

效果：

<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="山西">山西</option>

</datalist>

<!-- 点击展开 只有谷歌和苹果浏览器支持-->
<details>
    <summary>今天天气凉快吗？</summary>
    <p>今天下雨了，天气很凉快</p>
</details>

效果：

<summary>今天天气凉快吗？</summary>
<p>今天下雨了，天气很凉快</p>

</details>

### HTML5的表单控件

<form action="" method="get" oninput="x.value=parseInt(a.value)"> 
    0 <input type="range" id="a" value="50"> 100 <br/>
    <output name="x" for="a">50</output>
</form>

### HTML5新增的type类型

color number email
time 生成一个时间选择器
datetime 生成一个 UTC 的日期时间选择器
datetimelocal  生成一个本地化的日期时间选择器
date  显示一个日期输入区域，可同时使用日期选择器，结果值包括年、月、日，不包括时间。谷歌识别

### HTML5新增的表单属性

placeholder 主要用在文本框，规定可描述输入字段预期值的简短的提示信息
autofocus 当为某个表单控件增加该属性后，当浏览器打开这个页面， 这个表单控件会自动获得焦点
list 为文本框指定一个可用的选项列表，当用户在文本框中输 入信息时，会根据输入的字符，自动显示下拉列表提示，供用户从中选择
pattern 用于验证表单输入的内容，通常 HTML5 的 type 属性，比如email、tel、 number、url 等，已经自带了简单的数据格式验证功能了，加上 pattern 属性后， 验证会更加高效
required 必需在提交之前填写输入字段
spellcheck 拼写检查，为<input>、<textarea>等元素新增属性
multiple 一次上传多个文件
maxlength <textarea>新增<br />maxlength：用于规定文本区域最大字符数。
wrap：是否包含换号符（soft/ hard）

效果：

<form id="login" action="" method="get">
    用户名：<input type="text" name="username" placeholder="请输出用户名" required><br>
    年龄：<input type="number" name="num" min=10 max=20 step="5" value="10"><br>
    邮箱：<input type="email" name="email"><br>
    生日：<input type="date" name="data"><br>  
    爱好：<select size="2" multiple  name="like">
        <option>篮球</option>
        <option>足球</option>
        <option>羽毛球球</option>
    </select>
    喜欢的颜色：<input type="color" name="color"><br>
    <button type="submit">提交</button>
</form>

用户名：<input type="text" name="username" placeholder="请输出用户名" required><br>
年龄：<input type="number" name="num" min=10 max=20 step="5" value="10"><br>
邮箱：<input type="email" name="email"><br>
生日：<input type="date" name="data"><br>  
爱好：<select size="2" multiple  name="like">
    <option>篮球</option>
    <option>足球</option>
    <option>羽毛球球</option>
</select>
喜欢的颜色：<input type="color" name="color"><br>
<button type="submit">提交</button>

</form>

css3选择器

兄弟选择器

.box~p： 
.box所有的p都会被选择，且这些元素和第一个元素拥有同一个父元素（两个元素之间不一定要相邻)

属性选择器：

E[attribute^=value] 用于选取带有以指定值开头的属性值的元素
E[attribute$=value] 用于选取属性值以指定值结尾的元素
E[attribute*=value] 用于选取属性值中包含指定值的元素，位置不限，也不限制整个单词

伪类选择器

:root 选择文档的根元素，HTML 里，永远是<html>元素
:last-child 向元素添加样式，且该元素是它的父元素的最后一个子元素
:nth-child(n) 向元素添加样式，且该元素是它的父元素的第 n 个子元素
:nth-last-child(n) 向元素添加样式，且该元素是它的父元素的倒数第 n 个子 元素
:only-child 向元素添加样式，且该元素是它的父元素的唯一子元素
:first-of-type 向元素添加样式，且该元素是同级同类型元素中第一个元 素
:last-of-type 向元素添加样式，且该元素是同级同类型元素中最后一个 元素
:nth-of-type(n) 向元素添加样式，且该元素是同级同类型元素中第 n 个元 素
:nth-last-oftype(n)向元素添加样式，且该元素是同级同类型元素中倒数第 n 个元素
:only-of-type 向元素添加样式，且该元素是同级同类型元素中唯一的元素
:empty 向没有子元素（包括文本内容）的元素添加样式

伪元素选择器

:enabled 向当前处于可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式
:disabled 向当前处于不可用状态的元素添加样式，通常用于定义表单的 样式或者超链接的样式
:not(selector) 向不是 selector 元素的元素添加样式
:target 向正在访问的锚点目标元素添加样式

css3属性

background

background-clip 设置背景覆盖范围 border-box/padding-box/content-box 
background-origin 设置背景覆盖的起点 border-box/padding-box/content-box 
background-size 设置背景的大小 cover/contain/长度/百分比

文字

text-overflow 设置当文本溢出元素框时处理方式 clip/ellipsis 
word-break 只对英文起作用 以字母作为换行依据 normal/break-word 
word-wrap 只对英文起作用 以单词作为换行依据 normal/break-all/keep-all 
white-space:pre-wrap  只对中文起作用，强制换行

盒子属性

border-radius
box-shadow
resize

变形

translate(x,y)

表示元素水平方向移动 x，垂直方向移动 y，其中 y 可以省略，表示垂直方向没有位移

translateX(x)：表示元素水平方向移动 x。
translateY(y)：表示元素垂直方向移动y。

rotate(angle)

表示元素顺时针旋转 angle 角度，angle 的单位通常为 deg

scale(x,y)

表示元素水平方向缩放比为 x，垂直方向上缩放比为y，其中y可以省略，表示y和 x相同，以保持缩放比。

scaleX(x)：表示元素水平方向缩放比为 x。
scaleY(y)：表示元素垂直方向上缩放比为 y。

skew(angleX ,angleY)

表示元素沿着 x 轴方向倾斜angleX角度，沿着y轴方向倾斜angleY角度，其中 angleY可以省略，表示 Y 轴方向不倾斜。

skewX(angleX)：表示元素沿着 x 轴方向倾斜angleX 角度。
skewY(angleY)：表示元素沿着 y 轴方向倾斜 angleY 角度。

transform-origin

表示元素旋转的中心点

默认值为 50% 50%。

第一个值表示元素旋转中心点的水平位置，它还可以赋值 left、right、center、长度、百分比；
第二个值表示元素旋转中心点的垂直位置，它还可以赋值 top、bottom、 center、长度、百分比。

CSS3 的 3D 变形属性

transform 增加了三个变形函数：

rotateX：表示元素沿着 x 轴旋转。
rotateY：表示元素沿着 y 轴旋转。
rotateZ：表示元素沿着 z 轴旋转。

transform-style

用来设置嵌套的子元素在 3D 空间中显示效果。它可以设置两个属性值，flat（子元素不保留其 3D 位置，默认值）和 preserve-3d（子元素保留它的 3D 位置）。

perspective

设置成透视效果，透视效果为近大远小。该属性值用来设置 3D 元素距离视图的距离，单位为像素，已经内置了，我们只需要写具体数值即可，默认值为 0。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

perspective-origin

设置 3D 元素所基于的 x 轴和 y 轴，改变 3D 元素的底部位置，该属性取值同transform-origin，默认值为 50% 50%。

<style>

.box{
    width: 300px;
    height: 300px;
    margin: 50px auto;
    perspective: 500px;
}
.con{
    position: relative;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    transform-origin: 50% 50% -150px;
    animation: rotate 4s infinite;
}
.con .side{
    position: absolute;
    width: 300px;
    height: 300px;
    font-size: 44px;
    line-height: 300px;
    text-align: center;
}
.con .before{
    background-color: rgba(0,0,0,0.4);
}
.con .left{
    background-color: rgba(255,0,0,0.4);
    left: -300px;
    top: 0;
    transform: rotateY(-90deg);
    transform-origin:right;
}
.con .right{
    background-color: rgba(255,255,0,0.4);
    left: 300px;
    top: 0;
    transform: rotateY(90deg);
    transform-origin: left;
}
.con .top{
    background-color: rgba(0,255,0,0.4);
    left: 0;
    top: -300px;
    transform: rotateX(90deg);
    transform-origin: bottom;
}
.con .bottom{
    background-color: rgba(0,0,255,0.4);
    left: 0;
    top: 300px;
    transform: rotateX(-90deg);
    transform-origin: top;
}
.con .back{
    background-color: rgba(200,122,0,0.4);
    transform: translateZ(-300px);
}

@keyframes rotate{
    0%{
        transform:rotateX(0) rotateY(0);
    }
    50%{
        transform:rotateX(0) rotateY(360deg);
    }
    100%{
        transform:rotateX(360deg) rotateY(360deg);
    }
}

</style>

<div class="con">
    <div class="side before">前</div>
    <div class="side back">后</div>
    <div class="side top">上</div>
    <div class="side bottom">下</div>
    <div class="side left">左</div>
    <div class="side right">右</div>
</div>

</div>

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>立方体</title>
    <style>
        
        .box{
            width: 300px;
            height: 300px;
            margin: 100px auto;
            perspective: 500px;
        }
        .con{
            position:relative;
            width:300px;
            height:300px;
            transform-style:preserve-3d;
            transform-origin:50% 50% -150px;
            animation:rotate 4s infinite;
        }
        .con .side{
            position:absolute;
            width:300px;
            height:300px;
            font-size:44px;
            line-height: 300px;
            text-align: center;
        }
        .con .before{
            background-color: rgba(0,0,0,0.4);
        }
        .con .left{
            background-color: rgba(255,0,0,0.4);
            left:-300px;
            top:0;
            transform:rotateY(-90deg);
            transform-origin:right;
        }
        .con .right{
            background-color: rgba(255,255,0,0.4);
            left:300px;
            top:0;
            transform:rotateY(90deg);
            transform-origin:left;
        }
        .con .top{
            background-color: rgba(0,255,0,0.4);
            left:0;
            top:-300px;
            transform:rotateX(90deg);
            transform-origin:bottom;
        }
        .con .bottom{
            background-color: rgba(0,0,255,0.4);
            left:0;
            top:300px;
            transform:rotateX(-90deg);
            transform-origin:top;
        }
        .con .back{
            background-color: rgba(200,122,0,0.4);
            transform:translateZ(-300px);
        }

        @keyframes rotate{
            0%{
                transform:rotateX(0) rotateY(0);
            }
            50%{
                transform:rotateX(0) rotateY(360deg);
            }
            100%{
                transform:rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="con">
        <div class="side before">前</div>
        <div class="side back">后</div>
        <div class="side top">上</div>
        <div class="side bottom">下</div>
        <div class="side left">左</div>
        <div class="side right">右</div>
    </div>
</div>
</body>
</html>

说明

CSS3 perspective 属性

实例，设置元素被查看位置的视图：

div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}

<style>

div1

{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; / Safari and Chrome /
}

div2

{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); / Safari and Chrome /
}
</style>

<div id="div1">
<div id="div2">HELLO</div>
</div>

代码：

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome */
}

#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>

<body>

<div id="div1">
<div id="div2">HELLO</div>
</div>

</body>
</html>

浏览器支持

目前浏览器都不支持 perspective 属性。

Chrome 和 Safari 支持替代的 -webkit-perspective 属性。

定义和用法

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

过渡动画

transition:property transition-duration transition-delay transition-timing-function     

transition-delay 设置过渡的延迟时间
transition-duration 设置过渡的过渡时间
transition-timing-function 设置过渡的时间曲线

linear/ease/ease-in/easeout/ease-in-out/

transition-property 设置哪条 CSS 使用过渡
none/all/CSS 属性名称列表

@keyframes name{

}

animation:name duration delay count state

animation-name  使用@keyframes 定义的动画
animation-delay 设置动画的延迟时间

animation-timing-function 设置动画的时间曲线
linear/ease/ease-in/easeout/ease-in-out

animation-iteration-count  设置动画播放次数数字 /infinite
animation-direction 设置动画反向播放 normal/alternate
animation-play-state 设置动画播放状态 paused/running
animation-fill-mode: forwards 动画保持最终状态

动画

<style>

.box{
    position: relative;
    width: 600px;
    height: 400px;
    border:2px solid blue;
    overflow: hidden;
}
.box .main{
    width: 100px;
    height: 100px;
    background-color: red;
    animation:translate 2s 1s 1 linear forwards;
    
}
.box:hover .main{
    animation-play-state: paused;
}

@keyframes translate{
    0%{
        transform: translateX(0) translateY(0);
    }
    25%{
        transform: translateX(500px) translateY(0);
    }
    50%{
        transform: translateX(500px) translateY(300px);
    }
    75%{
        transform: translateX(0) translateY(300px);
    }
    100%{
        transform: translateX(0) translateY(300px);
    }
}

</style>

<div class="main"></div>

</div>

代码：

<!DOCTYPE html>
<html>
<head>
<title>过渡动画</title>
<meta charset="utf-8">
<style>
    .box{
        position: relative;
        width: 600px;
        height: 400px;
        border:2px solid blue;
        overflow: hidden;
    }
    .box .main{
        width: 100px;
        height: 100px;
        background-color: red;
        animation:translate 2s 1s 1 linear forwards;
        
    }
    .box:hover .main{
        animation-play-state: paused;
    }

    @keyframes translate{
        0%{
            transform: translateX(0) translateY(0);
        }
        25%{
            transform: translateX(500px) translateY(0);
        }
        50%{
            transform: translateX(500px) translateY(300px);
        }
        75%{
            transform: translateX(0) translateY(300px);
        }
        100%{
            transform: translateX(0) translateY(300px);
        }
    }
</style>
</head>
<body>
<div class="box">
    <div class="main"></div>
</div>
</body>
</html>

弹性盒子

CSS3 弹性盒，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

弹性盒模型概念

任何一个容器都可以指定弹性布局

设置 flex 布局以后，子元素的 float,clear,vertical-align 等样式全部失效

display:flex;或 display:inline-flex;

弹性父元素属性

display:flex;
flex-direction: row|row-reverse|column| column-reverse
指定了弹性子元素在父容器中的位置。

juestify-content: flex-start|flex-end|center|space-between| space-around 
水平对齐方式

align-items:flex-start | flex-end | center | baseline | stretch 
垂直对齐方式

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

align-content:
当flex-wrap起作用发生换行时，该属性控制每行的对齐方式

弹性子元素属性

order:num 数值小的排在前面。可以为负值

flex 属性用于指定弹性子元素如何分配空间

html5+css3初级程序员

HTML5元素

html5的简介

HTML5 和 HTML4 的区别

HTML5 的优势

HTML5废弃的标签

HTML5新增的元素

效果

css3选择器

兄弟选择器

属性选择器：

伪类选择器

伪元素选择器

css3属性

background

文字

盒子属性

变形

translate(x,y)

rotate(angle)

scale(x,y)

skew(angleX ,angleY)

transform-origin

CSS3 的 3D 变形属性

transform-style

perspective

perspective-origin

说明

CSS3 perspective 属性

div1

div2

浏览器支持

定义和用法

过渡动画

动画

弹性盒子

弹性盒模型概念

弹性父元素属性

弹性子元素属性

我是哪吒

引用和评论

这是我的第一次JavaScript初级技巧

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高