摘要：每個(gè)標(biāo)簽可有一個(gè)獨(dú)立的號(hào)。該標(biāo)簽是一個(gè)內(nèi)聯(lián)元素，與塊級(jí)元素相反，內(nèi)聯(lián)元素不會(huì)自動(dòng)在前后自動(dòng)放置換行符，因此內(nèi)聯(lián)元素會(huì)默認(rèn)在同一行顯示。

前端語言基礎(chǔ)：HTML5 & CSS (一) HTML5：超文本標(biāo)記語言 (1) 基本概念

是由一系列成對(duì)出現(xiàn)的元素標(biāo)簽(標(biāo)記)嵌套組合而成 ( XML也是標(biāo)簽構(gòu)成的 )

這些標(biāo)簽以<標(biāo)簽名稱>的形式出現(xiàn)，用于標(biāo)記文本內(nèi)容的含義

瀏覽器通過元素標(biāo)簽解析文本內(nèi)容并將結(jié)果顯示在網(wǎng)頁上，而元素標(biāo)簽本身并不會(huì)被瀏覽器顯示出來

(2) 基本結(jié)構(gòu)

HTML5元素的內(nèi)容一般以起始標(biāo)簽<元素名>開始，以結(jié)束標(biāo)簽終止

......

主體內(nèi)容

DOCTYPE是Document Type的簡(jiǎn)寫，含義為文檔類型。

HTML5文檔基礎(chǔ)結(jié)構(gòu)中第一行就是HTML5的DOCTYPE聲明

Html文件開始標(biāo)簽和結(jié)束的標(biāo)簽——文檔的根標(biāo)簽

指定html文檔的一些屬性，例如頁面標(biāo)題，字符集和關(guān)鍵字等-

網(wǎng)頁標(biāo)題標(biāo)簽，即被收藏以及搜索引擎中搜索出的名稱

元數(shù)據(jù)標(biāo)簽，不顯示，但是機(jī)器可讀，常用于搜索引擎索引(SEO優(yōu)化)

字符集聲明(網(wǎng)頁編碼聲明)

關(guān)鍵詞聲明

頁面描述聲明

可用于定義文檔中指定區(qū)域的字體風(fēng)格、背景顏色、對(duì) 齊方式等各類樣式信息

Eg：

鏈接標(biāo)簽

標(biāo)簽用于連接外部資源和當(dāng)前HTML5文檔，它只出現(xiàn)在首部標(biāo)簽 中，通常用于連接外部樣式表

Eg：

此標(biāo)簽為可選，取決于當(dāng)前頁面是否需要使用腳本內(nèi)容，比如JavaScript。該標(biāo)簽可以直接引用外部腳本文件，也可以直接將腳本命令寫在標(biāo)簽中

顯示在頁面上的內(nèi)容都寫在body里面

(3) 基本規(guī)范

HTML5使用標(biāo)簽為文檔進(jìn)行注釋 (多行或者單行)

早期的HTML規(guī)范中，標(biāo)簽的大小寫是不敏感的，可能存在大寫標(biāo)簽的情況

萬維網(wǎng)聯(lián)盟(W3C)明確規(guī)定了在新版本HTML5中必須使用小寫格式，包括元素標(biāo)簽本身和其中可能出現(xiàn)的屬性均需要遵守此規(guī)范

一些標(biāo)簽，沒有結(jié)束標(biāo)簽 ，在標(biāo)簽內(nèi)結(jié)束

比如 換行

(一般來說加上/更加標(biāo)準(zhǔn))

XML規(guī)范中，所有的標(biāo)簽都必須有結(jié)束標(biāo)簽

在HTML5文檔中存在一些特殊字符無法直接使用。例如小于符號(hào)(<)和大于符號(hào)(>)是無法直接輸出的，因?yàn)樗鼈儠?huì)被誤認(rèn)為是元素標(biāo)簽的組成部分;而連續(xù)空格也無法正確顯示，會(huì)被瀏覽器縮減為單個(gè)空格。存在此類情況的一系列特殊字符在HTML5中稱為字符實(shí)體(Character Entities)

html的操作思想 (理解即可)

