HTML基礎
文章出自拉勾大前端--前端就業(yè)班
對于夢想我曾經(jīng)想過放棄，但這個軀體由我主宰，我想去追求星辰大海，咸魚也有想翻身的一天，這短短的一生，我們最終都會失去，你不妨大膽一些，愛一個人，攀一座山，追一個夢。我不是一無是處，希望我身上微薄的光，有一日能遇上你漆黑的夜。
一、咸魚想翻身的第一步--拉勾找廠上班
我是一個后知后覺的90后，說白了就是懶，然而內(nèi)心的眾多想法讓我不得不向社會低頭，從大學畢業(yè)以后，就一直沒找到自己合適的工作，年輕的時候就想著怎么考證，從而荒廢了自己最真實的想法，那么最真實的想法是啥呢，當然是提升自己，想做一名程序員，說起學前端最真實的想法就是感覺前端最簡單。系統(tǒng)學和自學又是不一樣的概念，在自學無果的情況下，在vue社區(qū)看到拉鉤教育（不得不說亂打廣告真的有用），嘗試報著試試的態(tài)度去學下吧，才發(fā)現(xiàn)拉勾教育并不是什么小機構，也沒有讓我失望，解除了我對報班學習的種種誤會。總之，找廠上班靠拉鉤了！
學習感受
- 我一直覺得自己是一個不善言辭的人，圈子也很小，從拉勾小姐姐找上我的那一刻，我仿佛找到了自己的圈子，第一感覺就是學習氛圍很好，入學手續(xù)和其他什么的也很簡單，有這么多一起學習的小伙伴，自己學起來也很有動力，這個群體讓我感受就是世界所有人都在奮斗，不再每天碌碌無為，這樣真的挺好
- 學習上，我自己是有一年左右的自學經(jīng)驗的，說白了就是野孩子，沒有經(jīng)過系統(tǒng)的學習，還真的不知道自己錯過了這么多東西，知識點和要點老師在課上都講的非常清楚，自己以前遇到的問題也慢慢的被解決的，也就在這個時候我感覺到自己還是有很多東西需要虛心下來學習的，拉勾讓我有了上學那味了，也感覺找回了曾經(jīng)學習的氛圍，沒事的時候在群里東拉西扯，反正目前對就業(yè)還是比較有信心的
二、有些可以不裝在腦子里的東西--筆記
HTML基本結構
基本骨架
- HTML文件最基本的四個標簽，組成了網(wǎng)頁的基本骨架，包括：<html>、<head>、<title>、<body>四組標簽。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
<html>標簽
- 定義HTML文件的根元素，表示整個的HTML文檔，所有的標簽要書寫在<html>標簽內(nèi)部。
<head>標簽
- 用于存放<title>,<meta>,<base>,<style>,<script>,<link>。內(nèi)部用于對網(wǎng)頁的設置，除了<title>內(nèi)部的文字，其他標簽都不顯示在瀏覽器上。
在<head>標簽中我們必須要設置的標簽是title
<title>標簽
- 作用1：讓頁面擁有一個屬于直接的標題。
- 作用2：title中的關鍵字可以作為搜索引擎抓取的關鍵字，提高SEO搜索引擎優(yōu)化
- 作用3：內(nèi)部的內(nèi)容會顯示在搜索結果的標題部分
- 作用4：作為瀏覽器收藏夾默認的網(wǎng)頁標題
建議網(wǎng)頁必須添加title標簽內(nèi)部內(nèi)容，內(nèi)容盡量精簡，提取網(wǎng)頁的關鍵字
<body>標簽
- 作用：定義網(wǎng)頁的主體部分，用于存放所有的HTML顯示內(nèi)容的標簽
<body>標簽內(nèi)部的元素內(nèi)容會顯示在瀏覽器的窗口中
DTD
- 完整的HTML文件的第一行內(nèi)容叫做文檔定義類型，英文DocType Definition,簡稱DTD。也稱作文檔聲明類型，DocType Declaration
HTML5版本 <!DOCTYPE html>告知瀏覽器該網(wǎng)頁使用的是哪個版本的HTML規(guī)范，讓瀏覽器按照對應版本的HTML語法進行解析頁面
命名空間
- <html>元素表示整個網(wǎng)頁文檔，在開始標簽上設置了命名空間xmlns屬性
語言
- xml:lang="en"和lang="en" 表示所有的標簽元素內(nèi)容的語言都是英語，對搜索引擎和瀏覽器是有幫助的
- lang="zh-cn" 表示中文（中國）
HTML5版本 <html lang="en">
字符集
- <head>標簽內(nèi)部的meta標簽通過http-equiv屬性定義了當前的網(wǎng)頁所使用的字符編碼
HTML5版本 <meta charset="UTF-8">
常用字符集編碼
-
國際通用字庫
- UTF-8: 以字節(jié)為單位對Unicode萬國碼進行編碼，涵蓋了所有人類的語言文字，一個漢字為3個字節(jié)大小
-
中文國標字庫
- gb2312: 共收入漢族6763個和包括拉丁字母、希臘字母、日文、俄語西里爾字母在內(nèi)的682個
- gbk: 是gb2312的擴展，增加了繁體字，共收入21886個漢字和圖形符號，其中漢子21003個，圖形符號883個，一個漢字為2個字節(jié)大小
字符集常見問題
-
使用情況建議
- 如果沒有網(wǎng)頁加載速度要求，或者制作的是外文網(wǎng)站，使用utf-8
- 如果含有大量中文漢字的網(wǎng)站，而且要求網(wǎng)頁加載速度快，使用gbk
注意：<meta>標簽聲明的字庫，必須和編輯器軟件默認編譯字庫相同，否則會出現(xiàn)字庫不匹配，瀏覽器加載是出現(xiàn)亂碼
HTML常用標簽
注釋
- 在源代碼中添加描述性提示信息，便于我們閱讀代碼
- 對于HTML糾錯也大有幫助，可以通過注釋某一行HTML代碼，以便檢索錯誤的位置
- 暫時注釋掉一部分不用的代碼，便于后期恢復代碼
<!-- 書寫注釋內(nèi)容 -->注釋只在源代碼中可見，在瀏覽器窗口是不顯示的
標題標簽
- 標題,是通過<h1>-<h6>六個標簽分別來對六個級別的標題進行定義的
- <h1>定義最大的標題，<h6>定義最小的標題
- <h1>-<h6>標簽都是雙標簽，且是容器級標簽
<h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6>
標題作用
- 標題標簽的作用是給標簽內(nèi)部的元素內(nèi)容添加對應級別標題的語義，不負責文字的粗體、字號等樣式。
標簽級別
- 標題標簽之間是不能相互嵌套的，下一級標題與上一級標題之間通過同級關系書寫，下一級標題解釋說明的是前面距離最近的上一級標題
權重
- 標題標簽對于呈現(xiàn)文檔結構非常重要，使用時要根據(jù)標簽的重要程度進行選擇，其中<h1>標簽最重要，<h2>標簽次之，以次類推
- <h1>在整個HTML中權重非常高，內(nèi)部應該放重要的內(nèi)容，比如LOGO
- <h1>由于非常重要，內(nèi)部的文字對于提高搜索引擎排名也非常重要，如果一個頁面出現(xiàn)多個<h1>，反而降低權重。約定，一個頁面只會出現(xiàn)一個<h1>
段落標簽
- 段落是通過<p>標簽進行定義的
- 標簽是雙標簽，且為文本級標簽。內(nèi)部只能放置文本、圖片、表單元素，或者廢棄的<font>標簽等
- 作用：<p>標簽的作用是給標簽內(nèi)部的內(nèi)容添加一個完整段落的語義，不負責內(nèi)容自動換行的樣式
<p>這是段落標簽</p>
換行標簽
- <br>標簽是HTML中的一個簡單的換行符
- <br>標簽是一個單標簽
- 在需要換行的位置可以使用<br>標簽書寫，只是進行簡單的強制換行
<p>這是第一<br />個段落</p>
文本格式化
- HTML中有部分標簽是用來對文字進行格式化顯示設置的，比如粗體和斜體等
<b>定義粗體文本</b> <i>定義斜體<i/> <u>定義下劃線</u>
圖像標簽
- 圖像由<img>標簽進行定義
- <img>標簽是單標簽，本身相當于一個特殊的文本
- <img>標簽的作用是在指定的位置插入一張圖片
- 在HTML文件，常用的插入圖片的類型有jpg,png,gif
<img src="smile01.jpg" ><img>標簽最為重要的屬性為src，盡量使用alt屬性對圖片進行說明，添加相對關鍵詞可以有利于SEO搜索引擎優(yōu)化，其他屬性可以根據(jù)需求進行設置
音頻標簽
- 音頻使用<audio>標簽進行定義
- 同圖片一樣，需要使用src屬性設置音頻查找的路徑
- 音頻文件支持的格式包括： mp3、ogg、wav
//設置控制器控制音頻 <audio src="" controls="controls"></audio>
視頻標簽
- 視頻的設置方法和音頻類似
- 視頻使用<video>標簽進行定義
- 使用src屬性設置視頻查找路徑
- 視頻文件支持的常用格式： mp4、ogg、webm
//設置控制器控制視頻頻 <video src="" controls="controls"></video>
超級鏈接標簽
- 在HTML中使用<a>標簽來創(chuàng)建鏈接
- 可以實現(xiàn)兩種跳轉：跨頁面跳轉、頁面內(nèi)跳轉
<a href="" target="_blank" title="超級鏈接"></a> -
target屬性
- _self:默認值，表示跳轉的頁面在當前窗口打開，不會打開新窗口
- _blank: 表示跳轉的頁面在新窗口打開
-
title屬性
- title設置的鼠標懸停的提示文本，與<img>標簽類似
設置錨點
- 在目標位置找到任意一個標簽，給它添加id屬性，id的屬性值必須是唯一的
- 在目標位置設置一個空的<a>，只設置一個name屬性，name設置方式和id相同，也必須是唯一的
<a href="#maodian"></a>
跨頁面錨點跳轉
<p id="maodian"></p>
<a ></a>
列表
- 列表用于制作HTML中的一系列項目
- 通常我們會將內(nèi)容相關、結構相似、樣式相近的內(nèi)容使用列表結構進行搭建
- 根據(jù)項目的內(nèi)容不同，可以有三種語義的列表結構：無序列表、有序列表、定義列表
-
無序列表標簽
- 無序列表標簽分別是<ul>和<li>
- <ul>內(nèi)部只能嵌套<li>,<li>標簽不能脫離<ul>單獨書寫
- <li>標簽是一個經(jīng)典容器級標簽
- 無序列表之間的<li>沒有先后順序之分，重要程度相同
-
有序列表標簽
- 有序列表標簽由<ol>和<li>組成
-
定義列表標簽
- 自定義列表不僅僅是一列項目，而是項目及其注釋的組合
- 由三個標簽組成完整結構，包含<dl>、<dt>、<dd>
- dt和dd標簽也是容器級標簽，內(nèi)部可以放置任意內(nèi)容
布局標簽
-
<div>標簽
- 最經(jīng)典的容器級標簽，內(nèi)部可以放置任意內(nèi)容
- 劃分網(wǎng)頁區(qū)域，進行結構布局
-
<span>標簽
- 不改變整體效果，輔助進行局部調整
HTML基本語法
表格
- table: 定義表格的大結構
- tr: 表格的行，定義的表格由多少行組成
- td: 表格數(shù)據(jù)，定義行內(nèi)單元格
表格的單元格之間有默認的空隙，會導致雙線邊框。解決方法:設置標簽樣式屬性style。屬性值:border-collapse : collapse;表示邊框塌陷。
-
單元格屬性
- rowspan跨行和并。上下的合并。
- colspan:跨列合并。左右的合并。
-
分區(qū)標簽
- caption: 表格的標題，內(nèi)部書寫標題文字
- thead: 表格的頭部。內(nèi)部嵌套tr>th
- tbody: 表格的主體。內(nèi)部嵌套tr>td
- tfoot: 表格的頁腳。內(nèi)部嵌套tr>td
注意:不論書寫順序如何顛倒，瀏覽器中的加載順序都是自動按照caption、thead、tbody、tfoot執(zhí)行的
表單
-
表單的組成
- HTML表單用于搜集不同類型的用戶輸入，表單元素就是網(wǎng)頁中提供用戶進行輸入或點擊的小控件
- 在HTML中，一個完整的表單通常由表單域、提示信息和表單控件（也稱為表單元素）3個部分構成
-
表單域標簽
- HTML表單域使用<form>標簽進行定義
- <form>標簽是一個功能性標簽，填寫的表單信息要想正確的提交到后臺服務器，必須放在一個<form>標簽之內(nèi)
-
表單域標簽屬性
- action: 指定接收并處理表單數(shù)據(jù)的服務器程序的url地址
- methid: 設置表單提交方式 get/post
- name: 規(guī)定表單的名稱
<form action="data.php" method="post" name="dxa">
表單控件
-
<input>標簽
-
單行文本輸入框：text
- <input>標簽的type屬性值為text
- 定義提供用戶輸入的單行文本的輸入框，不能輸入多行文字
- 常用value屬性定義默認的輸入文字
用戶名: <input type="text" value="請輸入你的用戶名">
-
密碼輸入框：password
- <input>標簽的type屬性值為password
- 定義提供用戶輸入的密碼框
密碼: <input type="password">
-
單選框：radio
- <input>標簽的type屬性值為radio。
- 定義提供用戶點擊選擇的單選框
- 單選框一般都是成組出現(xiàn)，多個單選框組成一組選擇的情況
- 同一組單選框之間必須是互斥的關系，通過給同一組單選框都設置相同的name屬性實現(xiàn)單選效果
性別: <input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女
-
復選框：checkbox
- <input>標簽的type屬性值為checkbox
- 復選框允許用戶在有限數(shù)量的選項中選擇零個或多個選項
- 同一組復選框最好也設置相同的name屬性
愛好: <input type="checkbox" name="hobby" checked="checked">羽毛球 <input type="checkbox" name="hobby">兵乓球 <input type="checkbox" name="hobby">籃球
-
單行文本輸入框：text
按鈕
<input type="button" value="普通按鈕">
<input type="reset" value="重置按鈕">
<input type="submit" value="提交按鈕">
<input type="image" src=""> 圖片按鈕
文件上傳
- <input>標簽的type屬性值為file
- 定義文件上傳按鈕，可以提供用戶選擇本地文件進行上傳服務器
- 使用input的multiple屬性，可以決定是否可以選擇多個文件
<input type="file" multiple="multiple" />
文本域<textarea>
- 文本域使用<textarea>標簽定義，制作可輸入多行的區(qū)域
- 文本域可以設置默認輸入文字，在雙標簽之間書寫默認文字
- <textarea>有兩個屬性，可以設置顯示區(qū)域的大小
- rows: 行，數(shù)字表示顯示最大行數(shù)，超出部分會被隱藏并顯示滾動條
- cols: 列，數(shù)字大小表示出現(xiàn)滾動條，每一行顯示的最大字節(jié)數(shù)
<textarea name="" id="" cols="" rows=""></textarea>
下拉菜單
- 下拉菜單需要兩個標簽完成的結構
- <select>:選擇，表示定義下拉菜單的整體結構
- <option>:選項，表示下拉菜單的每一項
城市： <select> <option selected="selected">北京</option> <option>上海</option> <option>廣州</option> </select> -
分組管理
- 下拉菜單選項如果變復雜，可以將<option>進行分組管理
- 可以使用<optgroup>對選項進行分組，<optgroup>是一個雙標簽
- select>optgroup>option
城市： <select> <optgroup lable="國內(nèi)"> <option selected="selected">北京</option> <option>上海</option> <option>廣州</option> <optgroup> <optgroup lable="國外"> <option selected="selected">巴黎</option> <option>紐約</option> <option>東京</option> <optgroup> </select><lable>標簽的作用是幫表單元素定義標記。如果將表單控件與提示內(nèi)容使用<lable>進行綁定后，當用戶鼠標點擊<lable>內(nèi)的提示內(nèi)容，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上
<label>標簽
```
性別: <input type="radio" name="sex" checked="checked" id="man"><label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label>
性別: <label><input type="radio" name="sex" checked="checked">男</label>
<label><input type="radio" name="sex" checked="checked">女</label>
```fa
