前言

今天開始我們就要進(jìn)行第2個階段的學(xué)習(xí)啦,今天的學(xué)習(xí)內(nèi)容一共有以下幾個部分:

HTML5 basic 所有網(wǎng)頁的結(jié)構(gòu)，數(shù)據(jù)都是用html5來搭建

Ajax異步的數(shù)據(jù)交互 ajax幫助我們異步連接服務(wù)器，發(fā)送請求，并接收響應(yīng)

ajax的項(xiàng)目 用戶管理—登錄，查詢，注冊，修改，刪除，用戶名重復(fù)驗(yàn)證

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

Bootstrap框架
①封裝很多css，讓我們快速開發(fā)
②封裝了響應(yīng)式布局

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

今日目標(biāo):

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

其實(shí)今天的內(nèi)容是非常容易掌握的,下面一起來開始今天的學(xué)習(xí)吧~

1 WEB發(fā)展史(了解)

1.1發(fā)展過程

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

Internet的歷史

196X：美國軍方創(chuàng)建了ARPNET網(wǎng)，就是Internet的前身
197X：FTP協(xié)議（文件傳輸協(xié)議）誕生，可以實(shí)現(xiàn)“一對一的信息傳輸”
198X：SMTP協(xié)議（簡單郵件傳輸協(xié)議）誕生，可以實(shí)現(xiàn)“一對多的信息傳輸”
1991：HTTP協(xié)議（超文本傳輸協(xié)議）誕生，標(biāo)志著Web正式誕生，可以實(shí)現(xiàn)“一對全網(wǎng)的信息傳輸”

超文本

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

以上這些內(nèi)容做一個簡單的了解即可,我們來進(jìn)一步了解下WEB

1.2 Web簡介

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

1.3 Web的工作原理

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

網(wǎng)頁采用HTML編寫出來

瀏覽器連接到WEB服務(wù)器并獲取網(wǎng)頁

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

1.4 Web與Internet的關(guān)系

Web是運(yùn)行在Internet之上最流行的應(yīng)用之一,Internet為Web提供了網(wǎng)絡(luò)環(huán)境
Web的出現(xiàn),極大地推動了Internet的普及與推廣

1.5 WEB頁面的運(yùn)行需要兩種軟件:

1.程序員編寫網(wǎng)頁的工具–網(wǎng)頁編輯器

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

2.用戶瀏覽網(wǎng)頁的工具–網(wǎng)頁瀏覽器

Microsoft IE / Edge（Chrome內(nèi)核）
GoogleChrome（Webkit內(nèi)核+V8內(nèi)核）
Netscape Navigator/Mozilla Firefox
AppleSafari（Webkit內(nèi)核）

目前中國沒有自主的瀏覽器內(nèi)核,主要推薦使用谷歌和火狐
我們目前學(xué)習(xí)使用到的就是HBuilderX與谷歌瀏覽器

2 HTML概述

2.1 前端開發(fā)的3個基礎(chǔ)語言

HTML–用于定義頁面的內(nèi)容

CSS–用于控制頁面的樣式

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

2.2 基本概念

1.什么是HTML?

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

練習(xí)1: 初識HTML

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

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

編寫p1.html中的代碼:

寫一些普通的文字

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

2.什么是標(biāo)記?

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

2.3 HTML常用標(biāo)簽

1.文字多種效果:b/i/u/s/sub/sup標(biāo)簽

在剛剛的p1.html中繼續(xù)編寫內(nèi)容,比如想給文字進(jìn)行加粗,就需要使用到標(biāo)簽

默認(rèn)格式的文字 <b> 加粗的文字 </b> 后續(xù)文字

效果:只有被b標(biāo)簽包裹的內(nèi)容才有加粗的效果 瀏覽器默認(rèn)內(nèi)容都在同一行顯示

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

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

3. 上標(biāo)字 下標(biāo)字的效果:

默認(rèn)格式的文字 X²上標(biāo)字 Z₁下標(biāo)字 后續(xù)文字

2.br標(biāo)簽

