產(chǎn)生原因:
我們知道html是如這些標(biāo)簽包含的格式化文本,當(dāng)用瀏覽器打開時(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è)問題嗎?當(dāng)然。當(dāng)一個(gè)負(fù)責(zé)講解html是什么的頁面輸出時(shí),html頁面中必然包含有標(biāo)簽需要輸出顯示,而瀏覽器并不能智能的分清楚哪些是需要解釋哪些不需要。
解決方法:
其中一個(gè)辦法就是轉(zhuǎn)義。為了區(qū)分需要解釋和不需要解釋的<>,將不需要解釋的<>用轉(zhuǎn)義字符代替,html會將它們解釋為<>。和html一樣,其他編程語言也有一些內(nèi)置特殊符號需要用這樣的方法處理,比如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)址中的百分號。
轉(zhuǎn)義字符串有三部分組成:
&符號+實(shí)體名稱/編號+;符號
例如,HTML的< >&"?的轉(zhuǎn)義字符串分別是
“&lt;”或者“&#60;”
“&gt;”或者“&#62;”
“&amp;”或者“&#38;”
“&quot;”或者“&#34;”
“&copy;”或者“&#169;”
在高級編程語言中已經(jīng)將轉(zhuǎn)義字符的轉(zhuǎn)義處理做成了函數(shù)。如php中的htmlspecialchars()負(fù)責(zé)將函數(shù)參數(shù)轉(zhuǎn)為對應(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)容請?jiān)L問我的網(wǎng)站:https://www.icoderoad.com
Hyper Text Markup Language, 超文本標(biāo)記語言
標(biāo)記又稱為標(biāo)簽(Tag), 一般語法:
<tagName></tagName>
它可以有屬性(Attribute):
<tagName attributeName="value">, 如:
<meta charset="utf-8" />
標(biāo)簽也可以不成對地關(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: 簡體中文編碼
big5: 大五碼,繁體中文編碼,主要應(yīng)用于臺灣地區(qū)
utf-8: 國際首選編碼,它兼容所有的字符
除此之外, meta還可以通過keywords, description屬性對頁面關(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)符
" 雙引號
<!-- 注釋內(nèi)容 -->
<img
src="圖像地址"
title="鼠標(biāo)懸停提示"
alt="圖像加載錯(cuò)誤時(shí)的替代文本"
width="寬度"
height="高度"
/>
圖像地址分為2種:
1. 相對地址, 如: img/cc.jpg
2. 絕對地址, 如: 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的場景下:
_top: 在頂級窗口中打開
_parent: 在父級窗口中打開
_自定義名稱: 在指定的特定窗口中打開
三種用法:
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. 塊級標(biāo)簽/塊級元素
如: div, h1-h6, p, hr
特征: 獨(dú)占容器中的一行, 其寬度是容器的100%
2. 行級標(biāo)簽/行級元素
如: span, img, strong, em, a
特征1: 多個(gè)行級元素可以同處一行, 其寬度由內(nèi)容來撐開(auto)
特征2: 大部分行級元素設(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)前行的上方插入新行
以上知識能做的效果圖
部分效果
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。