HTML和HTML5

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市筒狠,隨后出現(xiàn)的幾起案子猪狈,更是在濱河造成了極大的恐慌,老刑警劉巖辩恼,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件雇庙,死亡現(xiàn)場離奇詭異,居然都是意外死亡灶伊,警方通過查閱死者的電腦和手機(jī)疆前,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來聘萨,“玉大人竹椒,你說我怎么就攤上這事∶追” “怎么了胸完?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵书释,是天一觀的道長。 經(jīng)常有香客問我舶吗,道長征冷,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任誓琼,我火速辦了婚禮检激,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘腹侣。我一直安慰自己叔收,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布傲隶。 她就那樣靜靜地躺著饺律,像睡著了一般。 火紅的嫁衣襯著肌膚如雪跺株。 梳的紋絲不亂的頭發(fā)上复濒,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天,我揣著相機(jī)與錄音乒省,去河邊找鬼巧颈。 笑死,一個胖子當(dāng)著我的面吹牛袖扛,可吹牛的內(nèi)容都是我干的砸泛。 我是一名探鬼主播,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼蛆封,長吁一口氣:“原來是場噩夢啊……” “哼唇礁!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起惨篱,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤盏筐,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后砸讳,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體机断,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年绣夺,在試婚紗的時候發(fā)現(xiàn)自己被綠了吏奸。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡陶耍,死狀恐怖奋蔚,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤泊碑,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布坤按,位于F島的核電站,受9級特大地震影響馒过,放射性物質(zhì)發(fā)生泄漏臭脓。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一腹忽、第九天 我趴在偏房一處隱蔽的房頂上張望来累。 院中可真熱鬧,春花似錦窘奏、人聲如沸嘹锁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽领猾。三九已至,卻和暖如春骇扇,著一層夾襖步出監(jiān)牢的瞬間摔竿,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工少孝, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留继低,地道東北人。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓韭山,卻偏偏與公主長得像,于是被迫代替她去往敵國和親冷溃。 傳聞我的和親對象是個殘疾皇子钱磅,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評論 2 344

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,728評論 1 92
  • 什么是html5呢似枕?html5最先由WHATWG(Web 超文本應(yīng)用技術(shù)工作組)命名的一種超文本標(biāo)記語言盖淡,隨后和W...
    TW妖妖閱讀 862評論 1 3
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,518評論 32 459
  • 本文主要是起筆記的作用,內(nèi)容來自慕課網(wǎng). 認(rèn)識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,623評論 0 30
  • 目錄 內(nèi)容 一. 我對標(biāo)簽、元素答憔、盒子的理解 相信很多人和我之前一樣味赃,對于web的許多概念也都知道是什么意思,大家...
    科研者閱讀 681評論 2 2