摘要：每個標簽可有一個獨立的號。該標簽是一個內聯元素，與塊級元素相反，內聯元素不會自動在前后自動放置換行符，因此內聯元素會默認在同一行顯示。

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

是由一系列成對出現的元素標簽(標記)嵌套組合而成 ( XML也是標簽構成的 )

這些標簽以<標簽名稱>的形式出現，用于標記文本內容的含義

瀏覽器通過元素標簽解析文本內容并將結果顯示在網頁上，而元素標簽本身并不會被瀏覽器顯示出來

(2) 基本結構

HTML5元素的內容一般以起始標簽<元素名>開始，以結束標簽終止

......

主體內容

DOCTYPE是Document Type的簡寫，含義為文檔類型。

HTML5文檔基礎結構中第一行就是HTML5的DOCTYPE聲明

Html文件開始標簽和結束的標簽——文檔的根標簽

指定html文檔的一些屬性，例如頁面標題，字符集和關鍵字等-

網頁標題標簽，即被收藏以及搜索引擎中搜索出的名稱

元數據標簽，不顯示，但是機器可讀，常用于搜索引擎索引(SEO優化)

字符集聲明(網頁編碼聲明)

關鍵詞聲明

頁面描述聲明

可用于定義文檔中指定區域的字體風格、背景顏色、對 齊方式等各類樣式信息

Eg：

鏈接標簽

標簽用于連接外部資源和當前HTML5文檔，它只出現在首部標簽 中，通常用于連接外部樣式表

Eg：

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

顯示在頁面上的內容都寫在body里面

(3) 基本規范

HTML5使用標簽為文檔進行注釋 (多行或者單行)

早期的HTML規范中，標簽的大小寫是不敏感的，可能存在大寫標簽的情況

萬維網聯盟(W3C)明確規定了在新版本HTML5中必須使用小寫格式，包括元素標簽本身和其中可能出現的屬性均需要遵守此規范

一些標簽，沒有結束標簽 ，在標簽內結束

比如 換行

(一般來說加上/更加標準)

XML規范中，所有的標簽都必須有結束標簽

在HTML5文檔中存在一些特殊字符無法直接使用。例如小于符號(<)和大于符號(>)是無法直接輸出的，因為它們會被誤認為是元素標簽的組成部分;而連續空格也無法正確顯示，會被瀏覽器縮減為單個空格。存在此類情況的一系列特殊字符在HTML5中稱為字符實體(Character Entities)

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

網頁中有很多數據，不同的數據可能需要不同的顯示效果，這個時候需要使用標簽把要操作的數據包起來(封裝起來)，通過修改標簽的屬性值實現標簽內數據樣式的變化

一個標簽相當于一個容器，想要修改容器內數據的樣式，只需要改變容 器的屬性值，就可以實現容器內數據樣式的變化

(4) 常用標簽

1. 文字標簽：修改文字樣式

屬性：

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

face: 文字

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

英文單詞：red green blue black white yellow

使用十六進制數表示 #ffffff : RGB

2. 標題標簽、段落標簽、換行標簽、水平線標簽和特殊字符

A：標題標簽

.......

B：段落標簽

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

一段居中的文字

一段居右的文字

C：換行標簽

換行標簽用于在當前位置產生一個換行，相當于一次回車鍵所 產生的效果。該標簽多帶帶使用，無結束標簽

建議使用該標簽代替回車鍵，因為回車鍵所產生的多個連續換行會被瀏覽器自動省略

標簽每次只能換一行，如需多次換行，必須寫多個標簽

D：水平線標簽

代碼

屬性

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

width：表示寬度，可以使用百分數，也可以用像素表示

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

color：代表顏色，默認黑色

noshade：代表不顯示陰影，默認情況是顯示陰影

D：特殊字符**

< <

> >

空格

& &

3. 文本格式標簽

A. 字體標簽

B. 斜體字標簽

C. 粗體字標簽 和

D. 上標標簽、下標標簽 和

E. 修訂標簽 和

F. 預格式化標簽

4. 列表標簽

無序列表項1

無序列表項2

有序列表項1

有序列表項2

TYPE取值設置的符號樣式1以數字進行排列 ，系統默認a以小寫字母排列A以大寫字母排列i以小寫的羅馬數字排列I以大寫的羅馬數字排列disc圓點符號，系統默認circle空心原點square空心方塊

第一個詞條

第一個詞條的定義

......

5. 圖像標簽

語法結構為：

test/c.html

7. 超鏈接標簽

A: 鏈接資源

顯示在頁面上的內容

href: 鏈接的資源的地址

