day19-課堂總結(jié)

web標(biāo)準(zhǔn):是w3c組織規(guī)定網(wǎng)頁代碼規(guī)范

結(jié)構(gòu)標(biāo)準(zhǔn) - html - 決定網(wǎng)頁上有哪些內(nèi)容
表現(xiàn)標(biāo)準(zhǔn) - css - 決定網(wǎng)頁上的內(nèi)容的布局和樣式(又叫樣式表)
行為標(biāo)準(zhǔn) - js - 決定網(wǎng)頁的動態(tài)變化(包括內(nèi)容的改變和樣式的改變)

認(rèn)識html

1.什么是html(結(jié)構(gòu)標(biāo)準(zhǔn))
html是超文本標(biāo)記語言
超文本 - 除了文字以外纪他,還可以是圖片愁拭,視頻澎办,音頻谎仲,超鏈接驶社,按鈕、輸入框等進(jìn)行標(biāo)記
標(biāo)記語言 - 不是編程語言 若治、和macdown語法一樣峡眶,只是通過不同的標(biāo)記讓內(nèi)容以不同的形式展現(xiàn)出來
如果語法出錯,不會影響正確標(biāo)記的效果
2.什么是html文件
文件后綴.html的文件京革;可以直接通過瀏覽器打開奇唤。一般情況下,html代碼就寫在html文件中
3.html版本
狹義的h5 - 指的是html的第五大版本
廣義的h5 - 指的是html5-css3-JavaScript
4.網(wǎng)頁的結(jié)構(gòu) - 樹
整個網(wǎng)頁是一個html標(biāo)簽匹摇,html中包含head和body標(biāo)簽
5標(biāo)簽(標(biāo)記)
html就是通過不同的標(biāo)簽對網(wǎng)頁中的內(nèi)容進(jìn)行標(biāo)記的
a.結(jié)構(gòu)
雙標(biāo)簽:<標(biāo)簽名 屬性名=屬性值 屬性名=屬性值>標(biāo)簽內(nèi)容</標(biāo)簽名>
單標(biāo)簽:<標(biāo)簽名 屬性名=屬性值 屬性名=屬性值 />
b說明
標(biāo)簽名 - 只能寫html中提供的標(biāo)簽名咬扇,不能夠隨便命名,標(biāo)簽名前不能添加空格
屬性 - 屬性是放在單標(biāo)簽或者雙標(biāo)簽的開始標(biāo)簽中廊勃,以屬性名=屬性值的形式出現(xiàn)懈贺,多個屬性之間用空格隔開
屬性的順序隨意,不會影響最終結(jié)果

標(biāo)簽內(nèi)容 - 雙標(biāo)簽的開始標(biāo)簽和結(jié)束標(biāo)簽之間就是標(biāo)簽的內(nèi)容坡垫,標(biāo)簽內(nèi)容可以是任何內(nèi)容梭灿,可以寫文字,也可以放其他標(biāo)簽
DOCTYPE - 對html版本進(jìn)行說明
html - 當(dāng)前使用的是html5
6.head標(biāo)簽
head標(biāo)簽中主要包含以下內(nèi)容
meta標(biāo)簽 - 元標(biāo)簽(單標(biāo)簽)
style標(biāo)簽 - 導(dǎo)入css代碼
script標(biāo)簽 - 導(dǎo)入JavaScript代碼
base標(biāo)簽 - 設(shè)置網(wǎng)頁中的基本url
title標(biāo)簽 - 網(wǎng)頁標(biāo)題標(biāo)簽
link標(biāo)簽 - 導(dǎo)入外部文件(可以用來設(shè)置圖標(biāo)冰悠,也可以導(dǎo)入css文件)

html中不區(qū)分大小寫

head標(biāo)簽中的內(nèi)容除了標(biāo)題和圖標(biāo)其他都是不可見的

文本標(biāo)簽

1.標(biāo)題標(biāo)簽(h1-h6)
網(wǎng)頁中標(biāo)題部分使用標(biāo)題標(biāo)簽
2.段落標(biāo)簽(p)
雙標(biāo)簽
網(wǎng)頁中一段文字就使用一個p標(biāo)簽:一個p標(biāo)簽的內(nèi)容在一個段落顯示堡妒,如果有多個段落,就使用多個p標(biāo)簽

