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

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

文章目錄

一、HTML的概述

  1. 什么是HTML？
  2. HTML的標(biāo)簽、元素、屬性
  3. 標(biāo)簽、元素
  4. 標(biāo)簽、屬性

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

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

    一、HTML的概述
  5. 什么是HTML？

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

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

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

    HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)

    HTML不區(qū)分大小寫
  6. HTML的標(biāo)簽、元素、屬性
  7. 標(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)頁(yè)的元素。



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

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

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


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

    20200228080404388.png



    如圖所示<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> 聲明沒(méi)有結(jié)束標(biāo)簽。

    <!DOCTYPE> 聲明對(duì)大小寫不敏感。

    在 HTML 4.01 中有三種 <!DOCTYPE> 聲明。在 HTML5 中只有一種：<!doctype html>

    我們學(xué)習(xí)的是HTML5，所以我們不過(guò)多對(duì)HTML4的聲明做過(guò)多解釋。



    如果上述對(duì)<!doctype html>的概述不清楚的話，

    那記住以下兩點(diǎn)即可，1. 不分大小寫，2.在HTML的網(wǎng)頁(yè)<html>標(biāo)簽之前加上<!doctype html>就可以啦。

    20200228083557474.png





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


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

    20200228084133219.png





    一個(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è)面中去，而是通過(guò) src的值(URL) 鏈接到HTML頁(yè)面上的，<img>標(biāo)簽的作用是為被引用的圖像創(chuàng)建占位符。

    點(diǎn)擊查看原圖

    點(diǎn)擊查看原圖

    <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

分享本文至：

日歷

鏈接

個(gè)人資料

存檔