HTML知识
前端開發(fā)：Web Front-end development
后端開發(fā)：Web Back-end development
前端開發(fā)：
1】開發(fā)什么：
結(jié)構(gòu)布局、樣式呈現(xiàn)、頁面的動態(tài)交互：js-腳本、數(shù)據(jù)交互處理、數(shù)據(jù)格式化渲染
| HTML | CSS | JavaScript |
2】<title></title>：文檔標(biāo)題
title標(biāo)簽內(nèi)的文字一般是30-40個(gè)字符，只少不多
如何寫title：
主頁：網(wǎng)站名稱 + 主要的關(guān)鍵字/關(guān)鍵詞的描述
詳情頁：詳情名稱 + 網(wǎng)站名稱 + 簡介
列表頁：分類名稱 + 關(guān)鍵字 + 網(wǎng)站名稱
文章頁：標(biāo)題 + 分類 +網(wǎng)站名稱
3】<meta name="keywords" content="" />：文檔關(guān)鍵詞
keywords ：100個(gè)字符
網(wǎng)站名稱 + 分類信息 + 網(wǎng)站名稱
4】<meta name="description" content="" />：網(wǎng)頁描述
description 描述信息 80-120個(gè)漢字
綜合title + keywords的簡單描述
5】搜索引擎認(rèn)知的優(yōu)先級：title > description > keywords
與物理性標(biāo)簽相比，更喜歡語義性標(biāo)簽(因?yàn)榭勺x性、可維護(hù)性強(qiáng)、受搜索引擎青睞)
6】中文簡體：zh-Hans zh-CHS；中文繁體：zh-Hant zh-CHT
GB2312：中國信息處理國家標(biāo)準(zhǔn)碼：簡體中文編碼
GBK：漢字?jǐn)U展規(guī)范：擴(kuò)大了漢字收錄；增加了繁體中文；增加了藏蒙維等少數(shù)民族的文字
UTF-8：Unicode萬國碼：認(rèn)識全世界正在使用的所有文字
7】document.compatMode：兼容性模式
有<!DOCTYPE html> // CSS1Compat：w3c 標(biāo)準(zhǔn)兼容性模式
沒有<!DOCTYPE html> //BackCompat：瀏覽器的怪異兼容性模式
8】heading標(biāo)簽：標(biāo)題標(biāo)簽
獨(dú)占一行、粗體、大小不一致
8】在編輯器內(nèi)，文本的空格和換行都是文本分隔符
html實(shí)體字符
9】元素
內(nèi)聯(lián)元素inline element：不獨(dú)占一行、無法定義寬高
span、i、em、strong、b、sup、sub、a、label、del、ins
塊級元素block element：獨(dú)占一行、可以定義寬高
p、div、ol、ul、li、dl、dt、dd、form、fieldset、legend、hx、address、table
內(nèi)聯(lián)塊級元素inline-block element：不獨(dú)占一行、可以定義寬高
img、iframe、input、select、textarea、button
10】src & href
src：source資源
href：hypertext reference超文本引用
11】<a></a>：anchor 錨點(diǎn)標(biāo)簽
作用：超鏈接標(biāo)簽、打電話、發(fā)郵件、錨點(diǎn)定位、協(xié)議限定符-不在跳轉(zhuǎn)或刷新
<a href="javascript:;">123</a> 或 <a href="javascript:void(0);">123</a>
12】標(biāo)簽嵌套
內(nèi)聯(lián)元素可以嵌套內(nèi)聯(lián)元素和內(nèi)聯(lián)塊級元素
塊級元素可以嵌套任何元素
p標(biāo)簽不可以嵌套div標(biāo)簽
a標(biāo)簽不可以嵌套a標(biāo)簽
13】注釋：增加代碼可讀性，方便后期維護(hù)；找bug
14】上下標(biāo)
sup：superscripted
sub：subscripted
15】ol & ul ：type start reversed
ol：order list有序列表
ul：unorder list無序列表
dl：definition list 自定義列表 -》dt：definition term、dd：definition description
16】table表格
caption標(biāo)題標(biāo)簽
tr：table row 表格行標(biāo)簽
th：table header cell 表頭標(biāo)簽
td：table data cell 單元格標(biāo)簽
cellpadding：單元格內(nèi)邊距
cellspacing：單元格間距
以下三個(gè)標(biāo)簽必須同時(shí)出現(xiàn)
加載：thead -> tfoot -> tbody
thead：表格頁眉標(biāo)簽 table head
tfoot：表格頁尾標(biāo)簽 table foot
tbody：表格的主體標(biāo)簽 table body
17】frameset標(biāo)簽 不可以放到body標(biāo)簽內(nèi)
frameset設(shè)置框架：現(xiàn)少用或不用因缺陷：數(shù)據(jù)交互差、加載慢、http請求多、對搜索引擎不友好
延伸出了：
iframe標(biāo)簽 內(nèi)聯(lián)框架：好處：不需要加載整個(gè)頁面，只要加載屬于它那一部分即可，減少了http請求；功能性導(dǎo)航用它最好；缺點(diǎn)：對搜索引擎不友好；滾動條體系混亂；數(shù)據(jù)請求無法監(jiān)控；
frameborder="" scrolling=“yes|no|auto”
18】form表單：用戶提交數(shù)據(jù)：數(shù)據(jù)名稱+數(shù)據(jù)值
methods=“get|post” //請求方式
action=“url” //提交數(shù)據(jù)到后端的地址
19】input標(biāo)簽
屬性：
readonly只讀：不可輸入；表單提交數(shù)據(jù)時(shí)可以正常提交
disabled禁用：不可輸入；提交數(shù)據(jù)時(shí)不能獲取到使用了該屬性的input輸入框中的值，即表單提交數(shù)據(jù)時(shí)不被提交該數(shù)據(jù)
20】label標(biāo)簽
label的for屬性值與某一個(gè)input的id值相同時(shí)，點(diǎn)擊label可以聚焦該input輸入框
21】md5：消息摘要算法的第五個(gè)版本：不可逆加密算法(只要加密了就不可以在解密)；這種加密算法不需要提供密鑰，直接就加密了；
22】textarea標(biāo)簽
cols可見寬度(假設(shè)字體16px)：= 8px * cols(平均字符數(shù)) + 17px；17px是滾動條的寬度
rows可見行數(shù)
23】fieldset & legend表達(dá)標(biāo)題
表單組件
24】標(biāo)簽
html標(biāo)簽
html5標(biāo)簽
總結(jié)
- 上一篇： FFmpeg浅尝辄止（四）——音频的解码
- 下一篇： OTRS用户手册