網(wǎng)頁中有很多數(shù)據(jù)，不同的數(shù)據(jù)可能需要不同的顯示效果，這個(gè)時(shí)候需要使用標(biāo)簽把要操作的數(shù)據(jù)包起來(封裝起來)，通過修改標(biāo)簽的屬性值實(shí)現(xiàn)標(biāo)簽內(nèi)數(shù)據(jù)樣式的變化

一個(gè)標(biāo)簽相當(dāng)于一個(gè)容器，想要修改容器內(nèi)數(shù)據(jù)的樣式，只需要改變?nèi)?器的屬性值，就可以實(shí)現(xiàn)容器內(nèi)數(shù)據(jù)樣式的變化

(4) 常用標(biāo)簽

1. 文字標(biāo)簽：修改文字樣式

屬性：

size: 文字的大小 取值范圍 1-7,超出了7，默認(rèn)還是7

face: 文字

color: 文字顏色 (兩種表示方式)

英文單詞：red green blue black white yellow

使用十六進(jìn)制數(shù)表示 #ffffff : RGB

2. 標(biāo)題標(biāo)簽、段落標(biāo)簽、換行標(biāo)簽、水平線標(biāo)簽和特殊字符

A：標(biāo)題標(biāo)簽

.......

B：段落標(biāo)簽

p元素有多種屬性，比較常用的是對(duì)齊方式align屬性

一段居中的文字

一段居右的文字

C：換行標(biāo)簽

換行標(biāo)簽用于在當(dāng)前位置產(chǎn)生一個(gè)換行，相當(dāng)于一次回車鍵所 產(chǎn)生的效果。該標(biāo)簽多帶帶使用，無結(jié)束標(biāo)簽

建議使用該標(biāo)簽代替回車鍵，因?yàn)榛剀囨I所產(chǎn)生的多個(gè)連續(xù)換行會(huì)被瀏覽器自動(dòng)省略

標(biāo)簽每次只能換一行，如需多次換行，必須寫多個(gè)標(biāo)簽

D：水平線標(biāo)簽

代碼

屬性

align屬性值：left(左對(duì)齊)、center(居中)、right(右對(duì)齊)

width：表示寬度，可以使用百分?jǐn)?shù)，也可以用像素表示

size：表示高度，其值是數(shù)字 取值范圍 1-7

color：代表顏色，默認(rèn)黑色

noshade：代表不顯示陰影，默認(rèn)情況是顯示陰影

D：特殊字符**

< <

> >

空格

& &

3. 文本格式標(biāo)簽

A. 字體標(biāo)簽

B. 斜體字標(biāo)簽

C. 粗體字標(biāo)簽 和

D. 上標(biāo)標(biāo)簽、下標(biāo)標(biāo)簽 和

E. 修訂標(biāo)簽 和

F. 預(yù)格式化標(biāo)簽

4. 列表標(biāo)簽

無序列表項(xiàng)1

無序列表項(xiàng)2

有序列表項(xiàng)1

有序列表項(xiàng)2

TYPE取值設(shè)置的符號(hào)樣式1以數(shù)字進(jìn)行排列 ，系統(tǒng)默認(rèn)a以小寫字母排列A以大寫字母排列i以小寫的羅馬數(shù)字排列I以大寫的羅馬數(shù)字排列disc圓點(diǎn)符號(hào)，系統(tǒng)默認(rèn)circle空心原點(diǎn)square空心方塊

第一個(gè)詞條

第一個(gè)詞條的定義

......

5. 圖像標(biāo)簽

語法結(jié)構(gòu)為：

test/c.html

7. 超鏈接標(biāo)簽

A: 鏈接資源

顯示在頁面上的內(nèi)容

href: 鏈接的資源的地址

target：設(shè)置打開的方式 ，默認(rèn)是在當(dāng)前頁打開

可以取四個(gè)值

屬性值表示的含義_parent在上一級(jí)窗口打開(常在框架頁面中使用)_blank新建一個(gè)窗口打開_self在同一窗口打開，是默認(rèn)取值_top忽略所有的框架結(jié)構(gòu)，在瀏覽器的整個(gè)窗口打開

B: 定位資源

頂部

回到頂部

8. 移動(dòng)文字標(biāo)簽

移動(dòng)文字內(nèi)容

