一個HTML5動畫，布局只要一行代碼，你還真別不信

要源碼請評論后加前端學習群470593776

課題：HTML5炫酷雪花飄落動態網頁背景

特點：無任何js痕跡，純css3動畫，需要熟練掌握html5新特性。

對于細節和兼容性的處理要到位，代碼量很少，布局僅需一行代碼，一個DIV

可以作為一個網頁的背景圖！

源碼：

PS：因為代碼不方便閱讀以及復制，所以只發部分源碼思路

完整的免費源碼及思路講解，請評論后加前端學習交流群470593776獲取！

需要源碼請評論后加前端學習群470593776

【H5教程-2.3.3小節】

2.3.3HTML5列表、塊和布局

1.塊元素

塊元素在顯示的時候，通常會以新行開始

　　如：<h1> <p> <ul>

<!-- 塊—>注釋

<p>hello</p>

<h1>world</h1>

出來的結果是:

hello

空一行

world

hello 和world 之間有新的一行

2.HTML內聯元素

內聯元素通常不會以新行開始如<b> <a> <img>

<b>這是一個加重標簽</b>

結果是　　這是一個加重標簽哈哈

沒有再起一行

3. HTML <div>元素

<div>元素也被稱為塊元素，其主要是組合HTML元素的容器

4.HTML<span>元素

<span>元素是內聯元素，可作為文本的容器.

例子：

代碼：

<!DOCTYPE html>

<html>

<head>

span{

color: aqua;

}

</style>

</head>

<body>

<h1>的第三款了你的扣籃考慮到那看的扣籃了卡單身快樂你登陸看兩三款單你卡上</h1>

<b>這是一個加重標簽</b>

<div>

<p>

極客學院

</p>

</div>

<div>

<p>

<span>

這是一個測試結果

</span>

span 是一個什么樣子

</p>

</div>

</body>

</html>

5.DIV元素布局和 table元素布局

DIV布局：

<!DOCTYPE html>

<html>

<head>

<title>div布局</title>

body{

margin: 0px;

}

#container{

width: 100%;

height: 950px;

background-color: lightgray;

}

#heading{

width: 100%;

height: 10%;

background-color: aqua ;

}

#content_menu{

width: 30%;

height: 80%;

background-color: aquamarine;

float: left;

}

#content_body{

width: 70%;

height: 80%;

background-color: blueviolet;

float: left;

}

#footing{

width: 100%;

height: 10%;

background-color: black;

clear: both;

}

</style>

</head>

<body>

</div>

</body>

</html>

其中：

在html中常用于布局、定位、區分。DIV是層疊樣式表中的定位技術，全稱DIVision，即為劃分。有時可以稱其為圖層。

個人感覺像OC里面的View。

在上面 container 為最外層的View 相當于OC一個ViewController的View，id = "container" 個人CO理解的是這塊View 的name 叫 container，

<div id="heading">頭部</div> 理解的是一塊叫heading的view 里面加了一個label ， label的內容顯示的是頭部，#footing{

width: 100%;

height: 10%;

background-color: black;

clear: both;

}

這塊代碼的OC理解就是拿到footing的地址，對這塊View做布局和顏色等等的操作。

# 就相當于 OC 里面的 *

footing 就相當于下面的 view（地址名字）UIView *view = [UIView new];

CGRect frame = controller.view.bounds;

frame.size.width = controller.view.frame.size.widthframe.size.height = controller.view.frame.size.height * 0.1

view.backGroundColor = [UIColor blackColor];

得在body 使用DIV標簽（標簽里面聲明 view），在head 里面設置 DIV標簽的一些屬性.

瀏覽器的結果是：去掉黑色上面那一欄就把2個圖片綜合一下

table布局：

<!DOCTYPE html>

<html>

<head>

<title>table布局</title>

</head>

<tr>

</tr>

<tr>

<ul>

<li>swift</li>

</ul>

</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

<body>里面給一個table

<table width="100%" height = "950px" style="background-color: lightgray"> 設置tale 的寬和高 PX就像素100%就是全屏的寬度 * 1

<tr>是表格的一行,放在table或者body標簽里面的

<td> 標簽定義 HTML 表格中的標準單元格。td 元素中的文本一般顯示為正常字體且左對齊。

HTML 表格有兩類單元格：

表頭單元 - 包含頭部信息（由 th 元素創建）
標準單元 - 包含數據（由 td 元素創建）

TML 代碼約定

很多 Web 開發人員對 HTML 的代碼規范知之甚少。

在2000年至2010年，許多Web開發人員從 HTML 轉換到 XHTML。

使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規范。

而針對于 HTML5 ，我們應該形成比較好的代碼規范，以下提供了幾種規范的建議。

使用正確的文檔類型

文檔類型聲明位于HTML文檔的第一行：

<!DOCTYPE html>

