目录
1、URL(Uniform Resource Locator )
1.1 Webシステムのアーキテクチャ
構造を理解することは、多くのコースを学習するための非常に重要な方法です。
Web アプリケーション プロジェクト自体はソフトウェア システムであり、独自の構造、つまりシステム アーキテクチャも持っています。この問題に特化したコース「ソフトウェア アーキテクチャ」があります。
システムアーキテクチャとは、システム全体を完全に記述するためのさまざまな視点を統合したモデルであり、ソフトウェアシステムの基本的なアーキテクチャを理解することができます。一般的なシステムアーキテクチャには、C/S 構造と B/S 構造があります。
1. C/S（クライアント/サーバー）構造
まずC/Sのワークフローを理解しますが、サーバーにはさまざまなリソースが格納されており、クライアント側ではネットワーク経由でリソース要求を送信し、サーバー側からの応答内容を受信して表示します。以下に示すように:
Web コンテンツの閲覧はインターネットが提供する主なサービスであり、HTML (Hyper Text Markup Language) で記述された Web ページのコンテンツを HTTP プロトコル (HyperText Transfer Protocol) を利用してインターネット上に送信し、情報を交換します。
その具体的な作業手順は次のとおりです。
☆ クライアントのブラウザで URL を入力し、WEB サーバーにサービスリクエストを送信します。
☆ サーバーはブラウザによって要求された URL を解析し、対応する Web ページ ファイルを見つけます。
☆ Web ページには JavaScript などのスクリプトが含まれており、HTML ドキュメントとともにクライアントにダウンロードされます。Web ページに ASP などのプログラムが埋め込まれている場合、サーバーはこれらのプログラムを実行し、実行結果をクライアントに送信します。 HTML タグの形式。
☆ブラウザはHTML文書を解釈して結果を表示します。
ハイパーテキスト転送プロトコル (HTTP) は、WEB ブラウザと WEB サーバーのアプリケーション層間の通信プロトコルです。HTTP セッションのプロセスは 4 つのステップで構成されます。
☆ リンク（接続）を確立します。
☆リクエスト（リクエスト）を送る;
☆応答要求（応答）；
☆リンクを閉じます（閉じる）。
在C/S结构下，不同的服务需要安装不同的客户端软件，进而占用非常多的系统资源。除此之外它还有其它一些弊端，比如A需要在B电脑上处理文件，但B电脑并未安装类似的软件，这样得先去下载，非常不方便，并且软件升级后也需要重新下载。因此，需要有新的方法来解决该问题，于是就有了新的B/S结构。
2、B/S（即Broswer/Server）结构
B/S结构就是浏览器/服务器结构，它解决了C/S结构所带来的不便，能够将所有的服务（如QQ、邮件等）都通过浏览器来完成。由于操作系统通常都安装了某款浏览器，这样可以更多的节省系统资源。同时，各种服务软件功能的升级也无需重新下载，只要刷新网页即可。但B/S也存在一些不足，比如操作的稳定性、流畅度等方面相对较弱，并严重依赖网络的状况。
在讲解了C/S架构和B/S架构之后，为了让大家更加清楚它们各自的特点，下面对它们做对比说明，如表所示。
1.2 浏览器
大家都有这样的体会：平时上网时，都是通过浏览器发送请求信息，如URL网址、关键词等，同时也是通过浏览器来查看互联网的响应信息。可见，浏览器是Web前端的重要工具。
首先必须明确，Web前端开发是建立在B/S结构基础之上，以浏览器为核心。由不同软件厂商提供的现有浏览器种类众多，且各有特点和优势。而比较常用的浏览器有IE、Firefox、Chrome、Opera等。那么，浏览器的结构又是怎样的呢？
浏览器通常是由排版引擎和Javascript引擎构成。
1、排版引擎（Rendering Engine）
排版引擎也称作内核，是用来渲染网页内容的，将网页的代码转换为最终能看得见的页面。而不同浏览器的内核是不尽相同的。
1）Trident内核就是大名鼎鼎的IE浏览器所使用的内核，也是很多浏览器所使用的内核，常被称为IE内核。
2）Gecko内核是一款开源的浏览器内核，目前使用最主流的Gecko内核的浏览器是Mozilla Firefox，所以也常常称之为火狐内核。
3) WebKit カーネルは、非常に優れたパフォーマンスと W3C 標準の完全なサポートを備えた、最も有望な新興カーネルです。Google の Chrome は Webkit カーネルを使用しています。
4) Opera ブラウザは Presto カーネルを使用しており、W3C 標準も非常によくサポートしています。
2.JavaScriptエンジン
JavaScript エンジンは略して JS エンジンと呼ばれ、JS プログラムを解析して実行するために使用され、そのパフォーマンスは Web ページ全体の読み込み速度に大きな影響を与えます。
1) Chakra (チャクラ) エンジンは、IE9 で有効になる新しい JavaScript エンジンです。
2) SpiderMonkey エンジンは Firefox ブラウザで使用されます。
3) Chrome ブラウザには V8 エンジンが適用されます。
1.3 Web関連の概念
1、URL (Uniform Resource Locator)
URL は、Uniform Resource Locator の略で、インターネット上の各 Web ページのアドレスです。平たく言えば、URL はインターネット リソースの場所を指定する Web アドレスです。
URL 構造は、http:// Web サイトのアドレス/ディレクトリ パス/ファイル名という 3 つの部分で構成されます。
このうち、「http://」はネットワーク アクセスのプロトコル部分、「Web サイト アドレス」は Web サーバーのアドレス (ドメイン名または IP アドレス)、「/ディレクトリ パス/ファイル名」は実際のアドレスを示します。サーバー上に保存されているリソースの場所。
例: http://www.cqvip.com/qk/83461A/200901/index.shtml
Journal of Huaihua University Web サイトの qk/83461A/200901 ディレクトリ パスにあるindex.shtml にアクセスします。
2.ハイパーリンク
ハイパーリンクはハイパーテキストを実現するための主要な技術です。これは、異なるサイトの Web ページ、同じサイトの他の Web ページ、Web ページの他の段落などの WWW リソースを指します。
ハイパーリンクの機能は、Web ページを閲覧しているときに、ハイパーリンクをマウスでクリックすると、そのハイパーリンクが指すリソースにジャンプし、Web 上の情報をダウンロードすることができます。
ハイパーリンクの判定方法は非常に簡単で、マウスでカーソルの矢印をハイパーリンクに移動させると、カーソルが手の形に変わります。
3、网站
网站是一个存放在网络服务器上的完整信息的集合体。
网站内通常包含一个或多个网页，这些网页以一定的形式链接在一起，成为一个整体。
4、网页
网页是网站的重要组成部分，它是一张页面，可以看成是一个单一体，是网站的一个元素。网页里可以有文本、图片、声音、视频、动画等元素。
其中，文本是构成网页的主体。对文本元素的设计包括字体、字型、颜色、段落设置以及定位等。而图片是实现网页图文并茂的主要手段。常用的图形文件格式有GIF、JPEG、PNG、矢量格式。在使用图片时，应掌握的基本原则是，图形文件小、数量少，图像质量高，合理使用动画。
5、主页
主页也称之为首页。它是一个殊性的网页，是整个网站的起始点和汇总点。
主页也是浏览者浏览一个网站的入口。
6、静态网页
静态网页是指这个网页不论在何时从何地浏览，都将显示相同的画面和内容，且用户仅能浏览，无法提供信息给网站，让网站作出响应。
静态网页的编程语言有HTML、CSS等。 HTML(超文本标记语言)是网页设计的基础，也是表示网页的一种规范，通过标记符（或标签）来定义网页内容的显示格式；CSS(层叠样式表)技术是HTML功能的扩展，使用它能设计出更具表现力的网页。
注意：在网页中添加相关的动画，并不代表它不是静态网页。
7、动态网页
动态网页是指网页能够按照用户的需求做出动态响应。常见的动态网页有留言板、论坛等。
常用的网页动态/特效脚本语言有JavaScript和VBScript。其中，JavaScript是一种基于对象的、动态的、跨平台的、具有简单性与安全性的脚本语言。JavaScript简单而功能强大，主要表现在：
(1)制作网页特效；
(2)实现表单数据的客户端校验；
(3)实现窗口动态操作。
8、网页设计原则
网页设计应掌握以下原则：
(1) ページは簡潔であるよう努めます。ページは簡潔で目を引くものにし、色は暗すぎず、写真は大きすぎてはいけません。
(2) グラフィックや画像を巧みに配置: 写真の視覚効果を利用してページを鮮やかにし、閲覧者を引き付けます。
(3) 情報学習が得意：インターネット上にある既成の情報を参照・応用することで、Web ページ制作は半分の労力で 2 倍の成果が得られます。
(4) 内容が分かりやすい：内容が豊富で、探しやすく、読みやすく、理解しやすい。
(5) 情報量とスピードのニーズを満たすために、ページは小さく、ちょうどよいものである必要があります。
9. ウェブデザイン技術
静的 Web ページと動的 Web ページの概念部分の研究から、Web ページには独自の構造、スタイル、動作があることがわかります。ここで、ウェブページの構造はＨＴＭＬ言語によって記述され、ウェブページのスタイルはＣＳＳによって定義および設計され、ウェブページの動作はＪａｖａＳｃｒｉｐｔによって記述される。したがって、Web デザインの 3 つの主要なテクノロジは HTML、CSS、JavaScript です。これらについては後の章で詳しく紹介します。
2.2 ラベルの基本
2.2.1 ラベルの構文
HTML は、Web ページのコンテンツを記述する一連のタグを提供します。たとえば、head は Web ページの先頭を意味し、body は Web ページの本文を意味します。
HTMLタグは独立した単語または単語の略語で構成されており、これらの単語または単語の略語は<head>、<p>などの「<>」内に配置する必要があります。同時にタグは2つに分割されます。タグと単一タグ。
1. ダブルラベル
ダブルタグには開始タグと終了タグが必要です。2つのタグの間にはブラウザに表示する内容が入ります。開始タグと終了タグはペアで使用してください。タグには「/」が付加されていることを示します終わり。
例えば：
<p>
二重タグは段落を示し、 これは<strong>段落</strong>の略です。
</p>
2. シングルレーベル
単一タグには終了タグがなく、タグの最後に「/」を追加すると自己終了を意味します。統一されていない場合は「/」を省略することもできますが、統一して使用することを推奨します。
例: <br/> (改行タグ)、<hr/> (水平線を描画するためのラベル)、<img src="" alt=""/> (表示画像タグ)、<input type="" /> ( input タグは、異なる type 属性値に従って、異なる input 要素を取得します。たとえば、テキスト入力ボックス、ボタンなど)。
3. プロパティ
属性はタグの重要な部分です。属性は、特別な設定を行ったり、タグに追加の補足を行うために使用できます。属性は、値を持つ属性と値のない属性に分けられます。値を持つ属性の属性値は二重引用符で囲まれます。
例えば：
<img src="mypic.png" width="200px" height="200px" alt="私は写真です">
<input type="text" が無効になっています/>
タグ内に記述されている部分が属性であり、src、width、height、alt、typeなどはいずれも値を持つ属性であり、disableは値のない属性です。
2.2.2 基本ラベル
1. メタデータ
メタデータとは、作成者、キーワード、説明など、<meta> タグで設定されるページの関連情報を指します。メタデータはクライアントには表示されませんが、ブラウザによって解析されます。<meta> タグはドキュメントの先頭 (<head></head> の間) にのみ配置でき、メタデータは常に「名前/値」ペアの形式で表示されます。例えば：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name= "keywords" content="html,css,javascript,php">
<title>大鸟教程</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
学习元データの使用
</body>
</html>
このうち、<meta>タグのname属性レコードの「name/value」の「name」は、name="keywrods"のように、Webページの情報を記述する名前をユーザーがカスタマイズできます。
content 属性は、content="html,css,javascript" のように、「名前/値」に「値」を記録します。http-equiv または name 属性に関連するメタ情報を定義します。
http-equiv属性也是记录的"名称/值"中的"名称"，把content属性关联到HTTP头部。
2、表格
建立表格主要用到四个标签：<table>，<tr>，<th>，<td>。
<table>和</table>是表格标签，用来定义一个表格元素；
<tr>和</tr>为行标签，用来定义表格的一行；
<th>和</th>为单元格标签，用来定义表格的首行单元格，其中的文字以黑体显示，该行是可选的；
<td>和</td>为单元格标签，用于定义表格的单元格。它们必须放在<tr>和</tr>标签内。一行中有多少个单元格就有多少对<td>和</td>标签。
创建表格的语法格式为：
<table>
<tr>
<td>(<th>)首行首列单元格内容</td>>(/<th>)
……
<td>(<th>)首行第n列单元格内容</td>>(</th>)
</tr>
……
<tr>
<td>第m行首列单元格内容</td>
……
<td>第m行第n列单元格内容</td>
</tr>
</table>
3.1 CSS概述
3.1.1 认识CSS
HTML タグには独自の属性があり、要素の表示効果を制御するために使用されます。Netscape や Internet Explorer などの主要なブラウザは、HTML 仕様に新しい HTML タグや属性 (フォント タグやカラー属性など) を追加し続けているため、ドキュメント コンテンツがプレゼンテーション層から明らかに独立しているサイトを作成することがますます困難になっています。文書の作成はますます難しくなります。したがって、要素の表示効果制御の要件が変化すると、元のラベルの属性では要件を満たせなくなるため、ラベルの属性を変更に合わせて拡張する必要があります。
ただし、HTML はマークアップ言語であるため、特定のバージョンのコア タグ ライブラリは比較的安定したままであり、頻繁に変更すべきではありません。
この問題を解決するために、非営利の標準化連合である World Wide Web Consortium (W3C) が HTML 標準化の使命を担い、HTML4.0 以外のスタイル (Style) を作成しました。そこで、ラベル属性の仕組みを拡張したCSS（Cascading style Sheets）カスケード スタイル シート技術が登場しました。
1996 年に W3C は、HTML 表示スタイルを定義する最初のカスケード スタイル シート仕様である CSS1 を提案し、すぐに広く採用される標準になりました。1998 年までに、W3C は元の草案に基づいて拡張し、元の形式と標準を含むだけでなく、多くの拡張機能を備えた CSS2 仕様を確立しました。現在では CSS3 仕様に発展し、セマンティック機能がより強力になっています。
すべての主要なブラウザはカスケード スタイル シートをサポートしています。CSS は、フォント サイズ、色、タイポグラフィ レイアウトなど、Web ページ要素のスタイル (つまり、表示効果) を制御するために使用されます。HTML と連携してリッチでカラフルな Web ページをデザインできます。CSS の書き方ルールは、次の文法ルールに従う必要があります。
セレクター { 宣言リスト; }
このうち中括弧内の各ステートメントはコロンで区切られた属性と値のペアで構成され、宣言はセミコロンで区切られており、最後の「;」は省略できないことに注意してください。
<h1>タグ内の文字色を赤、フォントサイズを14ピクセルとした場合、以下の構文に従って設定する必要があります。
エラーを避けるために、最後のステートメントの後にセミコロン「;」を追加する場合には特別な注意を払う必要があります。
CSS をよく理解して使いこなすには、次の 3 つの概念を正確に把握する必要があります。
(1) 要素。要素とは、開始タグ、終了タグ、およびこれら 2 つのタグに含まれるすべての内容を含む文書形式を表すモジュールを指します。
(2) 属性。HTML ドキュメントでは、属性は要素の特性の一部の側面を指します。
（3）规则。样式规则由选择器和声明列表（或声明块）构成，而声明块则是“属性:值”对（即声明）的集合，用来控制网页元素的显示方式。
总起来说，CSS具有以下几个作用。
（1）简化了网页格式设计，增强了网页的可维护性。它加强了网页的表现力，提供更多效果来扩展内容表现形式。
（2）增强了网站格式的一致性，降低网站开发与维护工作量。
（3）允许作者独立控制文档中所有标签的显示形式。
3.1.2 CSS使用方式
CSS样式可以按其出现在不同地方划分为不同类型。按照该标准来划分，CSS中主要有以下3种样式类型：
（1）内联样式，也称行内式或元素级样式。它用于给某个元素设定具体的样式规则。它在元素的开始标签内写入具体的样式规则，内联样式的作用范围仅限于本元素。
（2）内部样式，亦称文档级样式或页面级样式。它是将所有样式规则都罗列在HTML网页文档的头部，即写在(<head>和</head>之间的)<style>与</style>中，其作用范围是整个文档。
（3）外部样式，也叫外联式或项目级样式。它是把所有样式规则书写在一个独立于网页外的文档(.css文件)中。可以供整个项目中所有有需要的HTML网页文档使用。
CSS样式必须引入到HTML文档才能被浏览器识别并应用到HTML元素上。CSS类型不同，引入方式也不同。因此，将CSS样式引入至HTML文档也就有三种方式，下面分别举例加以说明。
（1）内联样式引入
通过直接设置标签属性style来引入CSS样式，即直接将样式规则的声明块作为style的属性值。例如：
<h2 style="color:red;font-style:italic;">
欢迎光临
</h2>
以上方式将该标题文字设置为红色倾斜字体。
（2）内部样式引入
通过<style>标签引入CSS样式，通常需要被嵌套在<head>标签中，例如：
<style type="text/css">
/* インラインスタイルはここにあります */
h2 {色:赤;フォントスタイル:イタリック;}
</スタイル>
このタイプのスタイルでは、Web ページ内の <h2> タグで定義されたすべてのテキストが赤い斜体フォントになります。
(3) 外観スタイルの導入
CSS スタイルを独立した .css ファイルに記述し、<link> タグを介して HTML ドキュメントの先頭 (<head> と </head> の間) に導入します。例えば：
<link rel="stylesheet" type="text/css" href="mystyles.css">
さらに、次のような特別なコマンド @import (at ルール) を <head> ヘッドの <style> タグの間に使用して、ファイルをインポートすることもできます (ただし、一般的には使用されません)。
<style type="text/css">
@インポートURL(http://www.abc.com/styles.css); または
@import "http://www.abc.com/styles.css";
</スタイル>
3.1.3 CSS の基本概念
1.ユニット
ページレイアウトでは、要素の幅、高さ、フォントサイズ、位置などの属性が設定されることが多いですが、これらの属性値は数値形式で存在し、表現するには対応する単位が必要です。CSSにはたくさんのユニットがありますが、ここでは以下のものだけを紹介します。
(1)px(ピクセル)
皆さんご存知のとおり、画面は無数の格子状の点で構成されており、その点をピクセルと呼びます（例えば、1366*768というと、横1366ピクセル、縦768ピクセルで画面が構成されている） 。例えば：
(2) %（パーセンテージ）
パーセンテージは、要素 (通常は親要素) のサイズに対する相対的なサイズです。
(3)em（フォントサイズ）
em は相対単位であり、現在の要素のフォント サイズと同じです。
2. カラー値
通常、Web ページはさまざまな色の HTML 要素で構成されており、CSS には要素の色の値を設定するための複数のメソッドが用意されています。
(1) キーワード
キーワードは、赤、緑、青などの色を表す英単語で構成されています。例えば：
(2) 16進数値
16 進値は、#FFFFFF、#F2F2F2 など、6 ビットの 16 進値と記号「#」で構成されます。例えば：
(3) 三原色（RGB値）
三原色（RGB値）はrgb(120, 120, 120)のように赤（赤）、緑（緑）、青（青）で構成され、3つのパラメータは赤の値、緑の値、値の範囲は 0 ～ 255 で、rgb(10%、20%、50%) などの 3 パーセントにすることもできます。異なる値を組み合わせると、異なる色になります。例えば：
3. 継承
継承とは、CSS プロパティが親要素に設定されている場合、これらの CSS プロパティがその子要素にも適用されることを意味します。たとえば、親要素に設定された CSS プロパティ「color:red;font-size:24px;」 <p > 、これはその子要素にも適用されます。
注: すべての CSS プロパティが継承されるわけではなく、継承はすべてのネストされたタグのシナリオに適用されます。
4. カスケード
スタイルのカスケードは、同じ HTML 要素が複数のスタイルで定義されている場合に発生します。つまり、HTML ファイル内の同じ要素に同じウェイトを持つ複数の CSS スタイルが設定されている場合、最後の CSS スタイルが適用されます。サンプルコードは次のとおりです。
<スタイル>
p{色:赤;}
p{色:緑;}
</スタイル>
/*次の段落テキストは緑色で表示されます*/
<p>シャオホンは内気な女の子です。</p>
5. 重要性
スタイル宣言の後に「! important」を追加すると、スタイルの重みが最も高く、スタイルの重要性が強調されることを意味します。「!重要」はステートメントの後のセミコロン「;」の前に記述する必要があります。
サンプルコードは次のとおりです。
<スタイル>
p{色:赤!重要;}
p{色:緑;}
</スタイル>
/*重要度の設定により、次の段落のテキストが赤字で表示されます*/
<p>シャオバイは大胆な少年です。</p>
6. 要素の種類
CSS 要素は、ブロック要素、インライン要素、インライン ブロック要素など、よく使用されるいくつかのタイプに分類されます。要素の種類に応じて、ドキュメント内での表現方法は異なります。
(1) ブロック要素は標準ボックスであり、ボックスの任意のコンポーネントに設定でき、デフォルトでは 1 行を占めます。
共通ブロック要素: body、h1~h6、p、ul、ol、li、dl、dt、dd、table、form、div など。
(2) インライン要素は非標準ボックスであり、幅、高さ、縦方向内側マージン、縦方向外側マージンの設定は無効であり、隣接する要素と行を共有しています。
一般的なインライン要素: a、b、s、i、span など。
(3) インラインブロック要素は、ブロック要素とインライン要素を組み合わせたもので、ボックスの任意のコンポーネントに設定でき、隣接する要素とラインを共有します。
一般的なインライン ブロック要素: img、input、select など。
CSS では、要素タイプの変換は、display 属性を通じて実現できます。例えば：
7.書類の流れ
いわゆるドキュメント フローは、ドキュメント内の要素のデフォルトの配置を指します。通常のドキュメント フローでは、Web ページ内の要素の配置は次のようになります。
(1) ブロック要素: 上から下に配置されます。
(2) インライン要素: 左から右に配置されます。
3.3 CSS セレクター
CSS では、セレクターはパターン、つまり要素のスタイルを選択するために使用されるパターンです。
CSS では、HTML 要素のスタイルを個別に設定できます。たとえば、<p> 要素を赤に設定し、<h1> 要素を緑に設定します。CSS セレクタで要素を選択してフィルタリングし、さまざまなスタイルを設定できます。
CSS のセレクターはセレクターの機能に応じて多くのカテゴリ (40 以上) に分類されますが、一般的に使用されるいくつかのセレクターのみを以下に紹介します。
1. セレクターの種類
(1) 要素セレクターは通常 HTML 要素ですが、W3C 標準では要素セレクターはタイプ セレクターとも呼ばれます。例えば：
<style type="text/css">
/*次のスタイルを適用するには、h2 要素を選択します*/
h2 {色:赤; フォントスタイル:イタリック;}
/*次のスタイルを適用するには img 要素を選択します*/
img {幅:200px;}
</スタイル>
（2）类选择器，语法格式为".类选择器名"，以一个点号来标明类选择器。类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。为了将类选择器的样式与元素关联，必须将class指定为一个适当的类选择器名。同一个页面多个元素可以使用相同的类选择器名。例如：
.myfont {color:red; font-style:italic;}
因此，多个不同元素的class属性均可取值为“myfont”来使用该样式。
（3）ID选择器，允许以一种独立于文档元素的方式来指定样式。通过设置ID属性，然后根据其属性值来应用样式，语法格式为"#id"，以一个#号来标明ID选择器。例如：
#identifier {color:blue;}
但是，同一个页面不能出现相同的ID名，因为网页中元素的ID值是唯一的。因此，使用ID选择器只能为网页中的某一个元素设置样式。
（4）后代选择器，又称包含选择器，根据元素之间的嵌套关系选择元素，语法格式为：
"parents descendant"
注意，祖先元素和后代元素之间用空格分隔。例如,嵌套在p元素内的img元素（不一定是子元素）的宽度是120px可设置为：
p img {width:120px;}
（5）子选择器，根据元素之间的嵌套关系选择元素，但是只包含子元素，语法格式为：
"parent>child"
例如：
p>img {width:120px;}
只对p的子元素img有效，对p的孙子以下的后代元素无效。
（6）交集选择器，将多个选择器联合使用，取交集，语法格式为：
"p.special"
例如：
p.special {color:green;}
これは、クラス セレクター ".special" に要素セレクター制限を追加するのと同じです。これで定義されたスタイル ルールは、class="special" を持つ p 要素にのみ適用でき、その他の場合には無効です。
(7) 共用体セレクター、つまりセレクターのグループ化では、複数のセレクターをカンマで区切って組み合わせて使用し、共用体をとります。構文形式は次のとおりです。
「h2、h3、p」
例えば：
p,h2,h3 {カラー:ピンク;フォントサイズ:16px;}
これは、p、h2、h3 にそれぞれ {color:pink;font-size:16px;} を設定するのと同じです。
(8) ユニバーサル セレクター。すべての要素を表すには「*」を使用します。例えば：
* {
パディング:0;
マージン:0;
}
設定したスタイルは、Web ページのすべての要素に適用されます。
(9) 匿名セレクターは、ラベル スタイル属性を通じて CSS スタイルを直接導入します。これは、前に学習したインライン スタイルです。例えば：
<p style="color: red; font-style: italic;">
2. セレクターの優先順位
「セレクターの種類」セクションでは、一般的に使用される 9 つのセレクターが紹介されています。では、同じ宣言を持つ複数のセレクターを同じ要素に適用するとどうなるでしょうか? たとえば、最初にスタイルを次のように定義します。
p {色:黄色;}
.special {カラー:ブルー;}
次に、HTML 要素を次のように記述します。
<p>一生懸命働けば、鉄の乳棒をすりつぶして針にすることができます。</p>
<p class="special">ゆっくりと落ちていく紅葉は憧れのよう！</p>
ブラウザを通して見ると、2 番目の p 要素のコンテンツの色が青であることがわかります。これは、セレクターの優先順位の結果です。
CSS の優先順位は、CSS スタイルがブラウザーで異なる重みで解析されることを意味します。それは以下のような状況に分かれます。
(1) 通常、異なるセレクターには異なる優先順位の重みが与えられます。インライン スタイル (匿名セレクター) の重みが最も高く、1000 に設定されます。ID セレクターの重みは 100 に設定されます。クラス セレクターの重みは 10 に設定されます。HTML タグ セレクターの重みは に設定されます。 1、CSS選択 コントローラーの優先順位は下図のとおりです。
(2) 同一要素に外部スタイル、内部スタイル、インラインスタイルを同時に適用する場合は、複数のスタイルを使用した場合となります。一般に、複数のスタイルがある (つまり、<link> が <style> の前にある) 場合、スタイルの優先順位は次の図に示すようになります。
<link> によって導入された外部スタイルが <style> によって宣言されたスタイルの後に出現する場合、外部スタイルは <style> の後に定義されたものと同等になり、その優先順位は内部スタイルの優先順位よりも高くなることに注意してください。 。したがって、内部スタイルと外部スタイルの優先順位は、Web ページ ファイル内での出現順序によって決まりますので、テストの際はブラウザのキャッシュのクリアに注意してください。
(3) ! important を設定すると、スタイルの優先順位を高めることができます。次に例を示します。
p {
色: 赤!重要;
}
(4) 上記 3 つの状況が同時に発生した場合の優先順位は次のとおりです。
!重要 > 匿名セレクター(インライン スタイル) > ID セレクター > クラス セレクター > 要素 (ラベル) セレクター > ユニバーサル セレクター (*) >継承されたスタイル
この場合、優先順位が同じ場合はどうすればよいでしょうか？
CSS の優先順位が同じ場合、書き込み順序が最終的な実行結果に影響し、後のスタイルが以前に繰り返されたスタイルをオーバーライドします。変数への繰り返し代入により最終結果を理解しやすくする他のプログラミング言語と比較できます。例えば：
p {カラー:レッド;フォントサイズ:20px}
P {色:緑;}
上記のスタイルが適用された段落テキストは、最終的にサイズ 20 ピクセルの緑色のフォントになります。
最後に、各ケースの優先順位ルールを次のように要約します。
(1) 重みが大きいほど優先度が高くなります。
(2) 重みが等しい場合、後で表示されるスタイル シート設定の方が、先に表示されるスタイル シート設定よりも優れています。
(3) 作成者のルールは閲覧者のルールよりも高くなります。つまり、Web ページ作成者によって設定された CSS スタイルの優先順位が、ブラウザによって設定されたデフォルトのスタイルよりも高くなります。
(4) 継承された CSS スタイルの重みが、後で指定された CSS スタイルよりも小さい。
(5) 同じグループのプロパティ設定内で「!重要」とマークされたルールが最も高い優先度を持ちます。
3.5 CSS の共通プロパティ
1. フォントのプロパティ
テキストのフォント、フォント サイズ、スタイル、行間を設定することで、Web ページのコンテンツの読みやすさを向上させ、重要なコンテンツを強調表示できます。
(1) フォントサイズを設定する(font-size)
下図では、フォントサイズをそれぞれpx、%、emで設定しています。%、emを単位とした場合、親要素のフォントサイズが基準となります。例えば、親要素のフォントサイズの場合、要素が 16px の場合、62.5% は 10px に相当し、1em は 16px に相当します。
例えば：
注: すべてのブラウザのデフォルトのフォント サイズは 16 ピクセルです。
(2) 太字（フォントの太さ）を設定する
font-weight プロパティを通じてテキストの太さを設定します。値の詳細は以下で説明します。
font-weight の値は、標準文字を定義し、太字ではない Normal です。Normal がデフォルト値です。
font-weight の値は太字であり、テキストは太字に設定されます。また、値をbolderにすると太いフォントを設定したり、値をlighterにすると細いフォントを設定したり、値inheritをとって親要素から継承したフォントの太さを指定したりすることもできます。
font-weight の値は 700 で、その値はテキストを太字に設定するために使用されます。値は 100 ～ 900 の範囲で取ることができ、増分は 100 です。400 は標準、700 は太字に相当します。
例は次のとおりです。
(3) スタイル(font-style)を設定します。
font-style の値はnormal (デフォルト値) で、標準のフォント スタイルが表示されます。
font-style の値は italic であり、斜体のフォント スタイルが表示されます。
font-style の値は oblique であり、斜体のフォント スタイルも表示されます。これは斜体の効果と大きく変わりません。
font-style の値は、inherit であり、フォント スタイルが親要素から継承されることを規定しています。
例えば：
(4) フォント(font-family)を設定する
要素に複数のフォントを同時に指定でき、カンマを使用して異なるフォントを区切ることができます。フォント名が漢字であるか、複数の単語で構成されている場合は、フォント名を引用符で囲む必要があります。
font-family 属性でフォントを設定すると、ブラウザはシステムによってユーザーのデバイスにインストールされたフォントを読み取ります。複数のフォントを指定した場合、ブラウザは下図のように前から後ろの順にフォントを検索して設定します。ユーザーのコンピュータに「Microsoft Yahei」フォントがインストールされていない場合は、次のフォントを検索して使用します。使用可能なフォントが見つかるまで、arial フォントなどを続けます。設定されたフォントが使用できない場合は、ブラウザのデフォルトのフォントが使用されます。
フォント設定の例は次のとおりです。
(5) 行間(line-height)を設定します。
line-height (行間隔または行の高さ) と font-size の差を半分に分割し、テキスト行コンテンツの上部と下部にそれぞれ追加します。これらのコンテンツを含めることができる最小のボックスはライン ボックスであり、line-height プロパティの設定はライン ボックスのレイアウトに影響します。
例えば：
2. テキスト
テキストは Web ページの中核となるコンテンツの 1 つであり、通常、レイアウトの美しさを際立たせるためにテキストの配置や装飾などの問題が伴います。
(1) 文字の配置
テキストの配置を設定する text-align プロパティを使用すると、テキストの左揃え、右揃え、中央揃え、両端揃えなどを設定できます。例えば：
(2) 文章の修正
装飾されたテキストは text-decoration 属性を使用して設定されます。これにより、下線、取り消し線など、テキストに特定の装飾効果を設定できます。子孫要素に独自の装飾がない場合は、祖先要素の設定を継承します。
例えば：
3. 位置決め
座標を配置することによって、要素に対する相対的な要素の位置を設定します。CSS には、静的配置、相対配置、絶対配置、固定配置の 4 つの配置方法があります。CSS は、position プロパティを使用して位置決め方法を設定します。要素の位置は、「left」、「top」、「right」、「bottom」プロパティによって指定されます。
(1) すべての要素のデフォルトの配置方法である静的配置 (static) は、通常のドキュメント フローにあります。なお、静的位置決めモードでは要素位置座標を設定しても意味がありません。
例えば：
(2) 相対配置 (relative) では、Web ページ内の要素自体の元の位置を基準にして配置されますが、ドキュメント フローから逸脱することはありません。
例えば：
(3) 絶対配置 (absolute)、絶対配置要素を生成し、静的配置以外の最初の親要素を基準にして配置すると、ドキュメント フローから切り離されます (絶対配置を設定した後、その元のスペースは現在のスペースに属さなくなります)。エレメント）。
例えば：
（4）固定定位（fixed），也生成绝对定位的元素，相对于浏览器窗口进行定位，也会脱离文档流。
例如：
4、链接（伪类）
在使用超链接时，会发现这些链接上的文本与普通文本在表现方式上有许多不同，如链接上的文字会出现下划线，颜色与鼠标形状也会改变等。
超链接（<a>）是Web系统中一个很常用的重要标签，它有4种状态：未访问、已访问、悬停时以及点击时，可根据链接处于不同的状态设置不同的样式。
通过如下方式获取链接所处的状态：
a:link 未被访问
a:visited 已被访问
a:hover 悬停时
a:active 点击时
如果同时定义4种状态的样式，其书写顺序需要按：
link--visited--hover--active
（即LoVeHAte原则）进行设置，否则可能会失效。
例如：
5、列表
设置列表属性主要用于控制列表显示的样式，可以通过list-style的几个子属性从列表项标记的类型、位置、图片等几个方面进行设置。
（1）设置列表标志类型，使用list-style-type属性进行设置，该属性可取值none(无标记)、disc(默认，实心圆)、circle(空心圆)、square(空心方块)等。
例如：
（2）设置标志类型为图片，使用list-style-image属性进行设置，用用户指定图像来做列表项的标记。
例如：
（3）设置标志位置，使用list-style-position属性进行设置，该属性可取值inside、outside(默认)，区别在于标记与列表项文本内容左边的间距不一样。
例如：
（4）list-style是一个复合列表属性，涵盖了所有其他列表样式属性。可以将上述3个子属性按顺序用一个list-style复合属性来书写。
如下例所示：
6、背景
可以使用不同颜色、图片等作为元素的背景，在使用图片作背景时，还涉及到平铺、位置、滚动等方面的设置。
（1）设置背景色使用background-color属性，该属性的取值可以是表示颜色的关键字、16进制颜色值或者RGB颜色值。
例如：
（2）设置背景图片使用background-image属性，该属性的取值可以通过url(图片文件位置)的方式给出。
例如：
（3）设置背景图片位置使用background-position属性，该属性的值由两个参数组成，第1个参数表示水平，第2个参数表示垂直。
例如：
（4）设置背景平铺使用background-repeat属性，该属性的可能取值有no-repeat、repeat-x、repeat-y等。
例如：
（5）背景图是否随内容滚动使用background-attachment属性进行设置，该属性的可能取值有scroll、fixed等。
例如：
7、透明度
元素透明度在元素层叠时体现得特别明显，即表示从上层元素可以隐约看到背景的清晰程度。设置元素透明度使用opacity（不透明度）属性，该属性取值范围为0~1之间的值，0表示完全透明，值越大越不透明。透明度的设置可以使元素产生一定程度的立体感。
例如：
8、溢出
元素的嵌套产生了父子关系，外层的元素称为父盒子，内层的元素称为子盒子，当子盒子大小或纯文本内容大于父盒子时便会产生溢出。
通过overflow属性可以对溢出进行处理，该属性取值hidden时，元素内容被修剪，溢出部分不可见；该属性取值scroll时，元素内容被修剪，浏览器显示滚动条供用户来浏览溢出部分；该属性取值auto时，如果元素内容被修剪，浏览器显示滚动条以便查看其余内容。
例如：
9、层级
当多个元素设置了互相重叠的定位坐标时可能会发生相互覆盖的情况，通过设置z-index可以调整其层级顺序。以浏览器所在平面为参考平面（即z-index=0），z轴垂直向外指向浏览者方向的值为正值，反之为负值。通过设置层级也可以生成一定程度的立体效果。
例如：
10、浮动
通过浮动可以使元素脱离文档流，改变元素默认的排布方式，进而可以灵活的控制网页的布局。通过float属性设置元素的浮动。
(1) float の値が left の場合、要素は左にフロート、つまり要素が左に傾くように設定されます。
例えば：
(2) float の値が右の場合、要素は右にフロート、つまり要素が右に傾くように設定されます。
例えば：
フロート:右;
11.クリアフローティング
フロートクリアとはフロートによる影響をなくすことです。clear 属性を使用して、要素のどの側でフローティング要素を許可しないかを定義します。要素の clear 属性の値が left の場合、要素の左側で浮動要素は許可されません。要素の clear 属性の値が right の場合、要素の右側で浮動要素は許可されません。要素の clear の場合、浮動要素は要素の左側で許可されません。属性は両方の値を取ります。 の場合、要素の左側と右側で浮動要素は許可されません。要素の Clear 属性の値が none (デフォルト値) の場合、要素の両側で浮動要素が許可されます。
例えば：
3.6 ボックスモデル
1.ボックスモデルの基本コンセプト
CSS では、要素の CSS プロパティを簡単に設定し、対応するレイアウトを実現するために、ブラウザの主なタスクは要素のサイズを決定することです。
CSS の基本的な概念はボックス モデルであり、HTML ページ内の要素を長方形の領域、つまり要素のボックスとみなす、いわゆるボックス モデルです。
以下の図に示すように、要素ボックスは、margin (外側の余白)、border (境界線)、padding (内側の余白)、content (コンテンツ領域) の 4 つの部分で構成されます。
これら 4 つの部分に対応する CSS プロパティは次のとおりです。
(1) コンテンツ領域。つまり、要素のコンテンツを実際に含む領域。幅属性と高さ属性によって設定されます。
(2) 内側のマージン、つまりパディングプロパティで設定されるコンテンツと境界線の間の空白領域と、4 方向の内側のマージンを個別に設定できます。
(3) border は、border 属性で設定される要素の境界線を指し、それぞれ 4 方向の境界線を設定できます。
(4) 外マージン、つまりマージン属性で設定される隣り合うボックス間の空白領域と、4方向の外マージンを個別に設定することもできます。
標準ボックス モデル (つまり、box-sizing の値が border-content である) では、ボックスの実際のサイズの計算式は次のとおりです。
ボックスの実際のサイズ = コンテンツ + パディング + 境界線 + マージン
在CSS3中，如果box-sizing取值为border-box时，整个盒子实际大小就是所设置的宽和高，那么内容的宽度=width - (padding-left + padding-right) - (border-left + border-right)，内容的高度=height - (padding-top + padding-bottom) - (border-top + boder-bottom)。
除此之外还有IE盒模型，但只会出现在IE6和IE怪异模式下。
2、多盒子边距合并问题
网页是由多个元素构成的盒子排列而成的。而多个盒子之间会出现外边距合并的现象，具体如下：
（1）上下相邻的块元素垂直外边距合并，如果上面的元素有下外边距，下面的元素有上外边距，则垂直边距为两者中的较大者。如下图所示。
（2）嵌套块级元素的垂直外边距合并，父元素没有上内边距和边框，则父元素与子元素的上外边距合并为较大者。
4.1 JavaScript初识
1、JavaScript概念
JavaScript是一种基于对象(Object-based)和事件驱动(Event Driven)并具有安全性能的脚本语言。所谓脚本语言，就是可以和HTML语言混在一起使用的语言。JavaScript实现了一种实时的、动态的、可交互的表达能力,能够对网页的行为进行编程。
例如，打开页面的同时弹出对话框的案例代码如下（demo1.html）：
<html>
<head>
<title>第一个JavaScript例子</title>
<Script Language="JavaScript">
<!-- //弹出一个提示框
alert(“欢迎进入JavaScript神奇世界！”);
-->
</Script>
</head>
</html>
大家可以在浏览器中运行上述文件,查看结果。
2 、JavaScript特点及功能
其特点有：
（1）动态性：直接对用户输入做出响应，采用事件驱动方式进行。
（2）跨平台性：只与浏览器有关，与操作环境无关。
（3）简单性：解释性脚本语言，基本结构与开发过程简单。
其功能有：
（1）实现网页特效。包含广告代码、导航菜单代码、日历控件、飘浮特效、文字特效、色彩特效及图片特效等。
（2）实现表单数据前端校验。比如，通过JS正则表达式验证表单中某数据域的数据类型或应满足的规则等。
（3）窗口动态操作。比如实现弹出窗口、元素的移动、窗口数据传递等。
3、JavaScript代码嵌入
与网页中嵌入CSS样式进行类比，JavaScript代码嵌入网页的方法也有3种。
（1）标签级嵌入方式，即在HTML标记属性值中直接写入JavaScript代码。
例如，测试JavaScript对按钮事件的反应，在网页中写入如下代码：
<button type="button" οnclick="alert('欢迎!')"> 点我!
</button>
在浏览器运行网页，并点击按钮，就会弹出带“欢迎！”信息的提示框。
（2）页面级嵌入方式，即把JavaScript代码嵌入到<script>…</script>标签间。通常JavaScript代码以函数形式写在这对标签间，以方便开发者在该网页中需要的地方调用。
比如要在控制台输出“HelloWord”，在网页中写入如下代码：
<script>
function hello(){ console.log("Hello World"); }
hello();
</script>
在浏览器运行网页，切换到控制台，可观察到"HelloWord"的输出字样。
（3）外链式：项目级引入方式，即通过<script language="javascript" src="xxx.js">方式载入外部JavaScript文件。
例如，把页面级方式中的函数部分
function hello() { console.log(“Hello World”); }
写在一个名叫“hello.js”的外部文件中，然后在需要使用该函数的任意网页头部通过
<script language=“javascript” src=“hello.js”>
引入js脚本，然后在网页中通过以下代码进行调用。例如：
<script>
hello();
</script>
在浏览器运行网页，切换到控制台，也能看到"HelloWord"的输出字样。
4.2 JavaScript基本语法
1、数据类型
JavaScript中有5种基本数据类型。
2、常量
在程序设计语言中具有确定值、可直接引用的量，称作常量。常量可分类为：整型常量；浮点型常量；布尔型常量；字符型常量；空值；特殊字符。
例如：
<html>
<head>
<title>字符串的使用</title>
<script language="JavaScript">
<!--
document.write('彼はこう言いました:「JavaScript はとても興味深いです!」 '+' は本当です。');
-->
</script>
</head>
</html>
3. 変数
プログラミング言語では、値を変更でき、最初に宣言してから参照する必要がある名前付き量を変数と呼びます。以下では、名前、型、宣言の 3 つの側面から変数を紹介します。
(1) 変数の命名規則
◆ 変数名は文字、アンダースコア (_) またはドル記号 ($) で始まり、その後に数字 0 ～ 9、文字 A ～ Z または a ～ z、アンダースコア (_) またはドル記号 ($) が続きます。
◆ JavaScript のキーワードや予約語を変数名として使用しないでください。JavaScript には 50 を超えるキーワードまたは予約語が定義されていますが、これらは JavaScript の内部で使用され、変数名としては使用できません。var、int、double、true などは変数名として使用できません。
◆ JavaScript 変数名では大文字と小文字が区別されます。例: str と Str は、それぞれ 2 つの異なる変数を表します。
◆ JavaScript 変数名は、それが表す意味を説明できる必要があります。たとえば、str1 と str2 を使用して 2 つの文字列変数を定義でき、sum を使用して変数を合計できます。
(2) 変数型
◆ 整数変数、例: x=15
◆ 実数変数、例: y=22.5
◆ 文字変数 (例: str="JavaScript")
◆ ブール変数 (例: z=false)
(3) 変数宣言
JavaScript 変数を使用する前に、キーワード -var を使用して変数を宣言する必要があります。これは、最初に説明してから使用するという原則に従います。
例: var sum;
説明: 変数が説明なしで直接使用される場合がありますが、エラーは発生しません。なぜ？
ヒント: ブラウザは JavaScript を解析するときにグローバル変数として解釈します。
4. 演算子と式
(1) 式
式とは、1 つまたは複数のデータをさまざまな演算記号を使用して結合し、新しい値を生成する式です。
たとえば、2+2(=4)、2*2(=4)、2+10/2(=7)、4<5(=true)などです。
式は演算子に基づいています。
(2) オペレーター
1) 算術演算子
| オペレーター |
機能説明 |
タイプ |
| + |
追加 |
二項演算子 |
| - |
減らす |
二項演算子 |
| * |
取った |
二項演算子 |
| / |
削除 |
二項演算子 |
| % |
モジュロ (剰余) |
二項演算子 |
| ++ |
1ずつ増加 |
単項演算子 |
| -- |
1を引く |
単項演算子 |
| - |
取反 |
単項演算子 |
自己インクリメント操作と自己デクリメント操作の例:
初期値式 計算値 説明
x=3 ++x+2 6 x 最初に 1 を加算し、次に加算します
x=3 --x+2 4 x まず 1 を引いてから加算します。
x=3 xx++2 5 足し算 まず x に 1 を足します。
x=3 x--+2 5 最初に加算し、次に x から 1 を減算します。
2) 比較演算子
| オペレーター |
機能説明 |
| > |
以上 |
| < |
未満 |
| >= |
以上 |
| <= |
以下 |
| == |
同等 |
| != |
等しくない |
比較演算子の例:
変数番号1=25;
変数番号2=5;
document.write("数値1>数値2=");
document.write(数値1>数値2);
document.write("<br>");
document.write("number1!=number2=");
document.write(number1!=number2);
上記のコードを自分で実行して、結果を観察してください。
3) 論理演算子
| オペレーター |
機能説明 |
タイプ |
| && (論理積) |
A と B は両方とも true、A&&B は true |
二項演算子 |
| || (論理和) |
A と B は両方とも false、A||B は false |
二項演算子 |
| ！(論理否定) |
trueでない場合はfalse、falseの場合はtrue |
単項演算子 |
論理演算子の例:
s1=真;
s2=偽;
document.write("s1&&s2=");
document.write(s1&&s2);
document.write("<br>");
document.write("s1||s2=");
document.write(s1||s2);
document.write("<br>");
document.write("!s1=");
document.write(!s1);
document.write("<br>");
document.write("!(3==5)||3!=5&&s1=");
document.write(!(3==5)||3!=5&&s1);
上記のコードを自分で実行して、結果を観察してください。
4) 文字列演算子 (+)
「+」は文字列の連結演算を表します。例:
str1="私";
str2="いいね";
str3="JavaScript";
str4=" !";
document.write("str1+str2+str3+str4= ");
/* 出力: str1+str2+str3+str4= */
document.write(str1+str2+str3+str4);
/* 输出:I like JavaScript ! */
5）赋值运算符（=）
x+=y，等同于 x=x+y；
x-=y，等同于 x=x-y；
x*=y，等同于 x=x*y；
x/=y，等同于 x=x/y；
x%=y，等同于x=x%y。
例子：
x=10;
document.write("x-=10后x=");
document.write(x-=10);
最后输出：x-=10后x=0
6）条件运算符（? :）
条件运算符（？：）是三目运算符；
条件运算符的语法格式是：条件表达式？结果1：结果2。
其工作原理是：如果条件表达式的值为真，则整个表达式的值就是结果1，否则整个表达式的值就是结果2。
例如： cj=(score>=60)?"及格":"不及格";
含义：score变量中的值大于等于60，“及格”赋值给cj变量，否则“不及格”赋值给cj变量。
7）对象操作运算符
JavaScript是基于对象的编程语言，所以它包含了对象操作运算符，如new，this等。
（1）new运算符
用于定义对象实例，语法如下：
对象实例名=new 对象类型(参数);
例如：ma=new Array(3);
定义了Array类的实例对象ma。
（2）this运算符
this代表当前操作的对象，用在不同的地方，就有不同的结果。
语法格式：
this.属性
this.方法( )。
4.4 JavaScript常用对象
1、对象的概念
在 JavaScript 中，对象是拥有属性和方法的数据结构（类）的实例。属性是对象相关的值，方法是对象可以执行的动作。
JavaScript では、オブジェクトは事前定義オブジェクトとカスタム オブジェクトに分類されます。事前定義オブジェクトとは、組み込みオブジェクト、ドキュメント オブジェクト、ブラウザ オブジェクトなど、システムによって提供される定義済みの直接使用可能なオブジェクトを指します。
オブジェクトのプロパティとメソッドを呼び出す場合、最も一般的な方法は次のとおりです。
オブジェクトのプロパティ
オブジェクト.メソッド
JavaScript は、Array (配列)、String (文字列)、Math (数値計算)、Date (日付) など、一連の非常に便利な組み込みオブジェクトを提供します。
Web ページの特殊効果を実現し、Web ページのさまざまな要素を動的に制御できるようにするには、ブラウザ ウィンドウと、ウィンドウ (ウィンドウ)、ドキュメント (ドキュメント)、履歴 (履歴) などのドキュメント関連オブジェクトを理解する必要があります。 、フレーム（フレーム）、ロケーション（アドレス）、フォーム（フォーム）などのオブジェクト。
後続の章では、ウィンドウ、ドキュメント、フォーム、日付などの一般的なオブジェクトを紹介します。
オブジェクトは JavaScript でも作成できます。次の図は、オブジェクトを作成する 2 つの方法を示しています。
オブジェクト呼び出しの例は次のとおりです (観測結果は自分で実行してください)。
<html>
<頭>
<title>組み込みオブジェクト</title>
<スクリプト言語="javascript">
radius=prompt("円の半径を入力してください","ここに円の半径を入力してください");
alert("円の円周は "+2*Math.PI*radius+"、円の面積は "+Math.PI*radius*radius");
</script>
</head>
</html>
このうちプロンプトはウィンドウオブジェクトのメソッドで、ユーザーがテキストボックスに入力した値を返します。
そして、Math オブジェクトの PI 属性 (具体的には Math.PI として記述) を呼び出します。
2. イベントの利用
イベント ドリブンの使用は、JavaScript 言語の最も基本的な機能の 1 つです。いわゆるイベントとは、ページにアクセスするときにユーザーによって実行される操作を指します。一般的に使用されるイベント タイプを次の表に示します。
イベント ハンドラーを挿入 (呼び出し) するための構文は次のとおりです。 on イベント名 = "イベント ハンドラー"。
1) クリック イベント: ボタン、テキスト ボックス、ハイパーリンクなどのページ上の要素がユーザーによってクリックされると、Click イベントが生成されます。例えば：
<html>
<頭>
<title> イベントをクリック</title>
</head>
<本文>
<フォーム名=ボタン>
<input type="button" value="上一页" onClick="history.back()">
<input type="button" value="新浪网" onClick="location='http://www.sina.com.cn'">
<input type="button" value="下一页" onClick="history.forward()">
</form>
</body>
</html>
2) Dblclick イベント: ページ上のいずれかの要素がユーザーによってダブルクリックされると、Dblclick イベントが生成されます。
3) Load イベント: ページがロードされると、Load イベントが生成されます。例えば：
<html>
<頭>
<title> ロードイベント</title>
</head>
<body οnlοad=alert("Web ページがログインしました")> </body>
</html>
4) Unload イベント: ウィンドウ内のドキュメントが終了すると、Unload イベントが生成されます。
5) MouseOver イベント: ユーザーがマウスをハイパーリンクまたは他の Web ページ要素に移動すると、MouseOver イベントが生成されます。
6) MouseOut イベント: このイベントには MouseOver イベントが伴い、ユーザーがマウスをハイパーリンクまたはその他の Web ページ要素から遠ざけると、MouseOut イベントが生成されます。
<html>
<頭>
<title> MouseOver イベントと MouseOut イベント</title>
<スクリプト言語="javascript">
関数 show() {
window.status="マウスを左に置いた"
}
</script>
</head>
<本文>
<a href="#" onMouseOver=alert("マウスがテキストの上にありますか?") onMouseOut=show()>懐華大学</a>
</body>
</html>
7) Focus イベント: テキストエリアでフォーカスすると、Focus イベントが生成されます。
8) Blur イベント: テキスト領域でフォーカスが失われると、Blur イベントが生成されます。
例えば：
<html>
<頭>
<title> フォーカス イベントとブラー イベント</title>
</head>
<本文>
<フォーム>
<input type=text value="" onFocus=alert("可以开始输入文字") onBlur=confirm("请确认输入完毕？")
</form>
</body>
</html>
9）Submit事件：当用户单击表单中的提交按钮，准备向服务器提交信息，就会一个Submit事件。例如：
<html>
<head>
<title>submit事件</title>
<script language="javascript">
function show() {
data=document.form1.text1.value
if (0<data && data<150)
return(true)
else
alert("你输入的数值"+data+"超出了范围")
}
</script>
</head>
<body>
<form name="form1" onSubmit="show()">
<input type="text" name="text1" value=""><br>
<input type="submit" value="提交">
</form>
</body>
</html>
10) リセット イベント: ユーザーがフォーム内のリセット ボタンをクリックすると、リセット イベントが生成されます。
3. 共通オブジェクト
1) ウィンドウオブジェクト
このオブジェクトは現在のブラウザ ウィンドウを表す window オブジェクトであり、特別な場所にあるため、他のすべてのブラウザ オブジェクトの親になります。
開いている各ブラウザ ウィンドウは、JavaScript プログラムのウィンドウ オブジェクトに対応します。
ウィンドウ オブジェクトのプロパティは次のとおりです。
status: 現在のブラウザのステータス行情報を示します。
History: 現在のウィンドウの履歴を示します。
Closed: 現在のウィンドウが閉じているかどうかを示す論理値。
location: 現在のウィンドウに表示されている現在の URL の情報を示します。
self: 現在のウィンドウを示します。
Window オブジェクトのメソッドは次のとおりです。
開く(URL、ウィンドウ名、ウィンドウの機能): 新しいウィンドウを開きます。
Close(): ブラウザウィンドウを閉じます。
アラート(メッセージ): アラート ダイアログ ボックスをポップアップ表示します。
プロンプト(メッセージ、デフォルトメッセージ): プロンプトダイアログボックスが表示されます。
verify(message): 確認ダイアログボックスをポップアップ表示します。
setTimeout(expression, time): 一定時間を設定した後、expression で表されるコードが自動的に 1 回実行され、時間をミリ秒単位で設定するために time が使用されます。
setInterval(expression,time,[args]):expression で表されるコードが定期的に実行されるように時間間隔を設定します。time を使用して時間をミリ秒単位で設定します。
窓ケースの開閉は次のとおりです。
<html>
<頭>
<title>ウィンドウの開閉方法</title>
<スクリプト言語="javascript">
関数オープンウィンドウ() {
window.open("http://www.sina.com.cn","window","width=300, "+ " height=200,status=no,menubar=no");
}
</script>
</head>
<body οnlοad=openwindow()>
<フォーム>
<input type="button" value="ウィンドウを閉じる" οnclick=window.close()>
</form>
</body>
</html>
2) ウィンドウプロンプトダイアログボックス
プロンプト() メソッドは、アラート() メソッドや確認() メソッドのような情報を表示するだけでなく、ユーザーにキーボードから独自の情報を入力するよう求めるテキスト ボックスも提供します。また、「OK」と「」も含まれます。キャンセル」ボタン。
基本的な構文形式は次のとおりです。 プロンプト("プロンプト情報 1","プロンプト情報 2");
プロンプト ダイアログ ボックスの例は次のとおりです。
<html>
<頭>
<title>プロンプトダイアログの使用</title>
<スクリプト言語="javascript">
趣味、年齢でした。
Hobby=prompt("一番やりたいことは何ですか?");
アラート(趣味);
age=prompt("あなたは何歳ですか?","ここに年齢を入力してください");
アラート(年齢);
</script>
</head>
</html>
3) ドキュメントオブジェクト
ドキュメント オブジェクトはブラウザ オブジェクトであり、ブラウザ ウィンドウ内のドキュメントを表し、ドキュメントに含まれるさまざまな画像やハイパーリンクなどの HTML 要素を処理したりアクセスしたりするために使用できます。
write() メソッドは、ドキュメント オブジェクトの最も一般的に使用されるメソッドです。
ドキュメント オブジェクトのプロパティは次のとおりです。
title: ドキュメントのタイトルを示します。
bgColor: ドキュメントの背景色を示します。
fgColor: ドキュメントの前景色を示します。
alinkColor: クリックされたときのハイパーリンクの色を示します。
linkColor: 未訪問のハイパーリンクの色を示します。
vlinkColor: アクセスしたハイパーリンクの色を示します。
URL: 文書のアドレスを示します。
lastModified: ドキュメントの最終変更時刻を示します。
ドキュメント オブジェクトの使用例は次のとおりです。
<html>
<頭>
<title>ドキュメント オブジェクトの使用</title>
<スクリプト言語="javascript">
document.write("現在のドキュメントのタイトル: "+document.title +"<br>");
document.write("現在のドキュメントの最終変更日: "+
document.lastModified);
</script>
</head>
<ボディ></ボディ>
</html>
4) 日付オブジェクト
Date オブジェクトは組み込みオブジェクトであり、日付と時刻を取得および設定するためのプロパティとメソッドをユーザーに提供し、Web ページ作成者が日付と時刻を制御するのに役立ちます。
Date オブジェクトを使用するには、new 演算子、つまり変数名 = new Date () という特定の構文形式を使用する必要があります。
Date オブジェクトのメソッドは次のとおりです。
getDate(): 現在の日付を返します。
getDay(): 現在の日付の週 (日) 番号を返します。
getMonth(): 現在の日付の月 (0 ～ 11) を返します。
get Year(): 現在の日付の年を返します。
getFullyear(): 通年を返します。
getMinutes(): 現在時刻の分の部分の整数を返します。
getSeconds(): 現在時刻の秒を返します。
getHours(): 現在時刻の時間部分の整数を返します。
getTime(): 現在時刻をミリ秒単位で返します。
Date オブジェクトの使用例は次のとおりです。
<html>
<頭>
<スクリプト言語=JavaScript>
今日=新しい日付();
year=today.getFull Year();
month=today.getMonth()+1;
day=today.getDate();
theweek=today.getDay();
スイッチ(週) {
ケース 0:week="日曜日";休憩;
ケース 1:week="月曜日";休憩;
ケース 2:week="火曜日";休憩;
ケース 3:week="水曜日";休憩;
case 4:week="星期四";break;
case 5:week="星期五";break;
case 6:week="星期六";break; }
document.write("<h3>"+"今天是"+year+"年"+month+"月"+day+"日"+week+"</h3>")
</script>
</head>
</html>
5）Form对象
Form对象就是表单对象，是通过浏览器和用户交互的重要工具，在表单对象中我们可以加入按钮、文本框、列表等控件，用户通过这些控件就可以提出他们的要求。
表单访问的两种方式：通过 “document.表单名”来访问表单；通过数组form[#]访问表单。
Form对象的属性有：
name:表单的名称。
length:表单内元素的个数。
action:表单在递交时执行的动作，通常是一个服务器端脚本程序的URL。
elements:表示表单中所有控件元素的数组，数组的下标就是控件元素在HTML源文件中的序号。
method:发送表单的HTTP方法。
Form对象的方法有：
reset()：相当于表单中的“重置”按钮。
Submit()：相当于表单中的“提交”按钮。
Form对象的访问案例如下：
<html>
<head>
<script language=JavaScript>
function clear1(form) {
form.text1.value="" ;
form.text2.value="" ;
}
</script>
</head>
<body>
<form method=post >
<input type="text" name="text1"><br>
<input type="text" name="text2"><br>
<input type="button" value="清除文字" οnclick="clear1(this.form)">
</body>
</html>
5.1 响应式Web设计基础
1、响应式Web简介
除使用传统大屏PC外，现在越来越多的人使用小屏幕移动设备上网。传统网页设计是针对大屏的PC机而开发，基本上都是固定页面大小的，它不适合在小屏幕设备上浏览。如果为不同屏幕大小的设备都单独设计网页系统，显然成本非常大。这时，人们希望有某种设计技术，一次性设计网页就处处自适应地正常使用。因此，响应式Web设计（Responsive Web Design）技术应运而生。响应式Web设计是由Ethan Marcotte在2010年提出的，他将媒体查询、栅格布局和弹性图片合并称为响应式Web设计。
响应式Web设计是和HTML5+CSS3互相配合与支持的，技术点包括：
（1）HTML5+CSS3：HTML5+CSS3为基本网页设计增添了新的标签与属性内容。
(2) HTML5 ビューポート (viewport): ビューポートを構成するための属性を提供します。モバイル ブラウザには 2 種類のビューポートがあります。1 つは可視ビューポート (デバイス サイズと呼ばれるもの)、もう 1 つはウィンドウ ビューポート (Web ページの幅) です。
(3) CSS3 メディア クエリ: メディア タイプ、特性 (画面幅、ピクセル比など) を識別します。
(4) フローレイアウト：ブラウザの幅や画面サイズに応じて効果を自動調整できます。
(5) 応答性の高いグリッド システム: メディア クエリを利用して、さまざまな画面サイズに応じてレイアウトを調整します。
(6) ストリーミング画像: ストリーミング レイアウトに応じて拡大縮小します。
2. HTML5の新機能
HTML5 は HTML 仕様の最新バージョンであるだけでなく、一連の Web デザイン技術の総称でもあります。最も重要な 3 つの技術は、HTML5 コア仕様、CSS3 (Cascading Style Sheet、Cascading Style Sheet の最新バージョン) です。および JavaScript (Web ページの動的な機能を強化するために使用されるスクリプト言語)、これら 3 つのテクノロジは後の研究に関与します。「HTML の基本」セクションで説明したように、HTML の歴史は古くまで遡ります。ここでは、HTML5 によってもたらされる新しい感覚に焦点を当てます。
(1) HTML5 は HTML の破壊版ではなく、進化版です。ブラウザを使用して URL: W3C HTML5 ロゴを開くと、この Web サイトに HTML5 の 8 つの革新が表示されます。
1) セマンティクス: 豊富なセマンティクス タグを提供します。
2) オフラインとストレージ (オフラインとストレージ): HTML5 App Cache、LocalStorage、IndexedDB、および File API により、Web アプリケーションが高速になり、オフラインで使用できる機能が提供されます。
3) デバイス アクセス: デバイス認識の強化により、Web アプリケーションをコンピュータ、パッド、携帯電話で使用できるようになります。
4) コミュニケーション (接続性): コミュニケーション能力の強化は、リアルタイム チャット プログラムの強化とスムーズなオンライン ゲームを意味します。
5) マルチメディア (Multimedia): オーディオおよびビデオ機能の強化は、HTML5 の最大の進歩です。
6) グラフィックスと特殊効果 (3D、グラフィックスとエフェクト): Canvas、SVG、WebGL およびその他の機能により、グラフィックスのレンダリングがより効率的になり、ページ効果がよりクールになります。
7) パフォーマンスと統合: WebWorker を使用すると、ブラウザーはユーザー インターフェイスのレンダリングをブロックすることなく、バックグラウンド タスクをマルチスレッドで実行できます。同時に、パフォーマンス テスト ツールはプログラムのパフォーマンスを評価するのに便利です。
8) レンダリング (CSS3): CSS3 は、ページのセマンティクスやパフォーマンスに影響を与えることなく、ページの特殊効果を効率的に実装できます。
(2)複雑な内容を簡略化する。「シンプルファースト、可能な限り単純化」の原則に基づいて、HTML5 では次のような改善が行われています。
1) DOCTYPE と文字セットの宣言を簡素化します。
2) HTML5 API を強化してページのデザインを容易にします。
3) 複雑な JavaScript コードをブラウザのネイティブ機能に置き換えます。
4) 正確に定義されたエラー回復メカニズム。ページにエラーがあっても、ページ全体の表示には影響しません。
(3)ユーザーエクスペリエンスは良好です。HTML5 仕様は「顧客第一」を目的としています。さらに、HTML5 では、HTML5 の十分な安全性を確保するための新しいセキュリティ モデルも導入されています。主要なブラウザによる HTML5 のサポートは常に改善されており、現在、Chrome が HTML5 を最もよくサポートしており、Firefox、Opera、Safari、IE10 も HTML5 を適切にサポートしています。
3. HTML5の基本構文
HTML ドキュメントはさまざまなタグで構成されており、標準の HTML5 テンプレートは次のとおりです。
<!DOCTYPE html> <!-- ドキュメントの先頭にあり、現在のドキュメントで使用されている HTML バージョンをブラウザに説明するために使用され、省略できません。-->
<html lang="en"> <!-- lang 属性は要素コンテンツの言語を指定します。-->
<head> <!-- HTML ドキュメントには 1 対の <head> タグのみを含めることができ、これらの部分のほとんどは実際にはコンテンツとしてページに表示されません。これは主に、<title>、<meta>、<link> など、文書の先頭にある他のタグをカプセル化して、文書のタイトル、作成者、および他の文書との関係を記述するために使用されます。-->
<meta charset="UTF-8">
<title>ドキュメント</title>
</head>
<body> <!-- HTML ドキュメントに表示されるコンテンツを定義するために使用されます。HTML ドキュメントには、<body> タグのペアを 1 つだけ含めることができます。-->
<!-- これはコメントです --> <!-- このタグの内容はコードの説明に使用され、ブラウザには表示されません。-->
</body>
</html>
4. HTML5 セマンティックタグ
従来の Web デザインと比較して、HTML5 の主な特徴の 1 つは、人間や機械が理解しやすい、より明確なセマンティクスをタグに与えることです。HTML5 で一般的に使用されるセマンティック タグを次の表に示します。
| タグ名 |
説明 |
| <ヘッダー> |
セクションまたはページのヘッダーを定義します。 |
| <セクション> |
ドキュメント内のセクション (セクション、セクション) を定義します。章、ヘッダー、フッター、文書のその他の部分など。 |
| <記事> |
記事などの独立した自己完結型コンテンツを指定します。 |
| <余談> |
ページコンテンツの外側のコンテンツを定義します。コンテンツに関する補助情報です。記事のサイドバーとして使用できます。 |
| <図> |
個々のストリーム コンテンツ (画像、チャート、写真、コードなど) を指定します。 |
| <図のキャプション> |
<figure> タグのタイトルを定義します。 |
| <ナビ> |
ページ内のナビゲーション リンクを定義するセクション。 |
| <フッター> |
セクションまたはページのフッターを定義します。 |
HTML5有了语义化结构标签，就对应有语义化标签布局，它与传统方式布局对比如下：
传统方式布局 语义化标签布局
5、CSS3新特性
CSS3是CSS的最新版本，该版本提供了更加丰富且实用的规范，如：列表模块、超链接、语言模块、背景和边框、颜色、文字特效、多栏布局、动画等等，这些规范的使用会在后面的单元中将依次讲解。另外，响应式设计就是通过CSS3的媒体查询来实现的。
（1）与CSS引入HTML文件完全一样，CSS3引入HTML文档也有行内式（在标签的style属性中引入）、内嵌式（使用style标签在文档头部引入）和外链式（在头部通过link标签引入.css文件）3种形式。
（2）浏览器私有前缀
为了更好的兼容不同内核的浏览器，CSS3中部分属性需要添加浏览器的私有前缀，将某个样式以-xx-开头，具体如下：
-webkit- ：只有以Webkit为内核的浏览器可以解析，如Chrome、Safari。
-moz- ：只有以Gecko为内核的浏览器可以解析，如Firefox。
-ms- ：只有以Trident为内核的浏览器可以解析，如IE。
-o- ：只有以Presto为内核的浏览器可以解析，如Opera。
（3）常用CSS选择器
CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。
| 选择器 |
代码 |
示例代码 |
说明 |
| 通用选择器 |
* |
*{} |
选择所有元素。 |
| 标签选择器 |
元素名称 |
a{}、body{}、p{} |
根据标签选择元素。 |
| 类选择器 |
.<类名> |
. beam {} |
根据class的值选择元素。 |
| id选择器 |
#<id值> |
#logo{} |
根据id的值选择元素。 |
| 属性选择器 |
[<条件>] |
[href]{}、[attr=”val”]{} |
根据属性选择元素。 |
| 并集选择器 |
<选择器>,<选择器> |
em,strong{} |
同时匹配多个选择器，取多个选择器的并集。 |
| 后代选择器 |
<选择器> <选择器> |
.asideNav li {} |
先匹配第二个选择器的元素，并且属于第一个选择器内。 |
| 子代选择器 |
<选择器> > <选择器> |
ul>li{} |
匹配匹配第二个选择器，且为第一个选择器的元素的后代。 |
| 兄弟选择器 |
<选择器>+<选择器> |
p+a{} |
匹配紧跟第一个选择器并匹配第二个选择器的元素，如紧跟p元素后的a元素。 |
| 伪选择器 |
: :<伪元素>或: <伪类> |
p::first-line{}、a:hover{} |
伪选择器不是直接对应HTML中定义的元素，而是向选择器增加特殊的效果。 |
伪选择器比较特殊，分为伪元素和伪类两种。
| 元素名 |
描述 |
| :root |
选择文档中的根元素，通常返回html。 |
| :first-child |
父元素的第一个子元素。 |
| :last-child |
父元素的最后一个子无素。 |
| :only-child |
父元素有且只有一个子元素。 |
| :only-of-type |
父元素有且只有一个指定类型的元素。 |
| :nth-child(n) |
匹配父元素的第n个子元素。 |
| :nth-last-child(n) |
匹配父元素的倒数第n个子元素。 |
| :nth-of-type(n) |
匹配父元素定义类型的第n个子元素。 |
| :nth-last-of-type(n) |
匹配父元素定义类型的倒数n个子元素。 |
| :link |
匹配链接元素。 |
| :visited |
匹配用户已访问的链接元素。 |
| :hover |
匹配处于鼠标悬停状态下的元素。 |
| :active |
匹配处于被激活状态下的元素，包括即将点击（按压）。 |
| :focus |
匹配处于获得焦点状态下的元素。 |
| :enabled (:disabled) |
匹配启用（禁用）状态的元素。 |
| :checked |
匹配被选中的单选按钮和复选框的input元素。 |
| :default |
匹配默认元素。 |
| :valid (:invalid) |
根据输入数据验证，匹配有效（无效）的input元素。 |
| :in-range (out-of-range) |
匹配在指定范围之内（之外）受限的input元素。 |
（4）浮动与定位
在一个网页中，默认情况下块级元素独占一行，是自上而下排列，行内元素自左向右排列，但是在实际的网页布局中往往需要改变这种单调的排列方式，使网页内容变得丰富多彩，CSS的浮动和定位完美的解决了这个问题。
1）浮动
CSS的浮动可以通过float属性进行设置，默认值为none（不浮动）。
框1{float:none} 框1{float:right}
框1{float:left} 框1、2、3{float:left}
2）定位
在网页开发中，如果需要网页中的某个元素在网页的特定位置出现，例如弹出菜单，这时可以通过CSS的position属性进行设置，示例如下：
position:relative; /*相对定位方式*/
left:30px; /*距左边线30px*/
top:10px; /*距顶部边线10px*/
用于设置菜单定位方式的常用属性值如下表所示。
| 值 |
描述 |
| static |
静态定位（默认定位方式）。 |
| relative |
相对定位，相对于其原文档流的位置进行定位。 |
| absolute |
绝对定位，相对于 static 定位以外的第一个上级元素进行定位。 |
| fixed |
固定定位，相对于浏览器窗口进行定位。 |
用于设置元素具体位置的常用属性值如下表所示。
| 边偏移属性 |
描述 |
| top |
顶端偏移量，定义元素相对于其参照元素上边线的距离。 |
| bottom |
底部偏移量，定义元素相对于其参照元素下边线的距离。 |
| left |
左侧偏移量，定义元素相对于其参照元素左边线的距离。 |
| right |
右侧偏移量，定义元素相对于其参照元素右边线的距离 |
3）浮动与定位的使用实例
其实浮动的本意是用来解决图片和文字排版问题的，但是由于它十分好用，被大部分开发者应用到了网页布局，并成为了公认布局的一种方式。
该图中4个粉色部分使用浮动的知识对页面进行布局，然后使用绝对定位知识创建了一个浮动的div元素。需要注意的是，position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现。float也会导致元素脱离文档流，漂浮在文档流的上层，能遮挡下层元素的空间，但不会遮挡下层元素的内容。
参考代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动和定位</title>
</head>
<body>
<header class="header">header</header>
<aside class="aside">aside</aside>
<section class="main">section</section>
<footer class="footer">footer</footer>
<div class="float-div">floatdiv</div>
</body>
</html>
5.2 文本类网页设计
1、HTML5中常用文本标签
文本是网页最常见的主体内容之一，文本类网页设计也是本专业学生必备的基本功之一。HTML5中常用的文本标签如下表所示。
| 标签 |
描述 |
| 标题标签 |
HTML中定义了6级标题，分别为h1、h2...h6，每级标题的字体大小依次递减，1级标题字号最大，6级标题字号最小。 |
| 段落标签 |
<p>标签用于定义段落。 |
| <br>标签 <wbr>标签 |
<br>标签插入1个换行符，用来输入空行，而不是分割段落。 <wbr>规定在文本的何处适合添加换行符。作用是建议浏览器在这个标记处可以断行,不是必定会在此处断行,还要根据整行文字长度而定。除了IE浏览器，其他所有浏览器都支持<wbr>标签。 |
| <details>标签 <summary>标签 |
<details>标签用于描述文档或文档某个部分的细节，目前只有Chrome浏览器支持<details>标签，可以与<summary>标签配合使用，<summary>标签用于定义这个描述文档的标题。 |
| <bdi>标签 |
<bdi>标签用于设置一段文本，使其脱离其父标签的文本方向设置。 |
| <ruby>标签 <rt>标签 <rp>标签 |
<ruby>用于定义ruby注释（中文注音或字符）。与<rt>一同使用。 <rt>标签用于定义字符（中文注音或字符）的解释或发音。 <rp>标签在ruby注释中使用，以定义不支持<ruby>标签的浏览器所显示的内容。 |
| <mark>标签 |
<mark>标签主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用是搜索结果中高亮显示搜素关键字。 |
| <time>标签 |
<time>标签用于定义日期或时间，也可以两者同时。 |
| <meter>标签 |
<meter>标签用于定义度量衡，仅用于已知最大和最小值的度量 |
| <progress>标签 |
<progress>标签用于定义任何类型任务的运行进度，可以使用<progress>标签显示JavaScript中时间函数的进程。 |
2、CSS字体样式属性
CSS的字体样式属性用于定义文本的字体系列、大小、风格等，CSS常用的字体样式属性如下表所示。
| 属性 |
允许取值 |
描述 |
| font-size：字号大小 |
1em、5em等 |
em表示相对于当前对象内文本的字体尺寸。 |
| 5px |
px表示像素，最常用，推荐使用。 |
|
| font-family:字体 |
"微软雅黑" |
网页中常用的字体有宋体、微软雅黑、黑体等。 |
| font-weight:字体粗细 |
normal |
默认值，定义标准的字符。 |
| bold |
定义粗体字符。 |
|
| bolder |
定义更粗的字符。 |
|
| lighter |
定义更细的字符。 |
|
| 100~900（100的整数倍） |
定义由细到粗的字符，其中400等同normal，700等同bold，值越大字体越粗。 |
|
| font-style:字体风格 |
normal |
默认值，浏览器会显示标准的字体样式。 |
| italic |
浏览器会显示斜体的字体样式。 |
|
| oblique |
浏览器会显示倾斜的字体样式。 |
|
| word-wrap：长单词或 URL自动换行 |
normal |
只在允许的断字点换行（浏览器保持默认处理）。 |
| break-word |
在长单词或 URL 地址内部进行换行。 |
font属性用于对字体样式进行综合设置,字体合写，语法如下所示。
选择器{font:font-style||font-weight||font-size/line-height||font-family;}
字体风格 字体粗细 字号大小 行高 字体
3、CSS3的@font-face规则
@font-face是CSS3的新特性，用于定义服务器字体。通过@font-face规则，便可以让用户计算机统一使用服务器安装的字体。
@font-face规则的语法格式如下所示。
@font-face{
font-family: <YourWebFontName>;
src:<source> [<format>][,<source> [<format>]]*;
[font-weight:<weight>];
[font-style: <style>];
}
YourWebFontName：自定义的字体名称，最好是使用下载的默认字体（下载回来的叫什么字体，这里就填什么字体名）。
source：此值指的是自定义的字体的存放路径，可以是相对路径也可以是绝对路径。
format：此值指的是自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype、opentype、truetype-aat、embedded-opentype、svg等。
例如（自己运行观察效果）：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>@font-face用法</title>
</head>
<style>
@font-face {
font-family: myFont;
src:url('fonts/demo2-1/书法.ttf');
}
div{
font-family: myFont;
font-size: 4em;
}
</style>
<body>
<div>
使用@font-face，应用漂亮的Web字体
</div>
</body>
</html>
4、多列布局（Multi-column Layout）
在网页制作中，如果想让一个段落的内容像报刊、杂志中那样分栏显示，就用到了CSS3中提出的多列布局模块（Multi-column Layout Module）。例如（自己运行观察效果）：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>多列布局</title>
</head>
<style>
p{
width: 1500px;
/*设置列数*/
-webkit-column-count: 2;
/*指定每列固定宽度，列的实际宽度和容器宽度有关*/
-webkit-column-width: 450px;
/*设置列与列之间的空隙*/
-webkit-column-gap: 5em;
/*设置列中间的分割线，与border的值类似*/
-webkit-column-rule: 5px solid silver;
font-size: 27px;
margin: 0 auto;
}
</style>
<body>
<p>北京千锋教育科技有限公司是一家专门致力于高素质软件开发人才培养的高科技公司。它依托程序员平台 csdn ,整合了国内众多知名软件企业的资源,并邀请到任跨国公司和国内大中型企业架构师,系统分析师、企业培训师组成自己的团队。前锋教育致力于为企业培养人才的培训理念，以“学员自学入门教程，通过基础考核后进行强化培训”为招生原则，以“针对企业需求，重视基础理论建设，强化高端应用技能”为教学目标，以“高薪保证强大的资深教育团队”为教学后盾，解决所有培训学员的后顾之忧，并解决用人企业难以招聘到合格人才的困扰。</p>
</body>
</html>
5、CSS文本外观属性
CSS的文本外观属性用于设置颜色、字间距、字母间距、水平对齐、文本装饰 、阴影等。
| 属性 |
描述 |
允许取值 |
| color |
文本颜色 |
red, #FF0000, rgba(0,0,0,0.5) |
| letter-spacing |
字间距 |
normal, 0.5em, 20px |
| word-spacing |
单词间距 |
normal, 0.5em, 20px |
| line-height |
行间距 |
5px, 2em, 150% |
| text-transform |
英文文本转换 |
none, capitalize, uppercase, lowercase |
| text-decoration |
文本装饰 |
none, underline, overline, line-through |
| text-align |
水平对齐方式 |
left, right, center |
| text-indent |
首行缩进 |
10px, 2em, 20% |
| white-space |
空白符处理 |
normal, pre, nowrap |
| text-overflow |
标示对象内溢出文本 |
clip, ellipsis |
6、添加文本阴影
在CSS中，使用text-shadow属性可以为页面中的文本添加阴影效果，其基本语法格式如下：
选择器 {text-shadow:h-shadow v-shadow blur color;}
h-shadow设置水平阴影距离；
v-shadow设置垂直阴影距离；
blur设置模糊半径；
color：设置阴影颜色。
7、Web字体图标
在传统的网页制作过程中，涉及到图标的问题大多用图片进行处理，图片有优势也有不足。例如使用图片会增加总文件的大小和很多额外的“http请求”，增大服务器负担，并且有大量图片下载需要时，增加用户等待时间，牺牲用户体验。另外，图片（位图）在高分辨率屏上会变得模糊，因此，有时候在“响应式设计”中使用图像的最好解决方案就是不去使用图片。而字体通常是矢量的，所以就解决了图片的缺点，即图标字体化。
font-awesome是一个开源免费的字体图标工具，下载后使用步骤如下。
（1）首先去“https://github.com/FortAwesome/Font-Awesome”地址进行下载，下载完毕后解压。
（2）将font字体文件夹和css文件夹以及“font-awesome.min.css”文件拷贝到自己的项目中。
（3）在页面引入font-awesome.min.css文件。
（4）为页面元素添加相应的字体图标class，例如：
<i class="fa fa-comments">
会在页面显示相应的字体图标。每个图标都有相应的class，如果想使用其他的图标可以去地址：Icons | Font Awesome进行查看。
8、CSS导航栏
对于任何一个网站来说，拥有一个易用的导航栏都是非常重要的，可以大大的提高用户体验，导航栏其实就是一个超链接的列表，所以可以结合使用无序列表<ul>标签和超链接来实现它。可通过运行以下案例来演示导航效果：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>导航栏</title>
<style>
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
/*对全站有链接的文字颜色,并立即无下划线*/
a{color:#333;text-decoration:none; }
/*对鼠标放到超链接上文字颜色,并文字链接加下划线*/
a:hover {color: #ff898e;text-decoration:underline;}
li{
float: left;/*li元素浮动的水平导航效果*/
}
</style>
</head>
<body>
<ul>
<li><a href="http://www.baidu.com/">百度</a></li>
<li><a href="http://www.sina.com/">|新浪</a></li>
<li><a href="http://www.qfedu.com/">|千锋</a></li>
</ul>
</body>
</html>
5.3 图文类网页设计
1、HTML5常用图像标签
（1）<img>标签：用于定义网页中的图像，语法格式如下所示：
<img src="图片路径" alt="图片无法显示时显示的文字" />
（2）<figure>标签和<figcaption>标签：当需要在网页中添加一个插图时，就可以使用<figure>标签来实现。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML常用的图像标签</title>
</head>
<body>
<figure>
<p>拍摄者：小菜 拍摄时间：2019 年 4 月</p>
<img src="images/demo3-1/chicken.png" alt="图片不能显示">
<figcaption>一只呆萌的小鸡</figcaption>
</figure>
</body>
</html>
2、CSS背景设置
CSS用于背景设置的常用属性详见CSS基础。用backgroung进行背景设置的复合写法语法如下：
选择器 {
background: background-color || background-image || background-repeat ||background-attachment || background-position
}
如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。默认值为：
transparent none repeat scroll 0% 0%。
3、盒阴影
使用CSS3的box-shadow属性设置元素阴影。语法如下：
对象选择器 {
box-shadow: 投影方式||X轴偏移量||Y轴偏移量||阴影模糊半径||阴影扩展半径||阴影颜色
}
投影方式：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影，设置阴影类型为“inset”时，其投影就是内阴影。
X轴偏移量：是指阴影的水平偏移量，其值也可以是正负值，如果为正值，阴影在对象的右边，反之其值为负值时，阴影在对象的左边。
Y轴偏移量：是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部。
阴影模糊半径：此参数是可选，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小。
阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
阴影举例如下（自行运行观察结果）：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>对象阴影</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
<style>
.box {
box-shadow:7px 4px 10px #000 inset ;
width:300px;
height:80px;
}
.box1 img {
box-shadow:#000 7px 4px 10px ;
}
</style>
</head>
<body>
<h3>盒子对象阴影测试</h3>
<div class="box">DIV盒子内阴影</div>
<h3>图片对象阴影测试</h3>
<div class="box1">
<img src="images/demo3-2/boxshadow.png" />
</div>
</body>
</html>
4、CSS3渐变
渐变分为线性渐变和径向渐变。
线性渐变设置的语法如下：
background-image: linear-gradient([<angle> | <side-or-corner>,]color stop, color stop[, color stop]*);
angle：表示渐变的角度，角度数的取值范围是0~365deg。这个角度是以圆心为起点的角度，并以这个角度为发散方向进行渐变。
side-or-corner：通过关键词来确定渐变的方向。默认值为top（从上向下），取值范围是 [left,right,top,bottom,center,topright,topleft, bottomleft,bottomright,leftcenter,rightcenter]。注意：IE10只能取[left,top]，Chrome则没有[center,leftcenter,rightcenter]。
color stop：用于设置颜色边界，color为边界的颜色，stop为该边界的位置，stop的值为像素数值或百分比数值，若为百分比且小于0%或大于100%则表示该边界位于可视区域外。两个color stop之间的区域为颜色过渡区。
线性渐变举例如下（自行运行观察结果）：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3线性渐变</title>
</head>
<style type="text/css">
.rainbow-linear-gradient{
width: 460px;
height: 160px;
background-image: -webkit-linear-gradient(left,#E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%,#3BB4D7 60%,#2F4D9E 75%,#71378A 80%);
}
</style>
<body>
<div class="rainbow-linear-gradient"></div>
</body>
</html>
径向渐变设置的语法为：
background-image:radial-gradient(圆心坐标,渐变形状 渐变大小,
color stop, color stop[, color stop]*);
圆心坐标：用于设置放射的圆形坐标，可设置为形如10px 20px的x-offset y-offset，或使用预设值center（默认值）。
渐变形状：circle：圆形；ellipse：椭圆形，默认值。
渐变大小：
closest-side或contain:以距离圆心最近的边的距离作为渐变半径。
closest-corner:以距离圆心最近的角的距离作为渐变半径。
farthest-side:以距离圆心最远的边的距离作为渐变半径。
farthest-corner或cove:以距离圆心最远的角的距离作为渐变半径。
重复渐变：对以上两种渐变方式都是适用的，只需在两个属性前添加“ repeating-”,具体语法格式如下：
/*线性重复渐变*/
repeating-linear-gradient(起始角度,color stop, color stop[,color stop]*)
/*径向重复渐变*/
repeating-radial-gradient(圆心坐标,渐变形状 渐变大小,color stop, color stop[, color stop]*)
径向渐变举例如下（自行运行观察结果）：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3径向渐变</title>
<style type="text/css">
.rainbow-radial-gradient{
width: 300px;
height: 300px;
background-image: -webkit-radial-gradient(100px, #ffe07b 15%, #ffb151 2%, #16104b 50%);
}
</style>
</head>
<body>
<div class="rainbow-radial-gradient"></div>
</body>
</html>
5、圆角边框
CSS3的圆角边框实际上是在矩形的四个角分别做内切圆，然后通过设置内切圆的半径来控制圆角的弧度。
CSS3的圆角边框使用border-radius属性来实现，基本语法如下所示：
border-radius: 1-4 length | % / 1-4 length | %;
其中，length或%用于设置对象的圆角形状，不可为负值。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则表示水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置。如果省略 bottom-left，则与top-right 相同，如果省略 bottom-right，则与top-left 相同，如果省略top-right，则与top-left 相同。
border-radius是一种缩写的方式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，例如：
border-radius: 2em 1em 4em / 0.5em 3em;
等价于以下四种写法：
border-top-left-radius: 2em 0.5em //左上角
border-top-right-radius: 1em 3em //右上角
border-bottom-right-radius: 4em 0.5em //右下角
border-bottom-left-radius: 1em 3em //左下角
圆角边框举例如下（自行运行观察结果）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 圆角边框</title>
<style>
body {
padding: 0;
background-color: #F7F7F7;
}
div{
margin:20px;
float: left;
}
/*饼环*/
.border-radius {
width: 40px;
height: 40px;
border: 70px solid #93baff;
border-radius: 90px;
}
/*四边不同色*/
.border-radius1 {
width: 0px;
height: 0px;
border-width: 90px;
border-style: solid;
border-color: #ff898e #93baff #c89386 #ffb151;
}
</style>
</head>
<body>
<div class="border-radius"></div>
<div class="border-radius1"></div>
</body>
</html>
6、CSS3过渡
CSS3的过渡就是平滑的改变一个元素的CSS值，使元素从一个样式逐渐过渡到另一个样式。比如，一个块元素从方形逐渐变成圆形。
CSS3过渡使用transition属性来定义，其基本语法如下所示：
transition:property duration timing-function delay;
其中，property：应用过渡的CSS属性的名称；
duration：过渡效果花费的时间；
timing-function：过渡效果的时间曲线；
delay：效果开始之前需要等待的时间。
transition也是一个复合属性，由4个属性构成，如下表所示。
| 属性 |
描述 |
取值 |
| transition-property |
规定应用过渡的CSS属性的名称 |
none, all, property |
| transition-duration |
定义过渡效果花费的时间 |
time值，秒或毫秒，默认为0表示无效果 |
| transition-timing-function |
规定过渡效果的时间曲线 |
linear, ease, ease-in, ease-out, ease-in-out等 |
| transition-delay |
规定效果开始之前需要等待的时间 |
time值，默认为0 |
过渡举例如下（自行运行观察效果）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 过渡</title>
<style>
/*方环*/
.border-radius{
width: 40px;
height: 40px;
border: 70px solid #ff6e9b;
transition: 3s ;
}
/*圆环*/
.border-radius:hover {
width: 40px;
height: 40px;
border: 70px solid #ff6e9b;
border-radius: 90px ;
}
</style>
</head>
<body>
<div class="border-radius"></div>
</body>
</html>
7、CSS3变形
CSS3动画相关的第二个属性就是transform，翻译成中文的含义是“改变，使…变形；转换”，用于向元素应用2D或3D转换。
形状变换可分为旋转、倾斜、缩放及移动几种类型。
transform属性的基本语法如下所示：
transform：none | transform-functions;
默认值为none，适用于内联元素和块元素，表示不进行变形。
transform-functions用于设置变形函数，可以是一个或多个变形函数列表，2D转换的常用函数说明如下表所示。
| 属性 |
描述 |
参数说明 |
| rotate(angel) |
旋转元素。 |
angel是度数值，代表旋转角度。 |
| skew(x-angel,y-angel) |
倾斜元素。 |
angel是度数值，代表倾斜角度。 |
| skewX(angel) |
沿着 x 轴倾斜元素。 |
|
| skewY(angel) |
沿着 y 轴倾斜元素。 |
|
| scale(x，y) |
缩放元素，改变元素的高度和宽度。 |
代表缩放比例，取值包括正数、负数和小数。 |
| scaleX(x) |
改变元素的宽度。 |
|
| scaleY(y) |
改变元素的高度。 |
|
| translate(x,y) |
移动元素对象，基于x和y坐标重新定位元素。 |
元素移动的数值，x代表左右方向，y代表上下方向，向左和向上使用负数，反之用正数。 |
| translateX(x) |
沿着 x 轴移动元素。 |
|
| translateY(y) |
沿着 y 轴移动元素。 |
|
| matrix(n,n,n,n,n,n) |
2D转换矩阵。 |
使用六个值的表示变形，所有变形的本质都是由矩阵完成的。 |
元素的变形都有一个原点，元素围绕着这个点进行变形或者旋转，默认的起始位置是元素的中心位置。
CSS 变形使用transform-origin属性指定元素变形基于的原点，语法格式具体如下：
transform-origin: x-axis y-axis z-axis;
transform-origin最多接受三个值，分别是x轴（取值为left、center、right、length、%）、y轴（top、center、bottom、length、%）和z轴（length）的偏移量。
注意：transform-origin的三个参数均为可选参数，参数值为0px时可以省略不写。
2D变换案例代码如下（自己运行观察结果）：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3 2D转换</title>
<style>
.demo{
margin: 25px;
padding: 0;
width: 150px;
height: 50px;
background-color: #2bab79;
font-weight: bold;
font-size: larger;
float: left;
}
.trans1{
transform:rotate(30deg);
}
.trans2{
transform:skew(30deg);
}
.trans3{
transform:scale(0.8);
}
.trans4{
transform:translate(5px,50px);
}
</style>
</head>
<body>
<div class="demo">不设置变形</div>
<div class="demo trans1">rotate(30deg)</div>
<div class="demo trans2">skew(30deg)</div>
<div class="demo trans3">scale(0.8)</div>
<div class="demo trans4">translate(5px,50px)</div>
</body>
</html>
3D变形是指某个元素围绕其x轴、y轴、z轴进行旋转，transform-functions的常用于3D转换的函数说明如下表所示。
| 属性 |
描述 |
参数说明 |
| rotate3d(x,y,z,angel) |
定义3D旋转。 |
前三个值用于判断需要旋转的轴，旋转轴的值设置为1，否则为0，angel代表元素旋转的角度。 |
| rotateX(angel) |
沿着x轴3D旋转。 |
|
| rotateY(angel) |
沿着y轴3D旋转。 |
|
| rotateZ(angel) |
沿着z轴3D旋转。 |
|
| scale3d(x,y,z) |
定义3D缩放。 |
代表缩放比例，取值包括正数、负数和小数。 |
| scaleX(x) |
沿着x轴缩放。 |
|
| scaleY(y) |
沿着y轴缩放。 |
|
| scaleZ(z) |
沿着z轴缩放。 |
|
| translate3d(x,y,z) |
定义3D转化。 |
元素移动的数值。 |
| translateX(x) |
仅用于x轴的值。 |
|
| translateY(y) |
仅用于y轴的值。 |
|
| translateY(z) |
仅用于z轴的值。 |
|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
3D转换矩阵。 |
使用16个值的 4x4 矩阵。所有变形的本质都是由矩阵完成的 |
| perspective(n) |
定义3D转换元素的透视视图。 |
一个代表透视深度的数值。 |
perspective属性的透视效果就是用于实现视觉上的3D效果的，接下来看一个典型的案例——立方体（自己运行观察效果）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 3D转换</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.box {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 24px;
margin: 100px auto;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(30deg);
}
.front, .back, .left, .right, .top , .bottom {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0.5;
}
.front {
background-color: pink;
transform: translateZ(100px);
}
.left {
background-color: green;
transform: rotateY(90deg) translateZ(-100px);
}
.right {
background-color: red;
transform: rotateY(-90deg) translateZ(-100px);
}
.top {
background-color: blue;
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
background-color: yellow;
transform: rotateX(-90deg) translateZ(100px);
}
.back {
background-color: purple;
transform: translateZ(-100px);
}
</style>
</head>
<body>
<div class="box">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
8、CSS3动画
前面学习了CSS3的transition和transform属性，虽然二者结合可以实现一些简单的动画效果，但是也有一些难以克服的缺点，例如我们想让动画在多个状态中转换就无法实现了，CSS3中最后一个动画相关的属性是animations，有了它就可以解决这样的问题。
一个完整的CSS animations由两部分构成：
（1）一组定义的动画关键帧 → @keyframes规则
（2）描述该动画的CSS声明 → animation属性
@keyframes规则：
在CSS3中使用@keyframes规则来创建动画，keyframes可以设置多个关键帧，每个关键帧表示动画过程中的一个状态，多个关键帧就可以使动画十分绚丽。
@keyframes animationname {
keyframes-selector{css-styles;}
}
其中，animationname表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。
keyframes-selector是关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。
css-styles定义执行到当前关键帧时对应的动画状态。以上三个属性都是必需品，缺一不可。
animation属性：
animation属性用于描述动画的CSS声明，包括指定具体动画以及动画时长等行为。
animation属性的基本语法如下所示：
animation:name duration timing-function delay iteration-count direction fill-mode play-state;
与transtion类似，animation也是一个复合属性，以上参数分别对应8个子属性。
| 属性 |
描述 |
| animation-name |
规定 @keyframes 动画的名称。 |
| animation- duration |
规定动画完成一个周期所花费时间。 |
| animation-timing-function |
规定动画的速度曲线。 |
| animation-delay |
规定动画开始前的延迟，可选。 |
| animation-iteration-count |
规定动画被播放的次数。 |
| animation-direction |
规定动画是否在下一周期逆向播放。 |
| animation-play-state |
规定动画是否正在运行或暂停。 |
| animation-fill-mode |
规定动画在播放之前或之后，其动画效果是否可见。 |
动画举例（自行运行观察效果）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 动画</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.box {
width: 400px;
margin: 100px auto;
animation: rotate 4s linear infinite;
}
img {
width: 100%;
/*display: block;*/
}
@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
</style>
</head>
<body>
<div class="box">
<img src="images/demo3-9/fengche.png">
</div>
</body>
</html>
9、CSS精灵技术
网页开发者以往喜欢把网页里面的图片字节数控制的非常小，往往在一个图片文件夹里散落着很多的小图片，客户端每显示一张图片都会向服务器发送一次请求，图片越多请求次数越多，这样有可能造成图片延迟加载，影响用户体验。随着互联网技术的发展，大家越来越重视网页的加载速度，于是这些小图片被整合到了一起，CSS Sprites出现了。
CSS Sprites被称为CSS精灵技术，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有小图片都包含到一张大图中去，这样，当访问该页面时，只需要载入一次图片。
CSS精灵技术的使用具体如下：
（1）首先要有一张精灵图，它是许多小图片的合并，由于精灵图要求不高于200KB，所以这种合并适合一般小图标素材。
（2）创建一个容器（如<div>、<i>标签、<span>标签等）来加载精灵图片。
（3）利用CSS的"background-image"、"background-repeat"、"background-position"组合进行背景定位，将一张大图片中的某个部分显示到网页的固定位置。
精灵技术应用举例如下（自行运行观察效果）：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS精灵图</title>
<style>
.peach1{
position: absolute;
top: 50px;
left: 0;
width:90px;
height:100px;
background:url(images/peach.png) 0 0 no-repeat;
}
.peach2 {
position: absolute;
top: 70px;
left: 100px;
width : 90px;
height: 100px; background: url(images/peach.png) 0 -110px no-repeat;
}
</style>
</head>
<body>
<span class="peach1" ></span>
<span class="peach2" ></span>
</body>
</html>
5.4 HTML5表单应用
首先需要理解表单的概念，表单是网页上用来收集用户信息的区域，由文本域、复选框、单选框、菜单、文件地址域、按钮等表单元素组成。最常见的表单应用有搜索引擎页面、用户登录页面、用户注册页面等。
<form>标签用于创建一个表单，其基本语法如下所示：
<form action="url地址"method="提交方式"name="表单名称">
各种表单控件
</form>
在上面的语法中，name属性用来区分一个网页中的多个表单；action属性用于指定接收并处理表单数据的服务器url地址；method属性用于设置表单数据的提交方式，其取值可以为get或post，默认为get。
简单表单举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="http://www.sina.com/" method="post" >
<input name="save"/>
<button>提交按钮</button>
</form>
</body>
</html>
HTML5新增的表单属性：
（1）autocomplete属性
autocomplete属性用于指定表单是否有自动完成功能，所谓“自动完成”是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表里，以实现自动完成输入。
autocomplete属性有2个值，具体如下：
• true：表单有自动完成功能
• false：表单无自动完成功能
（2）novalidate属性
novalidate属性用于指定在提交表单时取消对表单进行有效的检查。为表单设置该属性时，可以关闭整个表单的验证，这样可以使form内的所有表单控件不被验证。
演示autocomplete属性的具体应用案例见上例。
HTML5 <input>标签
表单中最为核心的就是<input>标签，使用<input>标签可以在表单中定义文本输入框、单选按钮、复选框、重置按钮等。其基本语法格式如下：
<input type="控件类型" />
在上面语法中，type属性为其最基本的属性，取值有多种，用来指定不同的控件类型，其中email、url、range、number、Date pickers、search、color、tel为新增属性值；除type属性外，还可以定义很多其他属性，常用属性如name、value、size等。
演示<input>标签的具体使用的案例如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>常用表单控件</title>
</head>
<body>
<form action="#" method="post">
<!--text单行文本输入框-->
用户名：<input type="text" value="张三" maxlength="6"> <br><br><!--password密码输入框-->
密码 ：<input type="password" size="40"><br/><br/>
<!--radio单选按钮-->
性别：<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/> 女<br/><br/>
<!--number数值输入域-->
年龄：<input type=number min="18" max="100"><br/><br/>
<!--checkbox复选框-->
习惯：<input type="checkbox" />常通风
<input type="checkbox" />勤洗手
<input type="checkbox" />戴口罩<br/><br />
<input type="checkbox" />少聚集<br/><br />
颜色：<input type="color" value="#ff0000"/><br/><br/>
<!--file文件域-->
上传头像：<input type="file" /><br/><br />
<!--专门用于搜索关键词的文本框-->
关键词：<input type="search"/><br/><br />
<!--一定范围内的数值输入域-->
难易程度: <input type="range" min="1" max="120" /><br/>
<!--button普通按钮-->
<input type="button" value="普通按钮"/>
<!--submit提交按钮-->
<input type="submit" value="提交"/>
<!--reset重置按钮-->
<input type="reset" value="重置"/>
</form>
</body>
</html>
其它表单标签
除了<input>标签外，HTML还有其他常用表单标签例如<textarea>、<label>、<select>标签等，HTML5之后还增加了<datalist>、<keygen>、<output>表单标签，接下来一一对它们进行介绍。
<textarea>标签用于定义多行文本输入框，可以通过cols和rows属性来规定文本区域内可见的列数和行数，具体的尺寸可以通过width和height来设置。
<textarea rows=""cols="">这里是文本</textarea>
<textarea>标签的常用属性如下表所示：
| 属性 |
允许取值 |
取值说明 |
| name |
由用户自定义 |
控件的名称 |
| readonly |
readonly |
该控件内容为只读（不能编辑修改） |
| disabled |
disabled |
第一次加载页面时禁用该控件（显示为灰色） |
| maxlength |
正整数 |
控件允许输入的最多字符数 |
| autofocus |
autofocus |
指定页面加载后是否自动获取焦点 |
| placeholder |
字符串 |
为input类型的输入框提供一种提示 |
| required |
required |
规定输入框填写的内容不能为空 |
| cols |
number |
规定文本区内的可见宽度。 |
| rows |
number |
规定文本区内的可见行数。 |
例如：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>textarea</title>
</head>
<body>
<h2>多行文本框：</h2>
<textarea name="content" cols="20" rows="10">
可修改或删除的默认文本，不会在用户输入的时候自动删除，
</textarea>
</body>
</html>
<label>标签用于为 <input>标签定义标注（标记），当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label>标签的应用举例如下：
<!DOCTYPEhtml>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>label</title>
</head>
<body>
性别：
<label for="male" >男</label>
<input type="radio"name="sex" id="male"/>
<label for="female">女</label>
<input type="radio"name="sex" id="female"/>
</body>
</html>
<label>标签的for属性值应当与相关标签的id属性相同。
<select>标签可创建单选或多选菜单，其语法格式具体如下：
<select>
<option value ="1">选项一</option>
<option value ="2">选项二</option>
<option value ="3">选项三</option>
<option value ="3">选项四</option>
</select>
<select>标签中的<option>标签用于定义列表中的可用选项。
<select>标签的常用属性如下表：
| 标签名 |
常用属性 |
描述 |
| <select> |
size |
指定下拉菜单的可见选项数（取值为正整数）。 |
| multiple |
定义multiple=“multiple”时，下拉菜单将具有多项选择的功能，多选方法为，按住Ctrl键选择多项。 |
|
| <option> |
selected |
定义selected =“selected ”时，当前项即为默认选中。 |
<select>标签应用举例如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>select</title>
</head>
<body>
<!--单选下拉菜单，可设置默认选中项-->
所在城市（单选）：<br />
<select>
<option>-请选择-</option>
<option selected="selected">北京</option>
<option>上海</option>
<option>广州</option>
</select><br /><br />
<!--多选下拉菜单，可设置可见选项数，默认选中可以设置多个-->
兴趣爱好（多选）:<br />
<select multiple="multiple" size="4">
<option>读书</option>
<option selected="selected">旅行</option>
<option selected="selected">听音乐</option>
<option>运动</option>
</select>
</body>
</html>
<datalist>标签用于定义输入域的选项列表，即与<input>标签配合定义<input>标签可能的值。
列表通过<datalist>标签内的<option>标签创建，可以使用<input>标签的list属性引用<datalist>标签的id属性，具体用法如下。
<input id="url" list="urlList">
<datalist id="urlList">
<option value="www.baidu.com">百度</option>
<option value="www.sina.com">新浪</option>
<option value="www.hhtc.edu.cn">怀院</option>
</datalist>
<keygen>标签是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（privatekey）存储于客户端，公钥（publickey）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。具体用法如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>keygen</title>
</head>
<body>
<form action="#" method="get">
用户名: <input type="text"name="usr_name" />
加密强度: <keygen name="security"/>
<input type="submit" />
</form>
</body>
</html>
HTML5表单验证
表单验证是一套系统，它为终端用户检测无效的数据并标记这些错误，让Web应用更快的抛出错误，大大的优化了用户体验。
HTML5自带表单验证功能有两种：
（1）通过required属性校验输入框填写内容不能为空，如果为空将弹出提示框，并阻止表单提交。
（2）通过pattern属性规定用于验证input 域的模式（pattern），它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值，如果控件的值不匹配这个正则表达就会弹出提示框，并阻止表单提交。那些type为email或url的输入控件内置相关正则表达式，如果value的值不符合其正则表达式，那表单将通不过验证，无法提交。
表单验证举例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5表单验证</title>
</head>
<body>
<form action="#" method="get">
请输入您的邮箱：
<input type="email" name="formmail" required/><br/><br/>
请输入个人网址：
<input type="url" name="user_url" required/><br/><br/>
<!--pattern属性用于验证输入的内容是否与定义的正则表达式匹配，正则表达式[1-9]d{5}(?!d)代表六位数中国邮编-->
请输入中国邮编：<input type="text" pattern="[1-9]d{5}(?!d)" name="postcode" required/><br/><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
5.5 HTML5画布
JavaScript是一门简单的脚本语言，是前端开发中一个重要的角色，我们本节要讲的canvas，它就依赖于JavaScript才能完成一系列操作。
1、JavaScript HTML DOM
JavaScript中把一个HTML网页看作一个DOM对象。DOM的全称为文档对象模型（Document Object Model）。当网页被加载时，浏览器会将HTML网页按照DOM模型构造为如下图所示的对象树。利用JavaScript可动态控制网页行为。
通过JavaScript来创建动态的HTML，主要表现在4个方面：
（1）JavaScript能够改变页面中的所有HTML元素。
（2）JavaScript能够改变页面中的所有HTML属性。
（3）JavaScript能够改变页面中的所有CSS样式。
（4）JavaScript能够对页面中的所有事件做出反应。
要想操作HTML元素及其属性，首先应该获得这个元素对象，document对象的常用获取HTML元素对象的方法如下表所示。
| 方法 |
描述 |
| getElementById() |
返回对拥有指定 id 的第一个对象的引用。 |
| getElementsByName() |
返回带有指定名称的对象集合。 |
| getElementsByTagName() |
返回带有指定标签名的对象集合。 |
DOM操作可以获取HTML元素的属性和属性值，接下来通过案例来演示上述三个方法的具体应用，代码如下。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JavaScript获取HTML元素对象</title>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("input1")
alert("第一个<input>元素的值为"+x.value);
}
function getElements()
{
var x=document.getElementsByName("input");
alert("有"+x.length+"个名称为input的元素");
}
</script>
</head>
<body>
<input name="input" value="1" id="input1" οnclick="getValue()"/><br/>
<input name="input" value="2"/><br/>
<input name="input" value="3" /><br/>
<input type="button" οnclick="getElements()" value="元素个数"/>
</body>
</html>
2、getBoundingClientRect()方法
用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，或者说一个Element元素的坐标，现在已经是一个W3C标准。
该方法返回一个Object对象，该对象有6个属性：top、left、right、bottom、width、height，具体应用代码如下所示。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>getBoundingClientRect()</title>
</head>
<script>
/* 该方法应用于button的onmousemove事件*/
function getRect(){
//获取元素对象
var obj= document.getElementById("example");
//获取按钮位置
var objRect=obj.getBoundingClientRect();
//当调用该方法时弹出信息
alert("top:" + objRect.top + ", right:" + objRect.right + ", bottom:" + objRect.bottom + ", left:" + objRect.left);
}
</script>
<body>
<!--<center></center>表示将标签内所有的内容居中-->
<center>
<button id="example" οnmοusemοve="getRect()" >
返回本按钮距离浏览器左上角的值
</button>
</center>
</body>
</html>
3、canvas初识
canvas意为画布，现实生活中的画布是用来作画的，HTML5中的canvas与之类似，我们可以称它为“网页中的画布”，有了这个画布便可以轻松的在网页中绘制图形、文字、图片等。
（1）创建画布
HTML5中提供了<canvas>标签，使用<canvas>标签可以在网页中创建一个矩形区域的画布。
<canvas id="cavsElem" width="400" height="300">
您的浏览器不支持canvas ← 当浏览器不支持<canvas>标签时显示
</canvas>
画布本身不具有绘制功能，可以通过脚本语言（一般为JavaScript）操作绘制图形的API进行绘制操作。可以使用getElementById()方法获取画布对象：
var canvas = document.getElementById('cavsElem');
(2)准备画笔
有了画布之后，要开始作画需要准备一只画笔，这只画笔就是context对象，该对象可以使用JavaScript脚本获得。
var context = canvas.getContext('2d');
(3)坐标和起点
接下来需要设置上下文开始的绘制点，也就是“从哪里开始画”。
context.moveTo(x,y);
(4)绘制线条
lineTo()方法用于定义从“x,y”的位置绘制一条直线到指定点或上一个线头点。
context.lineTo(x,y);
(5)路径规划
绘制线条时，确定起点和终点后，便形成了一条绘制路径，若绘制复杂路径，则必须使用路径开始和结束。
context.beginPath(); /*开始路径*/
context.closePath(); /*闭合路径*/
(6)描边和填充
在canvas图形绘制中，路径只是草稿，真正绘制线必须执行stroke()方法根据路径进行描边，还可以使用fill()方法进行图形的填充。
context.stroke();//描边
context.fill();//填充
canvas绘制图形-基本步骤总结：
①创建画布：<canvas></canvas>
②准备画笔（获取上下文对象）：canvas.getContext('2d');
③开始路径规划：context.beginPath();
④移动起始点：context.moveTo(x,y);
⑤绘制线条(矩形、圆形、图片...)：context.lineTo(x,y);
⑥闭合路径：context.closePath();
⑦绘制描边：context.stroke();
使用canvas绘制图形的案例如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Canvas绘制三角形</title>
</head>
<body>
<canvas id="cavsElem">
你的浏览器不支持canvas，请升级浏览器
</canvas>
<script>
//===============基本绘制API====================
//获得画布
var canvas = document.getElementById('cavsElem');
var context = canvas.getContext('2d'); //获得上下文
//设置标签的属性宽高和边框
canvas.width = 900;
canvas.height = 600;
canvas.style.border="1px solid #000";
//绘制三角形
context.beginPath(); //开始路径
context.moveTo(100,100); //三角形，左顶点
context.lineTo(300, 100); //右顶点
context.lineTo(300, 300); //底部的点
context.closePath(); //结束路径
context.stroke(); //描边路径
//context.fill(); //填充
</script>
</body>
</html>
4、canvas绘图API
（1）canvas绘制矩形和清除矩形
canvas中分别使用strokeRect()和fillRect()方法来绘制矩形边框和填充矩形。使用语法如下：
context.strokeRect(x,y,width,height);
context.fillRect(x,y,width,height);
在canvas中还有一个相当于橡皮擦的方法，使用它可以清除矩形内绘制的内容。使用语法如下：
context.clearRect(x,y,width,height);
案例代码片段如下：
<body>
<canvas id="cavsElem">
你的浏览器不支持canvas，请升级浏览器
</canvas>
<script>
//===============绘制矩形====================
//获得画布
var canvas = document.getElementById('cavsElem');
var context = canvas.getContext('2d'); //获得上下文
//设置标签的属性宽高和边框
canvas.width = 900;
canvas.height = 600;
canvas.style.border="1px solid #000";
//绘制矩形
context.strokeRect(0,0,200,100);
context.fillRect(200,200,200,100);
//清除矩形(可以取消下行注释观察清除的效果)
//context.clearRect(100,50,200,200);
</script>
</body>
（2）canvas绘制圆形
canvas中使用arc()方法来绘制弧形和圆形。
context.arc( x,y,radius,startAngle,endAngle,bAntiClockwise);
其中，x,y：中心点；
radius：半径长度；
startAngle：开始弧度；
endAngle：结束弧度；
bAntiClockwise：是否逆时针。
案例代码片段如下：
<body>
<canvas id="cavsElem" width='400' height="300">
你的浏览器不支持canvas，请升级浏览器
</canvas>
<script>
/* 绘制圆形*/
//获得画布并上下文对象
var context = document.getElementById('cavsElem').getContext('2d');
context.beginPath();//开始路径
context.arc(100,100,100,0,2*Math.PI,true);//绘制圆形，true为逆时针
context.closePath();//关闭路径
context.fillStyle = 'green';//设置填充颜色
context.fill();//填充
/* 绘制弧形*/
context.beginPath();//开始路径
context.strokeStyle = "#fff";//设置描边颜色
context.lineWidth = 5;//设置线的粗细
//绘制弧形，false为顺时针
context.arc(100,150,25,Math.PI/6,5*Math.PI/6,false);
// context.closePath();
context.stroke();//描边
</script>
</body>
（3）canvas绘制图片
canvas中的绘制图片其实就是把一幅图放在画布上。
//绘制原图
context.drawImage(image,dx,dy)
//缩放绘图
context.drawImage(image, dx, dy,dWidth,dHeight)
//切片绘图
context.drawImage(image ,sx,sy, sWidth,sHeigh ,dx,dy,dWidth,dHeight)
其中，image表示源图；dx,dy表示目标（画布）中的坐标；dWidth,dHeight表示目标的宽和高；sx,sy表示源图中的坐标；sWidth,sHeigh表示源图的宽和高。
案例代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘制图片</title>
</head>
<body>
<canvas id="cavsElem" width="400" height="300" >
你的浏览器不支持canvas，请升级浏览器
</canvas>
<script type="text/javascript">
//获得画布
var canvas=document.getElementById('cavsElem');
//设置画布边框
canvas.style.border="1px solid #000";
//获取上下文
var context = canvas.getContext('2d');
//创建图片对象
var img=new Image();
//设置图片路径
img.src="images/demo5-8/draw.jpg";
//当页面加载完成使用此图片
img.onload = function(){
//使用canvas绘制图片
context.drawImage(img,0,0);
};
</script>
</body>
</html>
（4）canvas其他方法
canvas中提供的有关图形绘制的方法还有很多，接下来介绍几个项目会涉及到的方法，具体如下：
clip()方法用于从原始画布剪切任意形状和尺寸的区域。
save()方法用来保存画布的绘制状态。
restore()方法用于移除自上一次调用save()方法所添加的任何效果。
使用clip()裁剪图片效果的案例代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>clip()剪切任意形状和尺寸区域</title>
</head>
<body>
<canvas id="cavsElem" width="400" height="300" >
你的浏览器不支持canvas，请升级浏览器
</canvas>
<script>
//获得画布
var canvas=document.getElementById('cavsElem');
//设置画布边框
canvas.style.border="1px solid #000";
//获取上下文
var context = canvas.getContext('2d');
// 剪切矩形区域
context.rect(50,20,200,120);//(x,y,width,height)
context.stroke();//描边
context.clip();
// 在 clip()之后绘制圆形,只有被剪切区域的内圆形可见
context.arc(200,100,70,0,2*Math.PI,true);
//(x,y,半径,开始弧度，结束弧度，true代表逆时针绘制圆形)
context.fillStyle="pink";
context.fill();//填充
</script>
</body>
</html>
5.6 音频与视频
1、视频
在HTML5之前，网页擅长处理的是文字和图像数据。直到现在，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5提供了展示视频的标准，规定通过<video>元素来包含视频。<video>元素的播放控件，实现了包括播放、暂停、进度和音量控制、全屏等功能，并允许自定义控件的功能和样式。
视频可以理解为一系列连续的图片，<video>元素的使用方法与<img>元素非常相似，具体语法如下所示：
<video src="视频文件路径" controls="controls">
您的浏览器不支持video标签
</video>
其中，controls为视频提供播放控件，<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。
<video>元素用于控制视频播放的常用属性如下表所示。
| 属性 |
允许取值 |
取值说明 |
| autoplay |
autoplay |
如果出现该属性，则视频在就绪后马上播放。 |
| controls |
controls |
如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height |
pixels |
设置视频播放器的高度。 |
| loop |
loop |
如果出现该属性，则当媒体文件播放完后再次开始播放。 |
| preload |
preload |
如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。 |
| src |
url |
要播放的视频的URL。 |
| width |
pixels |
设置视频播放器的宽度。 |
视频文件也有不同格式。目前，<video>标签支持三种视频格式，具体如下：
Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件。
MPEG4：带有H.264视频编码和AAC音频编码的MPEG4文件。
WebM：带有VP8视频编码和Vorbis音频编码的WebM文件。
目前为止没有一种视频格式让所有浏览器都支持，浏览器对以上格式的支持情况如下表：
| 视频格式 |
IE 9 |
Firefox 4.0 |
Opera 10.6 |
Chrome 6 |
Safari 3.0 |
| Ogg |
支持 |
支持 |
支持 |
||
| MPEG 4 |
支持 |
支持 |
支持 |
||
| WebM |
支持 |
支持 |
支持 |
HTML5中提供了<source>标签，用于为<video>指定多个视频源，即多个不同格式视频文件的路径，语法如下所示：
<video controls>
<source src="视频文件地址" type="video/格式">
<source src="视频文件地址" type="video/格式">
……
</video>
注意：<source>标签对于音频文件同样适用，只需要把video改成audio即可。
视频标签使用举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video元素</title>
</head>
<body>
//不带控制面板的视频播放器
<video src="video/movie.mp4"></video><br/><br/>
<video src="video/movie.mp4" autoplay></video><br/>//自动播放
//带控制面板的视频播放器
<video src="video/movie.mp4" controls></video>
</body>
</html>
2、HTML DOM Video对象
HTML5为Video对象提供了用于DOM操作的方法和事件，以及Video对象的常用属性。接下来将对这部分内容进行介绍。
（1）Video对象的常用方法
| 方法 |
描述 |
| load() |
加载媒体文件，为播放做准备。通常用于播放前的预加载，也会用于重新加载媒体文件。 |
| play() |
播放媒体文件。如果视频没有加载，则加载并播放；如果视频是暂停的，则变为播放。 |
| pause() |
暂停播放媒体文件。 |
| canPlayType() |
测试浏览器是否支持指定的媒体类型。 |
（2）Vidio对象的常用属性
| 属性 |
描述 |
| currentSrc |
返回当前视频的URL。 |
| currentTime |
设置或返回视频中的当前播放位置（以秒计）。 |
| duration |
返回视频的长度（以秒计）。 |
| ended |
返回视频的播放是否已结束。 |
| error |
返回表示视频错误状态的MediaError对象。 |
| paused |
设置或返回视频是否暂停。 |
| muted |
设置或返回是否关闭声音。 |
| volume |
设置或返回视频的音量。 |
| height |
设置或返回视频的高度值。 |
| width |
设置或返回视频的宽度值。 |
（3）Video对象的常用事件
| 事件 |
描述 |
| play |
当执行方法play()时触发。 |
| playing |
正在播放时触发。 |
| pause |
当执行了方法pause()时触发。 |
| timeupdate |
当播放位置被改变时触发。 |
| ended |
当播放结束后停止播放时触发。 |
| waiting |
在等待加载下一帧时触发。 |
演示Video对象中常用方法、属性和事件的具体应用案例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript操作video对象</title>
</head>
<body>
<video id="myVideo" src="video/myVideo.ogv"></video>
<!--<br/><br/>-->
<input type="button" value="播放/暂停" οnclick="playPause()"/>
</body>
<script>
var myVideo=document.getElementById("myVideo");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
</html>
3、音频
目前为止在网页中播放音频没有固定的标准，大多数音频是通过插件（比如Flash）来播放的，但并非所有浏览器都有同样的插件，HTML5中提供<audio>标签来定义Web上的声音文件或音频流，它的使用方法与<video>标签基本相同，语法如下：
<audio src="音频文件路径" controls>
浏览器不支持audio标签
</audio>
<audio>标签的常用属性如下表所示。
| 属性 |
允许取值 |
取值说明 |
| autoplay |
autoplay |
如果出现该属性，则视频在就绪后马上播放。 |
| controls |
controls |
如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop |
loop |
如果出现该属性，则当媒体文件播放完后再次开始播放。 |
| preload |
preload |
如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。 |
| src |
url |
要播放的视频的URL。 |
<audio>标签支持三种音频格式，具体描述如下：
vorbis：是一种类似ACC的免费、开源的音频编码，是用于替代MP3的下一代音频压缩技术。
MP3：是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3 （Moving Picture Experts Group Audio LayerIII），简称为MP3。它能够大幅度降低音频数据量。
WAV：是录音时用的标准的Windows文件格式，文件的扩展名为.WAV，数据本身的格式为PCM或压缩型，属于无损音乐格式的一种。
浏览器对上述音频格式的支持情况如下：
| 音频格式 |
IE 9 |
Firefox 4.0 |
Opera 10.6 |
Chrome 6.0 |
Safari 3.0 |
| Vorbis |
支持 |
支持 |
支持 |
||
| MP3 |
支持 |
支持 |
支持 |
||
| Wav |
支持 |
支持 |
支持 |
多个音频源使用<source>标签来定义，语法如下：
<audio controls>
<source src="音频文件路径" type="audio/格式">
<source src="音频文件路径" type="audio/格式">
您的浏览器不支持audio标签
</audio>
音频播放器的简单使用案例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio标签的使用</title>
</head>
<body>
<audio controls>
<source src="audio/music.mp3" type="audio/mp3">
</audio>
</body>
</html>
4、HTML DOM Audio对象
（1）Audio对象的常用方法
| 方法 |
描述 |
| load() |
加载媒体文件，为播放做准备。通常用于播放前的预加载，也会用于重新加载媒体文件。 |
| play() |
播放媒体文件。如果视频没有加载，则加载并播放；如果音频是暂停的，则变为播放。 |
| pause() |
暂停播放媒体文件。 |
| canPlayType() |
测试浏览器是否支持指定的媒体类型。 |
（2）Audio对象的常用属性
| 属性 |
描述 |
| currentSrc |
返回当前音频的URL。 |
| currentTime |
设置或返回音频中的当前播放位置（以秒计）。 |
| duration |
返回音频的长度（以秒计）。 |
| ended |
返回音频的播放是否已结束。 |
| error |
返回表示音频错误状态的MediaError对象。 |
| paused |
设置或返回音频是否暂停。 |
| muted |
设置或返回是否关闭声音。 |
| volume |
设置或返回音频的音量。 |
（3）Audio对象的常用事件
| 事件 |
描述 |
| play |
当执行方法play()时触发。 |
| playing |
正在播放时触发。 |
| pause |
当执行了方法pause()时触发。 |
| timeupdate |
当播放位置被改变时触发。 |
| ended |
当播放结束后停止播放时触发。 |
| waiting |
在等待加载下一帧时触发。 |
演示audio对象中常用方法、属性和事件的具体应用案例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript操作audio对象</title>
</head>
<script>
//页面加载完毕后执行
window.οnlοad=function(){
//通过标签名获取button按钮
document.getElementsByTagName("button")[0].οnclick= function(){
//通过标签名获取audio对象
document.getElementsByTagName("audio")[0].load();
document.getElementsByTagName("audio")[0].play();
}
}
</script>
<body>
<audio src="audio/demo6-5/music.mp3"></audio>
<button>播放音乐</button>
</body>
</html>
（4）深入理解audio和video对象
其实<audio>标签和<video>有很大的相似性，Audio对象和Video对象的DOM操作功能都是由HTMLMediaElement对象统一定义的核心功能，Audio对象指的是HTMLAudioElement对象，它完全继承了HTMLMediaElement对象提供的功能，而Video对象指的是HTMLVideoElement对象，在该对象中提供了额外的功能，主要表现在一些额外的属性上，如下表所示。
| 属性 |
描述 |
| poster |
获取或设置poster属性值。 |
| videoHeight |
获取视频的原始高度。 |
| videoWidth |
获取视频的原始宽度。 |
| height |
设置或返回视频的高度值。 |
| width |
设置或返回视频的宽度值。 |
5.7 响应式web设计
1、基础概念
响应式Web设计中有几个非常重要的概念必须掌握，它们也是响应式设计的关键技术。
（1）视口
视口在响应式设计中是一个非常重要的概念。视口这一概念是针对移动端浏览器的，分为两种视口，一种是可见视口即设备大小，另一种是视窗视口即网页宽度。
比如，设备屏幕是414像素的宽度，在浏览器中，414像素的屏幕宽度能够展示1200像素宽度的内容。那么414像素就是可见视口的宽度，而1200像素就是视窗视口的宽度。
HTML5中，<meta>标签可以用于配置视口属性。
<meta name="viewport" content="user-scalable=no, width=device-width,initial-scale=1.0,maximum-scale=1.0">
其中，user-scalable用于设置用户是否可以缩放，默认为yes。
width=device-width，用于设置视窗视口的宽度，这里表示与可见视口宽度相同。
initial-scale=1.0，用于设置初始缩放比例，取值为0~10.0。
maximum-scale=1.0，用于设置最大缩放比例，取值为0~10.0。
除此之外，还可以用height属性设置视窗视口的高度，minimum-scale设置最小缩放比例。
（2）媒体查询
在CSS3规范中，媒体查询可以根据视口宽度、设备方向等差异来改变页面的显示方式。能够在相同的样式表中，使用不同的样式规则来针对不同的媒介。媒体查询由媒体类型和条件表达式组成，语法如下：
@media screen and (max-width: 960px) {
/*样式设置*/
}
它表示媒体类型为screen并且屏幕宽度小于等于960px时的样式。内容可以被显示在显示器、纸媒介或者听觉浏览器等媒体类型上。
媒体查询案例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width,initial-scale=1.0, maximum-scale=1.0">
<title>媒体查询</title>
<style type="text/css">
body {
background-color: red;
}
@media (min-width: 320px){
body {
background-color: blue;
}
}
@media (min-width: 414px){
body {
background-color: yellow;
}
}
@media (min-width: 768px){
body {
background-color: grey;
}
}
@media (min-width: 960px){
body {
background-color: pink;
}
}
</style>
</head>
<body>
</body>
</html>
2、响应式设计
在了解了HTML5为响应式Web设计提供的技术手段后，我们再来学习如何使页面内容也能随页面视口的变化而改变的方式。最常见的响应式Web设计方式有3种，即百分比布局、栅格系统和弹性盒布局。
（1）百分比布局
由于媒体查询只能针对某几个特定阶段的视口，在捕捉到下一个视口前，页面的布局是不会变化的，这样会影响页面的显示，同时也无法兼容日益增多的各种设备。所以，想要做出真正灵活的页面，还需要用百分比布局代替固定布局，并且使用媒体查询限制范围。
其实，固定布局（以像素为单位）可以换算为百分比宽度，来实现百分比布局。
换算公式为：目标元素宽度/父盒子宽度=百分数宽度
比如，当父盒子的宽度为600px时，
aside{width:300px;} → aside{width:50%;}
百分比布局的案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>固定布局转换为百分比布局</title>
<style type="text/css">
body>*{
width:980px; height:auto; margin:0 auto; margin-top:10px;
border:1px solid #000; padding:5px;}
header{ height:50px;}
section{ height:300px;}
footer{ height:30px;}
section>*{ height:100%; border:1px solid #000; float:left;}
aside{ width:250px;}
article{ width:700px; margin-left:10px;}
</style>
</head>
<body>
<header>头</header>
<nav>导航</nav>
<section>
<aside>侧边栏</aside>
<article>文章</article>
</section>
<footer>页脚</footer>
</body>
</html>
（2）栅格系统
在网页制作中，栅格系统（又称网格系统）就是用固定的格子进行网页布局，是一种清晰、工整的设计风格。
栅格系统最早是应用于印刷媒体上，后来被应用于网页布局中，而随着响应式设计的流行，栅格系统开始被赋予了新的意义。
使用栅格系统进行布局可以让网页布局适应不同设备,如下图所示。
栅格系统布局案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width,initial-scale=1.0, maximum-scale=1.0">
<title>栅格系统布局</title>
</head>
<style type="text/css">
.row{
width: 100%;
}
/*伪元素:after的一个很重要的用法--清除浮动*/
.row :after{
clear: left;/*清除左浮动*/
content: '';
display: table;/*该元素会作为块级表格来显示*/
}
/*CSS3新增[attribute^=value] 选择器，用于匹配属性值以指定值开头的每个元素。*/
[class^="col"]{
float: left;
background-color: #e0e0e0;
}
.col1{
width: 25%;
}
.col2{
width: 50%;
}
@media (max-width: 768px) {
.row{
width: 100%;
}
[class^="col"]{
float: none;
width:100%;
}
}
</style>
<body>
<div class="row">
<header>页头</header>
</div>
<div class="row">
<nav class="col1">导航</nav>
<div class="col2">主要内容</div>
<aside class="col1">侧边栏</aside>
</div>
<div class="row">
<footer>页尾</footer>
</div>
</body>
</html>
（3）弹性盒布局
说到响应式，就不得不提CSS3中的弹性盒布局了，它可以轻松的创建响应式网页布局，为盒状模型增加灵活性。
弹性盒由容器、子元素和轴组成，如下图所示。
弹性盒改进了块模型，既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距，是一种非常灵活的布局方法。
display是一个关键属性，用于指定弹性盒的容器，其值可以为flex；如果为行内元素，值为inline-flex。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒属性</title>
</head>
<style type="text/css">
.box {
min-height: 200px;
display: flex;/*指定弹性盒的容器*/
/*
flex-direction: row|row-reverse|column|column-reverse;
flex-wrap: nowrap|wrap|wrap-reverse;
*/
flex-flow: row-reverse;/*弹性子元素按横轴方向顺序排列*/
justify-content: center;/*弹性子元素向行中间位置对齐*/
align-items: flex-end;/*弹性子元素向垂直于轴的方向上的中间位置对齐*/
background-color: gray;
}
.A,.B,.C {
background-color: white;
border:1px solid gray;
}
.box div.A {
order: 1;/*order设置该子元素出现的顺序*/
flex-grow: 0;/*扩展比率*/
flex-shrink: 1;/*收缩比率*/
flex-basis: auto;/*宽度，像素值*/
align-self: center;/*该子元素在该行的纵轴上居中放置。*/
}
.box div.B {
order: 2;
flex: 0 1 auto;/*扩展比0、收缩比1和宽度居中的缩写形式*/
align-self: stretch;
}
.box div.C {
order: 3;
flex: 0 1 auto;
align-self: center;
}
</style>
<body>
<div class="box">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
</div>
</body>
</html>
flex-flow是属性flex-direction 和flex-wrap 的简写，用于排列弹性子元素。
flex-direction的取值如下表所示：
| 取值 |
描述 |
| row |
弹性盒子元素按横轴方向顺序排列（从左往右），默认值。 |
| row-reverse |
弹性盒子元素按横轴方向逆序排列。 |
| column |
弹性盒子元素按纵轴方向顺序排列（自顶向下）。 |
| column-reverse |
弹性盒子元素按纵轴方向逆序排列。 |
flex-wrap的取值如下表所示：
| 取值 |
描述 |
| nowrap |
flex容器为单行，该情况下flex子项可能会溢出容器。 |
| wrap |
flex容器为多行，flex子项溢出的部分会被放置到新行。 |
| wrap-reverse |
反转 wrap 排列。 |
justify-content属性设置子元素如何在当前轴（横轴）方向的对齐方式，其取值如下表所示。
| 取值 |
描述 |
| flex-start |
弹性盒子元素将向行起始位置对齐。 |
| flex-end |
弹性盒子元素将向行结束位置对齐。 |
| center |
弹性盒子元素将向行中间位置对齐。 |
| space-between |
两端对齐，弹性盒子元素间空间相等。 |
| space-around |
两端对齐，弹性盒子元素四周空间相等。 |
align-items属性用于设置子元素在垂直于轴（纵轴）的方向上的对齐，其取值如下表所示。
| 取值 |
描述 |
| flex-start |
弹性盒子元素向垂直于轴的方向上的起始位置对齐（顶对齐）。 |
| flex-end |
弹性盒子元素向垂直于轴的方向上的结束位置对齐（底对齐）。 |
| center |
弹性盒子元素向垂直于轴的方向上的中间位置对齐（垂直居中对齐）。 |
| baseline |
弹性盒子元素的第一行文字的基线对齐。 |
| stretch |
如果弹性盒子元素未设置高度或设为auto，将占满整个容器的高度。 |
order属性用于设置子元素出现的顺序。
flex属性是flex-grow（扩展比率），flex-shrink（收缩比率）和flex-basis（宽度，像素值）的缩写，能够设置子元素的伸缩性。
align-self属性能够覆盖容器中的align-items属性，用于设置单独的子元素如何沿着纵轴排列。
其取值有auto|flex-start|flex-end|center|baseline|stretch，每个值的意义与align-items属性的取值类似。
在使用弹性盒布局时，以下属性不起作用：
①弹性容器的每一个子元素变为一个弹性子元素，弹性容器直接包含的文本变为匿名的弹性子元素。
②第2单元中，多列布局中的column-*属性对弹性子元素无效。
③第1单元中，float和clear 对弹性子元素无效。使用float 会导致display 属性计算为block。
④vertical-align属性对弹性子元素的对齐无效。
弹性盒布局案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>弹性盒布局</title>
<style>
body {
font: 24px Helvetica;
background: #fff;
}
.main {
min-height: 500px;
margin: 0px;
padding: 0px;
display: flex;/*设置该div为一个弹性盒容器*/
flex-flow: row;/*子元素按横轴方向顺序排列*/
}
.main > article {
margin: 4px;
padding: 5px;
border-radius:7pt;/*pt也是文字大小的单位，1pt=1px*3/4 */
background: #719DCA;
flex:3;/*数字也可达到分配宽度的效果，将容器分为5份，占3份*/
order:2;/*排序为第2个子元素*/
}
.main > nav {
margin: 4px;
padding: 5px;
border-radius: 7pt;
background: #FFBA41;
flex: 1 ;/*将容器分为5份，占1份*/
order: 1;/*排序为第1个子元素*/
}
.main > aside {
margin: 4px;
padding: 5px;
border-radius: 7pt;
background: #FFBA41;
flex: 1 ;/*将容器分为5份，占1份*/
order: 3;/*排序为第3个子元素*/
}
header, footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 2px solid #FFBA41;
border-radius: 7pt;
background: #FFF;
}
@media all and (max-width: 640px) {/*当屏幕小于640px时*/
.main {
flex-flow: column; /*弹性盒中的子元素按纵轴方向排列*/
}
.main > article, .main > nav, .main > aside {
order:0; /*将子元素都设置成同一个值，指按自然顺序排列*/
}
.main > nav, .main > aside, header, footer {
min-height: 50px;
max-height: 50px;
}
}
</style>
</head>
<body>
<header>header</header>
<div class="main">
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>footer</footer>
5.8 Bootstrap前端工具
1、Bootstrap简介
Bootstrap是由Twitter（著名的社交网站）推出的前端开源工具包，它基于HTML、CSS、JavaScript等前端技术，2011年8月在GitHub上发布，一经推出颇受欢迎。
Bootstrap中预定义了一套CSS样式，和与样式对应的jQuery（jQuery是一个快速、小巧、功能丰富的JavaScript库）代码，应用时我们只需提供固定的HTML结构，添加Bootstrap中提供的class名称，就可以完成指定效果的实现。
Bootstrap包中包含内容：
（1）基本结构：Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。
（2）CSS：Bootstrap自带全局的CSS设置、定义基本的HTML元素样式、可扩展的class，以及一个先进的栅格系统。将在Bootstrap CSS部分详细讲解。
（3）布局组件：Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
（4）JavaScript插件：Bootstrap包含了十几个自定义的jQuery插件。可以直接包含所有的插件，也可以逐个包含这些插件。
（5）定制：开发人员可以定制Bootstrap的组件、LESS变量和jQuery插件来得到一套自定义的版本。
Bootstrap的优势：
（1）移动设备优先：自Bootstrap3起移动设备优先的样式贯穿整个库。
（2）浏览器支持：主流浏览器都支持Bootstrap，包括IE、Firefox、chrome、Safari等。
（3）容易上手：要学习Bootstrap，只需读者具备HTML和CSS基础知识。
（4）响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机的屏幕大小。
（5）良好的代码规范：为开发人员创建接口提供了一个简洁统一的解决方案，减少了测试工作量。使开发人员站在巨人的肩膀上，不重复造轮子。
（6）组件：Bootstrap包含了功能强大的内置组件。
（7）定制：Bootstrap还提供了基于Web的定制。
Bootstrap下载和环境安装：
（1）下载
首先打开浏览器，访问Bootstrap官方网站“Bootstrap · The most popular HTML, CSS, and JS library in the world.”来下载Bootstrap的最新版本。
下载成功后，解压缩ZIP文件，将看到下面的文件和目录结构，如下所示：
这些预编译文件可以直接应用到Web项目中，其中map文件只有在自定义高级开发时会应用到，在实际开发中通常的做法是，整体进行拷贝，所以该部分作为了解即可。
（2）环境安装
以下是使用Botstrap的标准模板。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap模板</title>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0"> //这2个meta标签须放在最前面，其他内容须跟随其后。
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="border:1px solid #000000; height:100px;">.container</div>
<!--整个宽度-->
<div class="container-fluid" style="border:1px solid #000000; height:100px;">.container-fluid</div>
//js文件在需要时必须放在body的最后面引入，否则可能出错！
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
在使用模板时，要特别注意引入文件的存放路径。
（3）布局容器
使用Bootstrap时需要为页面内容和栅格系统包裹一个.container布局容器。
Bootstrap包中提供了两个容器类，.container类和.container-fluid类。
.container类用于固定宽度并支持响应式布局的容器，用法如下：
<div class="container">
...
</div>
.container-fluid类用于设置100%宽度，占据全部视口(viewport)的容器，用法如下：
<div class="container-fluid">
...
</div>
注意：由于padding 等属性的原因，这两种容器类不能互相嵌套。
布局容器案例见（2）中案例。
（4）导航栏（navbar）
Bootstrap导航栏是在应用或网站中作为导航页头的响应式基础组件。
Bootstrap中默认样式的导航条在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。
缩小浏览器窗口后，菜单均被隐藏，代替出现的是一个汉堡按钮。
单击“汉堡按钮”，显示被隐藏菜单的下拉列表。
使用Bootstrap制作基础导航栏主要分为以下步骤：
①添加一个容器<nav>或<div>标签，使用.navbar类和.navbar-default类，并且添加role="navigation"，增加可访问性。
②向<div>标签添加一个标题使用.navbar-header类，内部包含带有.navbar-brand类的<a>标签，用于定义品牌图标，如果是文字视觉上会稍大些。
③为了向导航栏添加链接，只需要简单地添加带有.nav类、.navbar-nav类的无序列表即可。
具体案例如下：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap基础导航栏</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!--这里可以定义品牌图标-->
<div class="navbar-header">
<a class="navbar-brand " id="nav-brand-itheima" href="#" >网站首页
</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</nav>
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
实现响应式
基础导航栏只能适应大屏幕的浏览器，当浏览器窗口缩小到一定程度时，菜单将被折叠。
①实现菜单的折叠和隐藏，把小屏幕时需要折叠的内容包裹在一个<div>标签内，并且为这个<div>标签使用.collapse、.navbar-collapse两个类，最后为这个div添加一个id。
②添加在小屏幕时，要显示的汉堡按钮的固定写法：
<button class="navbar-toggle" type="button" data-toggle="collapse">
<span class="sr-only">ToggleNavigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
将上述案例的body部分改为以下代码，即可完成菜单隐藏：
<body>
<nav class="navbar navbar-default" role="navigation">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded= "false">
<span class="sr-only">汉堡按钮</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--这里可以定义品牌图标-->
<div class="navbar-header">
<a class="navbar-brand " id="nav-brand-itheima" href="#" >网站首页
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
</nav>
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Bootstrap提供的是基础的CSS样式，如果想自定义样式，有两种方式：
①最直接的方式是查找Bootstrap源码样式,用CSS覆盖掉这些默认样式。具体可以通过查看针对Bootstrap中使用的demo使用哪些类名控制我们要修改的样式，然后使用该类名并且编写自己的样式来实现覆盖。
②使用!important提高代码优先级。
例如修改导航条的默认背景色可以通过为.navbar-default类添加样式来实现，在上例中的<head>部分添加如下代码即可：
<style>
.navbar-default{
background-color: pink; }
</style>
至此，对Bootstrap有了初步的认识，是否发现有些问题，请思考一下原因。
2、重要控件
（1）表单
几乎所有的网站中都涉及到表单的应用，接下来介绍如何使用Bootstrap创建表单。
Bootstrap通过一些简单的HTML标签和扩展的类即可创建出不同样式的表单，按照布局的不同，主要分为三类：垂直表单（默认）、内联表单和水平表单。
垂直表单也称为基本表单，使用Bootstrap制作基本表单主要分为以下步骤：
①向父<form>标签添加role="form"。
②把标签和控件放在一个类名为form-group的<div>中，获取最佳间距。
③向所有文本标签<input>、<textarea>和<select>添加.form-control类。
在案例页面<body>中添加代码片段如下：
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name"
placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">记住我
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
Bootstrap创建内联表单，只需要在垂直表单的基础上，为<form>标签添加类.form-inline。例如：
<form role="form" class="form-inline">
水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。创建水平布局的表单的步骤具体如下所示：
①向父<form>标签添加类.form-horizontal，改变.form-group的行为，并使用Bootstrap预置的栅格class将label和控件组水平并排布局。
②把标签和控件放在一个带有.form-group类的<div>中。
③向标签添加.control-label类。
在案例页面<body>中添加代码片段如下：
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
在实际开发中有时需要改变表单的默认尺寸和样式，可以通过如下方式来改变表单控件的尺寸和样式：
①使用.input-lg和.input-sm为控件设置高度。
②通过.col-lg-*为控件设置宽度。
③通过覆盖.form-control的样式来改变控件的样式。
案例代码片段如下：
<style>
.form-control{
background: pink;
}
</style>
<body>
<form class="form-horizontal" role="form">
<input class="form-control input-lg"type="text"placeholder=".input-lg">
<input class="form-control" type="text"placeholder="Defaultinput">
<div class="col-lg-3">
<input class="form-control input-lg" type="text" placeholder="input-lg col-lg-3"></p>
</div>
<input class="form-control input-sm" type="text" placeholder="input-sm"></p>
</form>
</body>
（2）按钮
Bootstrap提供了一些类来定义按钮的样式，支持<a>、<button>和<input>标签，具体如下表所示。
| 类 |
描述 |
| .btn |
为按钮添加基本样式。 |
| .btn-default |
默认/标准按钮。 |
| .btn-primary |
原始按钮样式（未被操作）。 |
| .btn-success |
表示成功的动作。 |
| .btn-info |
该样式可用于要弹出信息的按钮。 |
| .btn-warning |
表示需要谨慎操作的按钮。 |
| .btn-danger |
表示一个危险动作的按钮操作。 |
| .btn-link |
让按钮看起来像个链接 (仍然保留按钮行为)。 |
| .btn-lg |
制作一个大按钮。 |
| .btn-sm |
制作一个小按钮。 |
| .btn-xs |
制作一个超小按钮。 |
| .btn-block |
块级按钮(拉伸至父元素100%的宽度)。 |
| .active |
按钮被点击。 |
| .disabled |
禁用按钮。 |
不同样式按钮的应用案例代码片段：
<body>
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>
</body>
Bootstrap中提供了一些类用于控制按钮的大小，如下表所示。
| 类 |
描述 |
| .btn-lg |
大按钮。 |
| .btn-sm |
小按钮。 |
| .btn-xs |
超小按钮。 |
| .btn-block |
创建块级的按钮，会横跨父元素的全部宽度。 |
3、栅格系统
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，和强大的mixin用于生成更具语义的布局。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，开发者可以将内容放入这些创建好的布局中。其工作原理如下：
①“行”必须包含在布局容器.container类或.container-fluid类中，以便为其赋予合适的排列（aligment）和内补（padding）。
②通过行（row）在水平方向创建一组列（column），并且只有列（column）可以作为行（row）的直接子元素。
③行使用的样式.row，列使用样式col-*-*，我们的内容应当放置于列（column）内，列大于12时，将另起一行排列。
④Bootstrap栅格系统为不同屏幕宽度定义了不同的类。
Bootstrap3使用了4种栅格选项来形成栅格系统，栅格选项的类前缀的取值分别是col-xs、col-sm、col-md、col-lg，其中，lg是large（大）的缩写，md是mid（中等）的缩写，sm是small（小）的缩写，xs是extrasmall（超小）的缩写。例如使用.col-xs适用于小于768px的超小屏幕。这4种栅格选项的区别在于适合不同尺寸的屏幕设备，可在官网上查看更加具体的介绍。
栅格系统可以让用户在不同尺寸的设备上看见不同的布局效果，演示栅格系统具体应用的案例如下：
<!DOCTYPE html>
<html>
<head>
<title>栅格系统</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style>
div{
border: 1.5px solid #000000;
}
</style>
<br>
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-6">1</div>
<div class="col-md-3 col-xs-6">2</div>
<div class="col-md-3 col-xs-6">3</div>
<div class="col-md-3 col-xs-6">4</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-6">5</div>
<div class="col-md-3 col-xs-6">6</div>
<div class="col-md-3 col-xs-6">7</div>
<div class="col-md-3 col-xs-6">8</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
4、标签页
Bootstrap提供了几种标签页，这里只讲解一下应用比较广泛的胶囊标签页。Bootstrap制作胶囊标签页主要分为以下步骤：
①使用一个完整的标签页分为页头选项卡和内容两部分。
②页头使用<ul>标签，在<ul>中添加.nav和.nav-tabs类，会应用Bootstrap标签页样式；添加.nav和.nav-pills类会应用胶囊标签样式。需要几个标签项就添加几个<li>标签。
③在<li>标签中添加<a>标签，<a>标签的href的值直接跟标签页下面的内容<div>的id关联，十分重要。
④在<a>标签中添加data-toggle="tab"或data-toggle="pill"。页头部分示例代码如下所示。
<ul class="nav nav-tabs">
<li><a href="#identifier" data-toggle="tab">Home</a></li>
...
</ul>
⑤内容部分最外层使用<div>标签添加类.tab-content，然后添加每个标签项对应的<div>标签，这些标签添加类.tab-pane和对应标签项的id值，示例代码如下所示。
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane " id="profile">...</div>
<div class="tab-pane " id="messages">...</div>
</div>
注意：④中代码的红色identifier对应⑤中代码的红色id值home、profile、messages等。
演示最基本的胶囊标签页的案例如下：
<!DOCTYPE html>
<html>
<head>
<title>胶囊标签页</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<br>
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="pill">Home</a></li>
<li role="presentation"><a href="#profile" role="tab" data-toggle="pill">Profile</a></li>
<li role="presentation"><a href="#messages" role="tab" data-toggle="pill">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">我是第一页</div>
<div class="tab-pane" id="profile">我是第二页</div>
<div class="tab-pane" id="messages">我是第三页</div>
</div>
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
5、响应式工具
Bootstrap提供了一套辅助工具类，使用这些工具类可以通过媒体查询结合大型、小型和中型设备，实现内容在设备上的显示和隐藏，目前只适用于块级元素和表格的切换。
| 超小屏幕 手机 (<768px) |
小屏幕 平板 (≥768px) |
中等屏幕 桌面 (≥992px) |
|
| .visible-xs-* |
可见 |
隐藏 |
隐藏 |
| .visible-sm-* |
隐藏 |
可见 |
隐藏 |
| .visible-md-* |
隐藏 |
隐藏 |
可见 |
| .visible-lg-* |
隐藏 |
隐藏 |
隐藏 |
| .hidden-xs |
隐藏 |
可见 |
可见 |
| .hidden-sm |
可见 |
隐藏 |
可见 |
| .hidden-md |
可见 |
可见 |
隐藏 |
| .hidden-lg |
可见 |
可见 |
可见 |
演示案例如下：
<!DOCTYPE html>
<html>
<head>
<title>响应式工具</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
div{
border: 1px solid black;
font-weight: 800;
}
</style>
</head>
<body>
<br>
<div class="container" style="padding: 40px;">
<div class="row visible-on">
<div class="col-xs-6 col-sm-3" >
<span class="hidden-xs">特别小型设备隐藏</span>
<span class="visible-xs">在特小型设备上可见</span>
</div>
<div class="col-xs-6 col-sm-3" >
<span class="hidden-sm">小型设备隐藏</span>
<span class="visible-sm">在小型设备上可见</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" >
<span class="hidden-md">中型设备隐藏</span>
<span class="visible-md">在中型设备上可见</span>
</div>
<div class="col-xs-6 col-sm-3" >
<span class="hidden-lg">大型设备隐藏</span>
<span class="visible-lg">在大型设备上可见</span>
</div>
</div>
</div>
</body>
</html>
6、轮播插件
Bootstrap轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。轮播的内容可以是图像、内嵌框架、视频或者其他想要放置的任何类型的内容，使用该插件时必须引入bootstrap.js或压缩版的bootstrap.min.js。
轮播图的实现主要由三个部分构成：轮播的图片、轮播图片的计数器、轮播图片的控制器。
（1）设计轮播容器
使用.carousel类设计轮播图片的容器，并为该容器添加id，方便后面的使用，示例代码如下所示。
<div id="slidershow">
...
</div>
（2）设计轮播计数器
在轮播容器div.carousel的内部添加轮播计算器.carousel-indicators类，其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li)，一般采用有序列表来制作，该内容放在轮播容器内，示例代码如下所示。
<!--设置图片轮播的顺序-->
<ol class="carousel-indicators">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li><
</ol>
（3）设计轮播图片控制器
在Carousel中通过.carousel-control类配合left和right来实现轮播控制器。其中left表示向前播放，right表示向后播放。该内容同样放在carousel轮播容器内，示例代码如下所示。
<!--设置轮播图片控制器-->
<a class="left carousel-control" href="" >
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
（4）添加图片描述
Bootstrap中可以使用<div>标签添加.carousel-caption类为图片添加描述信息，这部分内容只需要在div.item中图片底部添加对应的代码，示例代码如下所示。
<!--图片对应标题和描述内容-->
<div class="carousel-caption">
<h3>图片标题</h3>
<p>描述内容...</p>
</div>
（5）声明式触发轮播
声明式方法是通过定义 data属性来实现，data 属性可以很容易地控制轮播的位置。主要包括以下几种：
①data-ride属性：取值carousel，并且将其定义在carousel上。
②data-target属性：取值carousel定义的ID名或者其他样式识别符，如前面示例所示，取值为“#slidershow”，并且将其定义在轮播图计数器的每个<li>标签上。
③data-slide属性：取值有两个，prev表示向后滚动，next表示向前滚动。该属性值同样定义在轮播图控制器的a链接上，同时设置控制器href值为容器 carousel的id名或其他样式识别符。
④data-slide-to属性：用来传递某个帧的下标，比如data-slide-to="2"，可以直接跳转到这个指定的帧（下标从0开始计），同样定义在轮播图计数器的每个<li>标签上。
完整的图片轮播实现演示案例如下：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap轮播插件</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="slidershow" class="carousel slide" data-ride="carousel">
<!-- 设置图片轮播计数器 -->
<ol class="carousel-indicators">
<li class="active" data-target="#slidershow" data-slide-to="0"></li>
<li data-target="#slidershow" data-slide-to="1"></li>
<li data-target="#slidershow" data-slide-to="2"></li>
</ol>
<!-- 设置轮播图片 -->
<div class="carousel-inner">
<div class="item active">
<a href="#">
<img src="images/carousel1.jpg" style=" height:400px;margin:0 auto;">
</a>
<div class="carousel-caption">
<h3>图片标题1</h3>
<p>描述内容1...</p>
</div>
</div>
<div class="item">
<a href="#">
<img src="images/carousel2.jpg" style="height:400px;margin:0 auto;">
</a>
<div class="carousel-caption">
<h3>图片标题2</h3>
<p>描述内容2...</p>
</div>
</div>
<div class="item">
<a href="#">
<img src="images/carousel3.jpg" style=" height:400px;margin:0 auto;"></a>
<div class="carousel-caption">
<h3>图片标题3</h3>
<p>描述内容3...</p>
</div>
</div>
</div>
<!-- 设置轮播图片控制器 -->
<a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<footer class="footer navbar-fixed-bottom ">
<div class="container"> </div>
</footer>
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
</body>
</html>