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 - 行合并