整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
注釋：<!-- -->
DOCTYPE：就是告訴瀏覽器，我們要使用什么規(guī)范
head：網(wǎng)頁頭部標(biāo)簽
body：代表網(wǎng)頁主題
標(biāo)題標(biāo)簽
段落標(biāo)簽
換行標(biāo)簽
水平線標(biāo)簽
字體樣式標(biāo)簽
注釋
特殊字符
特殊符號(hào)就是 & xxx ;
<img src="path" alt="文字" title="text" width="x" heigth="y" />
注意：../ 代表上一級(jí)目錄
文本鏈接
<a href="path" target="目標(biāo)窗口位置">鏈接文本或圖像</a>
圖像鏈接：就是嵌套圖片標(biāo)簽
頁面間鏈接
錨鏈接
功能性鏈接
塊元素
行內(nèi)元素
什么是列表：就是一種展示方式
有序列表
無序列表
自定義列表
<dl>
<dt></dt> 標(biāo)題
<dd></dd> 選項(xiàng)
<dd></dd>
<dd></dd>
</dl>為什么使用表格
基本結(jié)構(gòu)
<table border="1px" 邊框>表格標(biāo)簽
<tr>
<td></td>列標(biāo)簽
<td></td>
<td></td>
</tr>行標(biāo)簽 這代表一行
</table>跨列：使用colspan="夸的列數(shù)" <td colspan="4">
跨行：使用rowspan="夸的行數(shù)" <td rowspan="4">
視頻元素
音頻元素
元素名 | 描述 |
header | 標(biāo)題頭部區(qū)域的內(nèi)容(用于頁面或頁面中的一塊區(qū)域) |
footer | 標(biāo)記腳部區(qū)域的內(nèi)容（用于整個(gè)頁面或頁面的一塊區(qū)域） |
section | web頁面中的一塊獨(dú)立區(qū)域 |
atricle | 獨(dú)立的文章內(nèi)容 |
aside | 相關(guān)內(nèi)容或應(yīng)用(常用于側(cè)邊欄) |
nav | 導(dǎo)航類輔助內(nèi)容 |
<iframe src="path" name="mainFrame"></iframe>
表單：form
<form method="post|get" action="result.hetml">
<input />
</form>get方式提交：我們可以在url中看到我們提交的信息，不安全，但高效
post方式提交：比較安全，可以傳輸大文件
表單元素格式
屬性 | 說明 |
type | 指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默認(rèn)為text |
name | 指定表單元素的名稱 必填，用來后臺(tái)讀取 |
value | 元素的初試值。type為radio時(shí)必須指定一個(gè)值 |
size | 指定元素的初始寬度。當(dāng)type為text時(shí)或者password時(shí)，表單元素的大小以字符為單位。對(duì)于其他類型，寬度以像素為單位 |
maxlength | type為txet或password時(shí)，輸入的最大字符數(shù) |
cheaked | type為radio或cheackbox時(shí)，指定按鈕是否被選中 |
單選框
多選框
按鈕
<input type="button" name="btn1" value="點(diǎn)擊" />普通按鈕
<input type="image" src ="點(diǎn)擊跳轉(zhuǎn)的path"/>圖片按鈕
<input type="submit"/>提交按鈕
<input type="reset"/>重置按鈕下拉框
<select name="列表名稱">
<option value="選項(xiàng)的值" select>中國(guó)</option>
<option value="選項(xiàng)的值">中國(guó)</option>
<option value="選項(xiàng)的值">中國(guó)</option>
<option value="選項(xiàng)的值">中國(guó)</option>
<option value="選項(xiàng)的值">中國(guó)</option>
</select>
提交的格式就是列表名稱和value文本域
<textarea name="name" cols="列數(shù)" rows="行數(shù)">文本內(nèi)容</textarea>文件域
<input type="file" name="files"/>
<input type="button" value="提交"/>郵件驗(yàn)證
<input type="email" name="youjian">URL
<input type="url" name="url"> 數(shù)字驗(yàn)證
<input type="number" name="num" max="100" min="0" step="10">滑塊
<input type="range" max="100" min="0">搜索
<input type="search" name="search">隱藏域 hidden
<input type="text" id="mark" hidden>只讀 readonly
<input type="text" id="mark" readonly>禁用 disabled
<input type="text" id="mark" disabled>增強(qiáng)鼠標(biāo)可用性
<label for="mark">點(diǎn)擊</label>
<input type="text" id="mark">為什么要進(jìn)行表單驗(yàn)證：緩解服務(wù)器壓力、保證數(shù)據(jù)安全
提示信息
非空判斷
正則表達(dá)式驗(yàn)證
高級(jí)驗(yàn)證使用js
眾號(hào)【傳智播客博學(xué)谷】回復(fù)關(guān)鍵詞：前端 PS Java(100G) Python(80G) 大數(shù)據(jù) 區(qū)塊鏈 測(cè)試 PPT JS(40g+300教程) HTML 簡(jiǎn)歷 領(lǐng)取相關(guān)學(xué)習(xí)資料！
一、HTML
1、<image>標(biāo)簽上title屬性與alt屬性的區(qū)別是什么？
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長(zhǎng)度必須少于100個(gè)英文字符或者用戶必須保證替換文字盡可能的短。
這包括那些使用本來就不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設(shè)置該屬性的元素提供建議性的信息。使用title屬性提供非本質(zhì)的額外信息。參考《alt和title屬性的區(qū)別及應(yīng)用》
2、分別寫出以下幾個(gè)HTML標(biāo)簽：文字加粗、下標(biāo)、居中、字體
加粗：<b>、<strong>
下標(biāo)：<sub>
居中：<center>
字體：<font>、<basefont>、參考《HTML標(biāo)簽列表》
3、請(qǐng)寫出至少5個(gè)html5新增的標(biāo)簽，并說明其語義和應(yīng)用場(chǎng)景
section：定義文檔中的一個(gè)章節(jié)
nav：定義只包含導(dǎo)航鏈接的章節(jié)
header：定義頁面或章節(jié)的頭部。它經(jīng)常包含 logo、頁面標(biāo)題和導(dǎo)航性的目錄。
footer：定義頁面或章節(jié)的尾部。它經(jīng)常包含版權(quán)信息、法律信息鏈接和反饋建議用的地址。
aside：定義和頁面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理。
參考《HTML5 標(biāo)簽列表》
4、請(qǐng)說說你對(duì)標(biāo)簽語義化的理解？
a. 去掉或者丟失樣式的時(shí)候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重；
c. 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來渲染網(wǎng)頁；
d. 便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。
5、Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?
聲明位于文檔中的最前面，處于 標(biāo)簽之前。告知瀏覽器以何種模式來渲染文檔。
嚴(yán)格模式的排版和 JS 運(yùn)作模式是，以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。
在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。
DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。
6、你知道多少種Doctype文檔類型？
標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁，
Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁。
7、HTML與XHTML——二者有什么區(qū)別
a. XHTML 元素必須被正確地嵌套。
b. XHTML 元素必須被關(guān)閉。
c. 標(biāo)簽名必須用小寫字母。
d. XHTML 文檔必須擁有根元素。
參考《XHTML 與 HTML 之間的差異》
8、html5有哪些新特性、移除了那些元素？
a. HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。
b. 拖拽釋放(Drag and drop) API
c. 語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
d. 音頻、視頻API(audio,video)
e. 畫布(Canvas) API
f. 地理(Geolocation) API
g. 本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失
h. sessionStorage 的數(shù)據(jù)在頁面會(huì)話結(jié)束時(shí)會(huì)被清除
i. 表單控件，calendar、date、time、email、url、search
j. 新的技術(shù)webworker, websocket等
移除的元素：
a. 純表現(xiàn)的元素：basefont，big，center, s，strike，tt，u；
b. 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
9、iframe的優(yōu)缺點(diǎn)？
優(yōu)點(diǎn)：
a. 解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問題
b. iframe無刷新文件上傳
c. iframe跨域通信
缺點(diǎn)：
a. iframe會(huì)阻塞主頁面的Onload事件
b. 無法被一些搜索引擎索引到
c. 頁面會(huì)增加服務(wù)器的http請(qǐng)求
d. 會(huì)產(chǎn)生很多頁面，不容易管理。
參考《iframe的一些記錄》
10、Quirks模式是什么？它和Standards模式有什么區(qū)別？
在寫程序時(shí)我們也會(huì)經(jīng)常遇到這樣的問題，如何保證原來的接口不變，又提供更強(qiáng)大的功能，尤其是新功能不兼容舊功能時(shí)。IE6以前的頁面大家都不會(huì)去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個(gè)頁面將采用對(duì)CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區(qū)別：總體會(huì)有布局、樣式解析和腳本執(zhí)行三個(gè)方面的區(qū)別。
a. 盒模型：在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個(gè)元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
b. 設(shè)置行內(nèi)元素的高寬：在Standards模式下，給等行內(nèi)元素設(shè)置wdith和height都不會(huì)生效，而在quirks模式下，則會(huì)生效。
c. 設(shè)置百分比的高度：在standards模式下，一個(gè)元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設(shè)置百分比的高度，子元素設(shè)置一個(gè)百分比的高度是無效的用
d. 設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會(huì)失效。
11、請(qǐng)闡述table的缺點(diǎn)
a. 太深的嵌套，比如table>tr>td>h3，會(huì)導(dǎo)致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。
b. 靈活性差，比如要將tr設(shè)置border等屬性，是不行的，得通過td
c. 代碼臃腫，當(dāng)在table中套用table的時(shí)候，閱讀代碼會(huì)顯得異常混亂
d. 混亂的colspan與rowspan，用來布局時(shí)，頻繁使用他們會(huì)造成整個(gè)文檔順序混亂。
e. 不夠語義
參考《為什么說table表格布局不好？》
12、簡(jiǎn)述一下src與href的區(qū)別
src用于替換當(dāng)前元素；href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置
href是Hypertext Reference的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接
公眾號(hào)【傳智播客博學(xué)谷】回復(fù)關(guān)鍵詞：前端 PS Java Python 大數(shù)據(jù) 區(qū)塊鏈 測(cè)試 PPT JS HTML 簡(jiǎn)歷 領(lǐng)取相關(guān)學(xué)習(xí)資料！
Hyper Text Markup Language, 超文本標(biāo)記語言
標(biāo)記又稱為標(biāo)簽(Tag), 一般語法:
<tagName></tagName>
它可以有屬性(Attribute):
<tagName attributeName="value">, 如:
<meta charset="utf-8" />
標(biāo)簽也可以不成對(duì)地關(guān)閉:
<tagName />
HTML文檔由瀏覽器解釋并執(zhí)行。
<!DOCTYPE html> ----- 告訴瀏覽器用html5的標(biāo)準(zhǔn)來解釋和執(zhí)行該網(wǎng)頁
<html>
<head> ---- 頭部, 可包含meta, title等標(biāo)簽
</head>
<body> ---- 主體, 包含主要內(nèi)容
</body>
</html>
<meta charset="utf-8" /> 用于告訴瀏覽器用什么樣的字符編碼來解釋網(wǎng)頁中的文本.
常見編碼:
iso-8859-1: 純英文編碼
gbk, gb2312: 簡(jiǎn)體中文編碼
big5: 大五碼,繁體中文編碼,主要應(yīng)用于臺(tái)灣地區(qū)
utf-8: 國(guó)際首選編碼,它兼容所有的字符
除此之外, meta還可以通過keywords, description屬性對(duì)頁面關(guān)鍵詞及描述信息進(jìn)行設(shè)置, 以提高搜索引擎的命中.
網(wǎng)頁標(biāo)題, 顯示在瀏覽器選項(xiàng)卡的標(biāo)題欄上!
h1-h6: 內(nèi)容標(biāo)題標(biāo)簽
p: 段落
br: 換行
hr: 水平線
strong: 粗體文本
em: 斜體文本
span: 無任何特殊樣式的文本
pre: 預(yù)格式標(biāo)簽,其中的內(nèi)容在頁面上帶格式渲染
small: 比當(dāng)前字體小的文本
空格
< 小于
> 大于
? 版權(quán)符
" 雙引號(hào)
<!-- 注釋內(nèi)容 -->
<img
src="圖像地址"
title="鼠標(biāo)懸停提示"
alt="圖像加載錯(cuò)誤時(shí)的替代文本"
width="寬度"
height="高度"
/>
圖像地址分為2種:
1. 相對(duì)地址, 如: img/cc.jpg
2. 絕對(duì)地址, 如: http://img.bcd.com/2017/1644232421.jpg
<a href="鏈接地址" target="目標(biāo)窗口">文本|圖片</a>
目標(biāo)窗口:
_self: 目標(biāo)頁面在當(dāng)前窗口打開
_blank: 目標(biāo)頁面在新窗口中打開
如果是在頁面具有frameset/frame/iframe的場(chǎng)景下:
_top: 在頂級(jí)窗口中打開
_parent: 在父級(jí)窗口中打開
_自定義名稱: 在指定的特定窗口中打開
三種用法:
1. 頁面間鏈接
<a href="page/login.html"></a>
2. 錨鏈接
<a href="#help"></a>
help是本頁面中一處id為help的標(biāo)簽, 如: <p id="help">
或者:
help是通過a標(biāo)簽命名的錨記, 如: <a name="help"></a>
3. 功能性鏈接
喚醒本地安裝的外部程序如 outlook/foxmail/qq/msn/aliwangwang...
<a href="mailto:abcdef@qq.com"></a>
div是一個(gè)容器, 常用于頁面的布局
標(biāo)簽的分類:
1. 塊級(jí)標(biāo)簽/塊級(jí)元素
如: div, h1-h6, p, hr
特征: 獨(dú)占容器中的一行, 其寬度是容器的100%
2. 行級(jí)標(biāo)簽/行級(jí)元素
如: span, img, strong, em, a
特征1: 多個(gè)行級(jí)元素可以同處一行, 其寬度由內(nèi)容來撐開(auto)
特征2: 大部分行級(jí)元素設(shè)置其width/height無效
ctrl + D : 刪除當(dāng)前行
ctrl + PgUp : 當(dāng)前行上移
ctrl + PgDown : 當(dāng)前行下移
ctrl + / : 注釋 | 取消注釋
ctrl + shift + F : 整理代碼格式
ctrl + C : 復(fù)制當(dāng)前行
ctrl + X : 剪切當(dāng)前行
ctrl + V : 粘貼
ctrl + Z : 撤消上一步操作
ctrl + S : 保存當(dāng)前文件
ctrl + shift + S : 保存項(xiàng)目中全部文件
ctrl + Enter : 在當(dāng)前行的下方插入新行
ctrl + shift + Enter : 在當(dāng)前行的上方插入新行
以上知識(shí)能做的效果圖
部分效果
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
