初識HTML
HTML，全稱“Hyper Text Markup Language（超文本标記語言）”，
簡單來說，網頁就是用HTML語言制作的。HTML是一門描述性語言，是一門非常容易入門的語言。
超文本包括：文字，圖檔，連結，音頻，視訊，動畫等。
W3C
W3C， 全稱“World Wide Web Consortium （網際網路聯盟 ）”，
它簡單來說是一個國際性的組織，負責統一制定與web相關的各項标準。
網頁主要有三部分組成：
結構（Structure）：HTML、XML。
表現（Presentation）：CSS。
行為（Behavior）：DOM、ECMAScript。
網頁基本資訊
meta
（1）Ajax
Ajax，即“Asynchronous Javascript And XML（異步JavaScript和XML）”，是指一種建立互動式網頁應用的網頁開發技術。
通過在背景與伺服器進行少量資料交換，Ajax可以使網頁實作異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用Ajax）如果需要更新内容，必須重載整個頁面。
Ajax是前後端互動的技術，主要實作在前端。（不懂？！沒關系，我們在Ajax教程中會講解到）
（2）SEO
SEO，即“Search Engine Optimization（搜尋引擎優化）”。SEO優化是專門利用搜尋引擎的搜尋規則來提高目前網站在有關搜尋引擎内的自然排名的方式（國内常見的搜尋引擎有百度、360、搜狗等）。
簡單來說，你建好了網站并不代表你網站就能被搜尋引擎搜尋到，我們一般使用百度搜尋資料時，搜尋出來的網頁有很多，但是我們一般看了搜尋結果的第一、二頁就不再往下看了。SEO，就是為了我們的網站能排在搜尋結果的前面，這樣你的網站才會有流量。你做網站，相信你也是想讓你網站有更多人浏覽的吧。
網頁基本标簽
| 标簽 | 描述 |
|---|---|
| h1~h6 | 标題标簽 |
| p | 段落标簽 |
| br | 換行标簽 |
| hr | 水準線标簽 |
| strong | 粗體 |
| em | 斜體 |
注釋和特殊符号
<!-- 注釋-->
空 格<br/>
大于：><br/>
小于：<<br/>
版權所有：©</br>
圖像标簽
在HTML标簽中,
<img>
标簽用于定義HMTL頁面中的圖像
| 屬性 | 說明 |
|---|---|
| src | 必填，表示圖檔路徑,路徑分為絕對路徑和相對路徑，…/ 表示上一級目錄。 |
| alt | 替換文本，圖像不能顯示時顯示的文字 |
| title | 提示文本，滑鼠放到圖像上顯示的文字 |
| width | 設定圖像寬度 |
| height | 設定圖像高度 |
| border | 設定圖像的邊框粗細 |
<img src='1.jpg' alt='圖檔飛走了' title='美眉'
height="100px" width="220px" border="5px" />
<a>
<a>
超連結标簽
<a href="連結位址" target="_blank" rel="external nofollow" target="目标視窗位置"> 文本或圖像 </a>
<!--
target="_blink" 建立視窗
target="_self" 自身視窗（預設值）
-->
文本超連結
<a href=“wellcom.html” target=“_blank”> 歡迎進入 </a>
圖檔超連結
<a href=“show.html” target=“_blank”>
<img src=“image/spring.jpg” alt=“春天” title=“春天”>
</a>
錨連結
<!-- 解釋：從位置甲跳轉本頁的位置乙，從位置甲跳轉其他頁的位置乙-->
建立跳轉印記: <a name="maker">乙位置</a>
創造跳轉連結：<a href="#maker" target="_blank" rel="external nofollow" >甲位置</a>
功能性連結
<a href="mailto:[email protected]" target="_blank" rel="external nofollow" >發郵件</a>
測試
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>連結标簽學習</title>
</head>
<body>
<!--使用name作為标記-->
<a name="top">頂部</a>
<!--a标簽
href：必填，表示要跳轉到哪個頁面
target:表示視窗在哪裡打開
_blank 在新标簽打開
_self 在自己的網頁中打開
-->
<a href="1.我的第一個網頁.html" target="_blank" >點選我跳轉到頁面一</a>
<a href="https://www.bilibili.com" target="_blank" rel="external nofollow" target=_self>點選我跳轉到B站-</a>
<br/>
<!--錨标簽
1.需要一個錨标記
2.跳轉到标記（使用#）
3.實作頁面間跳轉
-->
<a href="#top">回到頂部</a>
<a name="down">down</a>
<!--功能性連結
郵件連結：mailto:
QQ标簽
-->
<a href="mailto:[email protected]">點選聯系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好，加我免費領取小電影" title="你好，加我免費領取小電影"/></a>
</body>
</html>
塊元素和行内元素
1. 内聯（行内）元素
内容撐開寬度，左右都是行内元素的可以排在一行，行内元素最常使用的就是span，其他的隻在特定功能下使用，修飾字型和<b>
标簽，還有<i>
和<sub>
<sup>
這兩個标簽可以直接做出平方的效果，而不需要類似移動屬性的幫助，很實用。
行内元素特征：
- 設定寬高無效
- 對margin僅設定左右方向有效，上下無效；padding設定上下左右都有效，即會撐大空間
- 不會自動進行換行
2. 塊級（塊狀）元素
無論内容多少，該元素獨占一行，塊狀元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div來實作。不過為了可以友善程式員解讀代碼，一般都會使用特定的語義化标簽，使得代碼可讀性強，且便于查錯。
塊狀元素特征：
- 能夠識别寬高
- margin和padding的上下左右均對其有效
- 可以自動換行
- 多個塊狀元素标簽寫在一起，預設排列方式為從上至下
3. 行内塊元素
行内塊狀元素綜合了行内元素和塊狀元素的特性，但是各有取舍。是以行内塊狀元素在日常的使用中，由于其特性，使用的次數也比較多。
行内塊狀元素特征：
- 不自動換行
- 能夠識别寬高
- 預設排列方式為從左到右
清單标簽
清單标簽：共三種清單，分别是dl标簽、有序标簽、無序标簽。
<html>
<head>
<meta charset="UTF-8">
<title>清單标簽</title>
</head>
<body>
<!--有序清單和無序清單-->
喜歡的水果：
<!--ul标簽：無序清單标簽
屬性type：無序清單的類型：
disc：預設的
circle：空心原點
square：小正方形（實習的）
-->
<ul type="square">
<!--li标簽:清單項-->
<li>蘋果</li>
<li>桃子</li>
<li>香蕉</li>
<li>火龍果</li>
<li>桔子</li>
</ul>
<hr />
<!--ol:有序清單
type屬性：指定目前有序清單的類型（l、a、A）
-->
您喜歡的音樂類型？
<ol type="1" >
<li>流行</li>
<li>民謠</li>
<li>搖滾</li>
</ol>
<!--dl: 自定義清單
dt: 清單的上層内容
dd: 清單的下層内容
-->
<dl>
<dt>傳智播客</dt>
<dd>财務部</dd>
<dd>人事部</dd>
<dd>學工部</dd>
</dl>
</body>
</html>
表格标簽
| 元素名 | 描述 |
|---|---|
| caption | 表格标題 |
| tr | 行 |
| th,td | 單元格；（th表頭标簽） |
| cellspacing | 單元格與單元格間的距離 |
| cellpadding | 文本與單元格間的距離 |
| border | 表單邊框線大小 |
| rowspan | 跨行合并 |
| colspan | 跨列合并 |
| alight | 對齊方式 |
| bgcolor | 背景色 |
<html>
<head>
<meta charset="UTF-8">
<title>表格标簽</title>
</head>
<body>
<!--table：表格标簽
th：表頭标簽（自動加粗 居中顯示）
tr：行标簽
td：單元格标簽
屬性：
border：邊框線大小
width：表格的寬度
height：表格的高度
alight：對齊方式
bgcolor：背景色
-->
<table border="2"
width="200"
height="50"
bgcolor="aquamarine">
表1：
<th>表頭1</th>
<th>表頭2</th>
<th>表頭3</th>
<tr align="middle">
<td>(1,1)</td>
<td>(1,2)</td>
<td>(1,3)</td>
</tr>
<tr align="middle">
<td>(2,1)</td>
<td>(2,2)</td>
<td>(2,3)</td>
</tr>
</table>
<br />
<table border="2" bgcolor="antiquewhite">
表2（單元格的合并）：
<!--單元格的合并：
colspan：合并列
rowspan：合并行
-->
<th>表頭1</th>
<th>表頭2</th>
<th>表頭3</th>
<tr align="left">
<td colspan="2">(1,1)</td>
<td rowspan="2">(1,3)</td>
</tr>
<tr align="left">
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
</table>
<br />
<table border="3" bgcolor="cadetblue">
表3：thead,thead,tfoot
<!--對表格中的行進行分組:
thead：表頭
thead：正文
tfoot：腳注
-->
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
</html>
媒體元素
HTML5新增了兩個與媒體相關的标
<audio>
、
<video>
。可以在網頁中嵌入跨浏覽器的音頻和視訊内容。
<audio src="音頻檔案" id="myAudio">在浏覽器不支援時顯示的文本</audio>
<video src="視訊檔案" id="myVideo">在浏覽器不支援時顯示的文本</video>
其常用屬性如下：
- controls屬性: 控制控件的顯示，取值隻能為controls。
- autoplay屬性: 布爾屬性，自動播放。（可以不用書寫屬性值 ）
- muted屬性：布爾屬性，靜音播放。（可以不用書寫屬性值 ）
- loop屬性: 布爾屬性，循環播放。（可以不用書寫屬性值 ）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>媒體元素學習</title>
</head>
<body>
<audio src="./audio/許嵩 - 最佳歌手 [mqms2].mp3" controls autoplay loop>最佳歌手-許嵩</audio>
<video src="./video/許嵩 - 雅俗共賞.mp4" controls autoplay muted width="400px" height="300px">雅俗共賞-許嵩</video>
</body>
</html>
頁面結構分析
| 元素名 | 描述 |
|---|---|
| herder | 标題頭部區域内容。（用于頁面或頁面中的一塊區域） |
| footer | 标記腳部區域内容。（用于整個頁面或頁面的一塊區域） |
| section | WEB頁面中的一塊獨立區域。 |
| article | 獨立的文章内容。 |
| aside | 相關内容或應用。（常用于側邊欄） |
| nav | 導航類輔助内容。 |
header、footer、nav重要，其他了解即可。
iframe内聯架構
使用iframe可以在一個表格内調用一個外部檔案，非常有用。很多網站頁面上都使用了iframe效果。
iframe标記的常用屬性是:
<iframe src="url" width="x" height="x" scrolling="[OPTION]" frame name="main"></iframe>
- src：檔案的路徑，既可是HTML檔案，也可以是文本、ASP等；
- width、height："内部架構"區域的寬與高；
-
scrolling：當SRC的指定的HTML檔案在指定的區域不顯不完時，滾動選項；
如果為 NO，則不出現滾動條；
如果為Yes，則顯示;
如果為 Auto：則自動出現滾動條
- frameborder：設定或擷取是否顯示架構的邊框。(1，0 或 no，yes)
- name：架構的名字，用來進行識别。
name 和 target屬性經常用到，兩個屬性需結合使用，name是目前位置的名稱，target 指定将要顯示的内容到什麼位置。
當你想用父架構控制内部架構時，可以使用： target="架構的名字"來控制。
初識表單post和get送出
表單 form
- action：表單送出的位置，可以為網站，也可以是一個請求處理位址
- method：post,get 送出方式：
- get方式送出：我們可以在url中看到我們送出的資訊，不安全，高效
- post方式送出：比較安全，傳輸大檔案
- enctype：表單編碼屬性；送出時，包含有input type="file"時，需加。
- autocomplete：文本框中，輸入一次，下次輸入會自動提示。有兩個屬性值，當設定為on時，啟動該功能；當設定off時，關閉該功能。使用者每送出一次，就會增加一個用于選擇的選項。
- novalidate： input輸入類型，當送出表單時，會對這些輸入内容進行驗證。而novalidate屬性則用于在送出表單時不對form或input進行驗證。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登入注冊</title>
</head>
<body>
<h1>注冊</h1>
<!-- 表單form
action: 表單送出的位置，可以是網站，也可以是一個請求處理位址
method: post , get 送出方式
get方式送出：我們可以在url中看到我們送出的資訊， 不安全， 高效
post: 比較安全 ， 傳輸大檔案
enctype：表單編碼屬性
-->
<form action="1.html" method="post" enctype="multipart/form-data">
<!-- 文本輸入框： input type="text" -->
<p>名字: <input type="text" name="username"></p>
<!-- 密碼框： input type="password" -->
<p>密碼: <input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
表單元素格式
input标簽元素
| 元素名 | 描述 |
|---|---|
| type | 指定元素類型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，預設為text。 |
| name | 指定表單元素名稱。 |
| value | 元素的初始值。type為radio時必須指定一個值。 |
| size | 指定表單元素的初始寬度。當type為text或password時，表單元素的大小以字元為機關。對于其他類型，寬度以像素為機關。 |
| maxlength | type為text或password時，輸入的最大字元數。 |
| checked | type為radio或checked時，指定按鈕是否是被選中。 |
| autofocus | 為文本框、選擇框或按鈕控件加上autofocus屬性，當畫面打開時，該控件自動獲得光标焦點。 |
| readonly | 隻讀文本框 |
| disabled | 禁用 |
| hidden | 隐藏域 |
| placeholder | 文本框輸入内提示 |
| required | 必填項 |
type屬性值
| 屬性值 | 執行個體 | 描述 |
|---|---|---|
| text | input type=“text” | 文本框（預設），一般用于使用者名或賬号名。 |
| password | input type=“password” | 密碼框 |
| radio | input type=“radio” | 單選框，value表示單選框的值，送出時所擷取的值是value值；name表示組，同一單選框組名必須相同。 |
| checked | input type=“checked” | 多選框， |
| button | input tpye=“button” | 普通按鈕 |
| image | input type=“image” | 圖像按鈕 |
| submi | input type=“submit” | 送出按鈕 |
| reset | input type=“reset” | 重置 |
| input type=“email” | 郵件驗證，會自動驗證Email位址格式是否正确。 | |
| url | input type=“url” | URL驗證，會自動驗證URL位址格式是否正确。 |
| number | input type=“number” | 數字驗證，min：允許的最小值，max：允許的最大值，step：合法的數字間隔。 |
| range | input type=“range” | 滑塊框，min：允許的最小值，max：允許的最大值，step：合法的數字間隔。 |
| search | input type=“search” | 搜尋框 |
| file | input type=“file” | 檔案域 |
清單框文本域和檔案域
下拉框，清單框 select标簽
<!--
select:清單框
selected：預設選中項
option：選項
-->
<select name="清單名稱" size="行數">
<option value="選項的值" selected="selected">…</option >
<option value="選項的值">…</option >
<option value="選項的值">…</option >
</select>
文本域 textarea
<!--
texttarea：多行文本域
cols：顯示行數
rows：顯示列數
-->
<textarea name="showText" cols="x" rows="y">文本内容 </textarea >
表單的應用
隐藏域-hidden文法
<input type="hidden" value="666" name="userid">
隻讀和禁用-文法
<input name="name" type="text" value="張三" readonly>
<input type="submit " disabled value="儲存" >
釋義：
readonly：隻讀文本框
disabled：禁用
增強滑鼠可用性
label for=“name”，鎖定一個框，點選文字之後可以在框内輸入。
<!--注意此處for的值要與id的值對應-->
<form>
<p>
<lable for="mark">點選我可以直接在文本框輸入</lable>
<input type="text" id="mark">
</p>
</form>
表單初級驗證
placeholder–文法
input類型的文本框提供一種提示（hint）
可以描述文本框期待使用者輸入何種内容 提示語預設顯示，當文本框中輸入内容時提示語消息
适合于input标簽：text、search、url、email和password等類型
<input type="search" name="sousuo" placeholder="請輸入要搜尋的關鍵字"/>
釋義：placeholder：文本框輸入内提示
required-文法
規定文本框填寫内容不能為空，否則不允許使用者送出表單
适合于input标簽：text、search、url、email、password、number、checkbox、radio、file等類型
釋義：required：必填項
pattern-文法
正規表達式由一系列字元和數字組成，用于比對某個句法規則。該屬性适應于text、search、url、telephone、email和password類型的input元素，使用者輸入的内容必須符合正規表達式所指的規則，否則就不能送出表單
<input type="text" name="tel" required pattern="^1[358]\d{9}" />
釋義：pattttern：驗證規則，正規表達式
- 昵稱：pattern="[-\w\u4E00-\u9FA5]{4,10}"
- 密碼：pattern="[\dA-Za-z]{6,16}"
- 手機号碼：pattern=“1[3578]\d{9}”
- 年齡：pattern="\d|[1-9]\d|1[0-2]\d"
![（Nginx）03_Nginx原理與優化一、Nginx原理二、master-workers機制三、面試題：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)