乐趣区

关于html5:html5css3初级程序员

jiezi

HTML5 元素

html5 的简介

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

HTML5 和 HTML4 的区别

  1. DTD 的变动：因为 HTML4.01 基于 SGML，HTML5 不基于 SGML

  2. HTML5 的语法变动

    某些元素能够省略完结标签 

    （<p> <li> <dt> <dd> 等）

    没有完结标签的元素 

    (<br> 等）
  3. 属性值能够不必引号括起来
  4. 标签不再辨别大小写
  5. 某些标志性的属性能够省略属性值，通常为 boolean 类型

HTML5 的劣势

  1. 解决跨浏览器，跨平台问题
  2. 加强了 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>

<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>

成果：

<input type=”text” list=”list”>
<datalist id=”list”>

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

</datalist>

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

成果：

<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>

<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>

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=”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>

代码：

<!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=”box”>

<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 属性用于指定弹性子元素如何调配空间

退出移动版