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

2020-3-1    前端達人

文章目錄

一、HTML的概述

  1. 什么是HTML?
  2. HTML的標簽、元素、屬性
  3. 標簽、元素
  4. 標簽、屬性

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

    附:img標簽的詳細介紹

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

    HTML指的是超文本標記語言(Hyper Text Markup Language)

    HTML 不是一種編程語言,而是一種標記語言 (markup language)

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

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

    HTML不區(qū)分大小寫
  6. HTML的標簽、元素、屬性
  7. 標簽、元素

    由尖括號包圍,比如 <title>

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

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



    其中,<title> 為 開始標簽

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

    </title>為結束標簽, 我們可以清楚的觀察到,標簽結束是有 “/”。

    則 標簽和內(nèi)容,構成了網(wǎng)頁的元素。



    標簽的嵌套關系,如下列例子,你品

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

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


    標簽的嵌套縮進

    20200228080404388.png



    如圖所示<html>為外層標簽,稱為父元素,<head>和<body>為內(nèi)層標簽,稱為子元素。其中<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的網(wǎng)頁<html>標簽之前加上<!doctype html>就可以啦。

    20200228083557474.png





    圖示為 HTML DOM樹,DOM:Document Object Model(文檔對象模型)


    2. 標簽、屬性

    20200228084133219.png





    一個標簽可能有多個屬性,屬性先后與順序無關

    “=” 為賦值符號

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

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

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

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

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

    網(wǎng)站的文件結構通常包含 images文件夾,css文件夾,js文件夾,

    一個簡單的網(wǎng)頁,的文件目錄通常由 images、css、js,作用顧名思義,就是存放相對應的文件資源

    附:img標簽的詳細介紹

    <img> 標簽有兩個必需的屬性:src 和 alt。

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

    點擊查看原圖

    點擊查看原圖

    <img>標簽常用的屬性有src、alt、width、height、title

    src和alt為 img 標簽的必需元素。



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





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

    (為了更直觀的看到效果,我寫了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)一的且在網(wǎng)上唯一的地址。

    簡單的理解URL,就是網(wǎng)址,地址



    如果圖片路徑引用錯誤,都會導致網(wǎng)頁中的圖片無法正常顯示! 如,第 14 行和第 20 行代碼。

    以上為img標簽的常見用法。在我們寫網(wǎng)頁的時候,建議img寫上 src、alt、width、height這四個屬性,是否需要 title 具體看網(wǎng)站的功能。



    以上就是,第二課、Web前端開發(fā)之HTML基礎的全部內(nèi)容了,感謝閱讀

    ————————————————

    版權聲明:本文為CSDN博主「MineChen」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權協(xié)議,轉載請附上原文出處鏈接及本聲明。

    原文鏈接:https://blog.csdn.net/MineSu/article/details/104549536

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://bouu.cn

存檔