換行效果實(shí)現(xiàn)

在p1.html中編寫古詩,結(jié)果發(fā)現(xiàn),4句詩都在同一行顯示

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

瀏覽器的一些小特性:

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

那我們想要換行或者多個空格的效果,該怎么實(shí)現(xiàn)呢?

換行符可以使用單標(biāo)記標(biāo)簽<br>標(biāo)簽來實(shí)現(xiàn) 空格符可以使用&nbsp;轉(zhuǎn)義字符來實(shí)現(xiàn)

修改一下剛的代碼:

<br> 靜夜思&nbsp;&nbsp;&nbsp;李白<br> 床前明月光<br> 疑似地上霜<br> 舉頭望明月<br> 低頭思故鄉(xiāng)<br>

3.轉(zhuǎn)義符號

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

<李白> <tom> <張三>

結(jié)果卻發(fā)現(xiàn):兩個中文的名字正確顯示,英文數(shù)據(jù)沒有顯示,這是為什么呢?
因?yàn)闉g覽器以為是一個標(biāo)簽,但是這個標(biāo)簽它不認(rèn)識,所以沒有報(bào)錯,但是給忽略了…

那如果我們就想在網(wǎng)頁上顯示中括號,就需要使用到兩個轉(zhuǎn)義符號:&lt;表示< &gt;表示>

<李白> &lt;tom&gt; <張三>

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

<br>注冊商標(biāo)register: &reg; <br>版權(quán)聲明copyright: &copy; <br>商標(biāo)trademark: &trade; <br>關(guān)閉符號90°角: &times; <br>帶圈的關(guān)閉符號: &otimes;

&copy;2017&nbsp;&lt;達(dá)內(nèi)科技有限公司&gt;&nbsp;版權(quán)所有

3 HBuilder工具的使用

1.HBuilder的下載

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

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

根據(jù)自己的系統(tǒng)選擇,但一定要選擇App開發(fā)版,它功能比較完善,不要選標(biāo)準(zhǔn)版

選好了點(diǎn)擊下載即可

2.HBuilder的解壓

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

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

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

3. HBuilder無需安裝,解壓完畢雙擊可執(zhí)行文件圖標(biāo)即可使用~

3.HBuilder的使用

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

進(jìn)入后有一個自述,可以選擇綠色的區(qū)域把它關(guān)閉掉

我們可以將外部的文件夾直接拖拽到HBuilder中使用
比如這里就可以把我們之前創(chuàng)建的DAY01文件夾整個拖進(jìn)來
可以看到文件夾里和HBuilder中的結(jié)構(gòu)是一模一樣的

創(chuàng)建文件夾:選中DAY01,鼠標(biāo)右鍵,新建 目錄
輸入新文件夾的名字,回車,即可創(chuàng)建

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

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

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

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

4.HBuilder的其他使用細(xì)節(jié)

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

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

我們可以拖拽或者點(diǎn)這個小按鈕隱藏左邊欄

Ctrl+鼠標(biāo)滾輪可以調(diào)整編輯頁面中的字體大小

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

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

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

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

5.HBuilder常用快捷鍵：

Ctrl+R：在瀏覽器中運(yùn)行當(dāng)前頁面文件

Ctrl+↑/↓：快速移動當(dāng)前行代碼

Ctrl+D：快速刪除當(dāng)前行代碼

Ctrl+C/V：快速復(fù)制并粘貼當(dāng)前行代碼

Ctrl+/：添加/取消當(dāng)前行的注釋

4 HTML常用標(biāo)簽

在學(xué)習(xí)標(biāo)簽之前,我們需要認(rèn)識HTML的注釋:

注釋是不會被瀏覽器解析運(yùn)行的文本<!-- 這里是注釋 -->

注意:注釋不能嵌套注釋

在<>內(nèi)部不能有注釋

1.pre標(biāo)簽

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

練習(xí)1: 編寫古詩2

