公主的腿间舌奴们np肉_国产在热线精品视频99公交_公主车上荫蒂添的好舒服_公侵犯人妻中文字慕一区二区_公么大龟弄得我好舒服秀_公交车+多人+高cH文章推荐_日本熟妇另类视频在线播放

【W(wǎng)eb前端開發(fā)】第二課、HTML基礎(chǔ)之HTML概述

2020-3-1 前端達(dá)人

文章目錄

一、HTML的概述

什么是HTML？
HTML的標(biāo)簽、元素、屬性
標(biāo)簽、元素
標(biāo)簽、屬性

附：補(bǔ)充上一節(jié)課網(wǎng)站和網(wǎng)頁的筆記：

附：img標(biāo)簽的詳細(xì)介紹

一、HTML的概述
什么是HTML？

HTML指的是超文本標(biāo)記語言（Hyper Text Markup Language）

HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)

標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)

HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁

HTML不區(qū)分大小寫
HTML的標(biāo)簽、元素、屬性
標(biāo)簽、元素

由尖括號(hào)包圍，比如 <title>

通常是成對(duì)出現(xiàn)的

<title>百度一下，你就知道</title>

其中，<title> 為開始標(biāo)簽

中間的 “百度一下，你就知道” 為內(nèi)容

</title>為結(jié)束標(biāo)簽，我們可以清楚的觀察到，標(biāo)簽結(jié)束是有 “/”。

則標(biāo)簽和內(nèi)容，構(gòu)成了網(wǎng)頁的元素。

標(biāo)簽的嵌套關(guān)系，如下列例子，你品

<html><body></body></html>

<html><body></html></body>

標(biāo)簽的嵌套縮進(jìn)

如圖所示<html>為外層標(biāo)簽，稱為父元素，<head>和<body>為內(nèi)層標(biāo)簽，稱為子元素。其中<head>與<body>又互稱為兄弟元素

<!DOCTYPE html>

聲明不是 HTML 標(biāo)簽；它是指示 web 瀏覽器關(guān)于頁面使用哪個(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)頁<html>標(biāo)簽之前加上<!doctype html>就可以啦。

圖示為 HTML DOM樹，DOM：Document Object Model（文檔對(duì)象模型）

2. 標(biāo)簽、屬性

一個(gè)標(biāo)簽可能有多個(gè)屬性，屬性先后與順序無關(guān)

“=” 為賦值符號(hào)

屬性與屬性之間用空格隔開

附：補(bǔ)充上一節(jié)課網(wǎng)站和網(wǎng)頁的筆記：

HTML網(wǎng)頁的編碼為 utf-8

網(wǎng)站可以理解成一個(gè)文件夾，而網(wǎng)頁就是一個(gè)個(gè)的文件

網(wǎng)頁的文件后綴常見的有：htm、html、jsp、php、asp

網(wǎng)站的文件結(jié)構(gòu)通常包含 images文件夾，css文件夾，js文件夾，

一個(gè)簡(jiǎn)單的網(wǎng)頁，的文件目錄通常由 images、css、js，作用顧名思義，就是存放相對(duì)應(yīng)的文件資源

附：img標(biāo)簽的詳細(xì)介紹

<img> 標(biāo)簽有兩個(gè)必需的屬性：src 和 alt。

注釋：從技術(shù)上來說，圖像并不會(huì)插入到HTML頁面中去，而是通過 src的值(URL) 鏈接到HTML頁面上的，<img>標(biāo)簽的作用是為被引用的圖像創(chuàng)建占位符。

<img>標(biāo)簽常用的屬性有src、alt、width、height、title

src和alt為 img 標(biāo)簽的必需元素。

話不多說，看圖，為你們講解代碼。

看網(wǎng)站的演示圖和代碼圖，想必大家都很清楚了吧。

（為了更直觀的看到效果，我寫了div和div的樣式，1px粗的紅色實(shí)線邊框，這里的代碼以后再具體詳解）

title和alt 的區(qū)別別，體現(xiàn)在第 11 行和第 14 行，想必大家就能看出來了吧

i. alt 屬性是在圖片不能正常顯示時(shí)出現(xiàn)的文本提示。

ii. title 屬性是在鼠標(biāo)在移動(dòng)到元素上的文本提示。

width和height的作用，用來規(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)頁中的圖片無法正常顯示！如，第 14 行和第 20 行代碼。

以上為img標(biāo)簽的常見用法。在我們寫網(wǎng)頁的時(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