網頁設計中,標題、段落和文本格式是構成頁面內容的基石。它們不僅有助于傳達信息,還能通過組織和強調內容來提升用戶體驗。本文將詳細介紹這些元素的使用方法,并提供實際例子。
標題是用來定義網頁中不同部分的標題。在HTML中,標題標簽從<h1>到<h6>,其中<h1>表示最高的層級,通常用于主標題,而<h6>表示最低的層級。為了保證良好的SEO實踐和無障礙訪問,應保證標題層級的邏輯順序。
<h1>歡迎來到我的博客</h1>
<h2>最新文章</h2>
<h3>Web開發的未來趨勢</h3>
<h4>前言</h4>
<h4>主要內容</h4>
<h4>結論</h4>
<h3>如何提高JavaScript技能</h3>
在這個例子中,<h1>用于最主要的標題,<h2>用于區分頁面中的主要部分,<h3>用于文章標題,<h4>用于文章內部的小節。
段落是文本的基本單元,用于組織和展示連續的文本內容。在HTML中,<p>標簽用于定義段落。合理的段落分割有助于讀者更好地理解和吸收信息。
<p>在今天的數字時代,網頁開發已經成為了一個不斷演變的領域。隨著新技術的出現,開發者需要不斷學習和適應。</p>
<p>JavaScript是構建現代網頁不可或缺的一部分。為了成為一名更優秀的前端開發者,提高JavaScript技能是非常重要的。</p>
在這個例子中,兩個<p>標簽分別定義了兩個獨立的段落,每個段落都是一個完整的思想單元。
文本格式用于強調或區分網頁中的文本內容。HTML提供了多種標簽來改變文本的樣式和意義,包括但不限于加粗、斜體、下劃線、上標和下標等。
<strong>和<b>標簽用于加粗文本,但<strong>通常表示重要性,而<b>僅用于視覺上的加粗。
<p>重要提示:<strong>請不要在任何情況下泄露您的密碼。</strong></p>
<p>這是一個<b>加粗</b>的文本示例。</p>
<em>和<i>標簽用于斜體文本,<em>表示強調,而<i>僅用于斜體樣式。
<p>當我們談論<em>用戶體驗</em>時,我們指的是用戶與產品交互的整體感受。</p>
<p>這是一個<i>斜體</i>的文本示例。</p>
``標簽用于下劃線文本,而<del>標簽用于顯示文本已被刪除或更改。
<p>請閱讀使用條款了解更多信息。</p>
<p>原價<del>99.99美元</del> 現價69.99美元。</p>
<sup>和<sub>標簽用于創建上標和下標文本,常用于科學公式和腳注。
<p>水的化學式是H<sub>2</sub>O。</p>
<p>愛因斯坦的質能方程式E=mc<sup>2</sup>。</p>
合理使用標題、段落和文本格式可以極大地提升網頁內容的可讀性和專業性。通過明確的層級結構和強調重要內容,你可以幫助用戶快速找到他們需要的信息。記住正確使用這些基本元素,你的網頁將更加吸引人且功能強大。
性是HTML元素提供的附國信息
HTML元素可以設置屬性
屬性可以在元素中添加附加信息
屬性一般描述于開始標簽
屬性總是以名稱/值對應的形式出現,例如:name="value"
例,鏈接地址是href的屬性
<a >鏈接地址是href的屬性</a>
HTML屬性常用引用屬性值
屬性值應該始終被包含在引號內
雙引號是常用的,單引號也沒有問題,
如果屬性值本身就包含了雙引號,即么則必須引用單引號,例:name='John"ShotGun"Nelson'
HTML提示:使用小寫屬性
屬性和屬性值對大小寫不敏感。
HTML屬性參考
calss 為HMTL元素定義一個或多個名
id 定義元素的唯一id
style 規定元素的行內樣式
title 描述元素的額外信息
HTML標題
HTML注釋
類似于對代碼進行備注,默認有兩種試
1、<!-- 這是一個小的注釋 -->
常用于一小段注釋
2、//注釋 有時候不起作用,不知道為啥,知道的回復下啦
HTML提示,如何查看源代碼
如果你想看,在網頁中,單擊右鍵,然后選擇查看“源文件”或者醒看頁面源代碼即可;
最近看到一道跟Javascript中的setTimeout和Promise有關的面試題,感覺很有趣。題目循序漸進,不斷深入,雖然只是一道題目的簡單變形,卻考察了很多個知識點,今天我們就一起來看看這道題目吧。
Javascript
我們就直接看題目的代碼,首先是最簡單的原始題目。
原始題目
上述的代碼很簡單,輸出0,1,2,3,4。你可能會疑問,面試題會有這么簡單?放心,好戲還在后頭呢。
我們將上述的代碼加上setTimeout,再進行輸出,看看會輸出什么?
變形1
上述代碼每隔一秒會輸出一個5。
這道題考察的是函數的閉包,如果不太清楚閉包知識的,可以去看看我寫的這篇文章《前端面試中不可逃避的閉包問題,你真的了解嗎?》。
那么如果我們想要每間隔一秒輸出從0到4,該如何實現呢?
如果了解閉包知識的話,可以很容易想出通過立即執行函數解決。
變形2
通過上述的代碼,就可以很容易達到我們的要求。
那么我們繼續對題目做變形,我們去掉這個立即執行函數中的i參數,看看結果會輸出什么?
變形3
通過在控制臺中運行,我們發現結果和變形1一樣,間隔一秒輸出一個5,那么為什么會這樣呢?
這是因為在立即函數內部并沒有對i的引用,實際的i仍然為外部作用域中的i,所以結果會和變形1相同。
我們繼續對這道題目做出變形,將setTimeout中函數改為一個立即執行函數,看看結果會是什么?
變形4
通過在控制臺運行上述代碼,得到的結果是立即輸出0, 1, 2, 3, 4。為什么會這樣呢?
根據setTimeout的用法,它接收的參數為函數或者函數的字符串表示,如果給setTimeout傳遞一個立即執行函數,則相當于傳遞了一個undefined,實際上是往定時器線程中添加了5個undefined。但是由于立即執行函數的存在,這個函數會立即執行,所以會立即輸出0, 1, 2, ,3 ,4。
如果以上的部分你都能知道,那么我們再來個更難一點的變形,將setTimeout配合Promise一起使用,看看以下的一段代碼會輸出什么?
變形5
通過在控制臺運行以上代碼,我們得到結果是立即輸出2, 3, 5, 4, 1,這是為什么呢?
首先在代碼的開頭,使用了setTimeout設置了一個定時器,雖然這個定時器的時間為0,但是根據Javascript中的事件隊列機制,會將這個定時器添加到專屬的定時器線程中,等到當前線程中的事件回調執行完后才能執行。不太懂Javascript的setTimeout機制的,可以去看看我寫的這篇文章《Javascript中的setTimeout黑魔法》。
然后是定義一個Promise,這個Promise會在setTimeout之前執行。在Promise中執行了兩個console.log(),所以會先輸出2,3。
在Promise中有一個for循環,當循環執行到i等于9999時,執行resolve回調函數,這個resolve函數就是后面輸出4的函數。但是由于Promise.then()的回調會在當前事件隊列的最后執行,因此4會在5的后面輸出。
在當前事件隊列執行完后,才會執行setTimeout中的函數,因此1是最后輸出的。
因此輸出結果是2, 3, 5, 4, 1。
由一道最簡單的題可以通過變形衍生出很多知識點的考題,看看你都會做嗎?
*請認真填寫需求信息,我們會在24小時內與您取得聯系。