當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

一起学WEB HTML5 第1讲

發布時間：2023/12/14 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了一起学WEB HTML5 第1讲小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

今天開始我們就要進行第2個階段的學習啦,今天的學習內容一共有以下幾個部分:

HTML5 basic 所有網頁的結構，數據都是用html5來搭建

Ajax異步的數據交互 ajax幫助我們異步連接服務器，發送請求，并接收響應

ajax的項目用戶管理—登錄，查詢，注冊，修改，刪除，用戶名重復驗證

CSS3 美化頁面讓頁面變的好看

Bootstrap框架
①封裝很多css，讓我們快速開發
②封裝了響應式布局

這階段的知識點非常細碎,單詞量比較多,不過相信你一定是可以的,加油!

今日目標:

1.WEB發展史 – 了解
2.HTML基礎語法 – 掌握
3.常用標簽1:文本 – 熟練掌握
4.常用標簽2:圖像和鏈接 – 熟練掌握
5.常用標簽3:表格 – 熟練掌握

其實今天的內容是非常容易掌握的,下面一起來開始今天的學習吧~

1 WEB發展史(了解)

1.1發展過程

我們每天都在上網,那你知道我們口中的這個"網"是什么嗎?
其實它叫做Internet,是一個全球性的計算機互聯網絡,它有很多的名字,你可能聽過,比如:
因特網國際互聯網網際網加護網絡等等.
Internet其實為我們提供了很多的服務,比如:
WWW 萬維網,用戶通過瀏覽器在Internet上搜索和瀏覽自己感興趣的所有內容
Email 電子郵件服務,Internet上的用戶可以收發電子郵件
FTP 文件傳輸服務,Internet上的用戶可以將一臺計算機上的文件傳輸到另一臺上
TeInet 遠程登錄服務,你可以理解成QQ遠程控制向日葵遠程控制等
BBS 公告牌服務,比如學校經常使用的校園網等等
所以網絡上不只有www,還有很多很多的服務我們正在或者已經使用過了.

Internet的歷史

196X：美國軍方創建了ARPNET網，就是Internet的前身
197X：FTP協議（文件傳輸協議）誕生，可以實現“一對一的信息傳輸”
198X：SMTP協議（簡單郵件傳輸協議）誕生，可以實現“一對多的信息傳輸”
1991：HTTP協議（超文本傳輸協議）誕生，標志著Web正式誕生，可以實現“一對全網的信息傳輸”

超文本

傳統的文本都是一段一段從上往下線性訪問
超文本就是"超級文本"的簡稱,是指用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本,我們可能是跳躍式也就是非線性的方式來訪問的

以上這些內容做一個簡單的了解即可,我們來進一步了解下WEB

1.2 Web簡介

Web又被稱作是萬維網或者環球網,即WWW(World Wide Web)
它可以把各種類型的信息和服務結合起來,向用戶提供生動的界面,也可以把這些界面稱之為文檔
所以萬維網就是無數文檔的集合,這些文檔保存在因特網的某個地方
總結一句話,你可把Web理解成網站
我們后面就是要學習這些文檔/網頁如何編寫,如何傳輸

1.3 Web的工作原理

Web是基于Internet的一個多媒體信息服務系統,它由Web服務器瀏覽器通信協議三部分組成
通信協議指的是完成通信或服務所必須遵循的規則和約定。
這里采用的是HTTP協議:超文本傳輸協議(Hypertext Transfer Protocol)
它們之間是這樣的:

網頁采用HTML編寫出來

瀏覽器連接到WEB服務器并獲取網頁

瀏覽器解析獲取到的HTML網頁文檔,顯示在用戶的屏幕上

1.4 Web與Internet的關系

Web是運行在Internet之上最流行的應用之一,Internet為Web提供了網絡環境
Web的出現,極大地推動了Internet的普及與推廣

1.5 WEB頁面的運行需要兩種軟件:

1.程序員編寫網頁的工具–網頁編輯器

小型軟件(xMB)：notepad記事本、notepad++、editplus
中型軟件(xxMB)：SublimeText
大型軟件(xxxMB)：Dreamweaver、Eclipse/MyEclipse、IDEA/WebStorm、VSCode、HBuilderX

2.用戶瀏覽網頁的工具–網頁瀏覽器

Microsoft IE / Edge（Chrome內核）
GoogleChrome（Webkit內核+V8內核）
Netscape Navigator/Mozilla Firefox
AppleSafari（Webkit內核）

