第一節 HLML簡介
HTML5—>CSS—>JS
- Web開發是什麼？Web開發 = 前端 + 後端
（1）前端就是在客戶端上的應用，通常值我們的瀏覽器。最常用的前端開發技術是：HTML+CSS+JavaScript。
（2）後端開發就是編寫那些運行在服務器上的代碼，這部分的工作需要和數據庫打交道，比如：讀寫文件、數據、實現業務邏輯。 - 什麼是HTML？
（1）HTML是用來描述網頁的一種語言
（2）HTML是指超文本標記語言
（3）HTML不是編程語言，只是一種標記語言 - HTML5的新特性
（1）用於繪畫的canvas標籤，可以通過它來繪製一些圖形，和設計
（2）用於媒介回放的video和audio元素，即：播放視頻和音頻
（3）對本地離線儲存的更好支持
（4）新的特殊內容元素（如：article、footer、header、nav、section）
（5）新的表單控件（如：calendar、date、time、email、url、search） - 開發工具：
（1）常用：WebStorm、notepad++、Eclipse、text sublime、Dreamweaver（設計人員）、intellij IDEA - HTML5跨平臺運行，硬件要求低
- HTML5 = HTML+CSS+JavaScript。
（1）HTML構成網頁的框架
（2）CSS設置網頁樣式，相當於給網頁做美顏
（3）JavaScript，加入交互。網頁的靈魂。 - 註釋：
（1）HTML：<!–註釋內容–>
（2）CSS：/*……*/
（3）JavaScript：- 單行註釋：//
- 多行註釋：/*……*/
- 使用IDEA創建一個Web工程：
- Fiel–>New–>Project
- 選擇靜態Web。即：Static Web
- 輸入工程名。注意工程保存位置，在路徑後面再加一個工程名。
- 在工程名處左擊。
New–>HTML File，不用加.html的後綴，編譯器會自動生成基礎標籤。
New–>File，需要加.html的後綴，編譯器不會幫我們做什麼。（新手） - 開始你的表演。
- 寫完代碼之後，將鼠標移至右上方，就會出現瀏覽器的頭標，點擊運行程序。
第二節 HTML基礎語法
2.1 基礎
- 聲明：<!DOCTYPE html>，是HTML5 的聲明。表示當前使用的是HTML5。就是頭文件。
概述：
HTML標籤。
HTML元素
HTML屬性
HTML格式化
-
HTML標籤：標籤就是<head>、<body>、<a>等被尖括號包起來的東西，大多數標籤都是成對出現的。
-
HTML元素：
（1）概念：元素是指從開始標籤到結束標籤之間的所有代碼。
（2）語法：- 空元素在開始標籤中關閉。
<br /> - 大多數HTML元素可以擁有屬性。
- 大多數的HTML元素都是可以嵌套的。
- 空元素在開始標籤中關閉。
-
HTML屬性：
（1）爲HTML元素提供各種附加信息的就是HTML屬性，而且屬性總是在HTML元素的開始標籤中進行定義。
（2）它總是以"屬性名=屬性值"這種名值對的形式出現。
如：<a href="http://www.jikexueyuan.com">學習</a>
（3）常用標籤屬性：- align，對齊方式
- bgcolor，背景顏色
- target，規定在何處打開鏈接。
例：<a href="http://www.jikexueyuan.com" target="_blank">學習家園</a>。_blank是打開新的頁面，不會覆蓋原來的頁面。_self是在當前頁面打開，會覆蓋掉當前頁面。 - 多個屬性，則以空格分隔。
（4）通用屬性：
- class：規定元素的類名。
- id：規定元素唯一ID。
- class和id是在CSS中當做用來定位的選擇器使用。
- style：規定元素的樣式。讓頁面更友好一點。
-
所有的代碼都包含在
<html>和</html>之間。
（1）<head>標籤用來定義一個頭部信息，比如：<meta>：單標籤。例：編碼格式（<meta charset="UTF-8">）- 標籤用於描述頁面內容，關鍵詞，作者，最新修訂時間以及其它元信息
- <meta> 標籤永遠位於 <head> 標籤內部。
- <meta>標籤的信息不會顯示在頁面。有很多內容可以設置，比如關鍵字、頁面自適應。
- 標題（
<title>Title</title>）。定義頁面的標題。 - 文字的顯示形式，英文還是中文。
<head lang="en">。en表示英文，zh表示中文。
-
HTML基礎標籤;
-
HTML基礎標籤：head、body
-
在
<body>標籤中寫主體部分。 -
HTML標題：
<h1>，h1~h6。<h1>標題1</h1>。 -
HTML段落：
<p>，定義段落。不同的段落會換行顯示。 -
HTML鏈接：
<a>，定義鏈接。<a href="http://www.jikexueyuan.com">學習家園</a>。使用href執行一個鏈接，兩個加括號之間寫對這個鏈接的描述語言。 -
HTML圖像：
<img>，定義圖像。<img src="images/1.jpg">。src後面是照片的路徑和名字。單標籤。- 標籤有兩個必需的屬性：src 屬性 和 alt 屬性。alt是指定圖像不能顯示時的替代文本。src是指定顯示圖像的 URL。
<img alt="這是一個圖片" src="images/1.jpg" width="300px" height="300px">，px是像素
-
<br />：空標籤，可以用來換行，當然，效果和p標籤不一樣
-
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>我的第二個程序</title>
<style type="text/css"></style>
</head>
<body>
<b>歡迎使用</b><br/>
<i>歡迎使用</i><br/>
<em>歡迎使用</em><br/>
<small>歡迎使用</small><br/>
<strong>歡迎使用</strong><br/>
大家好<sub>歡迎使用</sub>本程序<br/>
<ins>歡迎</ins><br/>
<del>使用</del><br/>
</body>
</html>
2.2 HTML格式
HTML5樣式、鏈接、表格：
-
style標籤：用於爲 HTML 文檔定義樣式信息。
（1）style 元素可以出現在 HTML 文檔中的各個部分，一個文檔可以包含多個 style 元素 -
使用<style>設置網頁樣式：
- <style>：樣式定義。可以有多個<style>。成對出現。在<head>在標籤中設置
<style media="print">，可以通過media屬性設置格式。
<style type="text/css"><!--格式設置-->
h1{color: aqua}
h2{
color: chartreuse;
text-align: center;
}
h3{
color: aliceblue;
margin-left:60%;<!--左外邊距 -->
}
a{
color: blue;
}
body{
background-image: url("images/3.jpg");<!--頁面背景，不能和背景顏色同時設置 -->
}
p{
text-indent: 32px;<!--文章縮進 -->
font-size: 16px;<!--字體尺寸 -->
line-height: 32px;<!--文章行高 -->
color: azure;
}
img{
position: absolute;
left: 50%;
width: 20%;
height: 20%;
margin-left: -181px;
}
</style>
<style media="print"><!--這個格式只針對打印的格式-->
p{
color: black;
}
</style>
-
鏈接外部樣式表設置網頁樣式
（1）除了在<style>元素中添加，我們還可以將css樣式表保存外部文件，然後使用link元素將其鏈接進來。
（2）當<style>很多時，可以使用css外部樣式表。新建一個File，後綴是.css，裏面放以前<style>標籤中的元素。
（3）使用 <link>進行樣式資源引用。- 屬性： rel=“stylesheet”，外部樣式表。
- 屬性：href=“mystyle.css”，樣式表的位置。
（4）<link>也可以鏈接網址圖標。ico格式（16x16或32x32）
- 例：
<link rel="icon" type="image/x-icon" href="../images/2.ico">，（.）表示當前目錄，（. .）表示當前目錄的父目錄。
-
<base> 標籤用於設置相對 URL 的解析基準。隻影響相對路徑。
（1）例：<base href="../img/" target="_blank">
（2）可以一勞永逸，只設置一次target -
<script>標籤：<script> 標籤用於在 HTML 文檔中加入腳本（例如 JavaScript）
（1）script 元素既可以直接定義內嵌腳本語句，也可以通過 src 屬性引用外部腳本文件。
（2）script 元素可以出現在 HTML 文檔中的各個部分，一個文檔可以包含多個 script 元素。
（3）每定義或導入一段腳本，都需要使用一個 script 元素。
（4）不能用同一個 script 元素既定義內嵌腳本，又引用外部腳本。
（5）腳本延遲執行：defer屬性可以使腳本延遲執行，這樣就可以不必將<script>貼的到處都是。但是defer屬性只對外部腳本起作用。
（6）腳本異步執行：async屬性。HTML解析和腳本獲取是同時的。只能用於外部腳本。
（7）對於不支持JavaScript的瀏覽器。可以使用<noscript> 標籤。- <noscript> 標籤用來向不支持 JavaScript 的瀏覽器顯示一些替代內容。
- <noscript> 標籤內部不僅可以是文本，也可以是其他的元素。
<noscript>
<p>爲什麼不支持JavaScript！！！！！！</p>
<img src="image/嫌棄.png" alt="laji">
</noscript>
2.3 基本標籤
-
塊級元素和行內元素：
（1）塊級元素：塊級元素總是在新的行上開始，並儘可能的佔據本行全部可用寬度。例：<p>等
（2）行內元素：行內元素並不會另起一行，它也只佔用必要的寬度。例：<a>，<span>（和p元素對應，只不過是行內元素）、<b>、<img>等
（3）<br>元素，插入換行符。
（4）<div>元素：也被稱爲塊元素，其主要是組合HTML元素的容器。 -
HTML字符實體：HTML 中的預留字符必須被替換爲字符實體。比如：小於號：<
-
pre元素：用來定於預格式化，即：保留文本在源代碼中的樣式。
-
code元素：定義代碼片段。（代碼也可以用字符實體把尖括號進行替換，然後使用pre元素）。如果是一大段代碼，可以先用pre，再使用code。
-
var、kbd、samp元素：
（1）var：定義程序的變量。
（2）kbd：定義用戶的輸入。
（3）samp：定義程序的輸出。
<p>有一個變量<var>user_in</var>，用於接收用戶輸入</p>
<p>如果用戶輸入的是<kbd>橘子</kbd>，那麼程序將打印<samp>你最喜歡喫的水果是橘子</samp></p>
- 引用：
（1）短引用：q元素。定義比較短的引用。顯示時會自動加引號。
（2）長引用：blockquote元素。用縮進的方式來顯示該段文本。 - cite元素：定義作品的標題，比如：電影的名字。
- abbr元素：定義簡稱或縮寫。配合title使用。
<P><abbr title="lu先森">lu</abbr>是一個小哥哥</P>。lu下面出現小點點，鼠標移動到上面會有提示，提示內容爲title的內容。 - dfn元素：定義術語。會產生斜體。
- address元素：定義文章的作者的信息。斜體
- ruby、rt、rp元素：
（1）ruby：
（2）rt：表示注音符號。
（3）rp：當瀏覽器不支持ruby元素時顯示的內容。如下例：如果不支持，就在字的後面顯示一個括號。
<ruby>魑<rp>(</rp><rt>chi</rt><rp>)</rp></ruby>
- bdo元素：可以修改文本顯示方向。dir的屬性。
<bdo dir="rtl"></bdo>。
| 標籤 | 描述 |
|---|---|
| <b> | 定義粗體文本 |
| <big> | 定義大號字 |
| <em> | 定義着重文字 |
| <i> | 定義斜體字 |
| <small> | 定義小號字 |
| <strong> | 定義加重語氣 |
| <sub> | 定義下標字 |
| <ins> | 定義上標字 |
| <del> | 定義定義刪除字 |
- strong元素和b元素：
（1）strong：強調顯示。有重要的語義。
（2）b：只是粗體。 - em、i元素：
（1）em：表強調。斜體。
（2）i：只斜體，沒有強調的語義。 - del、ins元素：
（1）del：顯示刪除字
（2）ins：顯示有下換線的字。 - s標籤：也是刪除線。不過，語義不同。s元素表示那些錯誤的內容。
- u標籤：下劃線。定義拼寫錯誤的單詞和漢語中的專有名詞。
- mark標籤：起到標記文本的作用。相當於熒光筆。
- sup、sub標籤：上標和下標，一般用來定義公式。
- small標籤：使指定文本變小。
- 列表：
（1）無序列表：ul元素。列表中的每個項使用li包裹起來。改變type屬性的值，改變前面的點。
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
（2）有序列表：ol元素。列表中的每個項使用li包裹起來。可以設置type屬性，比如降序（只是數字倒過來），起始數字（start），數字類型。
-
兩個常用的CSS屬性：
（1）設置列表樣式：list-style-type
（2）設置列表標誌：list-style-image -
列表嵌套：可以有多層列表。
-
自定義列表：dl元素來實現。使用dt、dd元素來配合實現。dt是項目內容。dd是項目內容的描述。
-
表格：
（1）table：定義表格；
（2）tr：定義表格中的行。
（3）th：表頭。加粗居中。
（4）td：內容單元格。可以是文本，數據，圖像，表格。頭像可以使用width屬性設置框的大小。
（5）border-collapse: collapse;用來和並邊框線。必須先單獨設置，在上面。
（6）caption：定義表格的標題。在table標籤緊下面。居中。
（7）padding：設置內邊距，在style中設置。必須先單獨設置，在上面。
（8）thead、tbody：給細緻的劃分表格。設置格式，例：thead th{……}表示thead中的th。
（9）表尾：tfoot設置表尾。colspan="4"使其跨4列顯示。
（10）colgroup、col：批量設置表格樣式。
（11）先使用table標籤，再設置行，然後設置表頭。再行，內容。 -
表單：form標籤。實現網頁和用戶的交互。表單是HTML中獲取用戶輸入的手段。
（1）form標籤：包含整個表單。有很多屬性。比如：action屬性，指定由誰出來這個提交的信息。method屬性是指定哪種方法發送到服務器，有post和get（會把信息顯示在URL中）。
（2） input標籤：input是一個很強大的標籤。（後面單獨介紹）
（3）button標籤：按鈕。type屬性設置爲submit，即：提交給服務器。
<button type="submit">提交</button>
（4）target屬性：在哪打開頁面：target="_blank"，在新頁面打開。
（5）fieldset標籤：可以將表單內的相關元素進行分組。legend標籤作爲這個分組的說明信息。必須在第一個子標籤。
（6）select、option標籤：實現下拉列表。option在select內部，設置選項。option中的屬性value是指定發到服務器的選項值。
（7）optgroup標籤：對下拉列表的選項進行分組。把要分組的選項包裹起來。
（8） output標籤：輸出計算結果
（9）textarea標籤：結束多行的文本輸入。- rows和cols屬性設置行數和列數。單位是字符
（10）form標籤是表單標籤
- action屬性設置提交的服務器地址
- method屬性設置提交的方式GET(默認值)或POST
（11）表單提交的時候，數據沒有發送給服務器的三種情況：
- 表單項沒有name屬性值
- 單選、複選（下拉列表中的option標籤）都需要添加value屬性（就是選擇的內容），以便發送給服務器
- 表單項不在提交的form標籤中
（12） GET請求的特點是：
- 瀏覽器地址欄中的地址是：action屬性[+?+請求參數]
請求參數的格式是：name=value&name=value - 不安全
- 它有數據長度的限制
（13） POST請求的特點是：
- 瀏覽器地址欄中只有action屬性值
- 相對於GET請求要安全
- 理論上沒有數據長度的限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單的顯示</title>
</head>
<body>
<form action="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login" />
<h1 align="center">用戶註冊</h1>
<table align="center">
<tr>
<td> 用戶名稱：</td>
<td>
<input type="text" name="username" value="默認值"/>
</td>
</tr>
<tr>
<td> 用戶密碼：</td>
<td><input type="password" name="password" value="abc"/></td>
</tr>
<tr>
<td>性別：</td>
<td>
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" checked="checked" value="girl" />女
</td>
</tr>
<tr>
<td> 興趣愛好：</td>
<td>
<input name="hobby" type="checkbox" checked="checked" value="java"/>Java
<input name="hobby" type="checkbox" value="js"/>JavaScript
<input name="hobby" type="checkbox" value="cpp"/>C++
</td>
</tr>
<tr>
<td>國籍：</td>
<td>
<select name="country">
<option value="none">--請選擇國籍--</option>
<option value="cn" selected="selected">中國</option>
<option value="usa">美國</option>
<option value="jp">小日本</option>
</select>
</td>
</tr>
<tr>
<td>自我評價：</td>
<td><textarea name="desc" rows="10" cols="20">我纔是默認值</textarea></td>
</tr>
<tr>
<td><input type="reset" /></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
</body>
</html>
-
input標籤：input是一個很強大的標籤。
（1）input可以改變type的屬性，從而改變它的功能。
（2）input標籤：在form內部。type屬性設置爲text（password），即：文本框。name屬性。
（3）設置爲按鈕。type屬性設置爲button，value就是按鈕名。
（4）radio屬性：單選框。將type設置爲radio<label><input type="radio" name="sex" value="male">男</label>。name屬性必須一致。
（5）search屬性：搜索框。將input標籤的type屬性設置爲search。
（6）color屬性：。顏色選擇框。將input標籤的type屬性設置爲color。
（7）image屬性：圖像按鈕。
（8）checkbox屬性：複選框。<input type="checkbox" name="聯繫方式[]">。name必須一樣。
（9）time、date、month、week、datetime-local（本地的日期和時間）：時間和日期。
（10）autocomplete屬性：自動填充。“on”，on爲自動填充，off關閉自動填充。
（11）設置默認值：value屬性設置默認值。在相應的input標籤內設置
（12）autofocus屬性：自動聚焦。在相應的input標籤內設置
（13）hidden屬性：將input元素隱藏起來。
（14）file屬性：上傳文件。必須將form標籤內的method設置爲"post"，而且必須設置enctype屬性。- enctype屬性：規定了再發送到服務器之前，一個如何對錶單數據進行編碼，只有正確的編碼，才能完整的傳輸給服務器。上傳文件。enctype="multipart/form-data
- input標籤中有一個accept屬性，設置文件類型。比如：“video/*”、“image/*”。value屬性設置上傳文件大小。
（15）限制用戶輸入的內容。將type設置爲number。
- 限制number大小：min，max，step（調整幅度）。
（16）range屬性：數值滾動條，將type設置爲range。同樣有min、max等
（17）郵箱、電話、網址：email、tel、url。
（18）pattern屬性：指定匹配模式。
（19）placeholder屬性：佔位提示符。required屬性，使得該框必須填寫
（20）size屬性：輸入框寬度
（21）maxlength屬性：最大輸入字符數
（22）list屬性和datalist標籤：數據列表，即：備選項。- 在datalist標籤內這是id，在datalist標籤體內使用option標籤設置選項，再在需要的框內使用list=id值，引用這個備選項。
-
正則表達式：使用單個字符串來描述。匹配一系列匹配某個句法規則的字符串。在很多文本編輯器裏，正則表達式通常被用來檢索、替換那些匹配某個模式的文本。即：只要涉及到字符串的匹配操作，正則表達式就是最好的選擇。
3.4 HTML新元素
- 每個HTML元素都是由一個方框的形式呈現的。大框套小框。
- <div>：（老）塊級無語義元素。定義 HTML 文檔中的一個分隔區塊或者一個區域部分。
div元素雖然便利，但是容易被濫用，因爲它沒有語義。儘可能的少用
-
HTML新元素：
（1）article標籤：標籤用於定義一篇文章，與頁面其它部分無關。
（2）details和summany標籤：標籤用於定義用戶可見的或者隱藏的需求的補充細節。- 與 <summary> 標籤配合使用可以爲 details 定義標題。
- 標題是可見的，用戶點擊標題時，會顯示出 details。點框框會出現詳細信息。
- details標籤中加上一個open屬性，就默認打開的。
（3）<aside> 標籤：定義側邊欄，通常是網頁的說明、提示、引用、附加註釋、相關鏈接、廣告等內容。
（4）<header> 標籤：用於定義文檔的頁眉（介紹信息）
（5）map和area標籤：實現點擊圖片跳轉頁面。- map：定義映射關係，搭配img使用。
- area：定義鼠標點擊的範圍。
（6）picture和source標籤：根據條件選擇顯示的圖片。picture標籤中嵌套source標籤，在source標籤中設置media屬性。srcset屬性執行對應的圖片。
（7）figure和figcaption標籤：將圖片定義爲插圖。 -
在網頁中嵌入視頻：
（1）video標籤：定義瀏覽器的寬度，高度，和視頻鏈接。<video> 支持三種視頻格式：MP4、WebM、Ogg。
（2）播放控件或自動播放：- controls屬性：播放控件，只寫關鍵字就可以。
- autoplay屬性：自動播放。
- muted屬性：靜音。
- 例：
<video width="500px" height="550px" src="../images/121.mp4" controls>播放不了</video>
（3）preload屬性：視頻預加載，即：視頻在你打開網頁的時候自動緩存，播放的時候不會卡。
（4）poster屬性：定製封面。使poster指向一個圖片鏈接 -
WebVTT：
-
在網頁中嵌入音頻：
（1）audio標籤：定義聲音，比如音樂或其他音頻。
（2）track標籤：添加字幕。後綴爲vtt。 -
在網頁中嵌入另外一個網頁：
（1）iframe標籤：<iframe src="https://blog.csdn.net/qq_44755403" width="500px" height="500px">抱歉，打不開網頁</iframe>。
iframe和a標籤搭配使用：
- 在iframe標籤中使用name屬性定義一個名稱
- 在a標籤的target屬性上設置iframe的name的屬性值
（2）sandbox屬性：會對iframe的網頁進行限制。起到保護網頁的作用。
- progress標籤：進度條。以圖型的形式來標誌。
【傳送門】