如果你想跟其他標簽一樣使用小寫，可以使用以下代碼：

<!doctype html>

使用小寫元素名

HTML5 元素名可以使用大寫和小寫字母。

推薦使用小寫字母：

混合了大小寫的風格是非常糟糕的。
開發人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。

不推薦:

<p>這是一個段落。</p>

</SECTION>

非常糟糕:

<p>這是一個段落。</p>

</SECTION>

推薦:

<body>

<p>菜鳥教程，學的不僅是技術，更是夢想。

菜鳥教程，學的不僅是技術，更是夢想。

菜鳥教程，學的不僅是技術，更是夢想。</p>

</body>

表格實例:

<table>

<tr>

<th>Description</th>

</tr>

<tr>

<td>Description of A</td>

</tr>

<tr>

<td>Description of B</td>

</tr>

</table>

列表實例:

<ol>

<li>London</li>

<li>Paris</li>

<li>Tokyo</li>

</ol>

省略 <html> 和 <body>?

在標準 HTML5 中， <html> 和 <body> 標簽是可以省略的。

以下 HTML5 文檔是正確的:

實例:

<!DOCTYPE html>

<head>

</head>

<h1>這是一個標題</h1>

<p>這是一個段落。</p>

嘗試一下 ?

不推薦省略 <html> 和 <body> 標簽。

<html> 元素是文檔的根元素，用于描述頁面的語言：

<!DOCTYPE html>

聲明語言是為了方便屏幕閱讀器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。

省略 <body> 在舊版瀏覽器 (IE9)會發生錯誤。

省略 <head>?

在標準 HTML5 中， <head>標簽是可以省略的。

默認情況下，瀏覽器會將 <body> 之前的內容添加到一個默認的 <head> 元素上。

實例

<!DOCTYPE html>

<html>

<body>

<h1>這是一個標題</h1>

<p>這是一個段落。</p>

</body>

</html>

嘗試一下 ?

	現在省略 head 標簽還不推薦使用。

元數據

HTML5 中 <title> 元素是必須的，標題名描述了頁面的主題:

標題和語言可以讓搜索引擎很快了解你頁面的主題:

<!DOCTYPE html>

<head>

</head>

HTML 注釋

注釋可以寫在  中:

比較長的評論可以在  中分行寫：

<!--

這是一個較長評論。這是一個較長評論。這是一個較長評論。

這是一個較長評論這是一個較長評論。這是一個較長評論。

-->

長評論第一個字符縮進兩個空格，更易于閱讀。

樣式表

樣式表使用簡潔的語法格式 ( type 屬性不是必須的):

短的規則可以寫成一行:

p.into {font-family: Verdana; font-size: 16em;}

長的規則可以寫成多行:

body {

background-color: lightgrey;

font-family: "Arial Black", Helvetica, sans-serif;

font-size: 16em;

color: black;

}

將左花括號與選擇器放在同一行。
左花括號與選擇器間添加以空格。
使用兩個空格來縮進。
冒號與屬性值之間添加已空格。
逗號和符號之后使用一個空格。
每個屬性與值結尾都要使用符號。
只有屬性值包含空格時才使用引號。
右花括號放在新的一行。
每行最多 80 個字符。

	在逗號和分號后添加空格是常用的一個規則。

在 HTML 中載入 JavaScript

使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):

使用 JavaScript 訪問 HTML 元素

一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。

以下兩個 JavaScript 語句會輸出不同結果:

實例

var obj = getElementById("Demo")

var obj = getElementById("demo")

HTML 中 JavaScript 盡量使用相同的命名規則。

訪問 JavaScript 代碼規范。

使用小寫文件名

大多 Web 服務器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。

其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

你必須保持統一的風格，我們建議統一使用小寫的文件名。

文件擴展名

HTML 文件后綴可以是 .html (或r .htm)。

CSS 文件后綴是 .css 。

JavaScript 文件后綴是 .js 。

.htm 和 .html 的區別

.htm 和 .html 的擴展名文件本質上是沒有區別的。瀏覽器和 Web 服務器都會把它們當作 HTML 文件來處理。

區別在于：

.htm 應用在早期 DOS 系統，系統現在或者只能有三個字符。

在 Unix 系統中后綴沒有特別限制，一般用 .html。

技術上區別

如果一個 URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務器會返回默認的文件名。通常默認文件名為 index.html, index.htm, default.html, 和 default.htm。

如果服務器只配置了 "index.html" 作為默認文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。

但是，通常服務器可以設置多個默認文件，你可以根據需要設置默認文件嗎。

不管怎樣，HTML 完整的后綴是 ".html"。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：[編程基礎] 常用html標簽使用介紹
下一篇：HTML 表單標簽

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一個HTML5動畫，布局只要一行代碼，你還真別不信

課題：HTML5炫酷雪花飄落動態網頁背景

源碼：

您的項目需求