目前中國沒有自主的瀏覽器內核,主要推薦使用谷歌和火狐
我們目前學習使用到的就是HBuilderX與谷歌瀏覽器

2 HTML概述

2.1 前端開發的3個基礎語言

HTML–用于定義頁面的內容

CSS–用于控制頁面的樣式

JS–用于控制頁面的行為/交互
當然,你也可以把它們稱之為”前端三劍客”

2.2 基本概念

1.什么是HTML?

HTML:Hyper Text Markup Language，超文本標記語言,它用于定義頁面的內容，如文字、表格、圖片、音頻視頻、超鏈接…用HTML編寫的文件,以.html或者.htm為后綴

練習1: 初識HTML

在文件夾里新建一個文本文檔,命名為"p1.txt "代表我們寫的第一個頁面Page 1
注意1:文件夾與文件名字里都不允許出現中文!
注意2:確保文件后綴名是顯示出來的,并且后綴名為.txt

修改p1.txt的后綴名,改成p1.html,這樣才會將文本文檔變成一個網頁文件

編寫p1.html中的代碼:

寫一些普通的文字

4.雙擊剛剛寫好的文件,使用瀏覽器就可以查看到我們剛剛寫好的內容了

2.什么是標記?

標記:其實常稱為標簽或元素，表示一個頁面渲染指令,它有兩種:
雙標記標簽/封閉類型標記：有開始標簽也有結束標簽，必須成對出現,例如：<b>內容</b>
單標記標簽：只有開始沒有結束，不能包含內容,例如：<br>

2.3 HTML常用標簽

1.文字多種效果:b/i/u/s/sub/sup標簽

在剛剛的p1.html中繼續編寫內容,比如想給文字進行加粗,就需要使用到標簽

默認格式的文字 <b> 加粗的文字 </b> 后續文字

效果:只有被b標簽包裹的內容才有加粗的效果瀏覽器默認內容都在同一行顯示

注意:寫完文件需要保存,并且在打開的網頁F5刷新頁面后才能看到修改后的效果哦~
2. 我們再來寫一寫其它的效果加粗斜體下劃線刪除線:

默認格式的文字 <b>bold加粗的文字</b> <i>italic斜體文字</i> <u>underline下劃線文字</u> <s>strike刪除線文字</s> 后續文字

3. 上標字下標字的效果:

默認格式的文字 X<sup>2</sup>上標字 Z<sub>1</sub>下標字后續文字

2.br標簽

換行效果實現

在p1.html中編寫古詩,結果發現,4句詩都在同一行顯示

靜夜思李白床前明月光疑似地上霜舉頭望明月低頭思故鄉

瀏覽器的一些小特性:

1.瀏覽器把源代碼中的連續多個換行符渲染為一個“英文空格”
2.瀏覽器把源代碼中的連續多個空格符渲染為一個“英文空格”
3.瀏覽器把源代碼中的連續多個制表符Tab渲染為一個“英文空格”
結論：瀏覽器把源代碼中的連續多個空白鍵渲染為一個“英文空格”,可以動手試試哦

那我們想要換行或者多個空格的效果,該怎么實現呢?

換行符可以使用單標記標簽<br>標簽來實現空格符可以使用 轉義字符來實現

修改一下剛的代碼:

<br> 靜夜思   李白<br> 床前明月光<br> 疑似地上霜<br> 舉頭望明月<br> 低頭思故鄉<br>

3.轉義符號

比如我們想在頁面上寫3個被尖括號包裹的名字,代碼如下:

<李白> <tom> <張三>

結果卻發現:兩個中文的名字正確顯示,英文數據沒有顯示,這是為什么呢?
因為瀏覽器以為是一個標簽,但是這個標簽它不認識,所以沒有報錯,但是給忽略了…

那如果我們就想在網頁上顯示中括號,就需要使用到兩個轉義符號:<表示< >表示>

<李白> <tom> <張三>

修改下上面的代碼,可以看到<tom>就可以正常顯示啦

3 HBuilder工具的使用

1.HBuilder的下載

下載鏈接:https://www.dcloud.io/hbuilderx.html

打開頁面選擇"DOWNLOAD"下載按鈕

根據自己的系統選擇,但一定要選擇App開發版,它功能比較完善,不要選標準版

選好了點擊下載即可

2.HBuilder的解壓

下載好以后我們得到了一個壓縮包文件

壓縮文件需要解壓,不能直接雙擊壓縮文件使用哦

注意:
我們要先把這個壓縮包放到一個沒有中文的文件夾下再解壓,不要直接把下載的東西都放到桌面上,后期會很雜亂
解壓需要幾分鐘,一定要耐心等待完全解壓縮完畢后再使用

