1.什么是html(結構標準)
html是超文本標記語言
超文本 - 除了文字以外藻懒,還可以對圖片豪墅、視頻昧辽、音頻、超鏈接楷兽、按鈕绪囱、輸入框等進行標記
標記語言 - 不是編程語言,和MacDown語法一樣另假,只是通過不同的標記讓內(nèi)容以不一樣的形式顯示出來。
如果語法出錯不會影響其他正確的標記的效果
2.什么是html文件
文件后綴.html的文件资铡;可以直接通過瀏覽器打開电禀。一般情況下,html代碼就寫在html文件中
3.html版本
狹義的h5 - html第5個大版本(支持移動網(wǎng)頁開發(fā))
廣義的h5 - html5+css3+js
4.網(wǎng)頁結構 - 樹
整個網(wǎng)頁是一個html標簽笤休,html中直接包含head標簽和body標簽尖飞。
5.標簽(標記)
html就是通過不同的標簽對網(wǎng)頁中的內(nèi)容進行標記的
a.結構
雙標簽: <標簽名 屬性名1=屬性值1 屬性名2=屬性值2 ...>標簽內(nèi)容</標簽名>
單標簽: <標簽名 屬性名1=屬性值1 屬性名2=屬性值2 ...> 或 <標簽名 屬性名1=屬性值1 屬性名2=屬性值2 .../>
b.說明
標簽名 - 只能寫html提供的標簽,不能隨便命名; 標簽名前不能加空格
屬性 - 屬性放在單標簽或者雙標簽的開始標簽中店雅,以‘屬性名=值’的形式出現(xiàn)政基,多個屬性之間用空格隔開;
屬性順序隨意,不會影響最終的效果闹啦;
標簽內(nèi)容 - 雙標簽的開始標簽和結束標簽之間是標簽內(nèi)容沮明;標簽內(nèi)容可以是任何內(nèi)容(可以寫文字,也可以放其他的標簽)
6.head標簽
head標簽中主要包含以下內(nèi)容:
meta標簽 - 元標簽(單標簽) charset="UTF-8" -設置編碼方式
title標簽 - 設置網(wǎng)頁標題
link標簽 - 導入外部文件(設置圖標窍奋,導入css文件)
style標簽 - 導入css代碼
script標簽 - 導入js文件和導入js代碼
base標簽 - 設置網(wǎng)頁中的基本url
注意:html語法中不區(qū)分大小寫珊擂, html == HTML == HtmL
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>千鋒教育-做真實的自己,用良心做教育</title>
</head>
<!--網(wǎng)頁內(nèi)容部分(可見的)-->
<body>
python
</body>
</html>
2.文本標簽
1.標題標簽(h1~h6)
雙標簽
網(wǎng)頁中標題的部分使用標題標簽
2.段落標簽(p)
雙標簽
網(wǎng)頁中一段文字就用一個p標簽费变;一個p標簽的內(nèi)容在一個段落顯示摧扇,如果有多個段落需要多個p標簽
注意:html中,在文本內(nèi)容中輸入回車挚歧,換行無效(在網(wǎng)頁上顯示的時候)
3.文本符號和強制換行標簽
a.空格符號:
? - 空一個像素
? - 一個空格
b.換行標簽(br)
單標簽
4.文字效果標簽
a.文字加粗
b標簽 - 單純的對文字進行加粗
strong標簽 - 除了對文字進行加粗扛稽,還有強調(diào)的意思
b.文字傾斜
i標簽 - 單純的對文字進行傾斜
em標簽 - 除了對文字進行傾斜,還有強調(diào)的意思
c.水平線(hr)
單標簽
hr標簽 - hr所在的位置設置一個水平線
5.文字標簽(font)
單純的顯示一段文字滑负,多個font標簽之間不會自動換行(多個p標簽之間會自動換行)
3.列表標簽
列表標簽
如果網(wǎng)頁中的多個內(nèi)容在张,他們屬于具有相同意義的內(nèi)容用含,就可以用一個列表標簽將他們放在一起
1.無序列表(ul-li)
ul標簽 - 代表整個列表
li - 表示列表中的元素
-2.有序列表(ol-li)
ol標簽 - 代表整個列表
li - 表示列表中的元素
3.自定義列表(dl-dt-dd)
dl - 代表整個列表
dt - 列表中的分組
dd - 每個分組下面的元素
4.圖片標簽
圖片標簽(img) - 單標簽
網(wǎng)頁上幾乎所有的圖片都是使用img標簽直接或者間接的顯示的
1.src屬性 - 設置圖片地址
a.本地圖片 - 值為本地圖片的路徑(可以是相對路徑,也可以是絕對路徑;一般使用相對路徑)
b.網(wǎng)絡圖片 - 值為網(wǎng)絡圖片的url
2.title屬性 - 設置圖片標題
當鼠標停留在圖片上才會顯示出來
3.alt屬性 - 設置圖片加載失敗的提示信息
只有在圖片加載失敗的時候才會顯示
5.超鏈接
超鏈接標簽(a)
點擊可以跳轉(zhuǎn)到其他頁面的內(nèi)容就是超鏈接
1.內(nèi)容
超鏈接在網(wǎng)頁中可見并且可點擊的部分帮匾;可以是文字啄骇,也可以是圖片
-->
<!--文字超鏈接-->
<a href="">百度一下</a>
<!--圖片超鏈接-->
<a href="">
<img src="img/luffy2.png"/>
</a>
<hr />
2.href屬性 - 超鏈接點擊后跳轉(zhuǎn)的目標地址
a.設置另外一個網(wǎng)頁的地址 - 跳轉(zhuǎn)到指定網(wǎng)頁
b.設置成另一個本地html文件路徑 - 跳轉(zhuǎn)到本地網(wǎng)頁中
c.設置成當前頁面的標簽對應的選擇器 - 讓當前網(wǎng)頁滾動到指定的位置
d.設置為空 - 刷新網(wǎng)頁(會重新請求數(shù)據(jù))
3.target屬性
_self(默認值) - 在當前頁面中顯示新的網(wǎng)頁
_blank - 在新的頁面中顯示新的網(wǎng)頁
6.表格標簽
表格標簽(table-tr-td)
table標簽 - 代表整個表格
tr標簽 - 代表表格中的每一行
td - 代表表格中的每一個單元格
1.border - 設置邊框?qū)挾?單位是像素)
設置整個表格的邊框?qū)挾葹閎order,同時設置每個單元的邊框?qū)挾葹?
2.bordercolor - 設置邊框顏色
html中的顏色值:a.顏色的英語單詞瘟斜,例如:red, yellow, green, pink
b.rgb對應的16進制值,前加#, 例如:#ff0000(紅色) #00ff00(綠色) #0000ff(藍色)
3.cellspacing - 設置表格中單元格和單元格之間缸夹,以及單元格和邊框之間的間距
4.cellpadding - 設置表格中的內(nèi)容到單元格邊框之間的間距
默認情況下,單元格的大小跟內(nèi)容的大小有關
5.bgcolor - 設置背景顏色
作為table屬性 - 設置整個表格的背景顏色
作為tr屬性 - 設置一行的背景顏色
作為td屬性 - 設置一個單元格的背景顏色
6.width - 設置寬度
作為table屬性 - 設置整個列表的寬度
作為td屬性 - 設置當前td所在的列的寬度
7.height - 設置高度
作為table屬性 - 設置整個列表的高度
作為tr屬性 - 設置一行的高度
8.align - 設置水平對齊方式
letf(默認) - 左對齊
right - 右對齊
center - 居中
作為table屬性 - 讓整個表格在網(wǎng)頁中左對齊、右對齊、居中
作為tr屬性 - 讓一行中所有的單元格中的內(nèi)容候衍,在單元格中左對齊、右對齊芽唇、居中
作為td屬性 - 讓一個單元格中的內(nèi)容,在單元格中左對齊取劫、右對齊匆笤、居中
注意:html中所有的屬性值都是寫在雙引號里面
7.合并
colspan - 列合并
rowspan - 行合并