<!-- 注釋:渲染時保留源代碼中的格式 --> <pre>靜夜思李白 窗前明月光 疑似地上霜 舉頭望明月 低頭思故鄉(xiāng) </pre>

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

練習(xí)2: 在網(wǎng)頁上按照如下格式顯示下面的內(nèi)容:

<!-- 答案:注意要加pre標(biāo)簽哦 --> <pre> let i = 10; i++; console.log(i); </pre>

但注意:pre標(biāo)簽無法實(shí)現(xiàn)字體的加粗等效果,還是需要結(jié)合其他之前的標(biāo)簽一起來使用

2.h系列標(biāo)簽

h標(biāo)簽: 引導(dǎo)文字、標(biāo)題字

練習(xí)1: 使用h標(biāo)簽

<!-- h標(biāo)簽:heading 引導(dǎo)文字 標(biāo)題字 --> <h1>靜夜思</h1> <h2>李白</h2> 窗前明月光 疑似地上霜 舉頭望明月 低頭思故鄉(xiāng)

效果:被h標(biāo)簽包裹的內(nèi)容變大加粗,并且獨(dú)占一行,數(shù)字

練習(xí)2:使用h標(biāo)簽包裹孟浩然的春曉,編寫并完成下面的問題:

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

<!-- 答案1:h后數(shù)字越大,字體越小,最大到h6,h4的字體大小與普通文本一樣,只是加粗了 --> <!-- 答案2:寫了不存在的h8標(biāo)簽并不會報(bào)錯,沒有特殊的顯示效果,瀏覽器會直接忽略 --> <h1>春曉</h1> <h2>孟浩然</h2> <h3>春眠不覺曉</h3> <h4>處處聞啼鳥</h4> <h5>夜來風(fēng)雨聲</h5> <h6>花落知多少</h6> 我是普通文字 <h8> 哈哈哈 </h8>

瀏覽器效果:

面試題:97個HTML標(biāo)簽分為哪兩類？各有哪些？

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

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

3.p標(biāo)簽

p標(biāo)簽: paragraph段落

練習(xí): 使用p標(biāo)簽,檢查看下效果如何

<!-- p標(biāo)簽也是塊級元素 獨(dú)占一行 p元素默認(rèn)有上下行間距--> <p>窗前明月光</p> <p>疑似地上霜</p> <p>舉頭望明月</p> <p>低頭思故鄉(xiāng)</p>

什么是屬性?

屬性:也稱為特征，描述標(biāo)簽的某一方面的特點(diǎn)
寫法:<標(biāo)簽名 屬性名1 = “屬性值1” 屬性名2 = “屬性值2”> 段落內(nèi)容 </標(biāo)簽名>

屬性的聲明必須位于開始標(biāo)記里

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

多個屬性之前不區(qū)分先后順序

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

屬性值要包含在引號中

<!-- 注意屬性值必須使用單/雙引號包裹 --> <!-- <h2 gender="男" age="18" height="180">李白</h2> --> <!-- align對齊方式 right/left/center 靠右/靠左/居中 --> <!-- 按住Ctrl，光標(biāo)點(diǎn)多個位置可以一起編輯，Esc退出 --> <h1 align="center">靜夜思 李白</h1> <p align="center">床前明月光</p> <p align="center">疑似地上霜</p> <p align="center">舉頭望明月</p> <p align="center">低頭思故鄉(xiāng)</p> <!-- align屬性只是湊巧這兩個標(biāo)簽?zāi)苡?比如pre b標(biāo)簽等就沒有這個屬性 --> <!--所有標(biāo)簽都有的4個通用屬性,后面會學(xué):id class style title-->

4. hr標(biāo)簽

hr標(biāo)簽:用于在頁面上創(chuàng)建一條水平的分割線,它是一個空標(biāo)記,hr后面的文本會出現(xiàn)在新段落中
常用屬性:color顏色 width占據(jù)頁面寬度 size線條粗細(xì) align位置信息

<!-- hr標(biāo)簽 --> <!-- 寫Lorem單詞Tab補(bǔ)全段落 --> 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標(biāo)簽