target：設置打開的方式 ，默認是在當前頁打開

可以取四個值

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

B: 定位資源

頂部

回到頂部

8. 移動文字標簽

移動文字內容

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

9. 表格標簽

可以對數據進行格式化，使數據顯示更加清晰，可用于靜態頁面和動態頁面的排版

: 表示表格的范圍

width：寬度

border：邊框

cellpadding：定義內容和單元格的距離

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

bgcolor：背景色

align：對齊方式

tr：定義行

bgcolor：背景色

align：對齊方式

td：定義單元格

colspan：合并列

rowspan：合并行

:表格的標題

10. 表單標簽

概念：用于采集用戶輸入的數據，用于和服務器交互，例如登錄或者注冊界面

: 定義一個表單的范圍

屬性

action 指定提交數據的URL，默認提交到當前頁面

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

簡單說一說： get和post區別?

1、get請求地址欄會攜帶提交的數據，post不會攜帶

2、get請求安全級別較低，post較高

3、get請求數據大小的限制，post沒有限制

輸入項：可以輸入內容或者選擇內容的部分

大部分的輸入項 使用

在輸入項里面需要有一個name屬性

普通輸入項：

密碼輸入項：

單選輸入項：

復選輸入項：

文件輸入項 (后面上傳時候用到)

下拉輸入項 (不是在input標簽里面的)

1991 1992 1993

- 默認選擇

selected="selected"

文本：

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

提交按鈕：

使用圖片提交：

重置按鈕： 回到輸入項的初始狀態：

普通按鈕：

11. 容器標簽

A. 標簽

標簽可將網頁頁面分割成不同的獨立部分，通常用于定義文檔中的區域或節。

該標簽是一個塊級元素(block level element)，瀏覽器會自動在和所標記的 區域前后自動放置一個換行符。每個標簽可有一個獨立的id號。

同樣屬于塊級元素的還有段落標簽、表格標簽、標題標簽-等。

B. 標簽

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

該標簽是一個內聯元素(inline element)，與塊級元素相反，內聯元素不會自動在前后自動放置換行符，因此內聯元素會默認在同一行顯示。

(二) 層疊樣式表

多個樣式可以作用在同一個html元素上，使得頁面效果更加好，CSS將網頁內容和顯示樣式進行分離，降低耦合度，提高了開發效率

(1) CSS和html結合的方式

內聯樣式在每個html標簽上面都有一個屬性 style，把css和html結合在一起

內部樣式使用html的一個標簽實現

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

外部樣式使用頭標簽 link，引入外部css文件，第一步 ，創建一個css文件

一般使用第四種方式

優先級(一般情況)

由上到下，由外到內。優先級由低到高。

后加載的優先級高

(2) CSS的基本選擇器

含義：要對哪個標簽里面的數據進行操作

(1) 標簽選擇器

使用標簽名作為選擇器的名稱

div {

background-color:gray;

clolr:white;

}

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

每個html標簽都有一個屬性 class

test

.ideal {

background-color:orange;

}

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

每個html標簽上面有一個屬性 id

test

#ideal {

background-color:#333300;

}

優先級：style > id選擇器 > class選擇器 > 標簽選擇器

(3) CSS的擴展選擇器

(1) 關聯選擇器(調用加空格)

test

設置div標簽里面p標簽的樣式，嵌套標簽里面的樣式

div p {

background-color:orange;

}

(2) 組合選擇器

aaa

bbb

把div和p標簽設置成相同的樣式，把不同的標簽設置成相同的樣式

div,p {

background-color:orange;

}

(4) CSS的盒子模型

在進行布局前需要把數據封裝到一塊一塊的區域內(div)

(1) 邊框

border: 2px solid blue;

border：統一設置

上 border-top

下 border-bottom

左 border-left

右 border-right

(2) 內邊距

padding:20px;

使用padding統一設置

也可以分別設置

上下左右四個內邊距

(3) 外邊距

margin: 20px;

可以使用margin統一設置

也可以分別設置

上下左右四個外邊距

(4) float：浮動

left：文本流向對象的右邊

right：文本流向對象的左邊

(5) 布局定位

position：

屬性值

absolute ：

將對象從文檔流中拖出

可以是top、bottom等屬性進行定位

relative ：

不會把對象從文檔流中拖出

可以使用top、bottom等屬性進行定位

結尾：

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

如果能幫到你的話，那就來關注我吧!(系列文章均會在公眾號第一時間更新)

在這里的我們素不相識，卻都在為了自己的夢而努力 ?一個堅持推送原創Java技術的公眾號：理想二旬不止