注意:在html中溉卓,在文本內(nèi)容中輸入回車換行是無效的(在網(wǎng)頁顯示的時候)

3.文本符號和強(qiáng)制換行標(biāo)簽
a空格符號
? - 空一個像素
? - 空一個空格
b換行標(biāo)簽(br)
4.文字效果標(biāo)簽
a文字加粗
b標(biāo)簽 - 單純的對文字進(jìn)行加粗
strong 標(biāo)簽 - 除了對文字進(jìn)行加粗皮迟,還有強(qiáng)調(diào)的意思
5.文字傾斜
i標(biāo)簽 - 單純的對文字進(jìn)行傾斜
em標(biāo)簽 - 除了對文字進(jìn)行傾斜外,還有強(qiáng)調(diào)的意思
6.水平線(hr)
7.文字標(biāo)簽(font)
單純的顯示一段文字桑寨,可以當(dāng)成p標(biāo)簽來使用伏尼,多個font標(biāo)簽不會換行多個p標(biāo)簽會自動換行

列表標(biāo)簽

如果網(wǎng)頁中的多個內(nèi)容,他們具有相同意義的內(nèi)容尉尾,就可以使用一個列表標(biāo)簽將他們放在一起
1.無序列表(ul-li)
ul標(biāo)簽 - 代表整個列表
li標(biāo)簽 - 代表列表中的元素
2.有序標(biāo)簽(ol-li)
ol 標(biāo)簽 - 代表整個列表
li標(biāo)簽 - 代表列表中的元素
3.自定義列表(dl-dt-dd)
dl標(biāo)簽 - 代表整個列表
dt標(biāo)簽 - 列表中的分組
dl - 每個分組下面的元素

圖片標(biāo)簽(img)

網(wǎng)頁上幾乎所有的圖片都是使用img標(biāo)簽直接或者間接的顯示的
1.src屬性 - 設(shè)置圖片的地址
a.本地圖片 - 設(shè)置本地圖片的路徑
b.網(wǎng)絡(luò)圖片 - 值為網(wǎng)絡(luò)圖片的地址
2.title屬性 - 設(shè)置圖片標(biāo)題
當(dāng)鼠標(biāo)放在圖片上才會顯示出來
3.alt屬性 - 設(shè)置圖片加載失敗的提示信息
只有在圖片加載失敗的時候才會顯示
超鏈接標(biāo)簽(a)
點(diǎn)擊可以跳轉(zhuǎn)到指定的網(wǎng)頁就是超鏈接
1.內(nèi)容
超鏈接在網(wǎng)頁中可見并且可以點(diǎn)擊的部分爆阶;可以是圖片也可以是文字
href屬性 - 超鏈接點(diǎn)擊后跳轉(zhuǎn)的目標(biāo)地址
a.設(shè)置另外一個網(wǎng)頁地址 - 跳轉(zhuǎn)到指定網(wǎng)頁
b.設(shè)置成另外一個本地html文件路勁 - 跳轉(zhuǎn)到本地網(wǎng)頁中
c.設(shè)置成當(dāng)前頁面的標(biāo)簽對應(yīng)的選擇器 - 讓當(dāng)前網(wǎng)頁滾動到指定的位置<img id="img2"><a href="#img2">
d.設(shè)置為空 - 刷新網(wǎng)頁
3.target屬性
_blank - 在新的頁面中顯示新的網(wǎng)頁
_self - 默認(rèn)屬性,在當(dāng)前頁面中顯示新的網(wǎng)頁

表格標(biāo)簽(table-tr-td)

table - 代表整個表格
tr - 代表表格中的一行
td - 代表表格中一個單元格
border - 設(shè)置邊框?qū)挾?單位是像素)
設(shè)置整個表格的邊框?qū)挾葹閎order,同時設(shè)置每個單元格的邊框?qū)挾葹?
2.bordercolor - 設(shè)置邊框的顏色
html中的顏色:a.顏色對應(yīng)的單詞
b.rgb對應(yīng)的16進(jìn)制扰她,前加# 例如#ff0000(紅色)
3.cellspacing - 設(shè)置表格中單元格與單元格之間兽掰,以及單元格與邊框之間的寬度
4cellpadding - 設(shè)置表格中的內(nèi)容到單元格邊框之間的間距
默認(rèn)情況下,單元格的大小跟內(nèi)容大小有關(guān)
5.bgcolor - 設(shè)置背景顏色
作為table屬性 - 設(shè)置整個表的背景顏色
作為tr屬性 - 設(shè)置這一行的背景顏色
作為td屬性 - 設(shè)置這個單元格的背景顏色