3. HBuilder無需安裝,解壓完畢雙擊可執行文件圖標即可使用~

3.HBuilder的使用

第一次打開我們可以選擇主題和快捷鍵方案(這個后面還能改)

進入后有一個自述,可以選擇綠色的區域把它關閉掉

我們可以將外部的文件夾直接拖拽到HBuilder中使用
比如這里就可以把我們之前創建的DAY01文件夾整個拖進來
可以看到文件夾里和HBuilder中的結構是一模一樣的

創建文件夾:選中DAY01,鼠標右鍵,新建目錄
輸入新文件夾的名字,回車,即可創建

新建文件:選中指定目錄,鼠標右鍵,新建自定義文件
(我們后面再創建其他類型的文件,先從這個最簡單的開始)

運行文件,一共有三種方式:
可以點擊運行按鈕,或者快捷鍵Ctrl+R,選擇瀏覽器后即可查看運行效果

還可以選擇"運行"->“運行到瀏覽器”,選擇瀏覽器后即可查看運行效果

修改注釋顏色（不推薦修改，默認灰色就可以）
在工具->設置->源碼視圖中，找到“自定義編輯器主題”，把左邊的復制到右邊，取消注釋即可
注意：右邊代碼的格式

4.HBuilder的其他使用細節

我們可以選中任意一個文件,右鍵,有很多操作選項,比如重命名等

我們還可以選中文件,直接拖拽到指定的位置下

我們可以拖拽或者點這個小按鈕隱藏左邊欄

Ctrl+鼠標滾輪可以調整編輯頁面中的字體大小

在"工具"->“設置"中可以配置"失去焦點時自動保存”
這個配置的意思是一旦你離開HBuilder去點擊其他窗口,HBuilder中未保存的編輯內容會自動保存

第一次關閉的時候會有如下提示,選擇"是",創建好桌面快捷方式,下次打開就方便啦

修改注釋的顏色 (使用灰色的默認注釋顏色即可,不推薦修改這個,了解即可)

“工具”->“設置”->“源碼視圖”->找到圖中左邊的自定義編輯器主題的代碼部分,粘貼到右邊,取消注釋

5.HBuilder常用快捷鍵：

Ctrl+R：在瀏覽器中運行當前頁面文件

Ctrl+↑/↓：快速移動當前行代碼

Ctrl+D：快速刪除當前行代碼

Ctrl+C/V：快速復制并粘貼當前行代碼

Ctrl+/：添加/取消當前行的注釋

4 HTML常用標簽

在學習標簽之前,我們需要認識HTML的注釋:

注釋是不會被瀏覽器解析運行的文本

注意:注釋不能嵌套注釋

在<>內部不能有注釋

1.pre標簽

之前我們通過<br>標簽和空格符實現了古詩格式的調整
但是那樣寫還是有點麻煩,如果是大段的文字該怎么辦呢?
pre標簽: 保留(preserve)源代碼中的原始格式

練習1: 編寫古詩2

<pre>靜夜思李白窗前明月光疑似地上霜舉頭望明月低頭思故鄉 </pre>

可以看到這個效果與我們編輯的內容是一樣的,使用也非常簡單

練習2: 在網頁上按照如下格式顯示下面的內容:

<pre> let i = 10; i++; console.log(i); </pre>

但注意:pre標簽無法實現字體的加粗等效果,還是需要結合其他之前的標簽一起來使用

2.h系列標簽

h標簽: 引導文字、標題字

練習1: 使用h標簽

<h1>靜夜思</h1> <h2>李白</h2> 窗前明月光疑似地上霜舉頭望明月低頭思故鄉

效果:被h標簽包裹的內容變大加粗,并且獨占一行,數字

練習2:使用h標簽包裹孟浩然的春曉,編寫并完成下面的問題:

1.測試h3~h6的字體樣式,看看幾號字的大小與普通文本一樣?
2.試試編寫不存在的標簽(例如h8),效果如何,會報錯嗎?

<h1>春曉</h1> <h2>孟浩然</h2> <h3>春眠不覺曉</h3> <h4>處處聞啼鳥</h4> <h5>夜來風雨聲</h5> <h6>花落知多少</h6> 我是普通文字 <h8> 哈哈哈 </h8>

瀏覽器效果:

面試題:97個HTML標簽分為哪兩類？各有哪些？

塊級標簽(block):必須獨占一行，換行無需<br>
例如：p、h1~h6、pre…

