HTML基礎入門
- 2020 年 1 月 20 日
- 筆記
一、瀏覽器
瀏覽器是指可以顯示網頁伺服器或者文件系統的HTML文件（標準通用標記語言的一個應用）內容，並讓用戶與這些文件交互的一種軟體
1，瀏覽器種類
主流瀏覽器：Chrome，Firefox，Safari，Opera
老師經常說的，不用Chrome瀏覽器，都不好意思說是程式設計師
2，瀏覽器內核
內核：可大概為「渲染引擎」，不過我們一般習慣將之稱為『瀏覽器內核』。負責對網頁語法的解釋（如標準通用標記語言下的一個應用HTML、JavaScript），並渲染網頁
內核分類：
Trident：IE，獵豹安全瀏覽器，360極速瀏覽器，百度瀏覽器
Gecko：Firefox
Webkit：Safari
Blink：Chrome ，Opera
不同的內核在渲染同一內容的時候會有差別
二、HTML基礎知識
1，什麼是HTML
HTML：超級文本標記語言，在瀏覽器運行的一種標記語言
2，HTML結構
<!DOCTYPE html> #聲明文檔類型， <html lang="en"> #是所有標籤的容器，lang表示語言，表示整個文檔的內容以什麼語言為主 <head> #頁面結構的頭部，包含輔助顯示的標籤 <meta charset="UTF-8"> <title>Title</title> #頁面的標題，在標題欄顯示的內容 </head> <body> 頁面結構的主體，包含在頁面中顯示的標籤 </body> </html> <!DOCTYPE>:設置當前文檔使用的標準，建議使用HTML5的類型， HTML標籤：用於包裹頁面上所有的其他標籤 head標籤：用於存放title，meta，base，style，script，link標籤，這些標籤都是用來輔助顯示的標籤，每個head標籤必須有一個title標籤 body標籤：用於存放所有的頁面上的結構標籤 title標籤：用於設置頁面的標題、同時提高SEO的權重 meta標籤：設置頁面上的字符集（編碼格式），utf-8,gb2312 <!--注釋內容-->:HTML注釋，給程式碼添加的程式碼說明性的文字，或者使一些沒有必要去掉它的作用 語義化：是指用合理HTML標籤以及特有的屬性去格式化文檔內容
三、HTML標籤
1，基本標籤
不加標籤的純文字也是可以在body中寫的 <b>加粗</b> <i>斜體</i> <u>下劃線</u> <s>刪除</s> <p>段落標籤</p> #獨佔一個段落 <h1>標題1</h1> <h2>標題2</h2> <h3>標題3</h3> <h4>標題4</h4> <h5>標題5</h5> <h6>標題6</h6> <br> #換行 <!--水平線--><hr> #就是單獨個一個水平線 每次加上一些內容，別忘了刷新一下頁面，才能看到新添加的效果或者內容，其實上面這些標籤很少用
2，特殊字元
#空格 ° #°； > #> ± #± < #< ÷ #÷ & #& 乘號 #× ¥ #¥ ²平方 #² © #版權標識© ³立方 #³ ® #註冊
3，div標籤和span標籤（最常用的），沒有語義的標籤
div布局標籤 在頁面上單獨獨佔一行，如果不設置寬度，默認佔一行，通常作為容器布局的時候使用 span標籤 一行可以放多個，顯示大小由內容決定
4，img標籤
<img src = '張鈞蜜.png' alt="這是張鈞蜜" title="美女張鈞蜜" width="700" height="700"> <!--src=圖片的路徑，alt=圖片的描述，在圖片載入失敗後顯示， title=圖片描述，在滑鼠懸停在圖片上時會顯示--> 通過width，height來設置寬和高，，若只設定一個，會自動等比例縮放，src的路徑又分為兩種：網頁上的一個圖片路徑和本地的一個圖片路徑
5，a跳轉標籤
<a id="zjm" href="11.html#iii" target="_blank"><h1>喜歡我？</h1></a> <!--a標籤的跨頁面進行定位--> <!--href=目標頁面的路徑,a標籤中一定要有內容,target屬性設置的是，a標籤的跳轉方式， 默認值為_self，不保留當前頁面，跳轉；_blank，保留當前頁面，打開一個新的窗口進行跳轉--> <p>kkkkkkkkkkkkkk</p> <p>wwwwwwwww</p> <p>eeeeeeeeeeeee</p> <p>rrrrrrrrrrrr</p> <p>rrrrrrrrrrrr</p> <a href="#zjm">點我</a> 上面的a標籤的id為zjm，如果我點擊『點我』，頁面會定位到上面的a標籤，效果圖為下圖
6，列表
<ul type=""> #無序列表，type裡面可以給參數，circle，square，，，，代表每行前面的圖形 <!--unorder list，有ul標籤，就必須有li標籤，而且只能有li標籤--> <li>蘋果</li> <li>香蕉</li> <li><h1>西瓜</h1></li> </ul> <hr> <ol type="" start=""> #有序列表，type的參數有1，a，A，i，I，代表以那種數字來排序 <!--order list--> <li>一等獎</li> <li>二等獎</li> <li>三等獎</li> </ol> <hr> <dl> <!--definition list--> #自定義列表，存在明顯的從屬關係 <dt>手機品牌</dt> <dd>蘋果</dd> <dd>三星</dd> <dd>小米</dd> <dt>電腦品牌</dt> <dd>蘋果</dd> <dd>三星</dd> <dd>小米</dd> </dl>
效果圖：
7，表格
<table border="1" width="500" height="300" cellpadding="10" cellspacing="2" align="center"> <!--border 表格邊框的寬度 width 表格的高度 height 表格的高度 cellspacing 邊框之間的間歇 cellpadding 表格中的單元格中的內容跟邊框的距離 align 水平位置，left center right--> <caption><h1>帥哥排行</h1></caption> <thead> <tr> <th>序號</th> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr> </thead> <tfoot> <tr align="center"> <td >總結</td> <td colspan="3"></td> <!--rowspan='2' 表示獨佔列的2個單元格 colspan = '2' 表示獨佔行的2個單元格--> </tr> </tfoot> <tbody> <tr align="center"> <td>1</td> <td >彭于晏</td> <td>男</td> <td>49</td> </tr> <tr align="center"> <td>2</td> <td>劉德華</td> <td>男</td> <td>55</td> </tr> <tr align="center"> <td>3</td> <td>周杰倫</td> <td>男</td> <td>45</td> </tr> </tbody> <!--table 表格 tr 行 td 行內的單元格 th 表頭 caption 表的標題 thead 容納表的表頭 tbody 容納表的主體內容 tfoot 容納表的尾巴，一般不出現--> </table>
效果圖：
8，表單
<form action="http://127.0.0.1:8888" method="get"> #action為表單提交的目標地址，method為提交方法，為get時，可以在目標網頁的網址上看到提交內容，若為post，就看不到 <label for="username">昵稱：</label><input type="text" id="username" name="username" placeholder="請輸入您的昵稱" value="愛你"><br> #文本框 <label> #label標籤，加了之後，點擊密碼兩個字，輸入框自動獲取游標 密碼：<input type="password" name="pwd" placeholder="請輸入6位密碼"><br> #密碼框 </label> 性別：<input type="radio" name="sex" checked="checked" value="1">男 #單選框，在同一單選框中，name值要相同；checked是默認選項 <input type="radio" name="sex" value="2">女 <input type="radio" name="sex" value="3">不詳<br> 愛好：<input type="checkbox" name="hobby" checked="checked" value="a">打遊戲<input type="checkbox" name="hobby" value="b">吃飯 #多選框 <input type="checkbox" name="hobby" value="c">睡覺<br> <input type="button" value="登錄"><br> #普通按鈕 <input type="reset"><br> #重置按鈕，點擊之後，表單內所有輸入內容被重置 <input type="submit"><br> #提交按鈕，點擊之後，會把整個表單內容讓目標地址提交 <input type="image" src="張鈞蜜.png" width="50"><br> #圖片 出生年月：<select name="year" multiple=『Ture』> #下拉框，multiple為布爾屬性，設置後為多選下拉框，不設置默認單選 <option value="1995">1995</option> <option value="1996">1996</option> <option value='1997' selected="selected">1997</option> <option value="1998">1998</option> </select>年 <select name="month"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option>5</option> <option>6</option> <option>7</option> </select>月 <select name="day"> <option>01</option> <option>02</option> <option>03</option> <option>04</option> </select>日<br> 交友宣言：<textarea name="xuanyan"></textarea><br> #文本域 ，筐的大小可以拉大 日期：<input type="date" name="date"><br> #日期 時間：<input type="time" name="time"><br> #時間 </form> name：表單提交時的鍵，注意和id的區別 value：表單提交時對應項的值 button，reset，submit時，value為按鈕上顯示的文本內容 text，password，hidden時，value為輸入框的初始值 CheckBox，radio時，value為選中項相關聯的值 checked：radio，CheckBox默認被選中的項
效果圖：
