整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

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

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

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

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

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

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

          源碼:

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

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

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

          <script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

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

          <a>哈哈</a>

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

          沒有 再起一行

          3. HTML <div>元素

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

          4.HTML<span>元素

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

          例子:

          代碼:

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="UTF-8">

          <!-- 塊-->

          <title>塊元素</title>

          <style type = text/css>

          span{

          color: aqua;

          }

          </style>

          </head>

          <body>

          <p>大家好!</p>

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

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

          <a>哈哈</a>

          <div>

          <p>

          極客學院

          </p>

          </div>

          <div>

          <p>

          <span>

          這是一個測試結果

          </span>

          span 是一個什么樣子

          </p>

          </div>

          </body>

          </html>

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

          DIV布局:

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="UTF-8">

          <title>div布局</title>

          <style type = "text/css">

          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 id = "container" >

          <div id="heading">頭部</div>

          <div id=" content_menu">內容菜單</div>

          <div id="content_body">內容主題</div>

          <div id="footing">底部</div>

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

          <meta charset="UTF-8">

          <title>table布局</title>

          </head>

          <body marginheight="0px" marginwidth="0px">

          <table width="100%" height = "950px" style="background-color: lightgray">

          <tr>

          <td colspan="3" width="100%" height="10%" style="background-color: aqua">這是頭部</td>

          </tr>

          <tr>

          <td width="30%" height="80%"style="background-color: blue">

          <ul>

          <li>iOS</li>

          <li>HTML5</li>

          <li>swift</li>

          </ul>

          </td>

          <td width="60%" height="80%" style="background-color: blueviolet">主題內容</td>

          <td width="20%" height="80%" style="background-color: deeppink">右菜單</td>

          </tr>

          <tr>

          <td width="100%" height="10%" colspan="3" style="background-color: darkcyan">這是底部</td>

          </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)。

          • 小寫風格看起來更加清爽。

          • 小寫字母容易編寫。

          不推薦:

          <SECTION>

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

          </SECTION>

          非常糟糕:

          <Section>

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

          </SECTION>

          推薦:

          <section>

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

          </section>

          關閉所有 HTML 元素

          在 HTML5 中, 你不一定要關閉所有元素 (例如 <p> 元素),但我們建議每個元素都要添加關閉標簽。

          不推薦:

          <section>

          <p>這是一個段落。

          <p>這是一個段落。

          </section>

          推薦:

          <section>

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

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

          </section>

          關閉空的 HTML 元素

          在 HTML5 中, 空的 HTML 元素也不一定要關閉:

          我們可以這么寫:

          <meta charset="utf-8">

          也可以這么寫:

          <meta charset="utf-8" />

          在 XHTML 和 XML 中斜線 (/) 是必須的。

          如果你期望 XML 軟件使用你的頁面,使用這種風格是非常好的。

          使用小寫屬性名

          HTML5 屬性名允許使用大寫和小寫字母。

          我們推薦使用小寫字母屬性名:

          • 同時使用大小寫是非常不好的習慣。

          • 開發人員通常使用小寫 (類似 XHTML)。

          • 小寫風格看起來更加清爽。

          • 小寫字母容易編寫。

          不推薦:

          <div CLASS="menu">

          推薦:

          <div class="menu">

          屬性值

          HTML5 屬性值可以不用引號。

          屬性值我們推薦使用引號:

          • 如果屬性值含有空格需要使用引號。

          • 混合風格不推薦的,建議統一風格。

          • 屬性值使用引號易于閱讀。

          以下實例屬性值包含空格,沒有使用引號,所以不能起作用:

          <table class=table striped>

          以下使用了雙引號,是正確的:

          <table class="table striped">

          圖片屬性

          圖片通常使用 alt 屬性。 在圖片不能顯示時,它能替代圖片顯示。

          <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

          定義好圖片的尺寸,在加載時可以預留指定空間,減少閃爍。

          <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

          空格和等號

          等號前后可以使用空格。

          <link rel = "stylesheet" href = "styles.css">

          但我們推薦少用空格:

          <link rel="stylesheet" href="styles.css">

          避免一行代碼過長

          使用 HTML 編輯器,左右滾動代碼是不方便的。

          每行代碼盡量少于 80 個字符。

          空行和縮進

          不要無緣無故添加空行。

          為每個邏輯功能塊添加空行,這樣更易于閱讀。

          縮進使用兩個空格,不建議使用 TAB。

          比較短的代碼間不要使用不必要的空行和縮進。

          不必要的空行和縮進:

          <body>

          <h1>菜鳥教程</h1>

          <h2>HTML</h2>

          <p>

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

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

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

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

          </p>

          </body>

          推薦:

          <body>

          <h1>菜鳥教程</h1>

          <h2></h2>

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

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

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

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

          </body>

          表格實例:

          <table>

          <tr>

          <th>Name</th>

          <th>Description</th>

          </tr>

          <tr>

          <td>A</td>

          <td>Description of A</td>

          </tr>

          <tr>

          <td>B</td>

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

          <title>頁面標題</title>

          </head>

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

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

          嘗試一下 ?

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

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

          <!DOCTYPE html>

          <html lang="zh">

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

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

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

          省略 <head>?

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

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

          實例

          <!DOCTYPE html>

          <html>

          <title>頁面標題</title>

          <body>

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

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

          </body>

          </html>

          嘗試一下 ?

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

          元數據

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

          <title>菜鳥教程</title>

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

          <!DOCTYPE html>

          <html lang="zh">

          <head>

          <meta charset="UTF-8">

          <title>菜鳥教程</title>

          </head>

          HTML 注釋

          注釋可以寫在 <!-- 和 --> 中:

          <!-- 這是注釋 -->

          比較長的評論可以在 <!-- 和 --> 中分行寫:

          <!--

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

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

          -->

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

          樣式表

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

          <link rel="stylesheet" href="styles.css">

          短的規則可以寫成一行:

          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 屬性不是必須的 ):

          <script src="myscript.js">

          使用 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,我們一起飛!


          主站蜘蛛池模板: 久久精品一区二区国产| 人妻无码一区二区三区免费| 精品少妇人妻AV一区二区三区| 亚洲福利视频一区| 国产午夜一区二区在线观看| 亚洲A∨精品一区二区三区下载| 高清无码一区二区在线观看吞精 | 中文字幕AV一区二区三区人妻少妇| 亚洲视频一区在线播放| 日韩精品一区二区午夜成人版| 看电影来5566一区.二区| 人妻体内射精一区二区三区 | 久久国产香蕉一区精品| 无码人妻精品一区二区蜜桃百度 | 麻豆国产在线不卡一区二区| 日本一区二区三区在线观看视频| 午夜无码一区二区三区在线观看 | 精品亚洲综合在线第一区| 3d动漫精品一区视频在线观看| 一区二区不卡视频在线观看| 一区二区三区视频| 亚洲av成人一区二区三区在线播放| 伊人久久大香线蕉av一区| 精品乱子伦一区二区三区高清免费播放| 99精品一区二区三区无码吞精 | 国产一区二区三区小说| 精品国产aⅴ无码一区二区| 无码国产精成人午夜视频一区二区| 国产一区二区三区在线视頻 | 久久国产一区二区| 中文字幕日韩一区| 亚洲Av永久无码精品一区二区| 久久久久久人妻一区二区三区 | 精品国产AV一区二区三区| 麻豆天美国产一区在线播放| 国产大秀视频在线一区二区| 另类国产精品一区二区| 国产伦精品一区二区三区视频猫咪| 一区二区三区电影在线观看| 亚洲国产一区二区a毛片| 夜精品a一区二区三区|