注意:html中所有的屬性的值都是寫在雙引號中

6.width - 設(shè)置寬度
作為table屬性 - 設(shè)置整個表的寬度
作為td屬性 - 設(shè)置當(dāng)前單元格所在這一列的單元格的寬度
7.height - 設(shè)置高度
作為table - 設(shè)置整個表的高度
作為tr屬性 - 設(shè)置一行的高度
8.align - 設(shè)置水平對齊方式
left - 左對齊
right - 右對齊
center - 居中
作為table屬性 - 讓整個表格在網(wǎng)頁中左對齊徒役,右對齊孽尽,居中
最為tr屬性 - 讓這一行中所有的單元格中的內(nèi)容,左對齊忧勿,右對齊杉女,局長
colspan - 列合并
rowspan - 行合并

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市鸳吸,隨后出現(xiàn)的幾起案子熏挎,更是在濱河造成了極大的恐慌,老刑警劉巖晌砾,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件坎拐,死亡現(xiàn)場離奇詭異,居然都是意外死亡养匈,警方通過查閱死者的電腦和手機(jī)哼勇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來呕乎,“玉大人积担,你說我怎么就攤上這事♀剩” “怎么了帝璧?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長湿刽。 經(jīng)常有香客問我的烁,道長,這世上最難降的妖魔是什么叭爱? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任撮躁,我火速辦了婚禮,結(jié)果婚禮上买雾,老公的妹妹穿的比我還像新娘把曼。我一直安慰自己,他們只是感情好漓穿,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布嗤军。 她就那樣靜靜地躺著,像睡著了一般晃危。 火紅的嫁衣襯著肌膚如雪叙赚。 梳的紋絲不亂的頭發(fā)上老客,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天,我揣著相機(jī)與錄音震叮,去河邊找鬼胧砰。 笑死,一個胖子當(dāng)著我的面吹牛苇瓣,可吹牛的內(nèi)容都是我干的尉间。 我是一名探鬼主播,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼击罪,長吁一口氣:“原來是場噩夢啊……” “哼哲嘲!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起媳禁,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤眠副,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后竣稽,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體囱怕,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年丧枪,在試婚紗的時候發(fā)現(xiàn)自己被綠了光涂。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡拧烦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出钝计,到底是詐尸還是另有隱情恋博,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布私恬,位于F島的核電站债沮,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏本鸣。R本人自食惡果不足惜疫衩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望荣德。 院中可真熱鬧闷煤,春花似錦、人聲如沸涮瞻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽署咽。三九已至近顷,卻和暖如春生音,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背窒升。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工缀遍, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人饱须。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓域醇,卻偏偏與公主長得像,于是被迫代替她去往敵國和親冤寿。 傳聞我的和親對象是個殘疾皇子歹苦,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評論 2 348

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

  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,969評論 3 119
  • 裝飾模式有很多經(jīng)典的使用場景督怜,例如插入日志殴瘦、性能測試、事務(wù)處理等等号杠,有了裝飾器蚪腋,就可以提取大量函數(shù)中與本身功能無關(guān)...
    一誠閱讀 445評論 0 0
  • The picture depicts a couple dating in the park.While the...
    xiaochouwa閱讀 237評論 0 0
  • 四個月前,我看到周圍的同學(xué)姨蟋、家人們大多數(shù)都在玩游戲《王者榮耀》屉凯,我十分眼紅,玩了之后覺得還可以眼溶,就天天玩悠砚。 ...
    范雯寧閱讀 270評論 2 0
  • (1) 上個月,讀者K小姐來信堂飞,說她男朋友要和她分手灌旧,這讓她倍受打擊,可當(dāng)她知道分手理由后绰筛,更是讓她無法接受這個事...
    馮小風(fēng)閱讀 8,693評論 58 143