網(wǎng)頁結(jié)構(gòu)
<!--根標(biāo)簽-->
<html>
<!--頭部-->
<head>
<!-- http-equiv:模擬http協(xié)議的文件頭原信息阻肿,主要目的是服務(wù)器向客戶端返回時瓦戚,用什么格式顯示。
Content-type:內(nèi)容類型丛塌。
Content:詳細(xì)內(nèi)容類型介紹较解。Text/html:網(wǎng)頁是text格式,html是文本中的小格式赴邻。
Charset:字符集印衔,主要控制漢字如何顯示。
Utf-8:多國語言編碼姥敛,什么國家的語言都可以正常顯示当编。 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--網(wǎng)頁標(biāo)題-->
<title>我的第一個網(wǎng)頁</title>
</head>
<!--身體-->
<body>
hello wrold!你好世界徒溪!
</body>
</html>
盒子模型
任何一個標(biāo)簽都是一個盒子,也就是任何一個標(biāo)簽都有以下四個屬性:
四個屬性 :margin border padding content
對于span等 行內(nèi)標(biāo)簽 是包裹內(nèi)容的 也就是padding是0px
每一個標(biāo)簽都是一個盒子
層級結(jié)構(gòu):外邊距|邊界|內(nèi)邊距|內(nèi)容
標(biāo)簽格式
雙邊標(biāo)記
<標(biāo)簽屬性1=“值1”屬性2=“值2”>內(nèi)容</標(biāo)簽>
單邊標(biāo)記
<標(biāo)簽屬性1=“值1”屬性2=“值2”>
標(biāo)簽分類
塊級標(biāo)簽
塊級標(biāo)簽:盒子的寬等于整行的寬度
獨(dú)占一行,可設(shè)寬高
標(biāo)題:h1-h6
橫線:hr
列表:ul ol li
段落:p
表格:table(tr th td)
容器:div
行內(nèi)標(biāo)簽
行內(nèi)標(biāo)簽:盒子的寬高 默認(rèn)包裹內(nèi)容
多占一行金顿,不可設(shè)寬高
換行:br
超鏈接:a
圖像:img
容器:span
行內(nèi)-塊級標(biāo)簽
行內(nèi)-塊級標(biāo)簽:盒子的寬高 有默認(rèn)的高度
多占一行臊泌,可設(shè)寬高
按鈕:button
表單:form (input)
標(biāo)簽屬性
常見通用屬性
width="200" height="200"
align="center"
border="5"
bordercolor="blue"
bgColor="#99cc33"
background="images/bg.jpg"
改變標(biāo)簽的類型
CSS中有個display屬性,能修改標(biāo)簽的顯示類型
none:隱藏標(biāo)簽
block:讓標(biāo)簽變?yōu)閴K級標(biāo)簽
inline:讓標(biāo)簽變?yōu)樾袃?nèi)標(biāo)簽
inline-block:讓標(biāo)簽變?yōu)樾袃?nèi)-塊級標(biāo)簽(內(nèi)聯(lián)-塊級標(biāo)簽)
HTML5新增標(biāo)簽
HTML5新增了27個標(biāo)簽元素,廢棄了16個標(biāo)簽元素,主要包括結(jié)構(gòu)性標(biāo)簽揍拆、級塊性標(biāo)簽渠概、行內(nèi)語義性標(biāo)簽、交互性標(biāo)簽
進(jìn)度:progress
視頻:video
音頻:radio
文章:article
文章頭部:header
區(qū)域章節(jié)表述 :section
文章底部:footer
導(dǎo)航鏈接:nav
標(biāo)簽居中問題
1嫂拴、行內(nèi)標(biāo)簽/行內(nèi)-塊級標(biāo)簽 設(shè)置父類的屬性 水平居中 text-align: center;
垂直居中 line-height 等于高度
2播揪、塊級標(biāo)簽:設(shè)置自己的屬性 水平居中 margin: 0 auto;
設(shè)置父類的屬性 垂直居中 只能垂直充滿居中 不能設(shè)置高度居中
W3C網(wǎng)站:http://www.w3school.com.cn/html/index.asp