行內標簽(inline):可以與其他內容共處一行,換行必須使用<br>
例如：b、i…

3.p標簽

p標簽: paragraph段落

練習: 使用p標簽,檢查看下效果如何

<p>窗前明月光</p> <p>疑似地上霜</p> <p>舉頭望明月</p> <p>低頭思故鄉</p>

什么是屬性?

屬性:也稱為特征，描述標簽的某一方面的特點
寫法:<標簽名屬性名1 = “屬性值1” 屬性名2 = “屬性值2”> 段落內容 </標簽名>

屬性的聲明必須位于開始標記里

一個元素的屬性可能不止一個,多個屬性之間用空格隔開

多個屬性之前不區分先后順序

屬性名與屬性值用等號連接

屬性值要包含在引號中

<h1 align="center">靜夜思李白</h1> <p align="center">床前明月光</p> <p align="center">疑似地上霜</p> <p align="center">舉頭望明月</p> <p align="center">低頭思故鄉</p>

4. hr標簽

hr標簽:用于在頁面上創建一條水平的分割線,它是一個空標記,hr后面的文本會出現在新段落中
常用屬性:color顏色 width占據頁面寬度 size線條粗細 align位置信息

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum dolorum iure incidunt quos quasi similique fugiat tenetur earum modi veritatis rerum labore cupiditate explicabo quo corrupti praesentium dolor maxime unde! <hr color="red" width="50%" size="16px" align="right"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error maxime numquam veniam iusto rerum perspiciatis molestiae odit odio sed velit neque sapiente dignissimos officiis autem delectus facilis quasi beatae magni.

5.div標簽

div標簽: division區/塊,是一個最簡單的塊級元素,只有獨占一行的效果,沒有其他效果

練習: 完成靜夜思,實現下圖的效果

注意:這4句詩詞不像之前使用p標簽時有行間距哦
提示:試試span標簽和div標簽,看看哪個可以,為什么

<h1>靜夜思</h1> <h2>李白</h2> <div>窗前明月光</div> <div>疑似地上霜</div> <div>舉頭望明月</div> <div>低頭思故鄉</div>

6.圖像

URL(Uniform Resource Locator):統一資源定位器,用來標識網絡中的任何資源,其實就是文件對應的路徑.我們常說的有絕對路徑和相對路徑.先來寫個案例感受一下:
img標簽:全稱image圖像

練習: 目錄如下圖,創建p06.html文件,在頁面中呈現image文件夾下的3張圖片

<img src="./image/1.png" /> <img src="./image/2.png" /> <img src="image/3.png" />

如果圖片的路徑或者名字錯誤,圖片是無法正常顯示的!

比較這三個文件引入這3張圖片,路徑有何不同?自己動手寫寫看:

結論:我們寫的圖片路徑與文件和圖片的相對位置有關系,位置更改,圖片地址就需要更改

練習: 我們復制一張網頁上圖片的鏈接,讓這張圖片分別顯示在3個頁面中

<img src="https://cdn.tmooc.cn/bsfile//courseImg///f2b39759be9842ae86cfd62294a8e665.png" />   <img src="http://127.0.0.1:8848/DAY01/image/1.png" />  <img src="//127.0.0.1:8848/DAY01/image/1.png" />

7.超鏈接

a標簽:全稱anchor錨,超鏈接

練習:創建p8.html,訪問如下資源:

<a href="p1.html">今日的第1個頁面</a> <a href="p3.html">今日的第3個頁面</a>    <a href="https://www.baidu.com/">跳轉到百度</a> <a href="https://www.tmooc.cn/">跳轉到tmooc</a>  <a href="//www.tmooc.cn/">跳轉到tmooc2</a>

在頁面上定義一個位置。叫做錨點
使用a標簽，跳轉到錨點，頁面直接在這個位置顯示

定義錨點:使用元素的id名稱直接當做錨點名稱

跳轉錨點:<a href="#錨點名稱"></a>

練習:

<h1>西游記全集</h1>   <a href="#c1">快速跳轉到第1章</a> <a href="#c2">快速跳轉到第2章</a> <a href="#c3">快速跳轉到第3章</a> <h3 id="c1">第一章石猴出世</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur debitis ut nihil dignissimos veniam maxime hic sunt porro officiis excepturi nostrum quasi minima sequi explicabo perferendis cupiditate necessitatibus similique blanditiis.</p><h3 id="c2">第二章東海學藝</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur debitis ut nihil dignissimos veniam maxime hic sunt porro officiis excepturi nostrum quasi minima sequi explicabo perferendis cupiditate necessitatibus similique blanditiis.</p><h3 id="c3">第三章龍宮借寶</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur debitis ut nihil dignissimos veniam maxime hic sunt porro officiis excepturi nostrum quasi minima sequi explicabo perferendis cupiditate necessitatibus similique blanditiis.</p>

