1. < !DOCTYPE >
定義:定義?檔類型。告訴瀏覽器渲染??的規(guī)則。
- DOC: document ?檔。
- TYPE:類型
- 說(shuō)明:任何?個(gè)??都必須在??第??聲明?檔類型。
?法:
h3??檔類型
<html>
</htm>
H4的?檔類型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
</html
H5的?檔類型
<!DOCTYPE html>
HTML5語(yǔ)義化
語(yǔ)義:標(biāo)簽所含有的意義。
Html 4標(biāo)簽的語(yǔ)義化比不明顯
HTML4中有語(yǔ)義的標(biāo)簽
<h1>一級(jí)標(biāo)題</h1>
<p>段落</p>
<ul>無(wú)序列表</ul>
<li>無(wú)序列表項(xiàng)目</li>
<ol>有序列表</ol>
<em>斜切</em>
HTML4中沒(méi)有語(yǔ)義的
<div id='header'>塊</div>
<div id='nav'>導(dǎo)航navigation</div>
<div id='main'>主要內(nèi)容區(qū)域</div>
<div id='sidebar'>次要內(nèi)容區(qū)域</div>
<div id='footer'>頁(yè)尾</div>
HTML對(duì)<div>派生出了多個(gè)語(yǔ)義化標(biāo)簽
<header>頁(yè)頭</header>
<nav>導(dǎo)航</nav>
<section>一章一節(jié)</section>
<main>主要內(nèi)容</main>
<aside>次要內(nèi)容</aside>
<footer>頁(yè)尾</footer>
2. < html >
定義:定義?個(gè)HTML?檔。
3. < head >
定義:定義HTML?檔的頭部區(qū)域(次要的區(qū)域)。
- 不是給?看的
- 給?戶代理看
- 給搜索引擎看的
4. < meta >
定義:定義??的元信息(描述??信息的信息)。
?法:
- < meta >標(biāo)簽位于?檔的頭部。
- < meta >是?個(gè)單標(biāo)簽
- < meta >采?"名值對(duì)"形式定義??元信息。
語(yǔ)法
<meta name="屬性名" content="屬性值" >
常?的meta設(shè)置:
字符集: 設(shè)置??的字符編碼為utf-8字符集
<meta charset="utf-8">
??描述: 為搜索引擎設(shè)置的
<meta name="description" content="簡(jiǎn)書是?個(gè)優(yōu)質(zhì)的創(chuàng)作社區(qū),在這?,你可以任性地創(chuàng)作,?篇短?、?
張照?、??詩(shī)、?幅畫……我們相信,每個(gè)?都是?活中的藝術(shù)家,有著?窮的創(chuàng)造?。">
??關(guān)鍵詞:為搜索引擎設(shè)置的
<meta name="keywords" content="簡(jiǎn)書,簡(jiǎn)書官?,圖?編輯軟件,簡(jiǎn)書下載,圖?創(chuàng)作,創(chuàng)作軟件,原創(chuàng)社區(qū),?
說(shuō),散?,寫作,閱讀">
視?:為移動(dòng)設(shè)備設(shè)置的
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
5. < title >
定義:定義HTML?檔標(biāo)題。
6. < link >
定義:關(guān)聯(lián)外部資源與當(dāng)前???檔。
- 外部資源:可以css?件 也可以是圖?
- 收藏夾圖標(biāo):favourite icon的縮寫,表示收藏夾圖標(biāo)的意思。
- 在線轉(zhuǎn)換ico圖標(biāo):百度搜索
?法:
- 使?< link >關(guān)聯(lián)外部的css?件
<link rel="stylesheet" href='css?件地址' >
- 使? < link >管理收藏夾圖標(biāo)
<link rel='shortcut icon' href='icon圖?地址'
7. < script >
定義: <script> 標(biāo)簽?于定義客戶端腳本,?如 JavaScript。
客戶端: 指訪問(wèn)?站的?戶的瀏覽器。
腳本:?前使?率最?的是js (其他:ActionScript、VBScript)
?法
?法1: 通過(guò)< script >引?外部腳本?件
<script src='腳本?件路徑'></script>
?法2: 通過(guò)< script >創(chuàng)建腳本區(qū)域。
<head>
<script>
window.onload = function(){
}
</script>
</head>
8. < body >
定義:body元素定義?檔的主體。
- 主體:給?戶看的內(nèi)容全部放在body??。
- ?檔次要部分:< head >
?法: - ?個(gè)HTML?檔只能有?個(gè)body
9. < header > h5
定義: 標(biāo)簽定義?檔的?眉。
- ?眉包括什么
- LOGO
- 搜索框
- 主導(dǎo)航
- 登錄區(qū)
- 快捷??(連接)
10. < section > h5
定義: 定義?檔中的節(jié)。 具有通?性。
11.main:主要
定義:定義文檔的主要區(qū)域
12.aside:次要的
定義:
13section
14.nva
定義:導(dǎo)航
15.box-sizing屬性
定義:用于定義盒模型的計(jì)算規(guī)則
語(yǔ)法
div{box-sizing:content-box |
border-box}
- Content-box:內(nèi)容盒模型,默認(rèn)值
- Border-box:邊框盒模型
16.container{
width:1140px;
margin;
解析
- 盒模型規(guī)定了元素的結(jié)構(gòu)。任何一個(gè)元素都是由四部分構(gòu)成:內(nèi)容、內(nèi)邊距、邊框、外邊距
- 內(nèi)容盒模型:Winth屬性控制到內(nèi)容區(qū)
- 邊框盒模型:winth屬性控制到
奇數(shù)偶數(shù)
odd 奇數(shù)
even 偶數(shù)
14. < footer > h5
定義:定義文檔的頁(yè)尾
H5標(biāo)簽可以在項(xiàng)?中使?嗎?
- 開(kāi)會(huì)商量?案
- 確定你的觀點(diǎn):有?個(gè)?站可以幫助你決策:
- Can I Use :http://www.caniuse.com
常???布局的種
- 分屏式布局
- ?字形布局
- 圣杯布局
- ?字型布局
- 兩欄布局
- 三欄布局