一、前端開發(fā)做什么
- 傳統(tǒng)前端：html+css+js
- HTML5大前端：各種端的兼容開發(fā)玄妈、Ajax+服務(wù)器端的開發(fā)乾吻、高級設(shè)計模式和框架、網(wǎng)站安全措近、SEO優(yōu)化溶弟、測試、源代碼管理瞭郑、移動APP和移動站點的開發(fā)
二辜御、HTML要點
HTML簡介
1.什么是HTML？
超文本標(biāo)記語言（HyperText Markup Language）屈张，在瀏覽器上運行的一種標(biāo)記語言擒权；
HTML 不是一種編程語言袱巨，而是一種標(biāo)記語言；
標(biāo)記語言是一套標(biāo)記標(biāo)簽 碳抄，HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁 愉老。
2.html的文件命名
必須是小寫字母開頭，后接下劃線剖效、數(shù)字嫉入、字母，不可使用中文或特殊字符作為文件名璧尸。
HTML的結(jié)構(gòu)
1.HTML標(biāo)簽的規(guī)范
- HTML 標(biāo)簽是由尖括號包圍的關(guān)鍵詞咒林，比如
<html> - HTML 標(biāo)簽通常是成對出現(xiàn)的，比如
<b>和</b> - 標(biāo)簽對中的第一個標(biāo)簽是開始（開放）標(biāo)簽爷光，第二個標(biāo)簽是結(jié)束（閉合）標(biāo)簽
- HTML也存在單標(biāo)簽垫竞，例如
<br/>、<img/>
2.Html標(biāo)簽結(jié)構(gòu)初體驗（標(biāo)簽蛀序、屬性欢瞪、元素、注釋）
3.結(jié)構(gòu)中的每個標(biāo)簽的含義
（1）<!DOCTYPE>標(biāo)簽
<!DOCTYPE>
- 聲明位于文檔中的最前面的位置徐裸，處于 <html> 標(biāo)簽之前遣鼓。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范
- 文檔類型：
| 文檔類型 | 分類 | 備注 |
|---|---|---|
| HTML | HTML Strict DTD | 請求比較嚴(yán)格的html類型 |
| HTML | Transitional DTD | 相對而言比較規(guī)范不太嚴(yán)禁 |
| HTML | Frameset DTD | 框架級的類型 |
| xHTML | HTML Strict DTD | 請求比較嚴(yán)格的html類型 |
| xHTML | HTML Transitional DTD | 相對而言比較規(guī)范不太嚴(yán)禁 |
| xHTML | Frameset DTD | 框架級的類型 |
| HTML5 |
注意：每個頁面都必須設(shè)置一個doctype，如果不設(shè)置倦逐，瀏覽器會默認(rèn)開啟quirks mode（怪異模式）解析（quirks mode是瀏覽器為了兼容很早之前針對舊版本瀏覽器設(shè)計譬正、并未嚴(yán)格遵循 W3C 標(biāo)準(zhǔn)的網(wǎng)頁而產(chǎn)生的一種頁面渲染模式）宫补。
（2）<html>告知瀏覽器這是一個html文件
| 屬性值 | 作用 |
|---|---|
| lang屬性 | 設(shè)置這個頁面的主要語言 |
（3）<head>標(biāo)簽管理所有頭部元素的容器
可以存放：<base>, <link>, <meta>, <script>, <style>以及 <title>
（4）<title>標(biāo)簽定義文檔的標(biāo)題
title中的文本在SEO中占有很大的權(quán)重檬姥。（不可少）
（5）<meta>標(biāo)簽
作用：設(shè)置頁面描述信息，設(shè)置頁面關(guān)鍵字粉怕，設(shè)置頁面的編碼格式
- Description：設(shè)置頁面描述信息【關(guān)鍵信息的比重（前升排名的一種方式健民。）】
- Keywords：設(shè)置頁面關(guān)鍵詞∑侗矗【關(guān)健詞的比重（前升排名的一種方式秉犹。）】
- 設(shè)置頁面的編碼格式：
例如：
<meta charset=UTF-8">
Charset（字符集格式）常見：
- UTF-8:國際通用字符集
- gb2312:亞洲國家使用字符集
HTML標(biāo)簽詳解
h系列的標(biāo)簽
| h系列的標(biāo)簽(Header) | 作用 |
|---|---|
| h1,h2,h3,h4,h5,h6 | 把頁面上的文字加上標(biāo)題的語義，其中h1定義標(biāo)題的語義化最重 |
注意：一個頁面只能有一個h1標(biāo)簽稚晚。
p段落標(biāo)簽
| p段落標(biāo)簽 | 作用 |
|---|---|
| p | 給頁面的上一段文字加上段落的語義 |
hr標(biāo)簽
| p段落標(biāo)簽 | 作用 |
|---|---|
| hr | 在頁面顯示一條橫線崇堵，默認(rèn)占整行。hr 元素可用于分隔內(nèi)容 |
br標(biāo)簽
| br段落標(biāo)簽 | 作用 |
|---|---|
| br | 換行 |
a標(biāo)簽
a：超鏈接客燕，錨鏈接鸳劳。
- 作用：跳轉(zhuǎn)頁面；
- a標(biāo)簽屬性：
| 屬性 | 屬性值 |
|---|---|
| href | a標(biāo)簽的跳轉(zhuǎn)目標(biāo)地址 |
| target | 設(shè)置連接的跳轉(zhuǎn)方式:target設(shè)置連接的跳轉(zhuǎn)方式(1)_blank:保留原始頁面也搓，再進行跳轉(zhuǎn)(2)_self:在當(dāng)前頁面進行跳轉(zhuǎn) |
補充：<base target=“blank”>為頁面上所有a標(biāo)簽設(shè)置跳轉(zhuǎn)方式（一般放在titile標(biāo)簽下面）
a標(biāo)簽的其它用法：
- 可以不跳轉(zhuǎn)（跳轉(zhuǎn)到當(dāng)前頁面）
href=”#” - 可以跳轉(zhuǎn)到另外的頁面
- 可以在當(dāng)前頁面進行定位
設(shè)置a標(biāo)簽的href屬性為“#id名”
在頁面的指定位置加入一個目標(biāo)標(biāo)簽（可以是任意標(biāo)簽）
必須給這個標(biāo)簽設(shè)置一個id名：<p id=”mubiao”>這是目標(biāo)</p> - 在跳轉(zhuǎn)的頁面進行定位赏廓。
- 可以進行下載（強烈不推薦使用）
<a href="1.zip">下載那個神奇的文件</a>
img
| 標(biāo)簽 | 作用 |
|---|---|
| img | 在頁面顯示一張圖片 |
| 屬性 | 屬性值 |
|---|---|
| src | 圖片顯示的路徑 |
| alt | 若圖片加載不出來涵紊，顯示出來文字 |
| title | 鼠標(biāo)上移顯示的文字（介紹圖片） |
涉及到的路徑問題：
第一種：絕對路徑
帶有盤符的路徑：C:\上課內(nèi)容\上課視頻\firstday\源代碼\wscat.jpg
缺點：可移植性不強，一般情況下不直接使用絕對路徑幔摸。
第二種：相對路徑
a.如果頁面與圖片在同一目錄下面：
b.如果頁面在圖片一上級目錄：
c.如果圖片在頁面的上一級目錄：
總結(jié)：平時開發(fā)一般都是用相對路徑：因為相對路徑的可移植性要強摸柄。
文本格式化標(biāo)簽
（1）b , u , i , s：視覺要素
| 標(biāo)簽 | 作用 |
|---|---|
| b(Bold) | 加粗 |
| u (Underlined) | 下劃線 |
| i(Italic) | 傾斜 |
| s(Strikethrough) | 刪除線 |
沒有語義的標(biāo)簽，<i></i>標(biāo)簽經(jīng)常會用于不需要語義化的位置既忆，例如放一個小圖標(biāo)
（2）strong,em,del,ins：表達要素
| 標(biāo)簽 | 作用 |
|---|---|
| strong | 加粗驱负，加強語氣 |
| ins | 下劃線 |
| em | 傾斜 |
| del | 刪除線 |
可以作為語義化標(biāo)簽使用
（3）sub眼耀、sup標(biāo)簽
| 標(biāo)簽 | 作用 |
|---|---|
| sub | 定義下標(biāo)字 |
| ins | 定義上標(biāo)字 |
預(yù)格式文本
HTML 輸出空格
- 當(dāng)顯示頁面時痒留，瀏覽器將所有連續(xù)的空格或換行都會被算作一個空格。
- pre標(biāo)簽：預(yù)格式文本锻全，保留原本的結(jié)構(gòu)庆亡，保留空行和空格
表格
早期網(wǎng)站開發(fā)中匾乓，人們喜歡作用表格布局，使用非常的泛濫又谋。到了2008年之后拼缝，人們意識到表格的局限性，所以改為用div+css模式彰亥。2002.Sina.com.cn咧七、2004.sina.com.cn
作用：用來將數(shù)據(jù)以表格形式顯示出來。
最簡單的表格格式：
完整的表格格式：
| 常用屬性 | 作用 |
|---|---|
| border | 給表格加上了邊框 |
| width | 給表格設(shè)置寬 |
| height | 給表格設(shè)置高 |
| cellspacing | 規(guī)定單元格之間的空白 |
| cellpadding | 規(guī)定單元邊沿與其內(nèi)容之間的空白 |
| align:center,left,right | 設(shè)置table上任斋，決定表格顯示的位置 |
| 例如 | <table border="1" width="800" height="400" cellspacing="0" cellpadding="0"> |
列表：顯示數(shù)據(jù)
（1）無序列表(ul)：(重點)
| 標(biāo)簽 | 作用 |
|---|---|
| ul | 顯示一列沒有排列順序的數(shù)據(jù) |
注意：
- ul標(biāo)簽是用來管理li標(biāo)簽继阻，所以ul中只能出現(xiàn)li
- li標(biāo)簽是一個容器，可以放其它標(biāo)簽
（2）有序列表(ol)：（用的很少）
| 標(biāo)簽 | 作用 |
|---|---|
| ol | 顯示一段有順序的數(shù)據(jù) |
注意：有序列表中的所有數(shù)據(jù)都是順序的
（3）自定義列表(dl)
| 標(biāo)簽 | 作用 |
|---|---|
| dl,dt,dd | 顯示一段數(shù)據(jù)废酷，格式自己定義 |
注意：一個dl中可以有多個dt和多個dd瘟檩。
表單：收集信息
1.表單標(biāo)簽（<form></form>）
<form>
...
input 元素
...
</form>
屬性：
- action="url地址" ，用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址
- method="提交方式" 澈蟆，設(shè)置表單數(shù)據(jù)的提交方式墨辛，其取值為get或post
- name="表單名稱" ，用于指定表單的名稱趴俘，以區(qū)分同一個頁面中的多個表單
2. 表單元素（注冊頁面上能夠填寫的內(nèi)容）
作用：用來收集用戶的信息睹簇，將來提交到服務(wù)器。
| 標(biāo)簽 | 作用 | 屬性 |
|---|---|---|
| input | type | text:文本框 |
| input | type | password：密碼框 |
| input | type | button:按鈕 |
| input | type | reset:重置 |
| input | type | image:圖片提交 |
| input | type | submit:提交 |
| input | type | hidden:隱藏域 |
| input | type | radio:單選框 |
| input | type | checkbox:多選框 |
| input | type | hidden:隱藏域 |
| input | type | submit是提交按鈕 起到提交信息的作用 |
| input | value | 給文本和按鈕(text,password,button)用于設(shè)置默認(rèn)值 |
| select | option | 下拉框 |
| textarea | 文本域 |
注意：
- 如果想要多個radio或者checkbox組成一個選擇集合寥闪，那么必須給每個radio以及checkbox都設(shè)置相同的name屬性太惠。
- 如何給radio,checkbox設(shè)置默認(rèn)值：
checked=”checked” - 給下拉框設(shè)置默認(rèn)值：
selected="selected"
字符實體
往網(wǎng)頁中輸入特殊字符，需在HTML代碼中疲憋，轉(zhuǎn)變成以&開頭的字母組合或以&#開頭的數(shù)字凿渊，瀏覽器會用HTML命令對這些特殊代碼進行翻譯。常見的如：
行內(nèi)元素+塊級元素+行內(nèi)塊級元素
行內(nèi)元素(行內(nèi)不可置換元素)：
（1）代表標(biāo)簽：a,span,b,u,i,s,strong,em,ins,del
（2）特點：
- 一行里面可以顯示多個
- 無法設(shè)置寬高
- 寬高由內(nèi)容來決定(背景是顯示在寬高上的,而不是行高)
（3）屬性：display: inline（顯示方式：行內(nèi)元素）
塊級元素：
（1）代表標(biāo)簽：p,h1-h6,div,ul,li,ol,dl,dt,dd
（2）特點：
- 獨占一行
- 可以設(shè)置寬高
- 默認(rèn)寬度一整行
（3）屬性： display:block（顯示方式：塊級元素）
行內(nèi)塊級元素(行內(nèi)可置換元素)：
（1）代表標(biāo)簽：img,input,textarea
（2）特點：
- 可以設(shè)置寬高
- 一行內(nèi)可顯示多個
（3）屬性：display:inline-block
4.元素之間顯示方式切換：修改display屬性，使用浮動（后面會講）
三嗽元、SEO
1.搜索引擎（網(wǎng)絡(luò)爬蟲）負(fù)責(zé)收集頁面信息敛纲，對我們的頁面進行一個歸類排序。
2.搜索引擎（百度）是如何對頁面進行搜索排序的剂癌？
- 花錢買排名
- 頁面的優(yōu)化（SEO）
實現(xiàn)SEO淤翔，最主要是做到標(biāo)簽語義化，在合適的地方使用合適的標(biāo)簽
發(fā)外鏈（網(wǎng)站就越受歡迎佩谷，將來被用戶搜索出來的機會就要大）
