html 基礎知識

2021-02-23 ADA的棲息地
html 基礎知識

html 基礎知識1. 網頁的組成部分2. html 設計思想3. 基本的 html 頁面3.1 html 結構源碼3.2 源碼逐行分析4. 元素,屬性與值與其它4.1 元素4.2 屬性和值4.2.1 基本語法4.2.2 三大通用屬性5. 層級關係6. 網頁中的文本字符7. 文件與文件夾名稱8. URL8.1 語法8.2 絕對 URL8.3 相對 URL9. html 標籤的語義化的優勢10. html 元素的默認樣式

1. 網頁的組成部分序號內容描述1文本內容用戶看到的網頁文本,例如新聞,電話等2其它文件的引用如圖片,視頻,音頻,CSS 樣式表,JS 腳本等3標記對文本以及引用文件的正確描述

每個頁面都是由這三部分組成的, 並且都是採用純文本進行描述

意味著任何能編寫純文本的編輯器都可以用來創建 HTML 頁面

現在主流 HTML 版本是 5.0,後面的教程默認就是 HTML5 版本

2. html 設計思想

html 文檔中的一切,都是基於標籤實現的

標籤就類似於超市中玲琅滿目的商品,你能通過一個標籤快速識別並找到它們

頁面中的每一塊內容,如果想識別出來,同樣也需要給他們貼上不同的標籤

html 是超文本標記語言(下表描述並不精準,但力求簡要易記)

術語描述超文本是指包含有超連結的文本標記就是用來描述內容的固定標籤語言html 並不程式語言,只是書寫 html 文檔的工具3. 基本的 html 頁面3.1 html 結構源碼
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML5頁面結構</title>
  </head>

  <body>
    <!-- 頁面主體內容 -->
    <h2>歡迎您...</h2>
  </body>
</html>
3.2 源碼逐行分析代碼解析<!DOCTYPE html>通知瀏覽器這是一個 HTML5 文檔,應始終寫在第一行<html>...</html>根標籤,或叫根元素,整個 hmtl 文檔內容都必須寫到這對標籤中<html lang="en">通知搜尋引擎 html 文檔使用的編寫語言,如果是中文建議改成<html lang="zh-CN"><head>...</head>供瀏覽器和搜尋引擎使用,描述字符編碼集,視口與頁面標題,用戶並不感興趣<meta>設置頁面元素數據, 所謂元數據, 就是描述某種特定信息的數據<meta charset="UTF-8">通知瀏覽器 html 文檔編寫語言所屬的字符編碼集,最流行的是UTF-8,已成行業標準<meta name="viewport" content="..." />下面三行是對它的解讀name="viewport"設置視口(即可視區屏幕)如何顯示這個頁面, 例如是否允許縮放這個頁面width=device-width頁面寬度應該與顯示設備的寬度相匹配,類似還有device-height 表示設備的屏幕高度initial-scale=1.0設置頁面初始綻放比例,1.0表示原樣 1:1 顯示,不允許有任何綻放<title>顯示在瀏覽器標籤上的文本, 指定當前頁面的標題, 這個標籤對 SEO 非常重要<body>...</body>頁面主體內容,允許或希望用戶的內容都應該寫到這裡,用戶也只對這裡的內容感興趣<!-- 注釋內容 ->注釋用來描述標籤功能或用途,它的內容不要出現在顯示的網頁中, 只會出現在 html 原始碼中<h2>歡迎您...</h2>瀏覽器渲染這個 html 文檔時,最終只會呈現這個標題內容與效果,並不顯示標籤<h2>
編寫 html 文檔的標籤字符不區分大小寫, 但是推薦全部使用小寫字母
4. 元素,屬性與值與其它4.1 元素元素標籤語法描述非空元素雙標籤<p>學習讓我變得更強大</p><起始標籤>元素內容</結束標籤>空元素單標籤<img src="..." alt="">|<link><標籤>
空元素也有使用雙標籤描述的,如<script>|<video>|<br>...
4.2 屬性和值4.2.1 基本語法
屬性: 必須寫到元素的 "起始標籤" 中,由屬性名和屬性值二部分組成
語法: 屬性名="屬性值",屬性名推薦只使用小寫字母,屬性值推薦加上雙引號
案例: <input type="password" maxlength="20" placeholder="至少8個字符" required>
序號值類型描述1字符串<p>...</p>2預定義值<input type="text">3指定格式<a href="https://php.cn">...</a>4數值<table width="200">...</table>5布爾值<input type="email" required>
布爾屬性的值是可選的, 只要元素中出現該屬性,表示它取真值
4.2.2 三大通用屬性序號屬性名描述舉例1id元素的唯一標識<div id="wrap">...</div>2class給元素添加類樣式<div>...</div>3style設置當前元素樣式<div style="...">...</div>
這幾個屬性,幾乎可以添加到任何元素上
5. 層級關係
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素的標籤,屬性和值,正確的嵌套關係</title>
  </head>

  <body>
    <!-- 元素之間應該保持正確的嵌套 -->
    <form action="">
      <div>
        <label for="email">郵箱:</label>
        <!-- 元素值: 預定義值, 指定值, 布爾值,數值 -->
        <input type="email" name="email" id="email" maxlength="100" required />
      </div>
      <div>
        <label for="password">密碼:</label>
        <input
          type="password"
          name="password"
          id="papassword"
          placeholder="至少8位"
          required
        />
      </div>
      <div>
        <button>提交</button>
      </div>
    </form>
  </body>
