HTML網頁的基本組成結構

来源:https://www.cnblogs.com/webaction/archive/2020/07/28/13388837.html
-Advertisement-
Play Games

HTML基本結構 document是指整個文件,它下麵就是咱們的html 超文本標記語言的結構包括"頭"(head)和主體(body) 其中"頭"部提供關於網頁的信息,"主體"部分提供網頁的具體內容 #HTML基本結構-文檔聲明 為了說明文檔使用的超文本標記原因標準,所有的超文本標記語言文檔應該以“ ...


HTML基本結構

  • document是指整個文件,它下麵就是咱們的html
  • 超文本標記語言的結構包括"頭"(head)和主體(body)
  • 其中"頭"部提供關於網頁的信息,"主體"部分提供網頁的具體內容

#HTML基本結構-文檔聲明

  • 為了說明文檔使用的超文本標記原因標準,所有的超文本標記語言文檔應該以“文檔類型聲明”開頭,引用一個文件類型描述或者必要情況下自定義一個文件類型的描述
  • 聲明必須是HTML文檔的第一行,位於html標簽之前
  • 聲明不是HTML標簽,它是指web瀏覽器關於頁面使用哪個HTML版本進行編寫的指令
  • 在HTML4.01中,聲明引用DTD,因為html4.01基於SGM。DTD標記了語言的規則,這樣瀏覽器才能正確呈現內容
  • HTML5不基於SGML,所以不需要DTD

HTML基本結構-head

  • head標簽用於定義文檔的頭部,它是所有頭部元素的容器
  • head中的元素可以引用腳本,指示瀏覽器在哪裡找到樣式表、提供元信息等等
  • 文檔的頭部描述了文檔的各種屬性和信息,包括文檔的標題、在web中的位置以及和其他文檔的關係等,絕大多數文檔頭部包含的數據都不會真正作為內容顯示給用戶
  • 下麵這些標題可用在head部分:link,meta,script,syle以及title

補充:視口 viewport meta:vp table鍵(移動端手機頁面開發必須添加的代碼)&頁面小圖標:

TML基本結構-title

標簽title定義文檔的標題,它是head中必需的唯一元素

一定要選擇一個正確的標題,這對於定義文檔並確保它能夠在web上有效利用來說十分重要

顯示在瀏覽器的頁卡位置

HTML基本結構-meta

  • 標簽meta提供關於html文檔的元數據。它不會顯示在頁面上,但是對於機器是可讀的;
  • 典型的情況是,meta元素被用於規定頁面的描述\關鍵詞、文檔的作者、最後修改的實踐以及其他的元數據;
  • 標簽meta屬性常見的值有author,description,keywords,generator,revised,others

HTML基本結構-body

  • 網頁的主體部分
  • body元素定義文檔的主體,用戶看到的內容都在body內編寫
  • body元素包含文檔的所有內容(比如文本、超鏈接、圖像、表格和列表等等)

常用的標簽元素

html4版本常見的標簽元素/網址:http://www.zhufengpeixun.com/qianduanjishuziliao/qianduanCSSziliao/2016-06-29/456.html

html5版本新增標簽/網址:http://old.zhufengpeixun.cn/qianduanjishuziliao/css3hehtml5zhuanti/2016-11-20/665.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 新聞 高管透露Android 11版本號仍有甜點名稱 只是不再公開 Android 11 Beta 2.5發佈:修複Pixel 4系列閃屏問題 Android 11的甜點代號是什麼?紅絲絨蛋糕 教程 劃重點 | Android Jetpack 三大重要更新! 開源庫 UltimateBarX Mak ...
  • 先上圖: 1.首頁 2.第二頁 3.第三頁 項目目錄: 代碼不多,本人太懶,就不貼了 項目地址:https://download.csdn.net/download/qq_41861266/12664737 ...
  • DOM:Document/Object/Model DOM是一棵樹,樹上有Node,分為Document(html)、Element(元素)、Text(文本)、Comment(註釋)及其他 DOM最主要的功能是:通過 構造函數 把 節點 變成 對象,通過調用對象的 API 來操作對象 Node的介面 ...
  • 標簽語義化一含義 合適標簽做合適的事情,例如文章段落用p標簽,標題用h1-h6標簽 標簽語義化為瀏覽器和搜索引擎服務 標簽語乂化一為什麼要遵循標簽語義化 利於SE0優化(也就是搜索引擎的抓取,搜索引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重) 在樣式丟失的時候,還是可以比較好的呈現結構 更好 ...
  • 行內元素:a,button.big,em,i,input,mark,span,select,option,strog,b,sup,sub,textarea,u 內聯元素是指本身屬性為display:inline的元素.因為它自身的特點,我們通常使用行內元素來進行文字\小圖標(小結構)的搭建 塊級元素 ...
  • HTML元素指的是從開始標簽( start tag)到結束標簽( end tag)的所有代碼 開始標簽元素內容結束標簽 <p> this is a paragraph </p> <a href="default.htm"> this is a link </a> <br/> 註釋:開始標簽被稱為開放 ...
  • 60個\參考網址https://www.w3school.com.cn/tags/index.asp 標簽描述 <!--...--> 定義註釋。 <!DOCTYPE> 定義文檔類型。 <a> 定義錨。 <abbr> 定義縮寫。 <acronym> 定義只取首字母的縮寫。 <address> 定義文檔 ...
  • HTML:超文本標記語言,是使用標記標簽來描述網頁的一種語言,也是一種規範,一種標準,它通過標記符號來標記要顯示的網頁中的各個部分; css層疊樣式表是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的的電腦語言。css不僅可以靜態地修飾網頁,還可 ...
一周排行
    -Advertisement-
    Play Games
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊,後續可能不再更新Garne ...
  • C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了,幾乎是無縫銜接,很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高,我只要會調用方法就行。這個系統交付之後不會有太多問題,更多應該是做小需求,有大的開發任務應該也是第二期的事,嗯?怎麼感覺我變成運維了?而 ...
  • 我在隨筆《EAV模型(實體-屬性-值)的設計和低代碼的處理方案(1)》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼(或者說無代碼)的一些實現思路,在本篇隨筆中,我們來分析一下這種針對通用業務,且只需定義就能構建業務模塊存儲和界面的解決方案,其中的數據查詢處理的操作。 ...
  • 對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1,這將啟用NTP伺服器功 ...
  • title: Django信號與擴展:深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分:Django信號基礎 Djan ...
  • 使用xadmin2遇到的問題&解決 環境配置: 使用的模塊版本: 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 今天我打算整點兒不一樣的內容,通過之前學習的TransformerMap和LazyMap鏈,想搞點不一樣的,所以我關註了另外一條鏈DefaultedMap鏈,主要調用鏈為: 調用鏈詳細描述: ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 後端應用級開發者該如何擁抱 AI GC?就是在這樣的一個大的浪潮下,我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型,跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好,或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • @Autowired是Spring框架提供的註解,@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配,而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean,而@Resourc... ...