div標(biāo)簽: division區(qū)/塊,是一個最簡單的塊級元素,只有獨(dú)占一行的效果,沒有其他效果

練習(xí): 完成靜夜思,實(shí)現(xiàn)下圖的效果

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

<h1>靜夜思</h1> <h2>李白</h2> <div>窗前明月光</div> <div>疑似地上霜</div> <div>舉頭望明月</div> <div>低頭思故鄉(xiāng)</div> <!-- span是行內(nèi)元素,不會換行哦 -->

6.圖像

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

練習(xí): 目錄如下圖,創(chuàng)建p06.html文件,在頁面中呈現(xiàn)image文件夾下的3張圖片

<!-- 在頁面中呈現(xiàn)圖片 --> <!-- src:全稱source,來源/源頭 --> <!-- 小知識:計(jì)算機(jī)中 一個 . 表示"當(dāng)前目錄" 兩個 .. 表示"上一級目錄" ./ 表示當(dāng)前目錄的下一級 比如.表示DAY01 ./image表示DAY01目錄下的image目錄 --> <img src="./image/1.png" /> <img src="./image/2.png" /> <img src="image/3.png" /><!-- 計(jì)算機(jī)中./可以省略 --> <!-- 效果:3張圖片在同一行,是行內(nèi)元素 --> <!-- alt:alternative替代物,圖片無法找到時顯示的替代文字 -->

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

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

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

練習(xí): 我們復(fù)制一張網(wǎng)頁上圖片的鏈接,讓這張圖片分別顯示在3個頁面中

<!-- 在3個html中的圖片鏈接是一樣的,不會因?yàn)槲募牟煌?--> <!-- 絕對地址:其他服務(wù)器 --> <img src="https://cdn.tmooc.cn/bsfile//courseImg///f2b39759be9842ae86cfd62294a8e665.png" /> <!-- 為什么呢?因?yàn)檫@個是絕對地址,指定的是圖片所在服務(wù)器的完整路徑 --> <!-- 絕對地址:本地服務(wù)器 --> <img src="http://127.0.0.1:8848/DAY01/image/1.png" /> <!-- 絕對地址:協(xié)議名可以省略不寫,注意//不能省略哦 --> <img src="//127.0.0.1:8848/DAY01/image/1.png" />

7.超鏈接

a標(biāo)簽:全稱anchor錨,超鏈接

練習(xí):創(chuàng)建p8.html,訪問如下資源:

<!-- 超鏈接 --> <a href="p1.html">今日的第1個頁面</a> <a href="p3.html">今日的第3個頁面</a><!-- 使用HBuilder打開時的地址 --> <!-- http://127.0.0.1:8848/DAY01/p3.html --> <!-- 直接在文件夾中雙擊打開網(wǎng)頁 --> <!-- file:///D:/WEB_CODE/DAY01_PM/DAY01/p3.html --><!-- <a href="www.baidu.com">跳轉(zhuǎn)到百度</a> --> <a href="https://www.baidu.com/">跳轉(zhuǎn)到百度</a> <a href="https://www.tmooc.cn/">跳轉(zhuǎn)到tmooc</a> <!-- 協(xié)議名和冒號可以省略不寫，但是雙斜杠不可以省略 --> <a href="//www.tmooc.cn/">跳轉(zhuǎn)到tmooc2</a>

在頁面上定義一個位置。叫做錨點(diǎn)
使用a標(biāo)簽，跳轉(zhuǎn)到錨點(diǎn)，頁面直接在這個位置顯示

定義錨點(diǎn):使用元素的id名稱直接當(dāng)做錨點(diǎn)名稱

跳轉(zhuǎn)錨點(diǎn):<a href="#錨點(diǎn)名稱"></a>

練習(xí):

