html知识点整理（全）
生活随笔
收集整理的這篇文章主要介紹了
html知识点整理（全）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
第一部分 HTML
第一章 職業(yè)規(guī)劃和前景
-
職業(yè)方向規(guī)劃定位：
- web前端開(kāi)發(fā)工程師
- web網(wǎng)站架構(gòu)師
- 自己創(chuàng)業(yè)
- 轉(zhuǎn)崗管理或其他
-
web前端開(kāi)發(fā)的前景展望：
- 未來(lái)IT行業(yè)企業(yè)需求最多的人才
- 結(jié)合最新的html5搶占移動(dòng)端的市場(chǎng)
- 自己創(chuàng)業(yè)做老板
- 隨著互聯(lián)網(wǎng)的普及web開(kāi)發(fā)成為企業(yè)的寵兒和核心
-
web職業(yè)發(fā)展目標(biāo)：
-
第一、梳理知識(shí)架構(gòu)
- 負(fù)責(zé)內(nèi)容的HTML
- 負(fù)責(zé)外觀的css（層疊樣式表）
- 負(fù)責(zé)行為的js
- ps切圖
-
第二、分解目標(biāo)（起步階段、提升階段、成型階段）
-
起步階段：
- 基本知識(shí)的掌握
- 常用工具的掌握
- 溝通技巧的掌握（圍繞客戶的需求）
- 良好的開(kāi)發(fā)習(xí)慣（加注釋、對(duì)齊方式）
-
提升階段：
- 熟悉掌握HTML基本標(biāo)簽和屬性
- 熟練掌握css的基本語(yǔ)法和使用
- 瀏覽器兼容和w3c標(biāo)準(zhǔn)的掌握
- 結(jié)合html+css+js開(kāi)始系統(tǒng)項(xiàng)目的開(kāi)發(fā)
-
成型階段：
- 精通DIV+CCS布局
- 精通css樣式表控制html標(biāo)簽
- 熟悉運(yùn)用js制作動(dòng)態(tài)網(wǎng)站的效果
- 能獨(dú)立開(kāi)發(fā)完成網(wǎng)站
-
-
第二章 html基本結(jié)構(gòu)
-
認(rèn)識(shí)HTML：
- html不是一種編程語(yǔ)言，是一種標(biāo)志語(yǔ)言
- 標(biāo)記語(yǔ)言是由一套標(biāo)識(shí)標(biāo)簽組成的
- html使用標(biāo)簽來(lái)描述網(wǎng)頁(yè)
-
html結(jié)構(gòu)：
| 1234 | <html><head></head><body></body></html> |
- 不成對(duì)出現(xiàn)的標(biāo)簽
<br>?<hr>?<meta>?<img>?<input..>?<option..>?<link>
-
HTML 基本標(biāo)簽的講解：
- <html>?<head>?<body>標(biāo)簽
- <h1>—-<h6>僅僅用于標(biāo)題文本，不要為了產(chǎn)生粗體文本使用它們
- <p>標(biāo)簽 段落標(biāo)簽
-
<strong><b>標(biāo)簽
-
都會(huì)讓文字產(chǎn)生加粗效果
- <strong>用于強(qiáng)調(diào)文本，強(qiáng)度更深，表示重要文本—>用于SEO優(yōu)化
- <b>只是視覺(jué)加粗效果—>單純?yōu)榱水a(chǎn)生加粗
- <em>?<i>標(biāo)簽
- em用于強(qiáng)調(diào)文本
- i只是視覺(jué)斜體效果
- <strong>比<em>強(qiáng)調(diào)更強(qiáng)
- 特殊符號(hào)：
- —->空格
- > —>大于號(hào)
- <；—>小于號(hào)
- "；—>引號(hào)
- ©–>版權(quán)號(hào)
第三章 html基本標(biāo)簽
-
HTMl基本標(biāo)簽：
- span標(biāo)簽
- 對(duì)被用來(lái)組合文檔中的行內(nèi)元素
- 注意：span沒(méi)有固定的格式表現(xiàn)，當(dāng)對(duì)它應(yīng)用樣式時(shí)，才會(huì)產(chǎn)生視覺(jué)上的變化
- <pre>標(biāo)簽
- 文字的格式按源碼的排版來(lái)顯示，我們稱(chēng)之為預(yù)處理格式
-
<a>標(biāo)簽—>他有一個(gè)必不可少的屬性 href
- target屬性：
- _self(在原來(lái)頁(yè)面打開(kāi))
- _blank（新窗口打開(kāi)）
- _top（打開(kāi)時(shí)忽略所有的框架）
- _parent（在父窗口中打開(kāi)）
-
創(chuàng)建錨點(diǎn)和錨鏈接
- 錨點(diǎn)也是一種超鏈接，是頁(yè)面內(nèi)進(jìn)行跳轉(zhuǎn)的超鏈接
- 第一步：創(chuàng)建錨點(diǎn)?<a name="錨點(diǎn)名稱(chēng)"></a>
- 第二步：使用創(chuàng)建好的錨點(diǎn)名稱(chēng)?<a href="#錨點(diǎn)名稱(chēng)">內(nèi)容</a>
- 錨點(diǎn)也是一種超鏈接，是頁(yè)面內(nèi)進(jìn)行跳轉(zhuǎn)的超鏈接
- marquee標(biāo)簽
- 可以創(chuàng)建一個(gè)內(nèi)容滾動(dòng)效果
- span標(biāo)簽
| 1 | <marquee direction="down" loop="4" this.stop() this.start()></marquee> |
- direction?表示滾動(dòng)方向，取值有（left,right,up,down,默認(rèn)left）
- loop表示滾動(dòng)循環(huán)的次數(shù)，默認(rèn)為無(wú)限循環(huán)
| 1 | this.stop() this.start() scrollamout="1"(滾動(dòng)速度) |
- 表示當(dāng)鼠標(biāo)移上區(qū)域的時(shí)候停止?jié)L動(dòng)，鼠標(biāo)移開(kāi)繼續(xù)滾動(dòng)
第四章 img圖片標(biāo)簽與路徑
-
圖片標(biāo)簽與路徑：
- 常見(jiàn)圖片格式?jpg?png?gif
- Gif?（只支持全透明）
- Jpeg?/jpg
- Png?半/全透明都支持
-
圖片標(biāo)簽寫(xiě)法 ：
- <img src="" alt="" width="" height="" />
-
圖片四要素：
- src=""?圖片路徑
- alt=""?圖片含義
- width=""?圖片寬度 和圖片大小保持一致
- height=""?圖片高度 和圖片大小保持一致
- title=""
-
路徑知識(shí)：
-
相對(duì)路徑、絕對(duì)路徑：
- 相對(duì)路徑：(Relative Path) 相對(duì)于該文件的路徑；
- 絕對(duì)路徑：(Absolute Path) 從磁盤(pán)出發(fā)的路徑；
-
<img src="" …… align="" />?align屬性–設(shè)置圖片與后面文字的位置關(guān)系
值–top、bottom、middle、absmiddle、left、right
-
-
在靜態(tài)頁(yè)面中：
-
/開(kāi)頭表示根目錄；
-
./表示當(dāng)前目錄；（斜畫(huà)線前面一個(gè)點(diǎn)）
-
../上級(jí)目錄；（斜畫(huà)線前面兩個(gè)點(diǎn)）
-
直接用文件名不帶/也表示同一目錄
- 這些都是相對(duì)于當(dāng)前文件的位置來(lái)說(shuō)的，如果用絕對(duì)路徑的話就是寫(xiě)全了。
-
第五章 三種列表的講解
- 三種列表的知識(shí)講解：
- <ul>無(wú)序列表
- 無(wú)序列表是一個(gè)沒(méi)有順序項(xiàng)目的列表，此列表項(xiàng)默認(rèn)粗體圓點(diǎn)進(jìn)行標(biāo)識(shí)
- <ul>無(wú)序列表
| 12345 | <ul><li></li><li></li><li></li></ul> |
- 有序列表
- 有序列表也是一列項(xiàng)目，只是列表項(xiàng)目使用的是數(shù)字進(jìn)行標(biāo)記。 有序列表始于?<ol>?標(biāo)簽。每個(gè)列表項(xiàng)始于?<li>標(biāo)簽。
| 12345 | <ol><li>內(nèi)容一</li><li>內(nèi)容二</li><li>內(nèi)容三</li></ol> |
-
列表符號(hào)
-
無(wú)序列表-列表符號(hào):
- type="circle"?空心圓?type=“disc”?實(shí)心圓 默認(rèn)值?type="square"?方塊符
-
有序列表-列表符號(hào)
- type="A"?A B C D
- type="a"?a b c d
- type="1"?1 2 3 4 默認(rèn)值type=”I” I II III type=”i” i ii iii
-
列表嵌套
-
無(wú)序列表-嵌套
-
| 123456789 | <ul><li>柚子<ul><li>沙田柚</li><li>蜜柚</li></ul></li><li>荔枝</li><li>蘋(píng)果</li></ul> |
- 有序列表-嵌套
| 123456789 | <ol><li>茶<ul><li>紅茶</li><li>綠茶</li></ul></li><li>果汁</li><li>牛奶</li></ol> |
- 定義列表
- 定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。定義列表以?<dl>?標(biāo)簽開(kāi)始。每個(gè)定義列表項(xiàng)以?<dt>開(kāi)始。每個(gè)自定義列表項(xiàng)的定義以?<dd>?開(kāi)始。
| 123456 | <dl> <dt>pc網(wǎng)頁(yè)制作</dt> <dd>學(xué)習(xí)DIV+CSS JS JQ 項(xiàng)目實(shí)戰(zhàn)</dd> <dt>手機(jī)網(wǎng)頁(yè)制作</dt> <dd>手機(jī)網(wǎng)頁(yè)制作實(shí)戰(zhàn)</dd></dl> |
-
dd是對(duì)dt的解釋
- < dl>< /dl>用來(lái)創(chuàng)建一個(gè)普通的列表,
- < dt>< /dt>用來(lái)創(chuàng)建列表中的上層項(xiàng)目，
- < dd>< /dd>用來(lái)創(chuàng)建列表中最下層項(xiàng)目，
- < dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標(biāo)志對(duì)之間。
| 12345678910 | <dl><dt>中國(guó)城市</dt><dd>北京 </dd><dd>上海 </dd><dd>廣州 </dd><dt>美國(guó)城市</dt><dd>華盛頓 </dd><dd>芝加哥 </dd><dd>紐約 </dd></dl> |
- dl是definition list的縮寫(xiě)
- dt是definition title的縮寫(xiě)
- dd是definition description的縮寫(xiě)
- list-style屬性具有三個(gè)屬性分量：
- list-style-position?：設(shè)置列表項(xiàng)圖標(biāo)的位置，位于文本內(nèi)或者文本外
- list-style-type： 設(shè)置列表項(xiàng)圖標(biāo)的類(lèi)型
- list-style-image：使用圖像設(shè)置列表項(xiàng)圖標(biāo)
第六章 表單元素(上)
-
表單標(biāo)簽:
-
<form>表單標(biāo)簽
- <form>表單是一個(gè)包含表單元素的區(qū)域，包括起來(lái)的都是表單的內(nèi)容
123 <form><input type="text"/></form>
- <form>表單是一個(gè)包含表單元素的區(qū)域，包括起來(lái)的都是表單的內(nèi)容
-
-
HTML標(biāo)簽 -?Action和確認(rèn)按鈕：
- 當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。
| 1234 | <form action="html.do" method="get"> username: <input type="text" name="user" /> <input type="submit" value="提 交" /></form> |
-
HTML標(biāo)簽 - 隱藏域隱藏標(biāo)簽：
-
隱藏域在頁(yè)面中對(duì)于用戶是不可見(jiàn)的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候，隱藏域的信息也被一起發(fā)送到服務(wù)器
| 123 | <form> <input type="hidden" name="hid" value="value"></form> |
-
<input>標(biāo)簽的掌握
-
常用type類(lèi)型：
- <input type="" name="" value="" />
- type="text"?單行文本輸入框
- type="password"?密碼（maxlength=""）
- type="radio"?單項(xiàng)選擇（checked="checked"）
- type="checkbox"?多項(xiàng)選擇
- type="button"?按鈕
- type="submit"?提交?type="image"圖片提交
- type="file"?上傳文件
- type="reset"重置
- type="hidden"?隱藏
-
-
關(guān)于表單中的設(shè)置默認(rèn)值：
123 <input type="text" name="" value="今天心情不錯(cuò)" /><input type="radio" name="" value="" checked="checked"><input type="checkbox" name="" value="" checked="checked">
| 1234 | <select name="" ><option value=""></option><option value="" selected="selected"></option><select> |
-
textarea沒(méi)有默認(rèn)值
-
<label>標(biāo)簽的使用
-
<label></label>
- label?元素不會(huì)向用戶呈現(xiàn)任何特殊效果。
- 不過(guò)，它為鼠標(biāo)用戶改進(jìn)了可用性。
- 如果您在?label?元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。
- 就是說(shuō)，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
-
<label>?標(biāo)簽的for?屬性應(yīng)當(dāng)與相關(guān)元素的?id屬性相同。
-
例子：（重要—注冊(cè)表單–用戶體驗(yàn)–必做）
123 <p>單向選擇</p><label for="male">男：</label><input type="radio" name="sex" id="male"/><label for="nv">女：</label><input type="radio" name="sex"checked="check"/>
-
第七章 表單和表格(下)
- 表單和表格標(biāo)簽：
- <textarea>文本域標(biāo)簽
- <textarea>標(biāo)簽：
- <textarea></textarea>是文本域標(biāo)簽，可以在其中插入一段文字內(nèi)容，它有兩個(gè)常用屬性rows和cols
-
注意：
- rows表示這個(gè)文本域有多少行
- cols表示這個(gè)文本域有多少列
-
除了這兩個(gè)屬性它還有readonly（只讀，文本域的內(nèi)容無(wú)法改變，相當(dāng)于協(xié)議）和title（鼠標(biāo)放上提示）
-
<select>標(biāo)簽的掌握
- 注：當(dāng)提交表單時(shí)，瀏覽器會(huì)提交選定的項(xiàng)目，或者收集用逗號(hào)分隔的多個(gè)選項(xiàng)，將其合成一個(gè)單獨(dú)的參數(shù)列表，并且在將?<select>?表單數(shù)據(jù)提交給服務(wù)器時(shí)包括?name屬性
123456 <form> <select name="" id=""><option value="1">1月</option> <option value="2">2月</option> </select></form>
- 注：當(dāng)提交表單時(shí)，瀏覽器會(huì)提交選定的項(xiàng)目，或者收集用逗號(hào)分隔的多個(gè)選項(xiàng)，將其合成一個(gè)單獨(dú)的參數(shù)列表，并且在將?<select>?表單數(shù)據(jù)提交給服務(wù)器時(shí)包括?name屬性
-
常用到的屬性：disabled=“disabled” name="sel" size="2"
- <table>表格標(biāo)簽
-
<table>表格標(biāo)簽：<table>是表格標(biāo)簽，可以用它定義一個(gè)表格。
123456 <table border="1"><tr><td>姓名</td><td>性別</td></tr></table> -
注意：<table>的border屬性不能少
-
<tr>?<td>標(biāo)簽的使用
-
<tr>行標(biāo)簽：
- <tr>可以定義表格中的一行，一個(gè)<tr></tr>表示一行。
-
| 1234567891011 | <table border="1"><tr><td>姓名</td><td>性別</td></tr><tr><td>姓名</td><td>性別</td></tr></table> |
-
<td>單元格標(biāo)簽:
- <td>可以定義表格中的一個(gè)單元格，<td></td>表示一個(gè)單元格。
1234567 <table border="1"><tr><td >姓名</td><td>性別</td><td>愛(ài)好</td></tr></table>
- border-collapse?屬性設(shè)置是否將表格邊框折疊為單一邊框：
- border-collapse:collapse;
- colspan左右合并
- rowspan上下合并
- <td>可以定義表格中的一個(gè)單元格，<td></td>表示一個(gè)單元格。
第一部分總結(jié)：
- 非可視化標(biāo)簽：head?meta?style?scrpit...
- 可視化標(biāo)簽：img?div?span?a?ul?li…
- 只有可視化標(biāo)簽，才能用css改變它
- 單標(biāo)簽：meta?link?base?img?input?br?hr
-
雙標(biāo)簽：html?head?body?div?a?p?span?..ul?li?ol?dl?….
-
常用可視化標(biāo)簽
- div
- 一般用它來(lái)布局
- a?超鏈接標(biāo)簽
- href*屬性：設(shè)置跳轉(zhuǎn)的網(wǎng)頁(yè)地址
- target屬性：設(shè)置跳轉(zhuǎn)的目標(biāo)
- 結(jié)論：凡事頁(yè)面可以點(diǎn)擊跳轉(zhuǎn)或者表單提交的文字，都用a標(biāo)簽
- img
- src*屬性用來(lái)設(shè)置圖片的url數(shù)據(jù)
- alt提供給搜索引擎搜索的
- width
- height
- 結(jié)論 ：顯示圖片
- ul li
- 列表
- 結(jié)論：只要將來(lái)設(shè)計(jì)頁(yè)面中有固定樣式的列表，就用ul和li
- table?caption?tr?td (th)
- 慢慢已經(jīng)被淘汰了 被ul li代替
- 如果是合并豎排的就是合并行（rowspan）
- 如果是合并橫排的就是合并列（colspan）
- div
HTML部分導(dǎo)圖總結(jié)
- HTML5標(biāo)簽集合
總結(jié)
以上是生活随笔為你收集整理的html知识点整理（全）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 微信小程序直播消耗服务器流量,微信小程序
- 下一篇： 集成HMS Scan Kit扫码SDK,