屬性功能說明屬性取值各屬性值的功能behavior設(shè)置文字的移動(dòng)方式Scroll、Slide、alternate循環(huán)移動(dòng)、移動(dòng)一次停止、來回交替移動(dòng)direction設(shè)置文字的移動(dòng)方向left、right、up、down從右向左移動(dòng)、從左向右移動(dòng)、從下向上移動(dòng)、從上向下移動(dòng)bgcolor設(shè)置文字的背景顏色英文顏色名稱表示所用顏色width設(shè)置文字背景的寬數(shù)字 (或者百分比)設(shè)置背景的絕對(duì)寬度heigth設(shè)置文字背景的高數(shù)字 (或者百分比)設(shè)置背景的絕對(duì)高度hspace和vspace設(shè)置文字背景和周圍其他元素的空白間距數(shù)字設(shè)置文字背景和周圍其他元素的空白間距的絕對(duì)值loop設(shè)置移動(dòng)文字的循環(huán)次數(shù)infinite、正整數(shù)文字移動(dòng)無限次、文字移動(dòng)n次sscrollmount設(shè)置移動(dòng)文字每次移動(dòng)的距離數(shù)字(默認(rèn)單位px)文字每次移動(dòng)的距離scrolldelay設(shè)置移動(dòng)文字每次移動(dòng)后的間歇時(shí)間數(shù)字(默認(rèn)單位px)文字每次移動(dòng)后的間歇時(shí)間

9. 表格標(biāo)簽

可以對(duì)數(shù)據(jù)進(jìn)行格式化，使數(shù)據(jù)顯示更加清晰，可用于靜態(tài)頁面和動(dòng)態(tài)頁面的排版

: 表示表格的范圍

width：寬度

border：邊框

cellpadding：定義內(nèi)容和單元格的距離

cellspacing：定義單元格之間的距離。如果指定為0，則單元格的線會(huì)合為一條、

bgcolor：背景色

align：對(duì)齊方式

tr：定義行

bgcolor：背景色

align：對(duì)齊方式

td：定義單元格

colspan：合并列

rowspan：合并行

:表格的標(biāo)題

10. 表單標(biāo)簽

概念：用于采集用戶輸入的數(shù)據(jù)，用于和服務(wù)器交互，例如登錄或者注冊(cè)界面

: 定義一個(gè)表單的范圍

屬性

action 指定提交數(shù)據(jù)的URL，默認(rèn)提交到當(dāng)前頁面

method 指定表單提交方式，常用的有兩種，get(默認(rèn))和post

簡(jiǎn)單說一說： get和post區(qū)別?

1、get請(qǐng)求地址欄會(huì)攜帶提交的數(shù)據(jù)，post不會(huì)攜帶

2、get請(qǐng)求安全級(jí)別較低，post較高

3、get請(qǐng)求數(shù)據(jù)大小的限制，post沒有限制

輸入項(xiàng)：可以輸入內(nèi)容或者選擇內(nèi)容的部分

大部分的輸入項(xiàng) 使用

在輸入項(xiàng)里面需要有一個(gè)name屬性

普通輸入項(xiàng)：

密碼輸入項(xiàng)：

單選輸入項(xiàng)：

復(fù)選輸入項(xiàng)：

文件輸入項(xiàng) (后面上傳時(shí)候用到)

下拉輸入項(xiàng) (不是在input標(biāo)簽里面的)

1991 1992 1993

- 默認(rèn)選擇

selected="selected"

文本：

隱藏項(xiàng)(不會(huì)顯示在頁面上，但是存在于html代碼里面)：

提交按鈕：

使用圖片提交：

重置按鈕： 回到輸入項(xiàng)的初始狀態(tài)：

普通按鈕：

11. 容器標(biāo)簽

A. 標(biāo)簽

標(biāo)簽可將網(wǎng)頁頁面分割成不同的獨(dú)立部分，通常用于定義文檔中的區(qū)域或節(jié)。

該標(biāo)簽是一個(gè)塊級(jí)元素(block level element)，瀏覽器會(huì)自動(dòng)在和所標(biāo)記的 區(qū)域前后自動(dòng)放置一個(gè)換行符。每個(gè)標(biāo)簽可有一個(gè)獨(dú)立的id號(hào)。

同樣屬于塊級(jí)元素的還有段落標(biāo)簽、表格標(biāo)簽、標(biāo)題標(biāo)簽-等。

B. 標(biāo)簽

