HTML入門筆記1

以下是初學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é)元素
  1. 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> 開始標簽后的換行符也會被省略)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • HTML 是誰發(fā)明的 1990 年,由于對 Web 未來發(fā)展的遠見,Tim Berners-Lee 提出了 超文本...
    星學家閱讀 282評論 1 0
  • HTML簡介 1.HTML是誰發(fā)明的? 1990年左右,Tim Berners-Lee(蒂姆·伯納斯·李)發(fā)明了萬...
    饑人谷_韓博閱讀 523評論 1 0
  • HTML是由誰發(fā)明的? 1990年左右由Tim Berners Lee發(fā)明 HTML 起手應該寫什么? 常用的表章...
    浪味仙兒啊閱讀 249評論 1 1
  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,531評論 1 41
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的,因此網(wǎng)頁是網(wǎng)絡信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,955評論 0 0

友情鏈接更多精彩內(nèi)容