HTML入門之——結構,常用標簽及其屬性,再加上語義化

一,HTML簡介(來源HTML百度百科

HTML:超文本標記語言,是指能夠包含鏈接,圖片,程序,視頻等非文字元素的頁面

二,HTML,XML,XHTML之間有什么區別

  • HTML:超文本標記語言,語法比較松散,書寫格式不是那么規范,用于展示數據;
  • XML:可擴展標記語言,書寫格式類似于HTML,但是標簽都是自定義,且書寫格式嚴格,用于傳輸數據;
  • XHTML:可擴展超文本標記語言,基于XML,書寫格式非常嚴格的HTML模式,用于展示數據;

之間的區別:
1.XML用于傳輸數據;
2.HTML和XHTML用于展示數據;
3.相較于XHTML,HTML的書寫格式并不那么嚴謹,其它的和HTML4.0幾乎一樣;

三:HTML的主要結構

<!DOCTYPE html>                        
    <html>                                       
        <head>
        </head>
        <body>
        </body>
    </html>
  • <!DOCTYPE html>:聲明文檔類型,用于告訴瀏覽器以什么樣的方式對該文檔進行渲染,如果沒有這個聲明則使用怪異模式進行渲染,有則使用標準模式進行渲染;
  • <html>:頁面的根標簽:限定了頁面的開始和結束,在這個標簽包裹<head><body>標簽;
  • <head>:頭部標簽,用于定義文檔的頭部,包裹該文檔的頭部元素,用于引入腳本、樣式、包裹元標簽等;
  • <body>:內容標簽,用于展示的內容都寫在這個標簽以內,定義文檔的主體;

注意點:

  1. 標簽閉合:例如<html>這個標簽,閉合就用</html>,也就是添加斜杠完成,除了<html>標簽外,其它的除了自閉合標簽和空標簽以外的標簽都可以使用這種方式進行閉合;
  2. 添加語言:在<html>標簽內,可以添加屬性lang屬性來告訴瀏覽器當前文檔使用的是何種語言,例如:
    lang = "en"就是告訴瀏覽器當前文檔使用的是英語;
    3.書寫:標簽的書寫全部使用小寫英文;

四:HTML書寫規范

  • 行級元素不要包裹塊級元素:例如<span><div></div></span>這樣是錯誤的,但是塊級元素可以包裹行級元素;
  • 標簽閉合:例如:<p></p>,<span></span>
  • 標簽全部用英文小寫書寫;
  • 標簽用尖括號進行包裹:<標簽名>

五:關于<meta>標簽

  • 在<html>標簽內,你會見到一個叫<meta>的標簽,例如下面這樣:

    <head>
          <meta>
    </head>
    

上面的<meta>就是文檔的元標簽,它可以通過一些屬性提供的值來標示這個文檔的元信息,例如解碼方式,關鍵詞等,它是一個自閉合標簽,不需要閉合,它不提供任何文檔的內容;

  • <meta>標簽的常用屬性介紹:
    1.charsetcharset屬性有一個值,這個值填寫的是編碼方式,例如:charset = "UTF-8"就是標明該文檔的編碼方式是 UTF-8,其它的編碼方式還有gbk,Unicode等;
    2.http-equivhttp-equiv:該屬性可以向瀏覽器傳回一些有用的信息,以幫助正確和精確地顯示網頁內容,要與content屬性一起使用,正確的格式是:http-equiv = "參數",例如:http-equiv = "X-UA-Compatible"
    3.content:用于標示數據傳輸中的值;
    4.namename屬性要與content屬性一起使用,name屬性常用的值有:
    ①:viewport:例如:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    viewport這個值用來限定用戶是否能縮放或放大頁面,最大和最小多少;
    ②:keywords:例如:<meta name="keywords" content="前端 饑人谷">
    keywords值顧名思義,是用來告訴瀏覽器這個頁面的關鍵詞是什么,方便搜索引擎進行關鍵詞抓取;
    ③:description:例如:<meta name="description" content="最有愛的前端學習社區">
    description值用來告訴搜索引擎這個頁面大體內容的描述,以及搜索出來檢索顯示的信息;
  • 常見問題之——內容文字變成亂碼
    例子:
    網頁文字變亂碼

    1.出現的原因:在<meta>標簽內的編碼方式是UTF-8
編碼方式

而我們的解碼方式是:


解碼方式

由上可以看出文字變亂碼是編碼方式和解碼方式的不同所造成的;
2 . 如何解決:設置編碼方式和解碼方式相同即可
3 . 此外還要注意,有些編輯器默認保存的編碼方式就是utf-8,例如sublime


默認保存的編碼方式

六:常用標簽介紹

  • 標題標簽<h1~6>,用來書寫標題,<h1>~<h6>字體依次由大到小,表明標題的重要性由大到小;
    標題標簽展示
  • 字體突出標簽
    1.<mark>:用來標記文段,標明該文段出錯或其他

mark標簽

2.<strong>:用于強調標記的語句,強調語氣比<em>強,字體會變成加粗體

strong標簽

3.<em>:用于強調標記的語句,強調語氣較輕,字體會變成斜體

em標簽
  • 段落標簽<p>:用于包裹文段;
P標簽
  • 塊標簽<div>:用于劃分一個區塊,常用于頁面布局;
div標簽,為顯示我加了樣式
  • 行標簽<span>:用于組合行內元素,方便進行定位設置樣式
span標簽用法
  • 圖片標簽[站外圖片上傳中……(1)],用來插入圖片;
圖片正常顯示時
圖片不能顯示時
  • 列表標簽
    1.無序列表:<ul><li>,用來顯示無序的列表信息,直接子元素必須是<li>,默認樣式是小圓點
    無序列表

    2.有序列表:<ol><li>,用來顯示有順序的列表信息,直接子元素必須是<li>,默認樣式是阿拉伯數字
有序列表

3.自定義列表:<dl><dt><dd><dt>用來顯示列表標題,<dd>用來顯示列表項

自定義列表
  • 鏈接標簽<a href="鏈接地址" target="以什么方式打開">可點擊的文字</a>
a標簽
  • 表格標簽<table><tr><th><td>
    其中<tr>是行,有幾個<tr>標簽就有幾行。<th>是表頭單元,是該列信息的歸類。<td>是標準單元,用來顯示信息
表格

關于HTML文檔的語義化

  • 什么是HTML語義化:我所理解的語義化就是將文檔的書寫當做寫文章一樣,該用什么標簽就用什么標簽,盡量少用無語義的標簽
  • 語義化的好處:方便閱讀以及搜索引擎的搜索

樣式和內容分離原則

  • 樣式和內容分離是指,樣式不要寫在標簽內,比如這樣:
  • 最好也不要寫在<head>標簽的<style>里,比如這樣:
  • 最好是另外建立一個文件專門寫樣式,然后<head>標簽內進行引入,比如這樣:
Paste_Image.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,320評論 1 41
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,923評論 18 139
  • 簡介瀏覽器可以被認為是使用最廣泛的軟件,本文將介紹瀏覽器的工 作原理,我們將看到,從你在地址欄輸入google.c...
    聽風閣閱讀 3,313評論 0 7
  • 在前一篇文章中已經簡單提到Html標簽了,在本文中就不再贅述它的介紹了。想要再看看的可以戳Html+Css基礎概要...
    年少有van閱讀 915評論 0 14