Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
瀏覽器通常會為其文本元素添加不同的樣式,以區(qū)別于普通文本。例如 em 和 cite 元素中的文本都是斜體的。又如,code 元素專門用來格式化腳本或程序中的代碼,該元素中的文本默認(rèn)使用等寬字體。內(nèi)容顯示的樣子與其使用的標(biāo)記沒有關(guān)系。因此不應(yīng)該為了讓文字變?yōu)樾斌w就使用 em 或 cite,添加樣式是 css 的事情。相反,應(yīng)該選擇能描述內(nèi)容的 HTML 元素。
<p> HTML <small> HyperText Markup Language </small> </p>
<p> HTML <small> HyperText Markup Language </small> </p>
3.標(biāo)記重要和強(qiáng)調(diào)文本:strong元素 表示內(nèi)容的重要性,而 em元素 表示內(nèi)容的著重點(diǎn)。
<p> <strong> Warning:Do not approach the ... <em>
under any... </em> </strong> just because... </p>
瀏覽器通常將 strong 文本以粗體顯示,em 文本以斜體顯示。可以用 CSS 將任何文本變?yōu)榇煮w或斜體,也可以覆蓋 strong 和 em 等元素的瀏覽器默認(rèn)顯示樣式。
4.創(chuàng)建圖:圖可以是圖表、照片、圖形、插圖、代碼片段以及其他類似的獨(dú)立內(nèi)容。通過引入 figure 和 figcaption,figcaption 是 figure 的標(biāo)題。
<figure>
<figcaption>
[標(biāo)題內(nèi)容]
</figcaption>
[插入內(nèi)容]
<img src = "xxx.png" width = "180" height = "143"
alt = "Reveue chart:Clothing 42%,Toys 36%, Food 22%" />
</figure>
figcaption 元素并不是必須的,但是只有包含它,就必須是 figure 元素內(nèi)嵌的第一個或最后一個,且只能有一個。 5.指明引用或參考:使用 cite元素 可以指明對某內(nèi)容源的引用或參考。默認(rèn)以斜體顯示(不因使用 cite 引用人名)
<p> he Listend to <cite> Abbey Road </cite> </p>
6.引述文本:有兩個特殊的元素用以標(biāo)記引述的文本。blockquote元素 表示單獨(dú)存在的引述,其默認(rèn)顯示在新的一行。而 q元素 則用于短的引用,如句子里面的引述。由于q元素存在夸瀏覽器問題,應(yīng)該避免使用,而是直接輸入引號。
<blockquote>
text...
</blockquote>
瀏覽器對應(yīng)q元素中的文本自動加上語音的引號。
<p> And then she said,<q lang ="" > Have you read... </q> </p>
7.指定時間:使用 time元素 標(biāo)記時間、日期或時間段。輸入 datetime="time" 指定格式日期,可以按照你希望的任何形式表示日期。
<time> 16:20 </time> <time > 2021-07-24 </time>
<time datetime= "2021-07-24"> Ochtober 24,2021 </time>
8.解釋縮寫詞:使用 abbr元素 標(biāo)記縮寫詞并解釋其含義。(通常是使用括號提供縮寫詞的全稱是解釋縮寫詞最直接的方式)
<p> The <abbr title = "Notional Football league"> NFL </abbr> </p>
<p> But,that's ... <abbr> MLB </abbr> (Major league Baseball) ... </p>
9.定義術(shù)語:在HTML中定義術(shù)語時,使用 dfn元素 對其作語義上的區(qū)分,首次定義術(shù)語通常會對其添加區(qū)別于其他文本格式,后續(xù)在使用術(shù)語時不再需要使用dfn對其進(jìn)行標(biāo)記。 (默認(rèn)以斜體顯示)
<p> The contesttant ... <dfn> pleonasm </dfn> </p>
10.創(chuàng)建上標(biāo)和下標(biāo):比主體文本稍高或稍低的字母或數(shù)字分別成稱為上標(biāo)和下標(biāo)。可以使用 sub元素 創(chuàng)建下標(biāo), sup元素 創(chuàng)建上標(biāo)。上標(biāo)和下標(biāo)字符會輕微地擾亂行與行之間的均勻間距,但可以使用 CSS 修復(fù)這個問題。
<p> ... <a href = "#footnote-1" title = "REad footnote 1">
Text <sub> 1 </sub> </a> </p>
<p> ... <a href = "#footnote-1" title = "REad footnote 1">
Text <sup> 1 </sup> </a> </p>
11.添加作者聯(lián)系方式: address元素 用以定于與 HTML 頁面或頁面一部分有關(guān)的作者、相關(guān)人士信息或組織聯(lián)系信息,通常位于頁面底部或相關(guān)部分內(nèi)。
<footer role = "contentinfo">
<p> <small> ? 2021 The Paper of ... </small> </p>
<address>
Hava a question or ... <a href = "site-feedback.html"> Contact our </a>
</address>
</footer>
12.標(biāo)注編輯和不再準(zhǔn)確的文本:有時可能需要將在前一版本之后對頁面的編輯標(biāo)出來,或者對不再準(zhǔn)確、不再相關(guān)的文本進(jìn)行標(biāo)記。有兩種用于標(biāo)注編輯的元素:代表添加內(nèi)容的 ins元素 和標(biāo)記已經(jīng)刪除內(nèi)容的 del元素。
<li> <del> desks </del> </li>
<li> <ins> bicycle </ins> </li>
通常對已刪除的文本加上刪除線,對插入的文本加入下劃線。標(biāo)記不再準(zhǔn)確或不再相關(guān)的文本
<li> <s> 5 p.m </s> SOLD </li>
13.標(biāo)記代碼:如果你的內(nèi)容包含代碼示例或文件名,使用 code元素。
<p> The <code> showPhoto() </code> ... <code> < ;ul
id = "thumbanil" > </code> list </p>
14.使用預(yù)格式化的文本:通常瀏覽器會將所有額外的回車和空格壓縮,并根據(jù)窗口大小自動換行,預(yù)格式化的文本可以保持固有的換行和空格。pre元素。
<pre>
<code>
abbr[title] {
border-boottom: 1px dotted #000;
}
</code>
如果要顯示包含 HTML 元素內(nèi)容,應(yīng)將包圍元素名稱的 < 和 > 分別改為對應(yīng)的字符實(shí)體<和 >否則瀏覽器就會試著顯示這些元素。大多數(shù)情況下推薦隊(duì) div 元素使用 white-space:pre 以替代 pre,因?yàn)榭崭窨赡軐@些內(nèi)容的語義非常重要。
15.突出顯示文本:類似文本中的熒光筆!HTML5 使用新的 mark元素 實(shí)現(xiàn),引起讀者對特定文本片段的注意。對原生支持的瀏覽器將對該元素文字默認(rèn)加上黃色背景。
<p> GSL is <mark> YYDS! </mark>
16.創(chuàng)建換行:當(dāng)我們希望在文本中手動強(qiáng)制文字進(jìn)行換行時,可以使用 br元素 (空元素).
<p> 123 <br />
456 <br />
</p>
17.創(chuàng)建span:同 div 一樣,span元素 是沒有任何語義的,不同的是,span 只適合包圍字詞或短語內(nèi)容,而 div 適合包含塊級內(nèi)容。
<p> Gaudi's work was essentially useful.
<span lang ="es"> La Casa Mila </span> is an ...
</p>
18.其他元素:
U元素:用來為文本添加下劃線。
wbr元素:表示可換行處。讓瀏覽器知道在哪里可以根據(jù)需要進(jìn)行換行(存在跨版本問題)。
ruby元素:旁注標(biāo)記是一種慣用符號,通常用于表示生僻字的發(fā)音。
bdi和bdo元素:如果某些頁面中混合了從左至右書寫的字符(如拉丁字符)和從右至左書寫的字符(如阿拉伯語), 就可能使用到bdi和bdo元素。
meter元素:用 meter 元素表示分?jǐn)?shù)的值或已知范圍的測量結(jié)果。
<p> Project completion status: <meter value="0.60">80% completed </meter> </p>
progress元素:表示某項(xiàng)任務(wù)完成的進(jìn)度,可用它表示一個進(jìn)度條。不能與 meter 混在一起使用。
<p> Current progress: <progress max="100" value="30"> 30% saved </progress> </p>
在頁面插入圖片:輸入 <img src=image.url" />
<img src="xxx.jpg" alt="" />
提供替代文本:在 img 標(biāo)簽內(nèi),src 屬性及值的后面,輸入 alt=""; 輸入圖像出于某種原因沒有顯示時應(yīng)該出現(xiàn)的文本。指定圖像的尺寸:在 img 標(biāo)簽內(nèi),src 屬性后輸入width="x", heigth="y"; 以像素為單位指定 x 和 y。
創(chuàng)建一個指向另一個網(wǎng)頁的鏈接:
輸入 <a href="URL"> 此處輸入鏈接標(biāo)簽 </a>
<a href = "http://www.baidu.com"> 百度一下 </a>
創(chuàng)建錨并鏈接到錨: 通常激活一個鏈接會將用戶帶到對應(yīng)網(wǎng)頁的頂端。如果想用戶跳至網(wǎng)頁特定區(qū)域,可以創(chuàng)建一個錨,并在鏈接中引用該錨。
1.創(chuàng)建錨: 輸入 id="anchor-name",其中 name 是在內(nèi)部用來標(biāo)識網(wǎng)頁中這部分內(nèi)容的文字。
2.創(chuàng)建錨鏈接到特定錨鏈接:輸入 <a href="#"anchor-name>,其中 anchor-name 是目標(biāo)的 id 屬性值。
3.輸入標(biāo)簽文本(默認(rèn)帶下劃線藍(lán)色字體),用戶激活該字體時將用戶帶到(1)步中引用的區(qū)域文本。
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Creating and Linking to Anchors</title>
</head>
<body>
<article>
<header>
<h1>Frequently Asked Questions (FAQ)</h1>
<nav>
<ul>
<li><a href="#question-01">Can an id have more than one word?</a></li>
<li><a href="#question-02">Can visitors bookmark anchor links?</a></li>
<li><a href="#question-03">My anchor link isn't working. What am I doing wrong?</a></li>
<li><a href="#question-04">How do I link to a specific part of someone else's webpage?</a></li>
</ul>
</nav>
</header>
<h2 id="question-01">Can an id have more than one word?</h2>
<p>Yes, your ids can have more than one word as long as there are no spaces. Separate each word with a dash instead.</p>
<h2 id="question-02">Can visitors bookmark anchor links?</h2>
<p>Yes, they can! And when they visit that link, the browser will jump down to the anchor as expected. Visitors can share the link with others, too, so all the more reason to choose meaningful anchor names.</p>
<h2 id="question-03">My anchor link isn't working. What am I doing wrong?</h2>
<p>The problem could be a few things. First, double-check that you added an id (without "#") to the element your link should point to. Also, be sure that the anchor in your link <em>is</em> preceded by "#" and that it matches the anchor id.</p>
<h2 id="question-04">How do I link to a specific part of someone else's webpage?</h2>
<p>Although you obviously can't add anchors to other people's pages, you can take advantage of the ones that they have already created. View the source code of their webpage to see if they've included an id on the part of the page you want to link to. (For help viewing source code, consult "The Inspiration of Others" in Chapter 2.) Then create a link that includes the anchor.</p>
</article>
</body>
</html>
作者:excavate
https://juejin.cn/post/6988467705909248014
、頁面內(nèi)跳轉(zhuǎn)的錨點(diǎn)設(shè)置
頁面內(nèi)的跳轉(zhuǎn)需要兩步:
方法一:
①:設(shè)置一個錨點(diǎn)鏈接<a href="#miao">去找喵星人</a>;(注意:href屬性的屬性值最前面要加#)
②:在頁面中需要的位置設(shè)置錨點(diǎn)<a name="miao"></a>;(注意:a標(biāo)簽中要寫一個name屬性,屬性值要與①中的href的屬性值一樣,不加#)標(biāo)簽中按需填寫必要的文字,一般不寫內(nèi)容
方法二:
①:同方法一的①
②:設(shè)置錨點(diǎn)的位置 <h3 id="miao">喵星人基地</h3>;在要跳轉(zhuǎn)到的位置的標(biāo)簽中添加一個id屬性,屬性值與①中href的屬性值一樣,不加#
方法二不用單獨(dú)添加一個a標(biāo)簽來專門設(shè)置錨點(diǎn) ,只在需要的位置的標(biāo)簽中添加一個id即可。
小案例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>萌寵集結(jié)號</title>
</head>
<body>
<ul>
<li><a href="#miao">去找喵星人</a></li>
<li><a href="#wang">去找汪星人</a></li>
<li><a href="#meng">其他萌物</a></li>
</ul>
<a name="miao"></a><!--設(shè)置錨點(diǎn)方法1-->
<h3 id="miao">喵星人基地</h3><!--設(shè)置錨點(diǎn)方法2-->
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<p>喵喵喵~</p>
<a name="wang"></a>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<p>汪汪汪~</p>
<a name="meng"></a>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
<p>萌萌萌~</p>
</body>
</html>
二、跨頁面跳轉(zhuǎn)
①:設(shè)置錨點(diǎn)鏈接,在href中的路徑后面追加:#+錨點(diǎn)名,即可
如:<a href="萌寵集結(jié)號.html#miao">跳轉(zhuǎn)到萌寵集結(jié)號頁面</a>
②:要跳轉(zhuǎn)到的頁面中要設(shè)置錨點(diǎn),方法見一種的步驟②,兩個方法任選其一。
覽器支持
所有主流瀏覽器都支持 <a> 標(biāo)簽。
標(biāo)簽定義及使用說明
<a> 標(biāo)簽定義超鏈接,用于從一個頁面鏈接到另一個頁面。
<a> 元素最重要的屬性是 href 屬性,它指定鏈接的目標(biāo)。
在所有瀏覽器中,鏈接的默認(rèn)外觀如下:
未被訪問的鏈接帶有下劃線而且是藍(lán)色的
已被訪問的鏈接帶有下劃線而且是紫色的
活動鏈接帶有下劃線而且是紅色的
提示和注釋
提示:如果沒有使用 href 屬性,則不能使用 hreflang、media、rel、target 以及 type 屬性。
提示:通常在當(dāng)前瀏覽器窗口中顯示被鏈接頁面,除非規(guī)定了其他 target。
提示:請使用 CSS 來改變鏈接的樣式。
HTML 4.01 與 HTML5之間的差異
在 HTML 4.01 中,<a> 標(biāo)簽既可以是超鏈接,也可以是錨。在 HTML5 中,<a> 標(biāo)簽是超鏈接,但是假如沒有 href 屬性,它僅僅是超鏈接的一個占位符。
HTML5 有一些新的屬性,同時不再支持一些 HTML 4.01 的屬性。
屬性
New :HTML5 中的新屬性。
屬性 | 值 | 描述 |
---|---|---|
charset | char_encoding | HTML5 不支持。規(guī)定目標(biāo) URL 的字符編碼。 |
coords | coordinates | HTML5 不支持。規(guī)定鏈接的坐標(biāo)。 |
downloadNew | filename | 指定下載鏈接 |
href | URL | 規(guī)定鏈接的目標(biāo) URL。 |
hreflang | language_code | 規(guī)定目標(biāo) URL 的基準(zhǔn)語言。僅在 href 屬性存在時使用。 |
mediaNew | media_query | 規(guī)定目標(biāo) URL 的媒介類型。默認(rèn)值:all。僅在 href 屬性存在時使用。 |
name | section_name | HTML5 不支持。規(guī)定錨的名稱。 |
rel | alternateauthorbookmarkhelplicensenextnofollownoreferrerprefetchprevsearchtag | 規(guī)定當(dāng)前文檔與目標(biāo) URL 之間的關(guān)系。僅在 href 屬性存在時使用。 |
rev | text | HTML5 不支持。規(guī)定目標(biāo) URL 與當(dāng)前文檔之間的關(guān)系。 |
shape | defaultrectcirclepoly | HTML5 不支持。規(guī)定鏈接的形狀。 |
target | _blank_parent_self_topframename | 規(guī)定在何處打開目標(biāo) URL。僅在 href 屬性存在時使用。 |
typeNew | MIME_type | 規(guī)定目標(biāo) URL 的 MIME 類型。僅在 href 屬性存在時使用。注:MIME = Multipurpose Internet Mail Extensions。 |
全局屬性
<a> 標(biāo)簽支持 HTML 的全局屬性。
事件屬性
<a> 標(biāo)簽支持 HTML 的事件屬性。
創(chuàng)建超級鏈接
本例演示如何在 HTML 文檔中創(chuàng)建鏈接。
將圖像作為鏈接
本例演示如何使用圖像作為鏈接。
在新的瀏覽器窗口打開鏈接
本例演示如何在新窗口打開一個頁面,這樣的話訪問者就無需離開您的站點(diǎn)了。
創(chuàng)建電子郵件鏈接
本例演示如何鏈接到一個郵件。(本例在安裝郵件客戶端程序后才能工作。)
創(chuàng)建電子郵件鏈接 2
本例演示更加復(fù)雜的郵件鏈接。
使用錨跳轉(zhuǎn)到同一個頁面的不同位置
本例演示如何使用錨的 id 屬性跳轉(zhuǎn)到頁面的不同位置( HTML5 不支持 name 屬性)
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。