資訊專欄INFORMATION COLUMN
摘要：每個(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)簽終止
網(wǎng)頁標(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)頁編碼聲明）
關(guān)鍵詞聲明
頁面描述聲明
可用于定義文檔中指定區(qū)域的字體風(fēng)格、背景顏色、對(duì) 齊方式等各類樣式信息
Eg：
標(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)簽
屬性：
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：特殊字符**
< < > > 空格 & &
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 | 空心方塊 |
語法結(jié)構(gòu)為：
在輸入項(xiàng)里面需要有一個(gè)name屬性
普通輸入項(xiàng)：
密碼輸入項(xiàng)：
單選輸入項(xiàng)：
復(fù)選輸入項(xiàng)：
文件輸入項(xiàng) （后面上傳時(shí)候用到）
下拉輸入項(xiàng) （不是在input標(biāo)簽里面的）
- 默認(rèn)選擇
selected="selected"
文本：
隱藏項(xiàng)（不會(huì)顯示在頁面上，但是存在于html代碼里面）：
提交按鈕：
使用圖片提交：
重置按鈕： 回到輸入項(xiàng)的初始狀態(tài)：
普通按鈕：
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)用加空格）
設(shè)置div標(biāo)簽里面p標(biāo)簽的樣式，嵌套標(biāo)簽里面的樣式 div p { background-color:orange; }test
(2) 組合選擇器
(4) CSS的盒子模型aaabbb
把div和p標(biāo)簽設(shè)置成相同的樣式，把不同的標(biāo)簽設(shè)置成相同的樣式 div,p { background-color:orange; }在進(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ū)ο蟮挠疫? right：文本流向?qū)ο蟮淖筮?/pre>(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)：理想二旬不止
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116232.html
相關(guān)文章
一個(gè)后端開發(fā)者的前端語言基礎(chǔ)：HTML5 & CSS
摘要：每個(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)簽以的形式出現(xiàn)，用于標(biāo)記文本內(nèi)容的含義 瀏覽器通過元素標(biāo)簽解析文本內(nèi)容并...
一個(gè)后端開發(fā)者的前端語言基礎(chǔ)：HTML5 & CSS
摘要：每個(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)...
庫&插件&框架&工具
摘要：一些有用的一些有用的，包括轉(zhuǎn)換小箭頭三角形媒體查詢等中文指南是當(dāng)下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯(cuò)誤 2016 年最好用的表單驗(yàn)證庫 SMValidator.js 前端表單驗(yàn)證工具分享 淺談前端線上部署與運(yùn)維 說到前端部署，可能大多數(shù)前端工程師在工作中都是使用的公司現(xiàn)成的部署系統(tǒng)，與SRE對(duì)接、一起完...
庫&插件&框架&工具
摘要：一些有用的一些有用的，包括轉(zhuǎn)換小箭頭三角形媒體查詢等中文指南是當(dāng)下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯(cuò)誤 2016 年最好用的表單驗(yàn)證庫 SMValidator.js 前端表單驗(yàn)證工具分享 淺談前端線上部署與運(yùn)維 說到前端部署，可能大多數(shù)前端工程師在工作中都是使用的公司現(xiàn)成的部署系統(tǒng)，與SRE對(duì)接、一起完...
前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總
摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...
發(fā)表評(píng)論
0條評(píng)論
DevWiki
男|高級(jí)講師
TA的文章
閱讀更多
C++重溫筆記(四): 繼承和派生
閱讀 1635·2021-10-14 09:43
這10款實(shí)用硬盤性能檢測(cè)軟件 適合HDD和SSD硬盤壞點(diǎn)健康檢查
閱讀 5564·2021-09-07 10:21
css-secrets (css揭秘) 知識(shí)點(diǎn)目錄，值得深入學(xué)習(xí)！
閱讀 1289·2019-08-30 15:56
小技巧|CSS如何實(shí)現(xiàn)文字兩端對(duì)齊
閱讀 2133·2019-08-30 15:53
一個(gè)后端開發(fā)者的前端語言基礎(chǔ)：HTML5 & CSS
閱讀 1243·2019-08-30 15:44
2019前端秋季社招面試經(jīng)歷總結(jié)（三年經(jīng)驗(yàn)）
閱讀 2020·2019-08-30 15:44
CSS: 給表格的第一列和最后一列不同的樣式
閱讀 1331·2019-08-29 17:24
前端方便面
閱讀 761·2019-08-29 15:19
最新活動(dòng)
閱讀需要支付1元查看
