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