2020-3-1 前端達人
文章目錄
一、HTML的概述
標簽的嵌套縮進
如圖所示<html>為外層標簽，稱為父元素，<head>和<body>為內層標簽，稱為子元素。其中<head>與<body>又互稱為兄弟元素
<!DOCTYPE html>
聲明不是 HTML 標簽；它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。
聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前。
<!DOCTYPE> 聲明沒有結束標簽。
<!DOCTYPE> 聲明對大小寫不敏感。
在 HTML 4.01 中有三種 <!DOCTYPE> 聲明。在 HTML5 中只有一種：<!doctype html>
我們學習的是HTML5，所以我們不過多對HTML4的聲明做過多解釋。
如果上述對<!doctype html>的概述不清楚的話，
那記住以下兩點即可，1. 不分大小寫，2.在HTML的網頁<html>標簽之前加上<!doctype html>就可以啦。
圖示為 HTML DOM樹，DOM：Document Object Model（文檔對象模型）
2. 標簽、屬性
一個標簽可能有多個屬性，屬性先后與順序無關
“=” 為賦值符號
屬性與屬性之間用空格隔開
附：補充上一節(jié)課網站和網頁的筆記：
HTML網頁的編碼為 utf-8
網站可以理解成一個文件夾，而網頁就是一個個的文件
網頁的文件后綴常見的有：htm、html、jsp、php、asp
網站的文件結構通常包含 images文件夾，css文件夾，js文件夾，
一個簡單的網頁，的文件目錄通常由 images、css、js，作用顧名思義，就是存放相對應的文件資源
附：img標簽的詳細介紹
<img> 標簽有兩個必需的屬性：src 和 alt。
注釋：從技術上來說，圖像并不會插入到HTML頁面中去，而是通過 src的值(URL) 鏈接到HTML頁面上的，<img>標簽的作用是為被引用的圖像創(chuàng)建占位符。
<img>標簽常用的屬性有src、alt、width、height、title
src和alt為 img 標簽的必需元素。
話不多說，看圖，為你們講解代碼。
看網站的演示圖和代碼圖，想必大家都很清楚了吧。
（為了更直觀的看到效果，我寫了div和div的樣式，1px粗的紅色實線邊框，這里的代碼以后再具體詳解）
title和alt 的區(qū)別別，體現(xiàn)在 第 11 行和第 14 行，想必大家就能看出來了吧
i. alt 屬性是在圖片不能正常顯示時出現(xiàn)的文本提示。
ii. title 屬性是在鼠標在移動到元素上的文本提示。
width和height的作用，用來規(guī)定圖像的寬度和高度，單位為 像素（px）
src路徑，由于我的文件夾結構為 index.html文件和 images 文件夾。
所以 src 的路徑為 src="images/圖片.后綴"，即src="URL"
URL即（Uniform Resource Locator,統(tǒng)一資源定位符，在WWW上，每一信息資源都有統(tǒng)一的且在網上唯一的地址。
簡單的理解URL，就是網址，地址
如果圖片路徑引用錯誤，都會導致網頁中的圖片無法正常顯示！ 如，第 14 行和第 20 行代碼。
以上為img標簽的常見用法。在我們寫網頁的時候，建議img寫上 src、alt、width、height這四個屬性，是否需要 title 具體看網站的功能。
以上就是，第二課、Web前端開發(fā)之HTML基礎的全部內容了，感謝閱讀
————————————————
版權聲明：本文為CSDN博主「MineChen」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權協(xié)議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/MineSu/article/details/104549536