5 頁面結構標簽

1 初始結構標簽

創建p10.html：

寫好后運行，我們在瀏覽器->右鍵->檢查:
這些都是頁面結構標簽,我們來學習一下:

<html></html> : 用于標記頁面的開始和結束(必需的,不能省略) <head><head> : 頁面的頭部(必需的,不能省略) <body><body> : 頁面的主體(必需的,不能省略)

那為什么之前我們沒寫這幾個結構標簽也可以呢?
其實就像上節的h8標簽一樣,沒有這個標簽,寫錯了html不會報錯,而是會忽略掉.
所以嚴格意義上頁面結構標簽是不能省略的,必須寫,不寫也會默認補出,就像上面的圖片所示

2 我們的第一組頁面結構標簽

所以我們修改下10.html,補全代碼

<html><head></head><body>學子商城哈哈哈123</body> </html>

用HBuilder運行檢查后發現:body里多了script,這是HBuilder給頁面增加了實時刷新的功能
只要我們修改了html的內容,保存,不用刷新瀏覽器,網頁也會自己更新成最新的內容
但注意要通過HBuilder訪問,直接在文件夾雙擊p10.html文件是沒有這個效果的

3 規范寫法

像這樣在html標簽中寫head和body標簽的形式,是一種嵌套的結構
這個結構有規范的寫法:html標簽包含了head標簽和body標簽

我們把外層的標簽稱作父級標簽,里層的標簽稱作子級標簽

子級標簽相對于父級標簽要縮進,具體縮進幾個字符,根據公司的情況決定

我們也可以在HBuilder中自定義制表符的長度:工具->設置->常用配置->如圖

如果一對標簽中的內容只有文字,結束標簽與開始標簽在同一行,不需要換行

如果一對標簽中還有子標簽,結束標簽需要換行

<html> <head></head> <body> <p>學子商城3</p><p>abcd<a>跳轉</a></p></body> </html>

不能在html標簽外寫比如p標簽這樣的內容,即使寫在外面,瀏覽器也會糾正

6 html標簽詳解

1 文檔類型聲明

html標簽的外面可以放且只能放一行代碼:文檔類型聲明
我們需要告訴客戶端瀏覽器,當前頁面使用的是哪個版本的HTML語言 ,聲明文檔的類型

HTML版本歷史

比如XHTML的語法要求就非常嚴格,要求<br/>必須寫/
但HTML5寫<br>即可,無需再寫/ ,這就是版本不同帶來的差異

常見的HTML版本聲明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html> 目前h5使用的就是這個文檔類型聲明,但注意這里沒有數字5

我們可以加一下h5的文檔聲明,有發現區別嗎?

<!DOCTYPE html><html><head></head><body>學子商城</body> </html>

效果:沒加文檔聲明前html鋪滿整個頁面

加了之后只有一行文字的區域變成藍色,說明還是有區別的

2 html標簽的lang屬性

lang屬性:用來指定當前頁面所用的自然語言(language)
可取的值可以參考下面的表格.那這個屬性有什么作用呢?
作用1:為瀏覽器的翻譯功能指定基礎語言
比如甲骨文官網是英文的,那谷歌瀏覽器怎么知道當前是英文的,提示我們是否需要翻譯呢?
要知道,一個中文網頁也有可能出現英文字母,我們不是根據這個來確定的,而是根據lang屬性的值來判斷當前網頁的基礎自然語言是英文,在中國地區,可能需要翻譯

作用2: 無障礙閱讀支持,同一個詞在不同自然語言的讀音不一樣,為盲人的屏幕閱讀器確定基礎發音

7 head標簽詳解

head標簽用于給頁面定義全局信息,緊跟在html標簽之后
我們來介紹幾個head標簽中的常用標簽:

1 title標簽:添加頁面標簽名

title : 頁面的標題
注意:title只能寫一個,并且只能寫在head標簽中,而且title標簽沒有屬性

<!DOCTYPE html> <html lang="zh"><head><title>首頁-學子商城</title></head><body>學子商城</body> </html>

效果:可以看到此標簽的題目已經更改

2 link標簽:添加頁面標簽圖標

