整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
要源碼請?jiān)u論后加前端學(xué)習(xí)群470593776
特點(diǎn)：無任何js痕跡，純css3動(dòng)畫，需要熟練掌握html5新特性。
對于細(xì)節(jié)和兼容性的處理要到位，代碼量很少，布局僅需一行代碼，一個(gè)DIV
可以作為一個(gè)網(wǎng)頁的背景圖！
PS：因?yàn)榇a不方便閱讀以及復(fù)制，所以只發(fā)部分源碼思路
完整的免費(fèi)源碼及思路講解，請?jiān)u論后加前端學(xué)習(xí)交流群470593776獲取！
需要源碼請?jiān)u論后加前端學(xué)習(xí)群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小節(jié)】
2.3.3HTML5列表、塊和布局
1.塊元素
塊元素在顯示的時(shí)候，通常會以新行開始
如：<h1> <p> <ul>
<!-- 塊—>注釋
<p>hello</p>
<h1>world</h1>
出來的結(jié)果是:
hello
空一行
world
hello 和world 之間有新的一行
2.HTML內(nèi)聯(lián)元素
內(nèi)聯(lián)元素通常不會以新行開始 如<b> <a> <img>
<b>這是一個(gè)加重標(biāo)簽</b>
<a>哈哈</a>
結(jié)果是 這是一個(gè)加重標(biāo)簽 哈哈
沒有 再起一行
3. HTML <div>元素
<div>元素也被稱為塊元素，其主要是組合HTML元素的容器
4.HTML<span>元素
<span>元素是內(nèi)聯(lián)元素，可作為文本的容器.
例子：
代碼：
<!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>這是一個(gè)加重標(biāo)簽</b>
<a>哈哈</a>
<div>
<p>
極客學(xué)院
</p>
</div>
<div>
<p>
<span>
這是一個(gè)測試結(jié)果
</span>
span 是一個(gè)什么樣子
</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">內(nèi)容菜單</div>
<div id="content_body">內(nèi)容主題</div>
<div id="footing">底部</div>
</div>
</body>
</html>
其中：
在html中常用于布局、定位、區(qū)分。DIV是層疊樣式表中的定位技術(shù)，全稱DIVision，即為劃分。有時(shí)可以稱其為圖層。
個(gè)人感覺像OC里面的View。
在上面 container 為最外層的View 相當(dāng)于OC一個(gè)ViewController的View，id = "container" 個(gè)人CO理解的是 這塊View 的name 叫 container，
<div id="heading">頭部</div> 理解的是 一塊叫heading的view 里面 加了一個(gè)label ， label的內(nèi)容顯示的是 頭部，#footing{
width: 100%;
height: 10%;
background-color: black;
clear: both;
}
這塊代碼的OC理解就是拿到footing的地址，對這塊View做布局和顏色等等的操作。
# 就相當(dāng)于 OC 里面的 *
footing 就相當(dāng)于下面的 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標(biāo)簽（標(biāo)簽里面聲明 view），在head 里面設(shè)置 DIV標(biāo)簽的一些屬性.
瀏覽器的結(jié)果是： 去掉 黑色上面 那一欄 就把2個(gè)圖片綜合一下
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">主題內(nèi)容</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>里面 給一個(gè)table
<table width="100%" height = "950px" style="background-color: lightgray"> 設(shè)置tale 的 寬和高 PX就像素100%就是全屏的寬度 * 1
<tr>是表格的一行,放在table或者body標(biāo)簽里面的
<td> 標(biāo)簽定義 HTML 表格中的標(biāo)準(zhǔn)單元格。td 元素中的文本一般顯示為正常字體且左對齊。
HTML 表格有兩類單元格：
表頭單元 - 包含頭部信息（由 th 元素創(chuàng)建）
標(biāo)準(zhǔn)單元 - 包含數(shù)據(jù)（由 td 元素創(chuàng)建）
TML 代碼約定
很多 Web 開發(fā)人員對 HTML 的代碼規(guī)范知之甚少。
在2000年至2010年，許多Web開發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。
使用 XHTML 開發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫規(guī)范。
而針對于 HTML5 ，我們應(yīng)該形成比較好的代碼規(guī)范，以下提供了幾種規(guī)范的建議。
使用正確的文檔類型
文檔類型聲明位于HTML文檔的第一行：
<!DOCTYPE html>
如果你想跟其他標(biāo)簽一樣使用小寫，可以使用以下代碼：
<!doctype html>
使用小寫元素名
HTML5 元素名可以使用大寫和小寫字母。
推薦使用小寫字母：
混合了大小寫的風(fēng)格是非常糟糕的。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風(fēng)格看起來更加清爽。
小寫字母容易編寫。
不推薦:
<SECTION>
<p>這是一個(gè)段落。</p>
</SECTION>
非常糟糕:
<Section>
<p>這是一個(gè)段落。</p>
</SECTION>
推薦:
<section>
<p>這是一個(gè)段落。</p>
</section>
關(guān)閉所有 HTML 元素
在 HTML5 中, 你不一定要關(guān)閉所有元素 (例如 <p> 元素)，但我們建議每個(gè)元素都要添加關(guān)閉標(biāo)簽。
不推薦:
<section>
<p>這是一個(gè)段落。
<p>這是一個(gè)段落。
</section>
推薦:
<section>
<p>這是一個(gè)段落。</p>
<p>這是一個(gè)段落。</p>
</section>
關(guān)閉空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要關(guān)閉：
我們可以這么寫：
<meta charset="utf-8">
也可以這么寫：
<meta charset="utf-8" />
在 XHTML 和 XML 中斜線 (/) 是必須的。
如果你期望 XML 軟件使用你的頁面，使用這種風(fēng)格是非常好的。
使用小寫屬性名
HTML5 屬性名允許使用大寫和小寫字母。
我們推薦使用小寫字母屬性名:
同時(shí)使用大小寫是非常不好的習(xí)慣。
開發(fā)人員通常使用小寫 (類似 XHTML)。
小寫風(fēng)格看起來更加清爽。
小寫字母容易編寫。
不推薦：
<div CLASS="menu">
推薦：
<div class="menu">
屬性值
HTML5 屬性值可以不用引號。
屬性值我們推薦使用引號:
如果屬性值含有空格需要使用引號。
混合風(fēng)格不推薦的，建議統(tǒng)一風(fēng)格。
屬性值使用引號易于閱讀。
以下實(shí)例屬性值包含空格，沒有使用引號，所以不能起作用:
<table class=table striped>
以下使用了雙引號，是正確的：
<table class="table striped">
圖片屬性
圖片通常使用 alt 屬性。 在圖片不能顯示時(shí)，它能替代圖片顯示。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
定義好圖片的尺寸，在加載時(shí)可以預(yù)留指定空間，減少閃爍。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
空格和等號
等號前后可以使用空格。
<link rel = "stylesheet" href = "styles.css">
但我們推薦少用空格:
<link rel="stylesheet" href="styles.css">
避免一行代碼過長
使用 HTML 編輯器，左右滾動(dòng)代碼是不方便的。
每行代碼盡量少于 80 個(gè)字符。
空行和縮進(jìn)
不要無緣無故添加空行。
為每個(gè)邏輯功能塊添加空行，這樣更易于閱讀。
縮進(jìn)使用兩個(gè)空格，不建議使用 TAB。
比較短的代碼間不要使用不必要的空行和縮進(jìn)。
不必要的空行和縮進(jìn):
<body>
<h1>菜鳥教程</h1>
<h2>HTML</h2>
<p>
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想,
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
</p>
</body>
推薦:
<body>
<h1>菜鳥教程</h1>
<h2></h2>
<p>菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢想。</p>
</body>
表格實(shí)例:
<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>
列表實(shí)例:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
省略 <html> 和 <body>?
在標(biāo)準(zhǔn) HTML5 中， <html> 和 <body> 標(biāo)簽是可以省略的。
以下 HTML5 文檔是正確的:
實(shí)例:
<!DOCTYPE html>
<head>
<title>頁面標(biāo)題</title>
</head>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。</p>
嘗試一下 ?
不推薦省略 <html> 和 <body> 標(biāo)簽。
<html> 元素是文檔的根元素，用于描述頁面的語言：
<!DOCTYPE html>
<html lang="zh">
聲明語言是為了方便屏幕閱讀器及搜索引擎。
省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。
省略 <body> 在舊版瀏覽器 (IE9)會發(fā)生錯(cuò)誤。
省略 <head>?
在標(biāo)準(zhǔn) HTML5 中， <head>標(biāo)簽是可以省略的。
默認(rèn)情況下，瀏覽器會將 <body> 之前的內(nèi)容添加到一個(gè)默認(rèn)的 <head> 元素上。
實(shí)例
<!DOCTYPE html>
<html>
<title>頁面標(biāo)題</title>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。</p>
</body>
</html>
嘗試一下 ?
| 現(xiàn)在省略 head 標(biāo)簽還不推薦使用。 |
元數(shù)據(jù)
HTML5 中 <title> 元素是必須的，標(biāo)題名描述了頁面的主題:
<title>菜鳥教程</title>
標(biāo)題和語言可以讓搜索引擎很快了解你頁面的主題:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>菜鳥教程</title>
</head>
HTML 注釋
注釋可以寫在 <!-- 和 --> 中:
<!-- 這是注釋 -->
比較長的評論可以在 <!-- 和 --> 中分行寫：
<!--
這是一個(gè)較長評論。 這是 一個(gè)較長評論。這是一個(gè)較長評論。
這是 一個(gè)較長評論 這是一個(gè)較長評論。 這是 一個(gè)較長評論。
-->
長評論第一個(gè)字符縮進(jìn)兩個(gè)空格，更易于閱讀。
樣式表
樣式表使用簡潔的語法格式 ( type 屬性不是必須的):
<link rel="stylesheet" href="styles.css">
短的規(guī)則可以寫成一行:
p.into {font-family: Verdana; font-size: 16em;}
長的規(guī)則可以寫成多行:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
將左花括號與選擇器放在同一行。
左花括號與選擇器間添加以空格。
使用兩個(gè)空格來縮進(jìn)。
冒號與屬性值之間添加已空格。
逗號和符號之后使用一個(gè)空格。
每個(gè)屬性與值結(jié)尾都要使用符號。
只有屬性值包含空格時(shí)才使用引號。
右花括號放在新的一行。
每行最多 80 個(gè)字符。
| 在逗號和分號后添加空格是常用的一個(gè)規(guī)則。 |
在 HTML 中載入 JavaScript
使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):
<script src="myscript.js">
使用 JavaScript 訪問 HTML 元素
一個(gè)糟糕的 HTML 格式可能會導(dǎo)致 JavaScript 執(zhí)行錯(cuò)誤。
以下兩個(gè) JavaScript 語句會輸出不同結(jié)果:
實(shí)例
var obj = getElementById("Demo")
var obj = getElementById("demo")
HTML 中 JavaScript 盡量使用相同的命名規(guī)則。
訪問 JavaScript 代碼規(guī)范。
使用小寫文件名
大多 Web 服務(wù)器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。
其他 Web 服務(wù)器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。
你必須保持統(tǒng)一的風(fēng)格，我們建議統(tǒng)一使用小寫的文件名。
文件擴(kuò)展名
HTML 文件后綴可以是 .html (或r .htm)。
CSS 文件后綴是 .css 。
JavaScript 文件后綴是 .js 。
.htm 和 .html 的區(qū)別
.htm 和 .html 的擴(kuò)展名文件本質(zhì)上是沒有區(qū)別的。瀏覽器和 Web 服務(wù)器都會把它們當(dāng)作 HTML 文件來處理。
區(qū)別在于：
.htm 應(yīng)用在早期 DOS 系統(tǒng)，系統(tǒng)現(xiàn)在或者只能有三個(gè)字符。
在 Unix 系統(tǒng)中后綴沒有特別限制，一般用 .html。
技術(shù)上區(qū)別
如果一個(gè) URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務(wù)器會返回默認(rèn)的文件名。通常默認(rèn)文件名為 index.html, index.htm, default.html, 和 default.htm。
如果服務(wù)器只配置了 "index.html" 作為默認(rèn)文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。
但是，通常服務(wù)器可以設(shè)置多個(gè)默認(rèn)文件，你可以根據(jù)需要設(shè)置默認(rèn)文件嗎。
不管怎樣，HTML 完整的后綴是 ".html"。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
