以下是初學html所作筆記,記錄了一些常用的html標簽,以備日后復習
HTML是誰發(fā)明的
HTML的首個公開描述出現(xiàn)于一個名為“HTML標簽”的文件中,由蒂姆·伯納斯-李于1991年底提及。它描述18個元素,包括HTML初始的、相對簡單的設計。除了超鏈接標簽外,其他設計都深受CERN內(nèi)部一個以標準通用標記語言(SGML)為基礎的文件格式SGMLguid的影響。這些元素在HTML 4中仍有11個存在。
資料來源于維基百科
HTML起手式
HTML最基本的起手式是:輸入 英文字符 !,隨后tab。會出現(xiàn)以下代碼:
<!DOCTYPE html>/*確定文檔類型為html*/
<html lang="en">/*將語言改為'zh-CN'*/
<head>
<meta charset="UTF-8">/*UTF-8為字符編碼*/
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
常用的表章節(jié)的標簽
- 章節(jié)元素
- section
表示一個包含在HTML文檔中的獨立部分,它沒有更具體的語義元素來表示,一般來說會有包含一個標題。
<section>
<h1>xx</h1>
<p>xxxx</p>
</section>
2.article
```html
表示文檔、頁面、應用或網(wǎng)站中的獨立結(jié)構(gòu),其意在成為可獨立分配的或可復用的結(jié)構(gòu)。如果元素的內(nèi)容作為一個獨立的有意義的集合,article元素可能是比section更好的選擇。
<article class="demo1">
<h1>xx</h1>
<article class="demo2">
<h2>xxx</h2>
<p>xxx</p>
</article>
- 主體內(nèi)容main
呈現(xiàn)了文檔的 <body> 或應用的主體部分。主體部分由與文檔直接相關(guān),或者擴展于文檔的中心主題、應用的主要功能部分的內(nèi)容組成。
<header>xxx</header>
<main >
<p>xx</p>
<p>xxx</p>
</main>
```html
* 旁支內(nèi)容aside
表示一個和其余頁面內(nèi)容幾乎無關(guān)的部分,比如參考資料等。
<aside>
<p>資料來源:xxx</p>
</aside>
- 標題元素h1~h6
以標題的形式來顯示文本內(nèi)容
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
【特點】
- 改變字號(一級最大,六級最小)
- 加粗顯示
- 上下有垂直的空白距離
- 獨立成行
全局屬性
- class
為元素設置類標識
<tag class="xx">
設置樣式
<style>
.xx{}
</style>
- contenteditable
設置文檔為可標記狀態(tài)
該屬性必須是下面的值之一:
1. true 或空字符串,表示元素是可編輯的;
2. false 表示元素不是可編輯的。
如果沒有設置該屬性,其默認值繼承自父元素。
可以通過該屬性使得文檔屬性被用戶直接編輯:
<style contenteditable="true">
body {
background: #eee;
padding: 0;
margin: 0;
}
</style>
- hidden
表示一個元素是否顯示。
瀏覽器不會render該屬性為true的元素
- id
用法與class相同,但不推薦使用。
id必須是全局唯一的屬性,但當他不唯一時也不會報錯。
- style
包含文檔的樣式信息或者文檔的部分內(nèi)容。
默認情況下,該標簽的樣式信息通常是[CSS]的格式。
- tabindex
是指該元素是否可以及在何處參與tab導航。
1. tabindex=-1,表示不可以被tab訪問。
2. tabindex=0,表示最后被tab訪問。
3. tabindex=正數(shù),按順序被tab訪問。
- title
鼠標放上去后會顯示完整內(nèi)容。
常用的內(nèi)容標簽
- a
<a></a>
href:鏈接地址(要跳轉(zhuǎn)到的頁面的地址)
target:目標,打開新網(wǎng)頁的形式
取值:
_blank:在新標簽頁中打開
_self:在自身頁面中打開(默認值)
title:鼠標放到鏈接上的提示
- strong
Strong 元素 (<strong>)表示文本十分重要,一般用粗體顯示。
- em
標記出需要用戶著重閱讀的內(nèi)容。
<em> 元素是可以嵌套的,嵌套層次越深,則其包含的內(nèi)容被認定為越需要著重閱讀。
對比strong,em是語氣上的強調(diào),strong是內(nèi)容上的強調(diào)。
- code
表示這是一段計算機代碼。默認情況下, 它以瀏覽器的默認等寬字體顯示。
- pre
pre元素表示預定義格式文本。
在該元素中的文本通常按照原文件中的編排,以等寬字體的形式展現(xiàn)出來,文本中的空白符(比如空格和換行符)都會顯示出來。
(緊跟在 <pre> 開始標簽后的換行符也會被省略)