資訊專欄INFORMATION COLUMN
摘要：每個標簽可有一個獨立的號。該標簽是一個內聯元素，與塊級元素相反，內聯元素不會自動在前后自動放置換行符，因此內聯元素會默認在同一行顯示。
前端語言基礎：HTML5 & CSS (一) HTML5：超文本標記語言 (1) 基本概念
是由一系列成對出現的元素標簽（標記）嵌套組合而成 ( XML也是標簽構成的 )
這些標簽以<標簽名稱>的形式出現，用于標記文本內容的含義
瀏覽器通過元素標簽解析文本內容并將結果顯示在網頁上，而元素標簽本身并不會被瀏覽器顯示出來
(2) 基本結構HTML5元素的內容一般以起始標簽<元素名>開始，以結束標簽終止
網頁標題
......
主體內容
DOCTYPE是Document Type的簡寫，含義為文檔類型。
HTML5文檔基礎結構中第一行就是HTML5的DOCTYPE聲明
Html文件開始標簽和結束的標簽——文檔的根標簽
指定html文檔的一些屬性，例如頁面標題，字符集和關鍵字等-
字符集聲明（網頁編碼聲明）
關鍵詞聲明
頁面描述聲明
可用于定義文檔中指定區域的字體風格、背景顏色、對 齊方式等各類樣式信息
Eg：
標簽用于連接外部資源和當前HTML5文檔，它只出現在首部標簽 中，通常用于連接外部樣式表
Eg：
此標簽為可選，取決于當前頁面是否需要使用腳本內容，比如JavaScript。該標簽可以直接引用外部腳本文件，也可以直接將腳本命令寫在標簽中
顯示在頁面上的內容都寫在body里面
(3) 基本規范HTML5使用標簽為文檔進行注釋 （多行或者單行）
早期的HTML規范中，標簽的大小寫是不敏感的，可能存在大寫標簽的情況
萬維網聯盟（W3C）明確規定了在新版本HTML5中必須使用小寫格式，包括元素標簽本身和其中可能出現的屬性均需要遵守此規范
一些標簽，沒有結束標簽 ，在標簽內結束
比如 換行
（一般來說加上/更加標準）
XML規范中，所有的標簽都必須有結束標簽
在HTML5文檔中存在一些特殊字符無法直接使用。例如小于符號（<）和大于符號（>）是無法直接輸出的，因為它們會被誤認為是元素標簽的組成部分；而連續空格也無法正確顯示，會被瀏覽器縮減為單個空格。存在此類情況的一系列特殊字符在HTML5中稱為字符實體（Character Entities）
html的操作思想 （理解即可）
網頁中有很多數據，不同的數據可能需要不同的顯示效果，這個時候需要使用標簽把要操作的數據包起來（封裝起來），通過修改標簽的屬性值實現標簽內數據樣式的變化
一個標簽相當于一個容器，想要修改容器內數據的樣式，只需要改變容 器的屬性值，就可以實現容器內數據樣式的變化
(4) 常用標簽
屬性：
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：特殊字符**
< < > > 空格 & &
A. 字體標簽 B. 斜體字標簽 C. 粗體字標簽 和 D. 上標標簽、下標標簽 和 E. 修訂標簽和 F. 預格式化標簽4. 列表標簽
- 無序列表項1
- 無序列表項2
- 有序列表項1
- 有序列表項2
| TYPE取值 | 設置的符號樣式 |
|---|---|
| 1 | 以數字進行排列 ，系統默認 |
| a | 以小寫字母排列 |
| A | 以大寫字母排列 |
| i | 以小寫的羅馬數字排列 |
| I | 以大寫的羅馬數字排列 |
| disc | 圓點符號，系統默認 |
| circle | 空心原點 |
| square | 空心方塊 |
語法結構為：
在輸入項里面需要有一個name屬性
普通輸入項：
密碼輸入項：
單選輸入項：
復選輸入項：
文件輸入項 （后面上傳時候用到）
下拉輸入項 （不是在input標簽里面的）
- 默認選擇
selected="selected"
文本：
隱藏項（不會顯示在頁面上，但是存在于html代碼里面）：
提交按鈕：
使用圖片提交：
重置按鈕： 回到輸入項的初始狀態：
普通按鈕：
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) 關聯選擇器（調用加空格）
設置div標簽里面p標簽的樣式，嵌套標簽里面的樣式 div p { background-color:orange; }test
(2) 組合選擇器
(4) CSS的盒子模型aaabbb
把div和p標簽設置成相同的樣式，把不同的標簽設置成相同的樣式 div,p { background-color:orange; }在進行布局前需要把數據封裝到一塊一塊的區域內（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技術的公眾號：理想二旬不止
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/76056.html
相關文章
一個后端開發者的前端語言基礎：HTML5 & CSS
摘要：每個標簽可有一個獨立的號。該標簽是一個內聯元素，與塊級元素相反，內聯元素不會自動在前后自動放置換行符，因此內聯元素會默認在同一行顯示。 前端語言基礎：HTML5 & CSS (一) HTML5：超文本標記語言 (1) 基本概念 是由一系列成對出現的元素標簽（標記）嵌套組合而成 ( XML也是標簽構成的 ) 這些標簽以的形式出現，用于標記文本內容的含義 瀏覽器通過元素標簽解析文本內容并...
一個后端開發者的前端語言基礎：HTML5 & CSS
摘要：每個標簽可有一個獨立的號。該標簽是一個內聯元素，與塊級元素相反，內聯元素不會自動在前后自動放置換行符，因此內聯元素會默認在同一行顯示。前端語言基礎：HTML5 & CSS (一) HTML5：超文本標記語言 (1) 基本概念是由一系列成對出現的元素標簽(標記)嵌套組合而成 ( XML也是標簽構成的 )這些標簽以<標簽名稱>的形式出現，用于標記文本內容的含義瀏覽器通過元素標...
庫&插件&框架&工具
摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享 淺談前端線上部署與運維 說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...
庫&插件&框架&工具
摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享 淺談前端線上部署與運維 說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...
前端資源系列（4）-前端學習資源分享&前端面試資源匯總
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...
發表評論
0條評論
ACb0y
男|高級講師
TA的文章
閱讀更多
短信發送平臺的推廣技巧有哪些？3個小技巧要記牢！
閱讀 902·2021-11-22 13:53
Hostigger：2021年黑色星期五促銷Black Friday Discounts開啟，VPS
閱讀 2532·2021-10-15 09:40
沙利文發布首個2021去中心化云計算市場趨勢概覽 安邁云布局切中未來趨勢_云資訊
閱讀 999·2021-10-14 09:42
網絡地址和主機地址怎么算-怎么算網絡地址,主機地址,廣播地址？
閱讀 3474·2021-09-22 15:59
富士通數據在暗網出售 犯罪團伙是如何“運作”的?
閱讀 887·2021-09-02 09:47
CSS 提示工具(Tooltip)
閱讀 2365·2019-08-30 15:54
淺析CSS定位
閱讀 1437·2019-08-29 17:14
使用 Nginx 編譯 Sass 和 Scss
閱讀 398·2019-08-29 15:15
最新活動
閱讀需要支付1元查看
