HTML學(xué)習(xí)
1.web標(biāo)準(zhǔn)(由萬(wàn)維網(wǎng)(www=w3c)指定的網(wǎng)頁(yè)開(kāi)發(fā)規(guī)范)
2.什么是html？
html是超文本標(biāo)記語(yǔ)言(類似markdown語(yǔ)法)
html是通過(guò)不同的標(biāo)記(標(biāo)簽)來(lái)決定網(wǎng)頁(yè)上的不同內(nèi)容, 學(xué)習(xí)html就是學(xué)html中的標(biāo)簽(標(biāo)記)
3.html語(yǔ)法
a.語(yǔ)法
雙標(biāo)簽: <標(biāo)簽名 屬性名1=值1 屬性名2=值2 ...>標(biāo)簽內(nèi)容</標(biāo)簽名>
單標(biāo)簽: <標(biāo)簽名 屬性名1=值1 屬性名2=值2 .../> 或者 <標(biāo)簽名 屬性名1=值1 屬性名2=值2 ...>
b.說(shuō)明
標(biāo)簽名 - 必須是html提供的標(biāo)簽名，不能隨便寫;
屬性 - 以'屬性名=值'的形式成對(duì)出現(xiàn)的，多對(duì)之間用空格隔開(kāi)；屬性的順序可以任意，不會(huì)影響效果
值必須放在雙引號(hào)中
標(biāo)簽內(nèi)容 - 只有雙標(biāo)簽才有標(biāo)簽內(nèi)容；標(biāo)簽內(nèi)容可以是任何內(nèi)容(不光只能是文字，還可以是其他一個(gè)或者多個(gè)標(biāo)簽)
DOCTYPE: 說(shuō)明html版本
html - html5
網(wǎng)頁(yè)內(nèi)容結(jié)構(gòu):
<html> - 代表整個(gè)網(wǎng)頁(yè)
<head></head> - 顯示網(wǎng)頁(yè)標(biāo)題頂部的位置
<body></body> - 網(wǎng)頁(yè)內(nèi)容部分
</html>
1）head中主要有以下標(biāo)簽：
meta - 定義了HTML文檔中的元數(shù)據(jù)(設(shè)置網(wǎng)頁(yè)的基本設(shè)置)
title - 設(shè)置網(wǎng)頁(yè)標(biāo)題
#######（設(shè)置網(wǎng)頁(yè)圖標(biāo)
rel - 設(shè)置文件作用；stylesheet:樣式表，icon:圖標(biāo)
type - 設(shè)置文件類型, 文件類型/文件后綴；text/css: 文本/后綴是css, image/ico: 圖片/后綴是ico
href - 設(shè)置文件路徑; 可以是絕對(duì)路徑也可以是相對(duì)路）#######
style - 在html中提供CSS代碼對(duì)應(yīng)的標(biāo)簽
link - 導(dǎo)入圖標(biāo)/CSS文件的標(biāo)簽
script - 導(dǎo)入js代碼/文件的標(biāo)簽
base - url基本地址
2）標(biāo)題標(biāo)簽(h1-h6)
雙標(biāo)簽
一個(gè)標(biāo)簽占一行
3）段落標(biāo)簽(p標(biāo)簽)
雙標(biāo)簽，保證一個(gè)段落對(duì)應(yīng)一個(gè)p標(biāo)簽
一個(gè)標(biāo)簽占一行
4） font標(biāo)簽
雙標(biāo)簽
一行可以有多個(gè)
5）文字效果相關(guān)標(biāo)簽
在HTML中直接敲或者空格、縮進(jìn)是無(wú)效的。
<br/> - 單標(biāo)簽，往網(wǎng)頁(yè)中的內(nèi)容強(qiáng)制換行
- 一個(gè)像素(一個(gè)" "代表空一個(gè)像素)
  - 一個(gè)空格
