前端___基礎 1 待改
以下是各種前端直接應用的程式碼：
##########################################################################
1. 頁面：
<!-- DOCTYPE不區分大小寫 規定文件型別 html代表的事該檔案採用的h5 -->
<!-- 標籤 有<>包裹，由字母開頭 可以結合合法字元，能被瀏覽器解析的標記 -->
<!-- 為什麼使用標籤，標籤具有作用於 （名稱空間 控制範圍），可以賦予功能 -->
<!DOCTYPE html>
<!-- <!> = >指令-->
<html lang="zh" style="color: orange">
<!-- 標籤 字母開頭+合法字元（數字|-）標籤具有作用域 有頭必有尾 -->
<!-- html中只包含head和body兩個 -->
<!-- 一個頁面檔案就是一個html，有且僅有一個html根標籤（頁面根） -->
<head>
<!-- 頁面檔案頭|樣式表|指令碼|頁面描述|（後勤工作） -->
<!-- 也可以出現樣式|指令碼 -->
<meta charset="UTF-8">
<!-- meta 設定檔案編碼格式 -->
<title>Document</title>
<!-- title頁面標籤的標題 -->
</head>
<!-- 通過使用標籤改變字型顏色 -->
<body style="color: red">
egon
<!-- 空格的轉譯符號 -->
<你好>
<!-- <>解析中文 轉譯字元 包裹特殊字元 -->
liuxx
<Zero >
<!-- 可以解析英文 -->
yanghuhu
</body>
</html>
基本標籤的簡單分類：
最基本：
div => 搭頁面構架
span => 搭文字構架
換行顯示：
h1-h6 => 標題，h1 有且僅有一個，通常作為頁面的總標題
p => 段落
同行顯示：
文字類標籤：
i，em = 斜體
b，strong => 加粗
del(刪除模式顯示) | ins(插入) | sup(上角標) | sub(下角標)
組合：
table > tr > th+td
form > input
功能：
img 圖片 | a 超連結 | hr 分割線 | br 換行
2.基本標籤
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基本標籤</title>
</head>
<body>
<!--無意義標籤-->
<!--div：最常用的標籤，沒有之一（搭建頁面架構）-->
<div></div>
<!-- span：文字最常用的標籤（構建文字架構；可以直接包裹文字，也可以直接包裹文字類（內聯型別的）標籤）-->
<span></span>
<!--h1 一般一個頁面會出現一次 作為該頁面的總標題 h1~h6標題-->
<h1>{一級標題}</h1>
<!--h2{二級標籤}+h6{六級標籤}-->
<h2>二級標籤</h2>
普通文字
<h6>六級標籤</h6>
<!--段落標籤 ：p-->
<p>段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落段落</p>
<!--原生標籤 ：pre-->
<pre>
呵 <asd> \ & ; < asd> 呵
</pre>
<!--分割線 hr-->
<hr/>
<!-- 換行 br-->
<br/>
<br/>
<br/>
<!--文字類標籤 -->
<!--斜體 -->
<i>斜體</i>
<!--斜體強調 -->
<em>斜體強調</em>
<!--加粗 -->
<b>加粗</b>
<strong>加粗強調</strong>
<!--小的文字型別標籤是同行顯示 級別標籤是換行顯示 -->
<ruby>
拼音<rt>pinyin</rt>
</ruby>
<!--ruby 和 rt 需要配合使用的 -->
<ins></ins>插入文字
<!--span 作為文字架構 刪除樣式的文字再由文字類標籤 del巢狀 -->
<span>$1000<del>$2300</del></span>
<span>文字<sup>上角標</sup></span>
<span>文字<sub>下角標</sub></span>
<!--連線標籤 -->
<!--href：標籤的全域性屬性，超連結 規定協議 無需展示給使用者看-->
<!--不規定協議直接原網頁路徑拼接 -->
<a href="https://www.baidu.com"target="_blank">前往百度</a>
<!--https 和http都可以訪問https更安全 -->
<!-- _blank再原網頁上展開新網頁 -->
<!-- img圖片標籤 src：圖片地址，可以載入網路|本地|動態|圖片。。
alt：資源載入失敗後的文字提示
title：全域性顯示的（說明）滑鼠懸浮產生的文字提示（任意標籤都具有該全域性屬性）-->
<img src="http://pic-cdn.35pic.com/58pic/18/24/26/64Y58PICxnf_1024.jpg" alt="科技" title="新科技">
<!--表格 -->
<!--連線標籤 -->
<table>
<tr>
<th>
標題
</th>
<th>
標題2
</th>
</tr>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
</table>
<!-- 級別： table > tr > th+td -->
<!-- 獲取使用者輸入 -->
<form>
<input type="text">
<input type="password">
</form>
</body>
</html>
3. 標籤的分類：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--系統標籤|自定義標籤：系統沒有滿足標籤語法的所有標籤-->
<zero title="xxx" style="color: red">zero</zero>
<!--、行塊標籤（display） -->
<!-- 行：同行顯示 塊：換行顯示 -->
<p>測試1</p>
<p>測試2</p>
<!-- 行：同行顯示 -->
<span>測試3</span>
<span>測試4</span>
<!-- 但結構|組合結構 -->
<div>單結構</div>
<!-- 被form包裹的input內容可以提交給後臺，單獨使用的則只能用於前端 -->
<form action="">
<input type="text">
</form>
<input type="text">
<!-- 單雙標籤 -->
<!-- 雙： 首尾分離 -->
<!-- 主要內容可以包含文字，也可以包含子標籤（具有作用域） -->
<div>單結構</div>
<span></span>
<!-- 單：首尾連體 -->
<!-- 主要功能 ：不需要子內容，標籤就可以代表所有功能語句-->
<hr/>
<br/>
<!-- input的內容 value：預設值 可以修改；placeholder：佔位符-->
<input type="text" value="abcdfg" placeholder="請輸入">
</body>
</html>