HTML入門
在這個(gè)時(shí)候锐秦，RNG得了冠軍苛谷，首先恭喜RNG恭喜uzi，六年來(lái)的努力沒有白費(fèi)成箫，有夢(mèng)想有堅(jiān)持的人總是那么可愛展箱。其次我剛好看了篇文章，叫“我就想做一個(gè)一事無(wú)成的人啊”蹬昌，當(dāng)然看了這個(gè)標(biāo)題我就知道這應(yīng)該是一篇雞湯混驰，沒什么意思。所以...........我果斷的看完了皂贩，哈哈哈哈哈哈哈哈栖榨！既然看完了就總結(jié)一下吧，這篇文章說(shuō)的就是他是一個(gè)很努力很優(yōu)秀的人明刷，就是在父母眼里中別人家的孩子（這應(yīng)該不難理解吧）婴栽，他從小到大都是爭(zhēng)強(qiáng)好勝的，任何事都想去爭(zhēng)個(gè)第一辈末，喜歡聽到別人夸獎(jiǎng)愚争。然而，有一天他突然覺得累了想為自己而生活挤聘，想做自己想做的事轰枝，不在去爭(zhēng)個(gè)一二，不在強(qiáng)迫自己组去，在這種心境下可能就寫出了這篇雞湯出來(lái)狸膏。看完我就在想我是不是應(yīng)該也要做自己想做的事呢添怔，我也要為自己而活湾戳，在這個(gè)想法直沖腦門時(shí)我抬起了頭，就是這個(gè)時(shí)候广料，我看到了滿電腦的代碼砾脑，我很慶幸，我終于清醒了艾杏，哈哈哈哈哈哈韧衣！M的！還好沒入魔购桑。我認(rèn)為的是所有的世俗之人都是在有所成就之后畅铭，才敢說(shuō)我想活得一事無(wú)成吧，真正一事無(wú)成的人還想不到這里去勃蜘，沒有經(jīng)歷過(guò)大風(fēng)大浪都不會(huì)懂什么叫平靜吧Ｋ敦（肯定，我也不懂）總的來(lái)說(shuō)缭贡，我們要努力炉擅，uzi六年沒放棄他實(shí)現(xiàn)了，我們也不差阳惹，相信自己谍失。好了，說(shuō)了這么多廢話我們?cè)撟哌M(jìn)現(xiàn)實(shí)了莹汤，我們先來(lái)了解下基本的HTML快鱼。
HTML概覽（語(yǔ)法）
DOCTYPE（doctype） —— 目前最推薦的是HTML文檔類型聲明，寫法是
<!DOCTYPE html>,在DOCTYPE之前只能有注釋和空白纲岭，大小寫無(wú)所謂的抹竹，但是不太推薦用寫。DOCTYPE會(huì)告訴瀏覽器你的語(yǔ)法荒勇，可能還會(huì)影響到JS的功能（我們以后會(huì)說(shuō)）柒莉。標(biāo)簽 —— 標(biāo)簽分為有內(nèi)容標(biāo)簽例如：<script>/<body>/<span>/<button>和可省略標(biāo)簽，后面會(huì)慢慢知道的沽翔，新手沒必要去糾結(jié)兢孝。
屬性 —— 所有標(biāo)簽（包括<html>）都是有屬性的，有布爾屬性和全局屬性仅偎。
注釋 —— 我們現(xiàn)在了解普通注釋寫法跨蟹。
空白 —— 和markdown一樣，無(wú)論我們加了多少空格都只會(huì)默認(rèn)一個(gè)橘沥，如果要在html代碼中保留空白就要去用一些特殊標(biāo)簽去包裹或者用html實(shí)體窗轩，如 。
實(shí)體 —— 如果想在頁(yè)面上展示<html>這個(gè)字符座咆，顯然不能寫<html>痢艺，于是HTML想了一個(gè)轉(zhuǎn)義方案兴猩，用&xxxx，表示一個(gè)特殊字符换可。
HTML簡(jiǎn)介
什么是HTML誉碴？
超文本標(biāo)記語(yǔ)言（Hypertext Markup Language,HTML）是一個(gè)用來(lái)結(jié)構(gòu)話web內(nèi)容并給與其含義和目標(biāo)的編碼語(yǔ)言。
HTML并不是真正的程序語(yǔ)言舌缤，它是一種標(biāo)記語(yǔ)言
它由一系列的元素（elements）所組成箕戳，不同的元素各有公用
一個(gè)HTML文檔的基本結(jié)構(gòu)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蔡華鵬的博客</title>
</head>
<body>
<p>我們要寫的內(nèi)容</p>
</body>
<html>
- <!DOCTYPE html> —— 文檔類型
- <html></html> —— <html>包含頁(yè)面的整個(gè)內(nèi)容
- <head></head> —— <head>包含頁(yè)面描述，css樣式等国撵，但不會(huì)被用戶看到
- <body></body> —— <body>包含了你想被用戶看到的內(nèi)容
- <meta charest="utf-8> —— 指定文檔的字符編碼為UTF-8
- <title></title> —— 設(shè)置頁(yè)面的標(biāo)題陵吸，顯示在瀏覽器標(biāo)簽頁(yè)上
- 快捷鍵：在vscode中輸入!并按Tab鍵，就會(huì)出現(xiàn)一個(gè)基本的HTML文檔
HTML文本
標(biāo)題與段落 <h1>—<h6>
通常一個(gè)頁(yè)面只有一個(gè)<h1>,請(qǐng)盡量按順序來(lái)使用
例：
<h1>蔡華鵬</h1>
<h2>xxx</h2>
<p>xxx</p>
快捷鍵：在vscode中輸入<h1>按Tab鍵就會(huì)出現(xiàn)<h1></h1>
列表
無(wú)序列表<ul> Unordered List
有序列表<ol> Ordered List
<em>介牙、<strong>與<span>都是加重語(yǔ)氣壮虫，<span>的語(yǔ)氣較弱
例
<p>今天<em>蔡華鵬</em>寫了博客<p>
以上三個(gè)用法都一樣，只是語(yǔ)氣上有差異
描述列表：<dl><dt><dd>
<dl>
<dt>xx</dt>
<dd>解釋xx</dd>
<dt>某某</dt>
<dd>解釋某某</dd>
HTML須知
設(shè)定文檔語(yǔ)言
<html lang="zh-cn">
- SEO(搜索引擎優(yōu)化）
- 有助于視覺障礙人士通過(guò)讀屏器閱讀頁(yè)面
設(shè)定部分頁(yè)面內(nèi)容語(yǔ)言
<p>日語(yǔ)<span lang="jp">xxx</span>的意思是什么</P>
塊級(jí)元素和內(nèi)聯(lián)元素
- 塊級(jí)云阿蘇在頁(yè)面中以塊的形式展現(xiàn)——塊級(jí)元素不會(huì)被嵌套進(jìn)內(nèi)聯(lián)元素中耻瑟，但可以嵌套在其他塊級(jí)元素中旨指，如<div>，<h1>喳整，<p>
- 內(nèi)聯(lián)元素通常出現(xiàn)在塊級(jí)元素中并被其它文本所包圍——內(nèi)聯(lián)元素
不會(huì)導(dǎo)致文本換行如<a>谆构，<em>，<strong>
屬性
布爾屬性
比如<input>被添加disabled屬性后框都，就接收不到用戶輸入了
例
<input type="text" disabled>
<input type="text">
全局屬性
id搬素，class，style魏保，title都是全局屬性熬尺，可以被任何HTML元素使用，hidden可用于隱藏某個(gè)頁(yè)面元素
<div class="notice" hidden>請(qǐng)先登錄</div>
contenteditable全局屬性可以使元素內(nèi)容變成可編輯
<p contenteditable>同學(xué)們號(hào)谓罗！</p>
HTML頭部
- <head>的內(nèi)容不會(huì)在瀏覽器中顯示粱哼，它的作用是包含一些頁(yè)面的元數(shù)據(jù)
- 元數(shù)據(jù)（Metadata）描述數(shù)據(jù)的數(shù)據(jù)
<head>
<meta charset="utf-8">
<title>蔡華鵬的博客</title>
</head>
元數(shù)據(jù)<meta>
指定文檔編碼
<meta charset="utf-8">
定制業(yè)面圖標(biāo)
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
設(shè)置referer
<meta name="referer" content="never">
設(shè)置頁(yè)面描述
<meta name="description" content="xxx">
創(chuàng)建超鏈接
簡(jiǎn)單鏈接
<a href="瀏覽器地址">xxx</a>title屬性
<a href="瀏覽器地址“ title="對(duì)xxx解釋">xxx</a>
將鼠標(biāo)放在xxx上就會(huì)顯示 （對(duì)xxx的解釋）外部鏈接
將target設(shè)置成_blank時(shí)，點(diǎn)擊鏈接會(huì)新開一個(gè)Tab打開該網(wǎng)頁(yè)
<a href="圖片瀏覽器地址" title=“對(duì)圖片的解釋" target="_bamk">xxx</a>返回頂部鏈接
<a href="#">返回頁(yè)面頂部</a>文檔內(nèi)部鏈接
用于定位到文檔的某一部分檩咱，<a>的href要對(duì)應(yīng)文檔內(nèi)某個(gè)元素的id（id在值在文檔內(nèi)要唯一）
<a href="#email鏈接">email鏈接</a>
<a href="表單的相關(guān)網(wǎng)址">表單相關(guān)標(biāo)簽</a>
<a href="tel:電話號(hào)碼">打電話</a>
圖片鏈接
<a href="瀏覽器地址" title="圖片"><img src="圖片瀏覽器地址"></a>
下載鏈接
<a href="下載地址" dowmload>下載</a>
email鏈接
<a href="郵箱地址">發(fā)郵件給某某</a>
帶說(shuō)明的圖像
<figure>
<img src="圖片地址" alt="對(duì)圖片的注釋">
<figcaption>圖片下寫的字</figcaption>
</figure>
注意：title和alt這兩個(gè)屬性的區(qū)別：
首先揭措，alt是html標(biāo)簽的屬性，而title既是html標(biāo)簽刻蚯，又是html屬性绊含。
title標(biāo)簽，網(wǎng)頁(yè)的標(biāo)題就是寫在這對(duì)標(biāo)簽之內(nèi)的炊汹。
title作為屬性時(shí)躬充，可以為元素提供額外說(shuō)明信息。例如，給超鏈接標(biāo)簽a添加了title屬性充甚，把鼠標(biāo)移動(dòng)到該鏈接上面是以政，就會(huì)顯示title的內(nèi)容，以達(dá)到補(bǔ)充說(shuō)明或者提示的效果津坑。
而alt屬性只能用在img妙蔗、area和input元素中，用于網(wǎng)頁(yè)中圖片無(wú)法正常顯示時(shí)給用戶提供文字說(shuō)明使其了解圖像信息疆瑰。alt是替代圖像作用而不是提供額外說(shuō)明文字的。
此外昙啄，使用alt屬性還具有搜索引擎優(yōu)化效果穆役，因?yàn)樗阉匾媸菬o(wú)法直接讀取圖像的信息的，alt可以為其提供文字信息所以對(duì)搜索引擎比較友好梳凛。
表格Table
簡(jiǎn)單表格
<table>
<thead>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
<thead>
<tbody>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</tbody>
</table>
HTML表單
form
- form標(biāo)簽是表單的外殼耿币，主要是四個(gè)屬性
- action： 表單提交的地址
- method：提交保單的方法
- target：在何處打開action
- enctype（他的一個(gè)編碼方式）
1、application/x-www-form-urlencoded：在發(fā)送前編碼的所有字符（默認(rèn)）
2韧拒、text/plain：字符轉(zhuǎn)換為“+”加號(hào)淹接，但不對(duì)特殊字符編號(hào)
3、multipart/form-data：使用包含文件上傳控件的表單時(shí)叛溢，必須使用該值
password
輸入內(nèi)容自動(dòng)變成圓點(diǎn)
checkbox
靠name屬性分組塑悼，提交到后端的時(shí)候被選中的value是以“，”分割的一個(gè)字符串楷掉，通過(guò)name屬性獲得