</html>
6. 網頁中的文本字符
多個空格,制表符,回車符,換行符,都會被壓縮為一個空格
<,>,&等字符具有特殊意義,需要轉義後才允許添加到 html 文檔
轉義字符語法: & + 字符實體名稱 + ;, 如<,使用: &lt;表示
Unicode極大的緩解了特殊字符的問題,推薦將文檔編碼設置為utf-8
只需要在<head> <mata charset="UTF-8"> </head>
常用轉義字符表
序號字符描述轉義字符實體編號1' '空格nbsp;&#160;2<小於&lt;&#60;3>大於&gt;&#62;4&&符號&amp;&#38;5"雙引號&quot;&#34;6©版權&copy;&#169;7®已註冊商標&reg;&#174;8×乘號&times;&#215;9÷除號&divide;&#247;7. 文件與文件夾名稱8. URL8.1 語法序號名稱描述舉例1模式也稱"協議",瀏覽器如何訪問這個文件http,https,ftp,mailto...2主機名使用"域名"或"IP"表示https://www.php.cn/,或者http://127.0.0.1/3路徑使用一個或多個正斜線分割的字符串public/admin4文件名最後一個路徑後面的,帶有擴展名的文檔ablut.html
如果 URL 是以路徑分隔符/結尾, 則啟用默認文件名,如index.html
8.2 絕對 URL序號使用場景舉例1被引用目標與當前位置無關http://php.cn/courses/123.html2引用其它伺服器上的文件https://www.php.net/manual/zh/8.3 相對 URL
當有人向你問路時,你肯定不會從國家/省/市/縣/區開始,而是從他當前的位置給你指示
同樣, 相對 URL 是以包含 URL 本身的文件位置為參考點,描述目標文件的位置
序號使用場景舉例1引用同一目錄下文件直接寫文件名,如demo2.html2引用子目錄下文件目標文件前帶上子目錄名,使用目錄分隔符/連接,如chapter2/demo2.html3引用上層目錄的文件文件名前添加二個點,同樣使用目錄分隔符/連接,允許逐級向上查詢,如../../demo2.html4根路徑/為防止過多層級的向上遞歸查詢,可以從當前伺服器根目錄開始查詢,如/admin/books/chapter2/
訪問同一個網站的文件,應該始終堅持使用相對 URL 地址
9. html 標籤的語義化的優勢序號優點描述1更直觀對於一篇文章<article>標籤,顯然要比使用<div>2SEO 優化搜尋引擎更加喜歡你的網頁,有利於 SEO, 得升關鍵詞優化與排名3代碼更少提高加載速度,也方便代碼維護與樣式控制4無障礙支持例如視力受損使用的屏幕閱讀器, 語義化就非常重要了10. html 元素的默認樣式
為什麼同樣的內容,添加不同的標籤,在瀏覽器中呈現出不同的顯示效果呢?
原因是瀏覽器為這么元素預定了一張樣式表,即每個元素都有默認樣式
不幸的是, 不同瀏覽器廠商之間因為商業利益或競爭關係,這些元素在不同瀏覽器表現並不完全相同
所以,我們需要使用自定義的樣式表,來重置元素的樣式,讓它們在所有瀏覽器中看上去是完全一樣的
用戶自定義的樣式規則, 優先級要高於默認樣式, 這是應該的,也是合理的

