一個後端開發者的前端語言基礎：HTML5 & CSS
前端語言基礎：HTML5 & CSS
(一) HTML5：超文本標記語言
(1) 基本概念
- 是由一系列成對出現的元素標籤（標記）嵌套組合而成 ( XML也是標籤構成的 )
- 這些標籤以<標籤名稱>的形式出現，用於標記文本內容的含義
- 瀏覽器經過元素標籤解析文本內容並將結果顯示在網頁上，而元素標籤自己並不會被瀏覽器顯示出來
(2) 基本結構
HTML5元素的內容通常以起始標籤<元素名>開始，以結束標籤</元素名>終止css
<!Doctype html>
<html>
<head>
<title>網頁標題</title>
......
</head>
<body>
主體內容
</body>
</html>
DOCTYPE是Document Type的簡寫，含義爲文檔類型。html
HTML5文檔基礎結構中第一行<!DOCTYPE html>就是HTML5的DOCTYPE聲明前端
<html> </html> Html文件開始標籤和結束的標籤——文檔的根標籤html5
<head> </head> 指定html文檔的一些屬性，例如頁面標題，字符集和關鍵字等-瀏覽器
-
<title> </title>網頁標題標籤，即被收藏以及搜索引擎中搜索出的名稱 -
<meta.../>元數據標籤，不顯示，可是機器可讀，經常使用於搜索引擎索引(SEO優化)安全- 字符集聲明（網頁編碼聲明）
<meta charset="utf-8"> - 關鍵詞聲明
<meta name="keywords" content="Xx,Xx,Xx" /> - 頁面描述聲明
<meta name="description" content="This is a page about html5" />
- 字符集聲明（網頁編碼聲明）
-
<style> </style>服務器- 可用於定義文檔中指定區域的字體風格、背景顏色、對 齊方式等各種樣式信息
- Eg：
<style> p{color:read} </style>
-
<link.../>連接標籤框架- 標籤用於鏈接外部資源和當前HTML5文檔，它只出如今首部標籤
<head> </head>中，一般用於鏈接外部樣式表 - Eg：
<head> <link rel="stylesheet" hred="test.css"/> </head>
- 標籤用於鏈接外部資源和當前HTML5文檔，它只出如今首部標籤
-
<script> </script>ide- 此標籤爲可選，取決於當前頁面是否須要使用腳本內容，好比JavaScript。該標籤能夠直接引用外部腳本文件，也能夠直接將腳本命令寫在
<script> </script>標籤中 <head> <script src="test.js"></script> </head>
- 此標籤爲可選，取決於當前頁面是否須要使用腳本內容，好比JavaScript。該標籤能夠直接引用外部腳本文件，也能夠直接將腳本命令寫在
<body> </body> 顯示在頁面上的內容都寫在body裏面oop
(3) 基本規範
- HTML5使用
<!--...-->標籤爲文檔進行註釋 （多行或者單行） - 早期的HTML規範中，標籤的大小寫是不敏感的，可能存在大寫標籤的狀況
萬維網聯盟（W3C）明確規定了在新版本HTML5中必須使用小寫格式，包括元素標籤自己和其中可能出現的屬性均須要遵照此規範
-
一些標籤，沒有結束標籤 ，在標籤內結束
- 好比 換行
<br/>（通常來講加上/更加標準） - XML規範中，全部的標籤都必須有結束標籤
- 好比 換行
- 在HTML5文檔中存在一些特殊字符沒法直接使用。例如小於符號（<）和大於符號（>）是沒法直接輸出的，由於它們會被誤認爲是元素標籤的組成部分；而連續空格也沒法正確顯示，會被瀏覽器縮減爲單個空格。存在此類狀況的一系列特殊字符在HTML5中稱爲字符實體（Character Entities）
html的操做思想 （理解便可）
網頁中有不少數據，不一樣的數據可能須要不一樣的顯示效果，這個時候須要使用標籤把要操做的數據包起來（封裝起來），經過修改標籤的屬性值實現標籤內數據樣式的變化
一個標籤至關於一個容器，想要修改容器內數據的樣式，只須要改變容 器的屬性值，就能夠實現容器內數據樣式的變化
(4) 經常使用標籤
1. 文字標籤：修改文字樣式
<font> </font>
屬性：
size: 文字的大小 取值範圍 1-7,超出了7，默認仍是7
face: <font face="字體名稱:">文字</font>
color: 文字顏色 （兩種表示方式）
英文單詞：red green blue black white yellow
使用十六進制數表示 #ffffff : RGB
2. 標題標籤、段落標籤、換行標籤、水平線標籤和特殊字符
A：標題標籤
<!-- h1 到 h6 大小依次變小，同時自動換行--> <h1></h1> <h2></h2> <h3></h3> .......<h6></h6>
B：段落標籤
p元素有多種屬性，比較經常使用的是對齊方式align屬性
<P align="center">一段居中的文字</P> <P align="right">一段居右的文字</P>
C：換行標籤
<br> 換行標籤<br>用於在當前位置產生一個換行，至關於一次回車鍵所 產生的效果。該標籤單獨使用，無結束標籤 建議使用該標籤代替回車鍵，由於回車鍵所產生的多個連續換行會被瀏覽器自動省略 <br>標籤每次只能換一行，如需屢次換行，必須寫多個<br>標籤
D：水平線標籤
<hr/>
代碼
<hr size="5" color="blue"/>
屬性
<hr align="對齊方式" width="寬度" size="高度" color="顏色" noshade>
align屬性值：left（左對齊）、center（居中）、right（右對齊）
width：表示寬度，可使用百分數，也能夠用像素表示
size：表示高度，其值是數字 取值範圍 1-7
color：表明顏色，默認黑色
noshade：表明不顯示陰影，默認狀況是顯示陰影
D：特殊字符**
< < > > 空格 & &
3. 文本格式標籤
A. 字體標籤 <font> B. 斜體字標籤 <i> C. 粗體字標籤 <b> 和 <strong> D. 上標標籤、下標標籤 <sup> 和 <sub> E. 修訂標籤 <del> 和 <ins> F. 預格式化標籤 <pre>
4. 列表標籤
<!-- 無序列表 -->
<ul>
<li>無序列表項1</li>
<li>無序列表項2</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>有序列表項1</li>
<li>有序列表項2</li>
</ol>
| TYPE取值 | 設置的符號樣式 |
|---|---|
| 1 | 以數字進行排列 ，系統默認 |
| a | 以小寫字母排列 |
| A | 以大寫字母排列 |
| i | 以小寫的羅馬數字排列 |
| I | 以大寫的羅馬數字排列 |
| disc | 圓點符號，系統默認 |
| circle | 空心原點 |
| square | 空心方塊 |
<!-- 定義列表 -->
<dl>
<dt>第一個詞條
<dd>第一個詞條的定義
......
</dt>
</dl>
5. 圖像標籤
<img src="圖片的路徑"/> 語法結構爲： <img src="url" alt="替代文本" name="名字" width="寬度" height="高度" border="邊框」 >
src:圖片的路徑 width： 圖片的寬度 height：圖片的高度 alt: 圖片上顯示的文字，把鼠標移動到圖片上，停留片刻顯示內容 有些瀏覽器下不顯示（沒有效果）
6. 絕路徑和相對路徑
| 相對位置 | 輸入方法 | 舉例 |
|---|---|---|
| 同一目錄 | 直接輸入連接的文件 | a.html |
| 連接上一目錄 | 先輸出 「../」 再輸入文件名 | ../b.html |
| 連接下一目錄 | 輸入目錄和文件名，之間以 「/" 分隔 | test/c.html |
7. 超連接標籤
A: 連接資源
<a href="連接到資源的路徑"> 顯示在頁面上的內容 </a>
href: 連接的資源的地址 target：設置打開的方式 ，默認是在當前頁打開 能夠取四個值
| 屬性值 | 表示的含義 |
|---|---|
| _parent | 在上一級窗口打開（常在框架頁面中使用） |
| _blank | 新建一個窗口打開 |
| _self | 在同一窗口打開，是默認取值 |
| _top | 忽略全部的框架結構，在瀏覽器的整個窗口打開 |
B: 定位資源
<!-- 若是想要定位資源：定義一個位置 --> <a name="top">頂部</a> <!-- 回到這個位置 --> <a href="#top">回到頂部</a>
8. 移動文字標籤
<marquee>移動文字內容</marquee>
| 屬性 | 功能說明 | 屬性取值 | 各屬性值的功能 |
|---|---|---|---|
| behavior | 設置文字的移動方式 | Scroll、Slide、alternate | 循環移動、移動一次中止、來回交替移動 |
| direction | 設置文字的移動方向 | left、right、up、down | 從右向左移動、從左向右移動、從下向上移動、從上向下移動 |
| bgcolor | 設置文字的背景顏色 | 英文顏色名稱 | 表示所用顏色 |
| width | 設置文字背景的寬 | 數字 (或者百分比) | 設置背景的絕對寬度 |
| heigth | 設置文字背景的高 | 數字 (或者百分比) | 設置背景的絕對高度 |
| hspace和vspace | 設置文字背景和周圍其餘元素的空白間距 | 數字 | 設置文字背景和周圍其餘元素的空白間距的絕對值 |
| loop | 設置移動文字的循環次數 | infinite、正整數 | 文字移動無限次、文字移動n次 |
| sscrollmount | 設置移動文字每次移動的距離 | 數字（默認單位px） | 文字每次移動的距離 |
| scrolldelay | 設置移動文字每次移動後的間歇時間 | 數字（默認單位px） | 文字每次移動後的間歇時間 |
9. 表格標籤
能夠對數據進行格式化，使數據顯示更加清晰，可用於靜態頁面和動態頁面的排版
<table></table>: 表示表格的範圍
width：寬度
border：邊框
cellpadding：定義內容和單元格的距離
cellspacing：定義單元格之間的距離。若是指定爲0，則單元格的線會合爲一條、
bgcolor：背景色
align：對齊方式
tr：定義行
bgcolor：背景色
align：對齊方式
td：定義單元格
colspan：合併列
rowspan：合併行
<caption></caption>:表格的標題
10. 表單標籤
概念：用於採集用戶輸入的數據，用於和服務器交互，例如登陸或者註冊界面
<form></form>: 定義一個表單的範圍
屬性 action 指定提交數據的URL，默認提交到當前頁面 method 指定表單提交方式，經常使用的有兩種，get(默認)和post
簡單說一說： get和post區別？
一、get請求地址欄會攜帶提交的數據，post不會攜帶
二、get請求安全級別較低，post較高
三、get請求數據大小的限制，post沒有限制
輸入項：能夠輸入內容或者選擇內容的部分
大部分的輸入項 使用 <input type="輸入項的類型"/>
在輸入項裏面須要有一個name屬性
普通輸入項：<input type="text"/>
密碼輸入項：<input type="password"/>
單選輸入項：<input type="radio"/>
複選輸入項：<input type="checkbox"/>
<!--
在裏面須要屬性 name
name的屬性值必需要相同
必須有一個value值
實現默認選中的屬性
checked="checked"
-->
文件輸入項 <input type="file"/> （後面上傳時候用到）
下拉輸入項 （不是在input標籤裏面的）
<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
- 默認選擇
selected="selected"
文本：<textarea cols="10" rows="10"></textarea>
隱藏項（不會顯示在頁面上，可是存在於html代碼裏面）：<input type="hidden" />
提交按鈕：<input type="submit"/>
<input type="submit" value="註冊"/>
使用圖片提交：<input type="image" src="圖片路徑"/>
重置按鈕： 回到輸入項的初始狀態：<input type="reset"/>
普通按鈕：<input type="button" value=""/>
11. 容器標籤
A. <div>標籤
標籤<div>可將網頁頁面分割成不一樣的獨立部分，一般用於定義文檔中的區域或節。
該標籤是一個塊級元素（block level element），瀏覽器會自動在<div>和</div>所標記的 區域先後自動放置一個換行符。每一個標籤可有一個獨立的id號。
一樣屬於塊級元素的還有段落標籤<p>、表格標籤<table>、標題標籤<h1>-<h6>等。
B. <span>標籤
標籤<span>一般做爲文本的容器，它沒有特定的含義和樣式，只有與CSS同時使用才能夠爲指定文本設置樣式屬性。
該標籤是一個內聯元素（inline element），與塊級元素相反，內聯元素不會自動在先後自動放置換行符，所以內聯元素會默認在同一行顯示。
(二) 層疊樣式表
多個樣式能夠做用在同一個html元素上，使得頁面效果更加好，CSS將網頁內容和顯示樣式進行分離，下降耦合度，提升了開發效率
(1) CSS和html結合的方式
- 內聯樣式
在每一個html標籤上面都有一個屬性 style，把css和html結合在一塊兒
<div style="background-color:red; color:green;">
- 內部樣式
使用html的一個標籤實現
<style>標籤，寫在head裏面
<style type = "texy/css">
div{
background-color:blue;
color:red;
}
</style>
- 補充樣式
style標籤裏面 使用語句（在某些瀏覽器下不起做用）
<style type="text/css">
@import uel(div.css);
</style>
- 外部樣式
使用頭標籤 link，引入外部css文件，第一步 ，建立一個css文件
<link rel="stylesheet" type="text/css" href="css文件的路徑"/>
通常使用第四種方式
優先級（通常狀況）
由上到下，由外到內。優先級由低到高。
後加載的優先級高
(2) CSS的基本選擇器
含義：要對哪一個標籤裏面的數據進行操做
(1) 標籤選擇器
使用標籤名做爲選擇器的名稱
div {
background-color:gray;
clolr:white;
}
(2) class選擇器（div.ideal）
每一個html標籤都有一個屬性 class
<div class="ideal">test</div>
.ideal {
background-color:orange;
}
(3) id選擇器 (div#ideal)
每一個html標籤上面有一個屬性 id
<div id="ideal">test</div>
#ideal {
background-color:#333300;
}
優先級：style > id選擇器 > class選擇器 > 標籤選擇器
(3) CSS的擴展選擇器
(1) 關聯選擇器（調用加空格）
<div><p>test</p></div>
設置div標籤裏面p標籤的樣式，嵌套標籤裏面的樣式
div p {
background-color:orange;
}
(2) 組合選擇器
<div>aaa</div>
<p>bbb</p>
把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技術的公衆號：理想二旬不止
相關文章
- 1. 一個後端開發者的前端語言基礎：HTML5 & CSS
- 2. 一個後端開發者的前端語言基礎：JavaScript
- 3. 前端開發CSS基礎
- 4. 前端開發.Html5.HTML5基本格式
- 5. 【前端】一個後端開發的前端開發最優體驗
- 6. day44前端開發2之css基礎
- 7. web前端開發（二）—CSS基礎
- 8. 前端基礎——CSS（一）
- 9. 用WebStorm開發，基於HTML5+css+JavaScript開發的前端頁面
- 10. day46 前端基礎HTML5+CSS3
- 更多相關文章...
- • R 語言基礎 - R 語言教程
- • Kotlin 基礎語法 - Kotlin 教程
- • Kotlin學習（一）基本語法
- • PHP開發工具
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