<h1>西游記全集</h1> <!-- 我們還可以通過超鏈接跳轉(zhuǎn)到本頁的其他位置 --> <!-- #id值：表示跳轉(zhuǎn)到對應(yīng)id所在的位置 --> <a href="#c1">快速跳轉(zhuǎn)到第1章</a> <a href="#c2">快速跳轉(zhuǎn)到第2章</a> <a href="#c3">快速跳轉(zhuǎn)到第3章</a><!-- 輸入Lorem Tab補(bǔ)全一段文字 --> <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">第二章 東海學(xué)藝</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 頁面結(jié)構(gòu)標(biāo)簽

1 初始結(jié)構(gòu)標(biāo)簽

創(chuàng)建p10.html：

寫好后運(yùn)行，我們在瀏覽器->右鍵->檢查:
這些都是頁面結(jié)構(gòu)標(biāo)簽,我們來學(xué)習(xí)一下:

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

那為什么之前我們沒寫這幾個結(jié)構(gòu)標(biāo)簽也可以呢?
其實(shí)就像上節(jié)的h8標(biāo)簽一樣,沒有這個標(biāo)簽,寫錯了html不會報(bào)錯,而是會忽略掉.
所以嚴(yán)格意義上頁面結(jié)構(gòu)標(biāo)簽是不能省略的,必須寫,不寫也會默認(rèn)補(bǔ)出,就像上面的圖片所示

2 我們的第一組頁面結(jié)構(gòu)標(biāo)簽

所以我們修改下10.html,補(bǔ)全代碼

<!-- html標(biāo)簽：用于標(biāo)記頁面的開始和結(jié)束，必須的，不能省略的 --> <!-- head標(biāo)簽：頁面的頭部，必須的，不能省略的 --> <!-- body標(biāo)簽：頁面的主體內(nèi)容，必須的，不能省略的 --> <html><head></head><body>學(xué)子商城哈哈哈123</body> </html>

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

3 規(guī)范寫法

像這樣在html標(biāo)簽中寫head和body標(biāo)簽的形式,是一種嵌套的結(jié)構(gòu)
這個結(jié)構(gòu)有規(guī)范的寫法:html標(biāo)簽包含了head標(biāo)簽和body標(biāo)簽

我們把外層的標(biāo)簽稱作父級標(biāo)簽,里層的標(biāo)簽稱作子級標(biāo)簽

子級標(biāo)簽相對于父級標(biāo)簽要縮進(jìn),具體縮進(jìn)幾個字符,根據(jù)公司的情況決定

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

如果一對標(biāo)簽中的內(nèi)容只有文字,結(jié)束標(biāo)簽與開始標(biāo)簽在同一行,不需要換行

如果一對標(biāo)簽中還有子標(biāo)簽,結(jié)束標(biāo)簽需要換行

<!-- 我們可以通過Ctrl+K 調(diào)整代碼格式 --> <!-- 嵌套結(jié)構(gòu),子級要縮進(jìn),Tab制表符的長度我們可以自行設(shè)置 --> <html> <!-- 父標(biāo)簽 --><head></head> <!-- 子標(biāo)簽1 --><body> <!-- 子標(biāo)簽2 --><p>學(xué)子商城3</p><p>abcd<a>跳轉(zhuǎn)</a></p></body> </html>

不能在html標(biāo)簽外寫比如p標(biāo)簽這樣的內(nèi)容,即使寫在外面,瀏覽器也會糾正

6 html標(biāo)簽詳解

1 文檔類型聲明

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

HTML版本歷史

比如XHTML的語法要求就非常嚴(yán)格,要求<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使用的就是這個文檔類型聲明,但注意這里沒有數(shù)字5

我們可以加一下h5的文檔聲明,有發(fā)現(xiàn)區(qū)別嗎?

<!-- html標(biāo)簽的外面可以放且只能放一行代碼:文檔類型聲明 --> <!-- 我們需要告訴客戶端瀏覽器,當(dāng)前頁面使用的是哪個版本的HTML語言 --> <!-- document:文檔 type:類型 --> <!-- 注意它既不是標(biāo)簽也不是注釋,作用:聲明文檔的類型,一般大寫 --> <!DOCTYPE html><html><head></head><body>學(xué)子商城</body> </html>

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