就像我們在打開百度網頁的時候,可以看到標簽名前有個小圖片:

那這個圖片是怎么添加的呢?首先,這個圖片的格式必須為ico格式
我們首先來自己制作一個ico圖片:

Win+R輸入mspaint命令打開電腦自帶的畫圖

將圖片的大小重新調整成200*200

隨便畫一個內容,選擇"文件"->另存為->命名成1.png

百度搜索"ico制作"比如:https://www.ico51.cn/
選擇剛剛的1.png文件,大小為32*32,點擊生成,就可以在文件夾找到生成的ico圖片啦

我們給DAY02目錄下新建一個img文件夾,把剛剛生成的favicon.ico圖片放入
這個圖片名是約定俗成的名字,代表的就是瀏覽器窗口左上角圖標常用的文件名

編寫代碼:通過link標簽完成

<!DOCTYPE html> <html lang="zh"><head><title>首頁-學子商城</title><link rel="icon" href="img/favicon.ico"></head><body>學子商城</body> </html>

3 meta標簽:

meta翻譯過來是元數據的意思
(用來描述數據的數據,比如手機的品牌價格顏色都用來描述手機)

meta常用屬性: charset指定編碼
我們在寫頁面的時候需要指定編碼,如果寫和讀時使用的編碼不一致就會出現亂碼的現象

<!DOCTYPE html>  <html><head><title>我是頁面的標題</title><link rel="icon" href="image/favicon.ico"><meta charset="utf-8"/></head><body>學子商城<p>我是段落<a>我是超鏈接</a></p></body> </html>

我們可以查看下京東網站的meta,會發現content屬性,起了個name叫描述和關鍵詞等
這主要是為了比如百度競排提高網站的權重,SEO等,這塊涉及到網絡營銷就不細說了

8 body標簽詳解

body在head之后,包含網頁要顯示給用戶的、除了html和head外的所有主體內容

<!DOCTYPE html> <html><head></head><body bgcolor="black" text="green">第一個網頁</body> </html>

9 課后作業:

1.總結今天學到的所有標簽(可以按這個維度總結):

答案:

文本標簽
b：加粗
i：斜體
u：下劃線
s：刪除線
sup：上標字
sub：下標字
pre：保留原始格式的文字
h1~6：一到六號標題字
p：段落文字
div：最簡單的塊級元素,只有獨占一行的效果,區/塊,使用頻率極高
span：最簡單的行內元素,沒有任何外觀效果,跨距(比如我們可以在一句話選擇幾個字設置其他效果)

圖像和鏈接
img：全稱image，圖像
a：全稱anchor，錨，超鏈接

2.什么是相對地址?什么是絕對地址?下面的地址代表什么?

相對地址：顯示圖片時，必須參考當前頁面所在的目錄與圖片所在目錄的關系
寫出對應關系：
./img/1.png
./1.png
img/1.png
1.png
…/img/1.png

答案:
./img/1.png 當前目錄下的img目錄下的1.png
./1.png 當前目錄下的1.png
img/1.png 省略./ 當前目錄下img目錄下的1.png
1.png 省略./ 當前目錄下的1.png
…/img/1.png 上一級目錄下img目錄下的1.png

絕對地址：顯示圖片時，指定其所在服務器的完整路徑
寫出對應關系：
https://tmooc.cn/1.png
//tmooc.cn/1.png
http://127.0.0.1/1.png
//127.0.0.1/1.png

答案:
https://tmooc.cn/1.png 其它服務器上的1.png
//tmooc.cn/1.png https:可以省略
http://127.0.0.1/1.png 本地服務器下的1.png
//127.0.0.1/1.png https:可以省略

3. 完成:韓梅梅的個人簡歷

答案：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><h3>基本信息</h3><p>姓名:韓梅梅</p><p>性別:女</p><p>愛好:敲代碼</p><p>住址:高老莊</p><hr><h3>學習經歷</h3><p>小學就讀于...</p><p>中學就讀于...</p><p>大學就讀于...</p><hr><h3>從業經驗</h3><p>2018~2019就職于...</p><p>2018~2019就職于...</p><p>2018~2019就職于...</p><p>2018~2019就職于...</p><hr><h3>過往經歷</h3><p>扶老奶奶過馬路</p><p>交給警察叔叔1分錢</p></body> </html>

前端圣經級網站MDN:

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

總結

以上是生活随笔為你收集整理的一起学WEB HTML5 第1讲的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：深入理解 latch: cache bu
下一篇： 2017年html5行业报告,云适配发布