Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

響應式web開發項目教程,滿滿幹貨指導

一起學前端架構 2021-09-26 04:28:43 阅读数:58 评论数:0 点赞数:0 收藏数:0

標簽語義化:

語義和默認樣式的區別:

  • 默認樣式是瀏覽器設定的一些常用tag的錶現形式;
  • 語義化的主要目的就是讓大家直觀的認識標簽和屬性的用途和作用;

標簽語義化作用:

  • 當只有HTML頁面時,沒有CSS,我們仍然可以很清晰的看懂頁面的DOM結構
  • 團隊維護,當團隊來review代碼或者重構時,增强代碼的可讀性,更利於維護
  • 有利於SEO,搜索引擎爬蟲依賴於標簽來確定上下文和各個關鍵字的權重
  • 提高用戶體驗,比如 title 和 alt 等用來解釋內容信息

常用語義化的標簽:

  • <header>頭部標簽,用來寫網頁最上方的公共頭部,也就是頁眉。
<header>
一級標題
<h2>二級標題</h2>
</header>

  • 1.
  • 2.
  • 3.
  • 4.
  • <nav>標簽,用來寫導航,一般寫在<header>標簽裏面,內部用<ul>無序列錶。
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • <code>:code可以包裹html語句而不會被瀏覽器再去解析。

  • <pre><samp>:這是一段HTTP協議的內容描述,因為這段內容的換行是非常嚴格的,所以我們不需要瀏覽器幫我們做自動換行,因此我們使用了pre標簽,錶示這部分內容是預先排版過的,不需要瀏覽器進行排版。

  • <article>標簽,當我們要寫網頁文章的主要內容時,要用到這個標簽。

<article>
<h2>標題</h2>
<p>內容</p>
</article>

  • 1.
  • 2.
  • 3.
  • 4.
  • <address>標簽,定義文檔作者或擁有者的聯系信息。

如果 <address> 元素比特於<article>元素內部,則它錶示該文章作者或擁有者的聯系信息。

通常的做法是將 address 元素添加到網頁的頭部或底部。

  • <p>段落標簽

知道了<p>作為段落,你就不會再使用<br/>來換行了,而且不需要<br/>來區分段落與段落。
<p></p>中的文字會自動換行,而且換行的效果優於<br/>

<p>段落內容</p>

  • 1.
  • <span>標簽

<span>標簽的語義為被用來組合文檔中的行內元素

  • <b><em><strong>

<b>標簽語義為“加粗”

<em>標簽語義為“强調”

<strong>標簽語義為“更强烈的强調” 而且em 默認用斜體錶示,strong 用粗體錶示。

結尾

學習html5、css、javascript這些基礎知識,學習的渠道很多,就不多說了,例如,一些其他的優秀博客。但是本人覺得看書也很必要,可以節省很多時間,常見的javascript的書,例如:javascript的高級程序設計,是每比特前端工程師必不可少的一本書,邊看邊用,了解js的一些基本知識,基本上很全面了,如果有時間可以讀一些,js性能相關的書籍,以及設計者模式,在實踐中都會用的到。

 開源分享:【大廠前端面試題解析+核心總結學習筆記+真實項目實戰+最新講解視頻】

響應式web開發項目教程,滿滿幹貨指導_面試

版权声明
本文为[一起學前端架構]所创,转载请带上原文链接,感谢

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领