相關焦點

  • HTML|前端網頁的設計基礎知識
    1、關於html簡介html指的是超文本標記語言，是用來描述網頁的一種語言。且其並未為一種程式語言，而是一種標記語言（一套標記標籤），以此為基礎來描述網頁。2、html標籤html通常被尖括號包圍，例如<html>,以此為一個代碼的開始標籤以及終止標籤。圖 1 基本代碼另外，html標籤通常是成對存在的，比如<p>和</p>,一個為其實標籤，另一個為終止標籤，在兩個字符間的文本被現實為段落。
  • HTML5 和 CSS 基礎知識一(筆記)
    一、HTML5 部分1、入手2、html5 語法3、結構4、文本格式5、圖像與畫布6、列表7、表格8、連結9、表單10、音頻與視頻11、HTML5其他功能12、HTML5綜合二、CSS 部分1、初識 CSS2、CSS 基礎語法3、CSS 基礎選擇器4、CSS 高級選擇5、顏色6、文本修飾7、邊框效果8、背景修飾9、盒子模型10、浮動和分欄11、定位12、過渡效果13、響應式布局14、動畫
  • HTML基礎知識學習
    一、目標學習HTML目標，能夠寫出基本的靜態頁面其中需要知道的知識點：（1）需要知道書寫html的工具（2）了解開發使用的瀏覽器以及瀏覽器內核（3）HTML簡介和編寫格式（4）HTML各類標籤以及標籤的關係
  • SEO前期準備之HTML的基礎知識(上)
    所以，檀哥今天教給大家一些常用的基礎HTML代碼。1..html：html 的後綴名我們編寫網頁時，可以用.txt格式的記事本進行編寫，當然你也可以用更加智能的工具，比如說，notepad++。當我們用記事本編寫完成後，點重命名，將.txt後綴修改成.html。2.
  • HTML基礎
    HTML基礎本文包括HTML基本知識與結構HTML常見標籤標籤寫法與嵌套的討論
  • JavaWeb基礎,基礎中的基礎HTML簡介
    Java基礎和資料庫基本上都講完了，今天開始講JavaWeb，也叫J2EE，是用Java技術來解決相關web網際網路領域的技術總和，它包括服務端和客戶端，需要學習的東西很多，今天講一下基礎中的基礎-html。
  • HTML入門基礎篇
    ，並且能夠理解，有基礎的可以自動跳過本篇。html中有很多標籤是有自己的定義屬性的，也就是說當我們使用這些標籤的時候，文本內容就會有規定好的屬性，而我們自己隨便給的一個標籤則是完全沒有屬性的。        下面我們來看一下剛才的示例中每句話的具體含義：     那麼可能有些同學想問，我該怎麼新建一個html的文件並且把代碼輸入進去呢，作文web前端系列的第一篇文章，大家可以隨意新建一個txt文件，然後把代碼輸入到新建的這個記事本當中，然後重命名把後綴.txt改成.html，那麼一個html文檔就建好了。
  • html+css基礎知識,新人必看!
    標記語言是一套標記標籤 (markup tag)HTML 使用標記標籤來描述網頁如下代碼：<html><body><h1>My First Heading</h1><p>My first paragraph.
  • HTML基礎標籤之html標籤
    上面的是一個基本的html5模板<html>與</html>標籤限定了文檔的開始和結束（所有瀏覽器都支持<html>標籤），在它們之間是文檔的頭部和主體。文檔的頭部由<head>標籤定義，而主體由<body>標籤定義。
  • 小白入門網頁前端必知html基礎知識
    <html><head>...</head><body>...</body></html>代碼講解：<html></html>稱為根標籤，所有的網頁標籤都在<html></html>中。
  • 乾貨 | html+css基礎知識,新人必看!
    標記語言是一套標記標籤 (markup tag)HTML 使用標記標籤來描述網頁如下代碼：<html><body><h1>My First Heading</h1><p>My first paragraph.
  • HTML最基本的知識
    下圖就是html的模板。基本知識下面，我們了解下HTML最基本知識。標題HTML 標題（Heading）是通過<h1> - <h6>標籤來定義的。我們可以認為CSS是html一件華麗的上衣。css的格式<style type="text/css">標籤名稱{屬性名稱: 屬性對應的值;...}</style>我們一般通過三種寫入CSS方法。
  • HTML5基礎-HTML(上)
    3.單標籤，如<br />1.2標籤關係包含關係、並列關係2.HTML基本結構標籤 *標籤名定義說明<html></html>html標籤根標籤<head></head>文檔頭head裡面必須設置title<title>&
  • Web全棧基礎知識點整理歸納,html知識快樂分享連載
    Web全棧這篇分享html基礎知識點。字符集：網頁亂碼怎麼辦？是字符集的問題！常見的字符集有GBK，gb2312，UTF-8，通過<meta charset="UTF-8" />來設置。/表示當前文件夾2.通過絕對路徑(了解)絕對路徑就是每次都從指定的盤符開始查找windows系統：格式： src="D:\HTML基礎\QRCode.jpg"含義： 在D盤下找到HTML基礎文件夾， 然後在HTML基礎文件夾中找到名稱叫做QRCode.jpg的圖片linux系統：格式：src="/HTML基礎/QRCode.jpg"，表示從根目錄開始查找HTML基礎文件夾，然後在HTML基礎文件夾中找到
  • Python爬蟲基礎:常用HTML標籤和Javascript入門
    例如，把下面的代碼保存為index.html文件並使用瀏覽器打開，單擊按鈕「保存」，網頁會彈出提示「保存成功」。把下面的代碼保存為index.html並使用瀏覽器打開，會發現在每次頁面加載時都會彈出提示，但在頁面上進行其他操作時，並不會彈出提示。
  • HTML基礎標籤之body標籤
    >text-decoration:none;}a:hover,a:active{color:blue;text-decoration:none;}小知識）網頁正文全文高：document.body.scrollHeight;（html.height，代碼從上到該語句執行時的body高度）網頁滾動條距開始時的距離（上下）：document.body.scrollTop;（有問題，一直為0，以後解決）
  • html基礎:入門必看
    <html><head>...</head><body>...</body></html>代碼講解：<html></html>稱為根標籤，所有的網頁標籤都在<html></html>中。
  • 零基礎html5+div+css+js網頁開發教程第003期 html代碼基本結構
    在第二期中，我們對html做了入門，已經有了對網頁開發基本的了解。本節知識開始書寫html網頁結構。本節知識視頻教程以下開始文字講解：一、Html代碼基本結構html代碼就像一個人一樣，可以分成幾個部分。我們先來了解三個節點。
  • Html知識回顧
    DOCTYPE html>文檔類型聲明標籤，最新版本<html lang="en">聲明網頁的語言，zh-CN<meta charset="UTF-8">字符集，utf-8表示萬國碼#常用標籤strong,em,del,ins,u文本格式化標籤，加粗，傾斜，刪除，下劃線align位置，border邊框,cellspacing單元格之間的距離，cellpadding文本與邊框之間的距離表格屬性
  • 速成乾貨|15分鐘學會HTML和CSS基礎知識
    <html>  <head>    <title>Example Title</title>    <style>      h1 {        color: red;      }    </style>  </head>