HTML基礎-標籤
可以通過簡單的HTML和CSS就可以做出自己想要網頁，可以在敲出程式碼以後立馬就可以去試效果，這種感覺很棒，也很有成就感。在之前學習的ps中也深深的體會到了這一點，所以要更系統的學習前端，作為以後求職的方向。希望自己能夠學有所成，加油鴨！
前端
前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺程式碼實現，將美工或UI提供的效果圖通過HTML+CSS+JS技術來生成網頁，現在最新的高階版本HTML5、CSS3，以及SVG等。由於現在前後端分離的模式，還需要學習一些框架，目前比較流行的三大框架：Angular、Vue、React。
學習大綱
HTML+CSS 基礎
HTML5+CSS3 儲存+canvas+api
JavaScript 面向物件繼承 原生ajax
jQuery 封裝的ajax
MySQL +PHP+前端
bootstrap pc+移動 App
Vue js 整合框架開發
angular 7.0 整合開發 谷歌 混合開發
GitHub 操作
PHP 後臺開發網頁
網頁是構成網站的基本元素，是承載各種網站應用的平臺。網頁由文字，圖片，音訊，視訊，超連結等組成。
W3c指定網頁標準：網頁由三部分組成：三者相分離
結構（HTML，網頁的整體框架）
樣式（CSS ，網頁的美化）
行為 （JS，網頁的互動）
瀏覽器
網頁瀏覽器是個顯示網站伺服器或檔案系統內的檔案，並讓使用者與這些檔案互動的一種應用軟體。
我們通常通過瀏覽器去瀏覽網頁，不同的瀏覽器或者不同的模式（極速模式/相容模式）訪問同一個網頁顯示的效果不同，這是因為瀏覽器核心（渲染引擎）有差異。渲染引擎也是引起相容性問題的根本原因。
目前市面上的瀏覽器核心主要有四種
Trident 核心代表： Internet Explore Gecko 核心代表： Mozilla、Firefox WebKit 核心代表： Safari、Chrome Presto 核心代表： Opera
HTML
Hypertext Markup Language 超文字標記語言
HTML的結構標準：
<!DOCTYPE html> 宣告文件型別
<html> 根標籤
<head lang="en"> 頭部標籤 （告訴搜素引擎爬蟲，我們的網站關於什麼內容）
<meta charset="UTF-8"> 編碼方式：通用字符集
<title></title> 標題
</head>
<body>
主體標籤
</body>
</html>HTML標籤
head標籤
連結外部樣式表
<link rel="stylesheet " href="index.css ">（後續再補充）
文字標籤
<h1></h1>
<h1></h2>
<h1></h3>
<h1></h4>
<h1></h5>
<h1></h6> 標題標籤
<b></b> 加粗
<strong></strong> 加粗
<i></i> 傾斜
<u></u> 下劃線
<sub></sub> 上級標籤
<sup></sup> 下級標籤
<p></p> 文字段落標籤 （有左對齊，居中，右對齊的屬性）
<del></del> 刪除線
常用標籤
<div></div> 塊標籤，容器，做網站的佈局
<span></span> 文字標籤
<pre></pre> 預先定義格式標籤
<br> 回車標籤
<hr> 水平線標籤
圖片標籤
<img src="http://img0.jpg" alt="載入失敗" title=“可愛的笨笨” width=“300px”/>- Src：圖片的來源 必寫屬性
- 位置：圖片src有三種路徑：相對路徑，絕對路徑，遠端路徑
- alt：替換文字，圖片不顯示的時候，顯示的文字
- title：提示文字，滑鼠放到圖片上顯示的文字
- with：圖片寬度
- height：圖片高度
圖片沒有定義寬高的時候，圖片按照百分百比例顯示，如果只更改片的高度或者寬度，圖片等比例縮放
超連結
<a href="http://www.baidu.com" target=“_blank” title="百度官網">百度</a>- herf：去往的路徑（跳轉的頁面）必寫屬性
- title：提示文字，滑鼠放到連結上顯示的文字
- target=“_self”:預設值，在自身頁面開啟（關閉自身頁面，開啟連結頁面）
- target_blank: 開啟新頁面（自身頁面不關閉，開啟一個新的連結頁面）
錨鏈接
先定義一個錨點
<a name="targetC">衣服</a> 連結到錨點
<a href="#targetC " >找衣服</a><a href="./text.html#targetF" >text頁面</a> text.html頁面，具體到tragetF的位置標籤裡的框架
<iframe name="tarlist" src="http://www.baidu.com"></iframe>
<a href="https://www.taobao.com/" target="tarlist" >淘寶</a>
列表
1）無序列表
<ul>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
</ul>
巢狀列表
<ul>
<li>水果</li>
<ul>
<li>橘子</li>
<li>香蕉</li>
<li>蘋果</li>
</ul>
</ul>
2）有序列表
<ol>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
</ol>
表格
<table border="1" bgcolor="#00ffff" cellspacing="0" width="500">
<caption>學生資訊表</caption>
<tr>
<td rowspan="7">學生</td>
</tr>
<tr>
<td align="center" colspan="5">清華學生</td>
</tr>
<tr bgcolor="#ffebcd">
<td align="center">姓名</td>
<td align="center">年齡</td>
<td align="center">學校</td>
<td align="center">成績</td>
<td align="center">是否考過</td>
</tr>
<tr>
<td>張一</td>
<td>20</td>
<td>清華</td>
<td>400</td>
<td>沒過</td>
</tr>
<tr>
<td>張二</td>
<td>20</td>
<td>清華</td>
<td>400</td>
<td>沒過</td>
</tr>
<tr>
<td>張三</td>
<td>20</td>
<td>清華</td>
<td>400</td>
<td>沒過</td>
</tr>
<tr>
<td>張四</td>
<td>20</td>
<td>清華</td>
<td>400</td>
<td>沒過</td>
</tr>
</table>
table標籤裡的屬性
1）cellspacing 屬性規定單元格之間的空間
2）cellpadding 屬性規定的是單元邊沿與單元內容之間的空間。
表單標籤
表單一般是由提示資訊和表單控制元件組成的，用於收集資訊。比如網頁上的登入，註冊就是表單。表單元素指得是不同型別的input元素，複選框，單選按鈕，提交按鈕等。
<form method="get" action="">
</form>- Method:傳送資料的方式
- Action:接收者 後端
- Name:傳送資料 使用者名稱，資料 值
- 文字輸入框
<input type="text" name="userName">型別（type）：
| 型別 | 作用 |
|---|---|
| text | 定義常規的文字輸入 |
| radio | 定義單選按鈕輸入（選擇多個 型別之一） |
| submit | 定義提交按鈕（提交表單） |
<form>
First name:<br>
<input type="text" name="firstname"/><br>
Last name:<br>
<input type="text" name="lastname"/><br>
</form>
- 密碼輸入框
<input type="password" name="pwd">文字輸入框的屬性和密碼輸入框的屬性通用
示例
<form>
使用者名稱<br>
<input type="text" name="username"/><br>
密碼<br>
<input type="password" name="pwd"/><br>
</form>
- 單選框
<input type="radio"> 定義單選按鈕
單選按鈕允許使用者在有限數量的選項中選擇其中之一
示例
<form method="get" action="">
你們喜歡的明星
1.張傑<input type="radio" name="star" value="xiaojie">
2.貝克漢姆<input type="radio" name="star" value="xiaobei">
3.周杰倫<input type="radio" name="star" value="xiojie ">
<input type="submit">
</form>
Name屬性確定是一道單選題，Value 資料值
提交按鈕 submit
- 複選框
示例
<form method="get" action="">
選擇你們喜歡的明星
1.張傑<input type="checkbox" name="star" value="xiaojie">
2.貝克漢姆<input type="checkbox" name="star" value="xiaobei">
3.周杰倫<input type="checkbox" name="star" value="xiojie ">
<input type="submit">
</form>
- 下拉框
示例
<select name="city">
<optgroup label="陝西省">
<option>西安市</option>
<option>商洛市</option>
<option>寶雞市</option>
</optgroup>
</select>
- multiple=”multiple” 將下拉列表設定為多選項
- selected=”selected” 設定預設選中專案
<optgroup></optgroup>對下拉列表進行分組。- label=”” 分組名稱
表單分組
<form>
<fieldset>
<legend>註冊</legend>
</fieldset>
</form><fieldset></fieldset> 對錶單資訊分組 <legend></legend> 表單資訊分組名稱
控制元件：
<input type="url" /> 網址輸入框
<input type="date" /> 日期控制元件
<input type="time" /> 時間控制元件
<input type="email" /> 郵件輸入框
<input type="number" step="2" /> 數字，step：步長
<input type="range" /> 滑塊控制元件