HTML+CSS基礎
一、HTML簡介
HTML稱為超文本标記語言，标準通用标記語言下的一個應用。
“超文本”就是指頁面内可以包含圖檔、連結，甚至音樂、程式等非文字元素。
超文本标記語言的結構包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關于網頁的資訊，“主體”部分提供網頁的具體内容。
是以html有其固定的結構：
基礎版--》
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>網站标題</title>
</head>
<body>
網站内容
</body>
</html>
詳細介紹版--》
<!DOCTYPE html>
<!--文檔頭：告訴浏覽器使用哪一種方式編譯代碼。-->
<!--1、标簽含義：标記，元素；
2、标簽結構：
雙标簽：<标簽名></标簽名>
單标簽：<标簽名>或</标簽名>-->
<html>
<!--<head> 标簽用于定義文檔的頭部，用來放置配置檔案它是所有頭部元素的容器。
<head> 中的元素可以引用腳本、訓示浏覽器在哪裡找到樣式表、提供元資訊等等。
文檔的頭部描述了文檔的各種屬性和資訊，包括文檔的标題、在 Web 中的位置以及和其他文檔的關系等。
絕大多數文檔頭部包含的資料都不會真正作為内容顯示給讀者。
下面這些标簽可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定義文檔的标題，它是 head 部分中唯一必需的元素。-->
<head>
<!--字元集：編碼方式，編碼方式有多種，不止utf-8隻是它的内置檔案比較完善，可以編譯中文也可以編譯英文，是以一般是選擇它，
如果你們公司隻是應用與中國使用者也可以使用GBK,其他國家的使用者也可以使用其他的編碼方式-->
<meta charset="UTF-8">
<!--這裡用來顯示網站标題-->
<title>此處寫網頁标題</title>
<!--我們看百度上，它網站标題前面還可以有一張圖檔，這裡稱它為縮略圖，它是怎麼來的呢？-->
<!--引入百度網站标題縮略圖，具體如何制作屬于我們的縮略圖，如果有需要可以扣我哈-->
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" target="_blank" rel="external nofollow" />
</head>
<body>
<!--放置網站内容-->
<!--<标簽名 k="">k屬于标簽屬性，不分先後-->
<!--一、img有3個基本屬性：src、alt、title。
1、src：圖檔路徑，路徑分為：絕對路徑，相對路徑。
01、絕對路徑：某個盤下的XXX,例如：
02、相對路徑：相對于目前檔案尋找的路徑
2、alt：當圖檔像是不出來的時候，才顯示出來的提示文字。
一般都要加（seo--浏覽器搜尋優化，浏覽器搜尋圖檔是根據alt和title）。
（w3c官網中：滑鼠移入提示文字，但暫時沒測出來）
3、title：當滑鼠移到圖檔上時，顯示提示文字。-->
<img src="https://www.baidu.com/favicon.ico" alt="這是圖檔"/>
<!--二、标題文字：h1-h6不是因為樣式，而是因為它的語義-->
<!-- 1、一級标題這個頁面中不能有太多個，h1是用來放核心關鍵詞的，一般公司會用來放公司的logo ，搜尋引擎會對特定關鍵詞進行位置識别，這跟搜尋引擎優化有關-->
<h1>一級标題</h1>
<h3>二級标題</h3>
<h6>三級标題</h6>
<!--三、段落文字：p引入一段話或者一段文字-->
<p>引入一段話或者一段文字</p>
<!--四、超連結:a用于實作頁面跳轉，href是引入跳轉的路徑，
使用target="_blank"實作連結内容在新頁面打開，預設是在目前頁面打開-->
<a href="https://www.baidu.com/" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank">百度</a>
<a href="https://www.baidu.com/" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="https://www.baidu.com/favicon.ico"/></a>
<!--五、div：一般用來實作大區域排版-->
<div></div>
<!--六、span：一般用來實作小元素-->
<span></span>
<!--七、有序清單ol、無序清單ul、清單項li-->
<!--1、ul無序清單（unordered list）
li:list item
ul的子級隻能是li
li的父級可以是ul或者ol-->
<!--type修改提示類型 circle圓圈 square正方形-->
<ul type="circle">
<li></li>
<li></li>
</ul>
<!--2、有序清單
ol：ordered list
li：list item
-->
<!--type修改提示類型 1 a A i I-->
<ol type="1">
<li></li>
<li></li>
<li></li>
</ol>
<!--八、浏覽器中的空白折疊現象，不管輸入多少空格，都隻能識别一個-->
文
字
<!--九、<br>換行 空格-->
文<br>字
文 字
</body>
</html>
<!--此為HTML5的格式-->
HTML常用标簽：
段落标簽：<p>
圖檔标簽：<img>
文本标簽：<font>
标題标簽：<h1>~<h6>
粗體/加重标簽：<b>/<strong>
斜體/着重标簽：<i>/<em>
上标/下标标簽：<sup>/<sub>
下劃線标簽：<u>
預先格式化标簽：<pre>
強制換行：<br/>
清單：ol>li(有序清單 全稱order list ) ul>li（無序清單 unorder list）
作用：制作菜單、标題欄
備注：清單可嵌套,例如：
此為無序清單嵌套，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ul嵌套</title>
</head>
<body>
<ul>
<li>
水是眼波橫，
<ul>
<li>山是眉峰聚。</li>
</ul>
</li>
</ul>
</body>
</html>
運作效果：
水準線：<hr/>
a連結：<a> 超級連結方式：跳轉的路徑、目前頁面的錨标記、跨頁面跳轉
特殊符号的插入方式：&
form表單元素：<form> action表示表單送出的路徑；表單的對象type分為單文本标簽（text、password）、多選框
（checkbox）、單選框（radio）、按鈕（button、reset、submit）
下拉菜單：select>option
多行文本框：<textarea>
table表單：tr>th tr>td 注意：行列的合并
分塊标簽：<div> <!-- div實作大區域大面積的排版，一個大塊 -->
文本标簽：<span>
html中的注釋：單行注釋和多行注釋
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--這是單行注釋-->
<!--這是多行注釋
這是多行注釋
這是多行注釋-->
<!--html中單行注釋和多行注釋是一樣的-->
</body>
</html>
二、CSS樣式：
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML内容在浏覽器内的顯示樣式，如文字大小、顔色、字型加粗等。
如下列代碼：
p{
font-size:12px;
color:red;
font-weight:bold;
}
使用CSS樣式的一個好處是通過定義某個樣式，可以讓不同網頁位置的文字有着統一的字型、字号或者顔色等。
![【CSS】一種不用插件純手寫css的扁平化按鈕懸停顔色變化的讨論[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)