標(biāo)簽通常作為文本的容器，它沒有特定的含義和樣式，只有與CSS同時(shí)使用才可以為指定文本設(shè)置樣式屬性。

該標(biāo)簽是一個(gè)內(nèi)聯(lián)元素(inline element)，與塊級(jí)元素相反，內(nèi)聯(lián)元素不會(huì)自動(dòng)在前后自動(dòng)放置換行符，因此內(nèi)聯(lián)元素會(huì)默認(rèn)在同一行顯示。

(二) 層疊樣式表

多個(gè)樣式可以作用在同一個(gè)html元素上，使得頁面效果更加好，CSS將網(wǎng)頁內(nèi)容和顯示樣式進(jìn)行分離，降低耦合度，提高了開發(fā)效率

(1) CSS和html結(jié)合的方式

內(nèi)聯(lián)樣式在每個(gè)html標(biāo)簽上面都有一個(gè)屬性 style，把css和html結(jié)合在一起

內(nèi)部樣式使用html的一個(gè)標(biāo)簽實(shí)現(xiàn)

補(bǔ)充樣式style標(biāo)簽里面 使用語句(在某些瀏覽器下不起作用)

外部樣式使用頭標(biāo)簽 link，引入外部css文件，第一步 ，創(chuàng)建一個(gè)css文件

一般使用第四種方式

優(yōu)先級(jí)(一般情況)

由上到下，由外到內(nèi)。優(yōu)先級(jí)由低到高。

后加載的優(yōu)先級(jí)高

(2) CSS的基本選擇器

含義：要對(duì)哪個(gè)標(biāo)簽里面的數(shù)據(jù)進(jìn)行操作

(1) 標(biāo)簽選擇器

使用標(biāo)簽名作為選擇器的名稱

div {

background-color:gray;

clolr:white;

}

(2) class選擇器(div.ideal)

每個(gè)html標(biāo)簽都有一個(gè)屬性 class

test

.ideal {

background-color:orange;

}

(3) id選擇器 (div#ideal)

每個(gè)html標(biāo)簽上面有一個(gè)屬性 id

test

#ideal {

background-color:#333300;

}

優(yōu)先級(jí)：style > id選擇器 > class選擇器 > 標(biāo)簽選擇器

(3) CSS的擴(kuò)展選擇器

(1) 關(guān)聯(lián)選擇器(調(diào)用加空格)

test

設(shè)置div標(biāo)簽里面p標(biāo)簽的樣式，嵌套標(biāo)簽里面的樣式

div p {

background-color:orange;

}

(2) 組合選擇器

aaa

bbb

把div和p標(biāo)簽設(shè)置成相同的樣式，把不同的標(biāo)簽設(shè)置成相同的樣式

div,p {

background-color:orange;

}

(4) CSS的盒子模型

在進(jìn)行布局前需要把數(shù)據(jù)封裝到一塊一塊的區(qū)域內(nèi)(div)

(1) 邊框

border: 2px solid blue;

border：統(tǒng)一設(shè)置

上 border-top

下 border-bottom

左 border-left

右 border-right

(2) 內(nèi)邊距

padding:20px;

使用padding統(tǒng)一設(shè)置

也可以分別設(shè)置

上下左右四個(gè)內(nèi)邊距

(3) 外邊距

margin: 20px;

可以使用margin統(tǒng)一設(shè)置

也可以分別設(shè)置

上下左右四個(gè)外邊距

(4) float：浮動(dòng)

left：文本流向?qū)ο蟮挠疫?/p>

right：文本流向?qū)ο蟮淖筮?/p>

(5) 布局定位

position：

屬性值

absolute ：

將對(duì)象從文檔流中拖出

可以是top、bottom等屬性進(jìn)行定位

relative ：

不會(huì)把對(duì)象從文檔流中拖出

可以使用top、bottom等屬性進(jìn)行定位

結(jié)尾：

如果內(nèi)容中有什么不足，或者錯(cuò)誤的地方，歡迎大家給我留言提出意見, 蟹蟹大家 !^_^

如果能幫到你的話，那就來關(guān)注我吧!(系列文章均會(huì)在公眾號(hào)第一時(shí)間更新)

在這里的我們素不相識(shí)，卻都在為了自己的夢(mèng)而努力 ?一個(gè)堅(jiān)持推送原創(chuàng)Java技術(shù)的公眾號(hào)：理想二旬不止