HTML的標籤

時間 2019-12-05

標籤 html 標籤欄目 HTML 简体版

原文原文鏈接

引言：在介紹html的 img標籤前，我會先簡要講一下html是什麼。第一次接觸html理解可能不會很深入，如有錯誤請幫忙指出。

什麼是HTML?

HTML是一種超文本標記語言-Hyper Text Markup Language,它不是編程語言而是一種標記語言，是網頁製做必備的html

超文本指的是頁面內的圖片、連接、音樂、程序等非文本元素
標記語言是一套標記標籤，通俗的講就是編程語言裏的關鍵字
HTML使用標記標籤來描述網頁
HTML文檔也叫web頁面
而瀏覽器則用於讀取HTML文件，並將其做爲網頁顯示

HTML 標籤

HTML標籤是HTML語言中最基本的單位，也是最重要的組成部分實例:web

<body>
 <h1>個人第一個標題</h1>
 <p>個人第一個段落。</p>
 </body>
 </html>
複製代碼

以上是一段html代碼
HTML標籤是指用尖括號包圍起來的關鍵詞，好比：<html>,</html>,<body>,<h1>,<p>
HTML標籤一般是成對出現的，好比<h1>和</h1>
其中，前者是開始標籤（開放標籤），後者是結束標籤（閉合標籤）
每一個標籤有其不一樣的做用，常見的有

<h1>-定義標題chrome

<p>-定義段落shell

<a>-定義連接數據庫

<img>-定義圖像編程

HTML 圖像

圖像標籤(`<img>`)和源屬性(Src)

在HTML中，圖像由<img>標籤訂義。<img>是空標籤，只包含屬性，沒有閉合標籤。若要在頁面上顯示圖像，咱們須要用源屬性（src）。src-「source」。源屬性的值是圖像的URL地址瀏覽器

定義圖像的語法：

<img src="URL"/>緩存

如圖所示

URL指儲存圖像的位置。若是名爲「boat.gif」的圖像位於www.w3school.com.cn的images目錄中，那麼其URL就是http://www.w3school.com.cn/images/boat.gif

替換文本屬性

alt 爲圖像定義一段預備的可替代文本，在瀏覽器沒法載入圖像時，就會顯示出這段文本，告訴讀者瀏覽器失去的圖片的信息安全

定義格式

<img src="URL" alt="text">cookie

圖像尺寸

經過改變width和height的值來改變圖片尺寸

定義格式

<img src="URL" width="50" height="50">

瀏覽器控制檯（Chrome開發者工具）

Chrome 開發者工具是一套內置於Google Chrome中的Web開發和調試工具，可用來對網站進行迭代、調試和分析。

如何打開？

在頁面任意位置點擊鼠標右鍵，->檢查元素，或摁鍵盤上的F12便可打開

####瞭解面板

分爲元素面板、控制檯面板、源代碼面板、網絡面板、性能面板、內存面板、應用面板和安全面板

元素面板

使用元素面板能夠自由的操做DOM和CSS來迭代佈局和設計頁面.

控制檯面板

在開發期間，可使用控制檯面板記錄診斷信息，或者使用它做爲 shell在頁面上與JavaScript交互。

源代碼面板

在源代碼面板中設置斷點來調試 JavaScript ，或者經過Workspaces（工做區）鏈接本地文件來使用開發者工具的實時編輯器。

網絡面板

使用網絡面板瞭解請求和下載的資源文件並優化網頁加載性能。

性能面板

使用時間軸面板能夠經過記錄和查看網站生命週期內發生的各類事件來提升頁面的運行時性能。

內存面板

若是須要比時間軸面板提供的更多信息，可使用「配置」面板，例如跟蹤內存泄漏。

應用面板

使用資源面板檢查加載的全部資源，包括IndexedDB與Web SQL數據庫，本地和會話存儲，cookie，應用程序緩存，圖像，字體和樣式表。

安全面板

使用安全面板調試混合內容問題，證書問題等等。

參考文章

1.developers.google.com/web/tools/c… 2.www.w3school.com.cn/html/html_i…

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。