A. HTML5とは何ですか
ワールド・ワイド・ウェブ、標準一般化マークアップ言語（HTML）でのアプリケーションのHTMLのコア言語は、第五大幅に改訂したものです。HTML4と交換するには
XHTMLの次世代標準バージョンを、そうHTML5と呼ばれます。
HTML5は、のために設計されたモバイルデバイス上のサポートマルチメディア。
これは、新しい機能が追加されています：セマンティック特性、ローカルストレージの特性、相性レイドデバイス
、接続の特性、ウェブマルチメディア機能、3次元、グラフィックスや特殊効果特
性質、性能特性との統合、CSS3特性を。
いくつかの要素放棄と属性
幅広いHTML5は、HTML5 + CSS3 + JavaScriptが自身であります
パート2 .html5
1.セマンティック標準の追加
ヘッダー：ヘッダータグ
NAVを：ナビゲーションタグが
articl：[コンテンツ]タブの
セクション：ブロックレベルのタグ
余談：サイドバーのタグ
フッタータグ尾を
2.H5新しいマルチメディアラベル
マルチメディア]タブには2が含まれている、として次の：
オーディオ：オーディオ
ビデオ：ビデオ
にそれらを使用するには、容易ではなくフラッシュや他のブラウザプラグインの使用の背後に行くよりも、ページ内のオーディオとビデオを埋め込むことができます。
- オーディオタグ
<audio src="文件地址" controls="controls"></audio>
//解决<audio>在不同浏览器的兼容问题
< audio >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
</ audio>
- 動画のタグ
<video src="文件地址" controls="controls"></video>
//解决<video>在不同浏览器的兼容问题
< video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持video标签。播放视频
</ video >
3.H5新しい入力フォーム、フォームのプロパティ
| プロパティ値 | 説明 |
|---|---|
| タイプ=「メール」 | メールを入力する必要があり、ユーザの入力を制限 |
| タイプ=「URL」 | URLタイプを入力する必要があり、ユーザーを制限します |
| タイプ=「日付」 | 日付タイプを入力する必要があり、ユーザーを制限します |
| タイプ=「時間」 | 時の型である必要があり、ユーザの入力を制限 |
| タイプ=「月」 | 日付型である必要があり、ユーザの入力を制限 |
| タイプ=「週」 | 週の型である必要があり、ユーザの入力を制限 |
| TYPE =「数」 | 数値型である必要があり、ユーザの入力を制限 |
| タイプ=「TEL」 | 電話番号の種類を入力する必要があり、ユーザーを制限します |
| タイプ=「検索」 | 検索ボックス |
| タイプ=「色」 | カラーピッカー |
三.css3一部
1.属性セレクタ
| セレクタ | 簡単な紹介 |
|---|---|
| E [へ] | ATTを持つE要素選択した属性 |
| [= "選択" へ] E | ATTの属性と属性値を選択すると、ヴァルの要素Eに等しく、 |
| [= "選択" へ] E | ATTの属性と属性値を選択すると、ヴァルの要素Eに等しく、 |
| E [その$ = "選択"] | ATTヴァルの端部に一致する属性値とエレメントEを有します |
| E [* = "選択" へ] | ATTは、マッチング属性を有する、およびEを含むヴァル要素の値 |
<style>
/* 属性选择器使用方法 */
/* 属性选择器的权重是 10 */
/* 1.直接写属性 既是button 又有 disabled 这个属性的元素*/
button[disabled] {
cursor: pointer;
}
/* 2. 属性等于值 */
input[type="search"] {
color: pink;
}
/* 3. 以某个值开头的 属性值 */
div[class^="icon"] {
color: red;
}
/* 4. 以某个值结尾的 */
div[class$="icon"] {
color: green;
}
/* 5. 可以在任意位置的 */
div[class*="icon"] {
color: blue;
}
</style
<body>
<button>按钮</button>
<button>按钮</button>
<button disabled="disabled">按钮</button>
<button disabled="disabled">按钮</button>
<input type="text" name="" id="" value="文本框">
<input type="text" name="" id="" value="文本框">
<input type="text" name="" id="" value="文本框">
<input type="search" name="" id="" value="搜索框">
<input type="search" name="" id="" value="搜索框">
<input type="search" name="" id="" value="搜索框">
<div class="icon1">图标1</div>
<div class="icon2">图标2</div>
<div class="icon3">图标3</div>
<div class="iicon3">图标4</div>
<div class="absicon">图标5</div>
</body>
2.構造擬似クラスセレクタ
| セレクタ | 簡単な紹介 |
|---|---|
| E：最初の子 | 親要素Eの最初の子要素をマッチング |
| E：最後の子 | Eは、親要素の最後の要素と一致します |
| E：n番目の子（N） | n番目の要素Eにおけるマッチングの親要素 |
| E：第一の型 | 最初の指定Eのタイプ |
| E：最後の型 | 指定されたタイプEの最後 |
| E：n番目の型（N） | n番目のEのタイプを指定します。 |
<style>
/*匹配ul元素中的第一个子元素li */
ul li:first-child {
background-color: pink;
}
ul li:last-child {
background-color: deeppink;
}
/* nth-child(n) 我们要第几个，n就是几 比如我们选第8个， 我们直接写 8就可以了 */
ul li:nth-child(8) {
background-color: lightpink;
}
/* of-type 选择指定类型的元素 */
div span:first-of-type {
background-color: purple;
}
div span:last-of-type {
background-color: skyblue;
}
div span:nth-of-type(2) {
background-color: red;
}
</style>
<body>
<div>
<p>我是一个p</p>
<span>我是第一个span</span>
<span>我是第二个span</span>
<span>我是第三个span</span>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
3.擬似要素セレクタ
| セレクタ | 簡単な紹介 |
|---|---|
| ：：前 | 要素の内部の前に挿入 |
| ::後 | 要素の内部に挿入した後、 |
注意：
- 前後のcontentプロパティを持っている必要があります
- 前のコンテンツの前には、バックの中身後
- 前と要素を作成した後、しかし、インライン要素に属します。
- 目に見えない要素がちょうどDOM内部で作成しているので、私たちは1の重量、タグセレクタのように、擬似要素と擬似要素と呼ばれるので
四、2D変換
変換は、（変換）CSS3の破壊、変位要素は、回転、歪み、スケーリングを達成することができる特徴の一つです。
- スケール：スケール
- モバイル：翻訳
- 回転：回転
- チルト：スキュー
1. 2D変換の動きを翻訳します
- 2D 2D変換は、同様に位置ページ内の要素の位置を変更することができる機能の内側に移動しています。
/* 表示转化过渡时间*/
transition: all 4s;
/* 语法 transform: translate(x,y) */
transform: translate(30px, 30px);
特長：
-
2D変換は、XとY軸移動要素に沿って定義されています
-
要素自体に対する百分率単位で翻訳する翻訳：（50％、50％）。
-
同様に位置を翻訳、行ラベル内の他の要素の位置に影響を与えないが影響を及ぼしませんでした
回転回転の2次元変換
の2D回転手段は、二次元平面内の要素の時計回りの回転又は左回転のためのものです。
/* 设置旋转角度 */
transform: rotate(360deg);
/* 设置中心的旋转 */
/* transform-origin: left bottom; */
/* 2. 默认的是 50% 50% 等价于 center center */
/* 3. 可以是px 像素 */
transform-origin: 50px 50px；
ズームの3次元スケール変換
、スケーリング、ズームアウト。限りの要素は、このプロパティにに追加される他の要素に影響を与えることなく、拡大または軽減するためにそれを制御することができるようになります。
/*语法： transform: scale(x, y); */
/* transform:scale(1,1) 宽和高都放大一倍，相对于没有放大 */
/*transform:scale(2,2) 宽和高都放大了2倍*/
/* transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)*/
/* transform:scale(0.5,0.5)：缩小*/
/* scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点*/
transform: scale(2,2);
2D変換包括的な記述された順序
/* transform: rotate(180deg) translate(150px, 50px); */
/* 我们同时有位移和其他属性，我们需要把位移放到最前面 */
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
}
第五に、アニメーション
アニメーション（動画）は、正確に一つまたは複雑なアニメーションを実現するために使用されるアニメーションの複数のノードのグループによって制御することができる機能CSS3の破壊の一つであります
- 定義アニメーションのキーフレーム（同様に定義されたクラスセレクタ）と
- コールアニメーション
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
div {
/* 2. 调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}
3.アニメーション速記プロパティの
アニメーション：モーションアニメーションタイム時には逆方向の再生を開始するアニメーションカーブの名前であれば倍の状態の終わりのためのアニメーションや待機の数。
animation: myfirst 5s linear 2s infinite alternate;
- アニメーション・フィル・モード：転送ボックスアニメーション、終了位置で停止した後
- アニメーションの方向：直接バックジャンプではなく、アニメーションに戻りたい代替
- 仮死：アニメーションプレイ状態：puased。
アニメーションの属性：
| プロパティ | 説明 |
|---|---|
| @keyframes | アニメーションの規定。 |
| アニメーション | アニメーションプレイ状態のプロパティに加えて、すべてのアニメーションプロパティの短縮形プロパティ。 |
| アニメーション名 | それは@keyframesアニメーションの名前を指定します。（必須） |
| アニメーションの継続時間 | 秒またはミリ秒の所定のアニメーションが完了0がデフォルトで、1サイクルかかります。（必須） |
| アニメーションのタイミング機能 | アニメーションの速度プロファイルの規定は、デフォルトでは「容易」です。 |
| アニメーションの遅延 | 開始するアニメーションの規定は、デフォルトは0です。 |
| アニメーションの繰り返しカウント | 指定されたアニメーションが再生された回数、デフォルトは1で、無限があります |
| アニメーションの方向 | アニメーションの規定は逆の次のサイクルで再生するかどうかは、デフォルトでは、代替逆転劇「ノーマル」であります |
| アニメーションプレイ状態 | 规定动画是否正在运行或暂停。默认是"running",还有"pause"。 |
| animation-fill-mode | 规定动画结束后状态，保持forwards回到起始backwards |
六、3D 转换
1.三维坐标系
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
- x轴：水平向右 注意： x 右边是正值，左边是负值
- y轴：垂直向下 注意： y 下面是正值，上面是负值
- z轴：垂直屏幕 注意： 往外面是正值，往里面是负值
2.3D移动 translate3d
transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离
translform:translateX(100px)：仅仅是在x轴上移动
translform:translateY(100px)：仅仅是在Y轴上移动
translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ只能跟px单位）
3.透视 perspective
在父元素添加；
/*perspective越大显示越小*/
perspective: 500px;
4 translateZ
translform:translateZ(100px)：仅仅是在Z轴上移动。有了透视，就能看到translateZ 引起的变化了
translateZ：单位只能是px
translateZ：往外是正值，数值越大显示越大
translateZ：往里是负值，数值越小显示越小
5.3D旋转 rotate3d
语法
- transform:rotateX(45deg)：沿着x轴正方向旋转 45度
- transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg
- transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg
- transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即）
6 .3D呈现 transfrom-style
- 控制子元素是否开启三维立体环境。
- 给父亲添加影响的是子盒子。
- Transform-style: preserve-3d; 子元素开启立体空间，默认的值是 flat 不开启
<style>
body {
/* 透视写到被观察元素的父盒子上面 */
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 让子元素保持3d立体空间环境 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
}
.box div:last-child {
background-color: blue;
/*在x轴旋转60度*/
transform: rotateX(60deg);
}
</style>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
效果：
六、浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。
1. 私有前缀
- -moz-：代表 firefox 浏览器私有属性
- -ms-：代表 ie 浏览器私有属性
- -webkit-：代表 safari、chrome 私有属性
- -o-：代表 Opera 私有属性
2. 提倡的写法
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10