<b></b> - 加粗
<strong></strong> - 加粗(有強(qiáng)調(diào)的意義)
<i></i> - 傾斜
<em></em> - 傾斜(有強(qiáng)調(diào)的意義)
6）無(wú)序列表(ul)
ul標(biāo)簽 - 代表列表容器，是一個(gè)整體
li標(biāo)簽 - 列表中的元素
7）有序列表(ol)
ol標(biāo)簽 - 代表列表容器，是一個(gè)整體
li標(biāo)簽 - 列表中的元素
8）自定義列表(dl)
dl標(biāo)簽 - 代表列表容器，是一個(gè)整體
dt標(biāo)簽 - 小分類標(biāo)簽(名詞)
dd標(biāo)簽 - 小分類下面的元素(解釋)
9）圖片標(biāo)簽(img)
單標(biāo)簽
默認(rèn)情況下一行可以顯示多張圖片
a.src屬性：設(shè)置圖片地址/路徑; 可以是本地路徑也可以是網(wǎng)絡(luò)地址
b.title屬性：設(shè)置圖片標(biāo)題（當(dāng)鼠標(biāo)停留在圖片上才會(huì)顯示出來(lái)）
c.alt屬性：圖片加載失敗的時(shí)候的提示信息
10）超鏈接(a)
雙標(biāo)簽
1). href屬性：跳轉(zhuǎn)的目的地
a.網(wǎng)址 - 點(diǎn)擊超鏈接直接加載網(wǎng)址對(duì)應(yīng)的網(wǎng)頁(yè)
b.本地html文件地址 - 點(diǎn)擊超鏈接直接加載本地html文件對(duì)應(yīng)的網(wǎng)頁(yè)
c.# - 刷新
d.選擇器 - 讓當(dāng)前頁(yè)面滾動(dòng)到指定的位置
2)target屬性: 跳轉(zhuǎn)方式
_self - 在當(dāng)前頁(yè)面中加載新的網(wǎng)頁(yè)(默認(rèn)值)
_blank - 在新的頁(yè)面中加載新的網(wǎng)頁(yè)
<!--加載本地html文件-->
<a href="03-列表標(biāo)簽.html">列表</a>
<!--刷新當(dāng)前網(wǎng)頁(yè)-->
<a href="#">刷新</a>
<!--頁(yè)面內(nèi)跳轉(zhuǎn)-->
<a href="#top">回到頂部</a><br />
11）表格
標(biāo)簽
1.table標(biāo)簽 - 代表表格整體
cellspacing屬性：設(shè)置表格中單元格和單元格以及單元格和表格表框的間距
bgcolor屬性：設(shè)置整個(gè)表格背景顏色(包含單元格的部分)
cellpadding屬性：設(shè)置單元格中的內(nèi)容到單元格(上下左右)邊框之間的距離
width屬性：設(shè)置整個(gè)表格的寬度
height屬性：設(shè)置整個(gè)表格的高度
align屬性：center(居中),left(左對(duì)齊),right(右對(duì)齊); 讓整個(gè)表格在它的父標(biāo)簽里面居中、居左或者居右
border屬性：設(shè)置單元格邊框的寬度
bordercolor屬性：?jiǎn)卧襁吙虻念伾?
2.tr - 代表表格中的一行
bgcolor屬性：設(shè)置一行中所有單元格的背景顏色
height屬性：設(shè)置一行的高度
align屬性：讓一行中所有單元格的內(nèi)容在單元格中居中、居左或者居右
3.td - 代表表格中的一個(gè)單元格
bgcolor屬性：設(shè)置指定單元格的背景顏色
width屬性：設(shè)置td所在的列的寬度
align屬性：讓當(dāng)前單元格中的內(nèi)容在單元格中居中、居左或者居右
補(bǔ)充：細(xì)線表格
1）設(shè)置整個(gè)的table的背景顏色是邊框線的顏色
2）設(shè)置每個(gè)單元格的顏色和邊框線的顏色不一樣
3）設(shè)置單元格和單元格的間距(cellspacing)為1
colspan屬性：列合并
rowspan屬性：行合并
