產(chǎn)生原因:
我們知道html是如這些標(biāo)簽包含的格式化文本,當(dāng)用瀏覽器打開(kāi)時(shí),瀏覽器內(nèi)部的標(biāo)簽解釋器把不同的標(biāo)簽解釋為不同的含義。這時(shí)默認(rèn)所有內(nèi)容都是在標(biāo)簽之內(nèi)的,標(biāo)簽本身并不是內(nèi)容。如果內(nèi)容中也有標(biāo)簽怎么辦?這是個(gè)問(wèn)題嗎?當(dāng)然。當(dāng)一個(gè)負(fù)責(zé)講解html是什么的頁(yè)面輸出時(shí),html頁(yè)面中必然包含有標(biāo)簽需要輸出顯示,而瀏覽器并不能智能的分清楚哪些是需要解釋哪些不需要。
解決方法:
其中一個(gè)辦法就是轉(zhuǎn)義。為了區(qū)分需要解釋和不需要解釋的<>,將不需要解釋的<>用轉(zhuǎn)義字符代替,html會(huì)將它們解釋為<>。和html一樣,其他編程語(yǔ)言也有一些內(nèi)置特殊符號(hào)需要用這樣的方法處理,比如php中的$,下面列舉一些:
如HTML轉(zhuǎn)義符、java 轉(zhuǎn)義符、xml 轉(zhuǎn)義符、 oracle 轉(zhuǎn)義符、sql 轉(zhuǎn)義符 、sqlserver 轉(zhuǎn)義符、php 轉(zhuǎn)義符、asp 轉(zhuǎn)義符、vb轉(zhuǎn)義符、 javascript 轉(zhuǎn)義符等等,還有網(wǎng)址中的百分號(hào)。
轉(zhuǎn)義字符串有三部分組成:
&符號(hào)+實(shí)體名稱(chēng)/編號(hào)+;符號(hào)
例如,HTML的< >&"?的轉(zhuǎn)義字符串分別是
“&lt;”或者“&#60;”
“&gt;”或者“&#62;”
“&amp;”或者“&#38;”
“&quot;”或者“&#34;”
“&copy;”或者“&#169;”
在高級(jí)編程語(yǔ)言中已經(jīng)將轉(zhuǎn)義字符的轉(zhuǎn)義處理做成了函數(shù)。如php中的htmlspecialchars()負(fù)責(zé)將函數(shù)參數(shù)轉(zhuǎn)為對(duì)應(yīng)的轉(zhuǎn)義字符串
轉(zhuǎn)義的 HTML 字符進(jìn)行轉(zhuǎn)義。
JavaScript
const unescapeHTML = str =>
str.replace(
/&|<|>|'|"/g,
tag =>
({
'&': '&',
'<': '<',
'>': '>',
''': "'",
'"': '"'
}[tag] || tag)
);
示例代碼:
unescapeHTML('<a href="#">Me & you</a>');
// '<a href="#">Me & you</a>'
更多內(nèi)容請(qǐng)?jiān)L問(wèn)我的網(wǎng)站:https://www.icoderoad.com
Hyper Text Markup Language, 超文本標(biāo)記語(yǔ)言
標(biāo)記又稱(chēng)為標(biāo)簽(Tag), 一般語(yǔ)法:
<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)來(lái)解釋和執(zhí)行該網(wǎng)頁(yè)
<html>
<head> ---- 頭部, 可包含meta, title等標(biāo)簽
</head>
<body> ---- 主體, 包含主要內(nèi)容
</body>
</html>
<meta charset="utf-8" /> 用于告訴瀏覽器用什么樣的字符編碼來(lái)解釋網(wǎng)頁(yè)中的文本.
常見(jiàn)編碼:
iso-8859-1: 純英文編碼
gbk, gb2312: 簡(jiǎn)體中文編碼
big5: 大五碼,繁體中文編碼,主要應(yīng)用于臺(tái)灣地區(qū)
utf-8: 國(guó)際首選編碼,它兼容所有的字符
除此之外, meta還可以通過(guò)keywords, description屬性對(duì)頁(yè)面關(guān)鍵詞及描述信息進(jìn)行設(shè)置, 以提高搜索引擎的命中.
網(wǎng)頁(yè)標(biāo)題, 顯示在瀏覽器選項(xiàng)卡的標(biāo)題欄上!
h1-h6: 內(nèi)容標(biāo)題標(biāo)簽
p: 段落
br: 換行
hr: 水平線(xiàn)
strong: 粗體文本
em: 斜體文本
span: 無(wú)任何特殊樣式的文本
pre: 預(yù)格式標(biāo)簽,其中的內(nèi)容在頁(yè)面上帶格式渲染
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)頁(yè)面在當(dāng)前窗口打開(kāi)
_blank: 目標(biāo)頁(yè)面在新窗口中打開(kāi)
如果是在頁(yè)面具有frameset/frame/iframe的場(chǎng)景下:
_top: 在頂級(jí)窗口中打開(kāi)
_parent: 在父級(jí)窗口中打開(kāi)
_自定義名稱(chēng): 在指定的特定窗口中打開(kāi)
三種用法:
1. 頁(yè)面間鏈接
<a href="page/login.html"></a>
2. 錨鏈接
<a href="#help"></a>
help是本頁(yè)面中一處id為help的標(biāo)簽, 如: <p id="help">
或者:
help是通過(guò)a標(biāo)簽命名的錨記, 如: <a name="help"></a>
3. 功能性鏈接
喚醒本地安裝的外部程序如 outlook/foxmail/qq/msn/aliwangwang...
<a href="mailto:abcdef@qq.com"></a>
div是一個(gè)容器, 常用于頁(yè)面的布局
標(biāo)簽的分類(lèi):
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)容來(lái)?yè)伍_(kāi)(auto)
特征2: 大部分行級(jí)元素設(shè)置其width/height無(wú)效
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)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。