加了之后只有一行文字的區(qū)域變成藍(lán)色,說明還是有區(qū)別的

2 html標(biāo)簽的lang屬性

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


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

7 head標(biāo)簽詳解

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

1 title標(biāo)簽:添加頁面標(biāo)簽名

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

<!DOCTYPE html> <html lang="zh"><head><!-- title:頁面的標(biāo)題 --><title>首頁-學(xué)子商城</title></head><body>學(xué)子商城</body> </html>

效果:可以看到此標(biāo)簽的題目已經(jīng)更改

2 link標(biāo)簽:添加頁面標(biāo)簽圖標(biāo)

就像我們在打開百度網(wǎng)頁的時候,可以看到標(biāo)簽名前有個小圖片:

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

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

將圖片的大小重新調(diào)整成200*200

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

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

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

編寫代碼:通過link標(biāo)簽完成

<!DOCTYPE html> <html lang="zh"><head><title>首頁-學(xué)子商城</title><!-- head標(biāo)簽中不允許出現(xiàn)img元素!!! --><!-- 標(biāo)簽link:(鏈接一個外部的資源文件) --><!-- 屬性rel:relationship,關(guān)系 --><!-- 按住Alt點(diǎn)鏈接,如果變色可以跳轉(zhuǎn)過去說明鏈接正確 --><link rel="icon" href="img/favicon.ico"></head><body>學(xué)子商城</body> </html>

3 meta標(biāo)簽:

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

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

<!-- html標(biāo)簽：用于標(biāo)記頁面的開始和結(jié)束，必須的，不能省略的 --> <!-- head標(biāo)簽：頁面的頭部，必須的，不能省略的 --> <!-- body標(biāo)簽：頁面的主體內(nèi)容，必須的，不能省略的 --> <!-- html標(biāo)簽外面要加只能加一句文檔聲明，別的內(nèi)容都在html中 --> <!DOCTYPE html> <!-- h5的文檔聲明 --> <html><head><!-- 用來顯示頁面的標(biāo)題，必須寫在head標(biāo)簽中而且只能寫1個 title標(biāo)簽沒有屬性 --><title>我是頁面的標(biāo)題</title><link rel="icon" href="image/favicon.ico"><meta charset="utf-8"/></head><body>學(xué)子商城<p>我是段落<a>我是超鏈接</a></p></body> </html>

我們可以查看下京東網(wǎng)站的meta,會發(fā)現(xiàn)content屬性,起了個name叫描述和關(guān)鍵詞等
這主要是為了比如百度競排提高網(wǎng)站的權(quán)重,SEO等,這塊涉及到網(wǎng)絡(luò)營銷就不細(xì)說了

8 body標(biāo)簽詳解

body在head之后,包含網(wǎng)頁要顯示給用戶的、除了html和head外的所有主體內(nèi)容

<!DOCTYPE html> <html><head></head><body bgcolor="black" text="green">第一個網(wǎng)頁</body> </html>

9 課后作業(yè):

1.總結(jié)今天學(xué)到的所有標(biāo)簽(可以按這個維度總結(jié)):

答案:

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

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

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

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

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

絕對地址：顯示圖片時，指定其所在服務(wù)器的完整路徑
寫出對應(yīng)關(guān)系：
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 其它服務(wù)器上的1.png
//tmooc.cn/1.png https:可以省略
http://127.0.0.1/1.png 本地服務(wù)器下的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>學(xué)習(xí)經(jīng)歷</h3><p>小學(xué)就讀于...</p><p>中學(xué)就讀于...</p><p>大學(xué)就讀于...</p><hr><h3>從業(yè)經(jīng)驗(yàn)</h3><p>2018~2019就職于...</p><p>2018~2019就職于...</p><p>2018~2019就職于...</p><p>2018~2019就職于...</p><hr><h3>過往經(jīng)歷</h3><p>扶老奶奶過馬路</p><p>交給警察叔叔1分錢</p></body> </html>

前端圣經(jīng)級網(wǎng)站MDN:

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。