HTML是什么？

、HTML是什么？

HTML(Hyper Text Mark-up Language )即是超文本標(biāo)記語言，是 WWW 的描述語言，由 Tim Berners-lee提出。通過使用標(biāo)記標(biāo)簽來描述頁面文檔結(jié)構(gòu)和表現(xiàn)形式的一種語言，再由瀏覽器進(jìn)行解析，然后把結(jié)果展示在網(wǎng)頁上。HTML標(biāo)簽是網(wǎng)頁構(gòu)成的基礎(chǔ)，我們所見到的幾乎所有網(wǎng)頁都離不開HTML，所以學(xué)習(xí)HTML可以算是基礎(chǔ)中的基礎(chǔ)了。

HTML的英文全稱是Hypertext Marked Language，中文叫做“超文本標(biāo)記語言”。
和一般文本的不同的是，一個(gè)HTML文件不僅包含文本內(nèi)容，還包含一些Tag，中文稱“標(biāo)記”。
一個(gè)HTML文件的后綴名是.htm或者是.html。
HTML是大小寫不敏感的,HTML與html是一樣的
用文本編輯器就可以編寫HTML文件。

/一、網(wǎng)頁

//a:什么是網(wǎng)頁？

網(wǎng)站是指因特網(wǎng)根據(jù)一定規(guī)則，使用HTML等制作的用于展示特定內(nèi)容相關(guān)的網(wǎng)頁集合。

網(wǎng)頁是網(wǎng)站的一‘頁’，通常是HTML格式的文件，它要通過瀏覽器閱讀。

網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，它通常由圖片，鏈接，文件，聲音，視頻等元素組成，通常我們看到的網(wǎng)頁。

常以.htm 或 .html后綴結(jié)尾的文件，因此將其俗稱為HTML文件

//b:什么是html?

HTML指的是超文本標(biāo)記語言，它是用來描述網(wǎng)頁的一種語言。

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

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

所謂超文本，有2層含義

1、它可以加入圖片，聲音，動畫，多媒體等內(nèi)容（超越了文本限制）。

2、它還可以從一個(gè)文件跳轉(zhuǎn)到另外一個(gè)文件，與世界各地主機(jī)的文件連接（超級鏈接文本）。

//c:網(wǎng)頁的形成？

網(wǎng)頁是由元素組成，這些元素利用html標(biāo)簽描述出來，然后通過瀏覽器解析來顯示給用戶的

網(wǎng)頁總結(jié)：網(wǎng)頁是圖片，鏈接，文字，聲音，視頻等元素組成，其實(shí)就是一個(gè)html文件（后綴名為html ）

//d:常用的瀏覽器

網(wǎng)頁是通過瀏覽器來展示的，關(guān)于瀏覽器我們要介紹下面兩點(diǎn)：

1、常用瀏覽器

瀏覽器是網(wǎng)頁顯示，運(yùn)行平臺，常用的瀏覽器有IE、火狐、谷歌、safari和Opera等。平時(shí)稱為五大瀏覽器。

2、瀏覽器內(nèi)核

瀏覽器內(nèi)核:負(fù)責(zé)讀取網(wǎng)頁內(nèi)容，整理訊息，計(jì)算網(wǎng)頁的顯示方式并顯示頁面。

//e:Web標(biāo)準(zhǔn)

Web標(biāo)準(zhǔn)是由W3C組織和其他標(biāo)準(zhǔn)化組織制定一系列標(biāo)準(zhǔn)的集合，W3C（萬維網(wǎng)聯(lián)盟）是國際最著名的標(biāo)準(zhǔn)化組織。

接下來圍繞web標(biāo)準(zhǔn)，我們學(xué)習(xí)以下兩點(diǎn)：

1、我們需要web標(biāo)準(zhǔn)

瀏覽器不同，它們顯示頁面或者排版有些許差異

遵循Web標(biāo)準(zhǔn)除了可以讓不同的開發(fā)人員寫出的頁面更加標(biāo)準(zhǔn)，更統(tǒng)一外，還有以下優(yōu)點(diǎn)：

讓W(xué)eb的發(fā)展前景更廣闊

內(nèi)容能被更廣泛的設(shè)備訪問

更容易被搜索引擎搜索

降低網(wǎng)站流量費(fèi)用

使網(wǎng)站更易于維護(hù)

提高頁面瀏覽速度

2、Web標(biāo)準(zhǔn)的構(gòu)成

主要包括結(jié)構(gòu)，表現(xiàn)和行為三個(gè)方面

結(jié)構(gòu)結(jié)構(gòu)用于對網(wǎng)頁元素進(jìn)行整理和分類，現(xiàn)階段主要學(xué)的是HTML
表現(xiàn)表現(xiàn)用于設(shè)置網(wǎng)頁元素的版式，顏色，大小等外觀樣式，主要指的是CSS
行為行為是指網(wǎng)頁模型的定義及交互的編寫，現(xiàn)階段主要學(xué)的是javascript

Web標(biāo)準(zhǔn)提出的最佳體驗(yàn)方案：結(jié)構(gòu)，樣式，行為相分離。

簡單理解：結(jié)構(gòu)寫到HTML文件中，表現(xiàn)寫到CSS文件中，行為寫到JavaScript文件中。

、web概念概述

1.1 JavaWeb：使用Java語言開發(fā)基于互聯(lián)網(wǎng)的項(xiàng)目

1.2 軟件架構(gòu)：

1.2.1 C/S: Client/Server 客戶端/服務(wù)器端

在用戶本地有一個(gè)客戶端程序，在遠(yuǎn)程有一個(gè)服務(wù)器端程序

如：QQ，迅雷...

優(yōu)點(diǎn)：用戶體驗(yàn)好

缺點(diǎn)：開發(fā)、安裝，部署，維護(hù) 麻煩

1.2.2 B/S: Browser/Server 瀏覽器/服務(wù)器端

只需要一個(gè)瀏覽器，用戶通過不同的網(wǎng)址(URL)，客戶訪問不同的服務(wù)器端程序

優(yōu)點(diǎn)：開發(fā)、安裝，部署，維護(hù) 簡單

缺點(diǎn)：如果應(yīng)用過大，用戶的體驗(yàn)可能會受到影響，對硬件要求過高

二、B/S架構(gòu)詳解

2.1 資源分類：

2.1.1 靜態(tài)資源：使用靜態(tài)網(wǎng)頁開發(fā)技術(shù)發(fā)布的資源。

特點(diǎn)：

所有用戶訪問，得到的結(jié)果是一樣的。

如：文本，圖片，音頻、視頻, HTML,CSS,JavaScript

如果用戶請求的是靜態(tài)資源，那么服務(wù)器會直接將靜態(tài)資源發(fā)送給瀏覽器。瀏覽器中內(nèi)置了靜態(tài)資源的解析引擎，可以展示靜態(tài)資源

HTML：用于搭建基礎(chǔ)網(wǎng)頁，展示頁面的內(nèi)容

CSS：用于美化頁面，布局頁面

JavaScript：控制頁面的元素，讓頁面有一些動態(tài)的效果

2.1.2 動態(tài)資源：使用動態(tài)網(wǎng)頁及時(shí)發(fā)布的資源。

特點(diǎn)：

所有用戶訪問，得到的結(jié)果可能不一樣。

如：jsp/servlet,php,asp...

如果用戶請求的是動態(tài)資源，那么服務(wù)器會執(zhí)行動態(tài)資源，轉(zhuǎn)換為靜態(tài)資源，再發(fā)送給瀏覽器

2.1.3 注意：我們要學(xué)習(xí)動態(tài)資源，必須先學(xué)習(xí)靜態(tài)資源！

三、HTML

3.1 概念：是最基礎(chǔ)的網(wǎng)頁開發(fā)語言

Hyper Text Markup Language 超文本標(biāo)記語言

超文本：超文本是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網(wǎng)狀文本.

標(biāo)記語言:

由標(biāo)簽構(gòu)成的語言。<標(biāo)簽名稱> 如 html，xml

標(biāo)記語言不是編程語言

3.2 快速入門：

3.2.1 語法：

1. 創(chuàng)建html文檔，后綴名為.html 或者 .htm

2. 標(biāo)簽分類：

圍堵標(biāo)簽：有開始標(biāo)簽和結(jié)束標(biāo)簽。如 <html> </html>

自閉和標(biāo)簽：開始標(biāo)簽和結(jié)束標(biāo)簽在一起。如 <br/>

3. 標(biāo)簽可以嵌套：

需要正確嵌套，不能你中有我，我中有你

錯(cuò)誤：<a><b></a></b>

正確：<a><b></b></a>

4. 在開始標(biāo)簽中可以定義屬性。屬性是由鍵值對構(gòu)成，值需要用引號(單雙都可)引起來

5. html的標(biāo)簽不區(qū)分大小寫，但是建議使用小寫。

3.2.2 代碼：

<html>

<head>

<title>title</title>

</head>

<body>

<FONT color='red'>Hello World</font><br/>

<font color='green'>Hello World</font>

</body>

</html>

3.3 標(biāo)簽學(xué)習(xí)：

3.3.1 文件標(biāo)簽：構(gòu)成html最基本的標(biāo)簽

1、html:html文檔的根標(biāo)簽

2、head：頭標(biāo)簽。用于指定html文檔的一些屬性。引入外部的資源

3、title：標(biāo)題標(biāo)簽。

4、body：體標(biāo)簽

5、<!DOCTYPE html>：html5中定義該文檔是html文檔

3.3.2 文本標(biāo)簽：和文本有關(guān)的標(biāo)簽

1、注釋：

2、<h1> to <h6>：標(biāo)題標(biāo)簽，h1~h6:字體大小逐漸遞減

3、<p>：段落標(biāo)簽

4、<br>：換行標(biāo)簽

5、<hr>：展示一條水平線

文本標(biāo)簽屬性：

color：顏色

width：寬度

size：高度

align：對其方式

center：居中

left：左對齊

right：右對齊

6、<b>：字體加粗

7、<i>：字體斜體

8、<font>:字體標(biāo)簽

9、<center>:文本居中

字體標(biāo)簽屬性：

color：顏色

size：大小

face：字體

屬性定義：

color：

1. 英文單詞：red,green,blue

2. rgb(值1，值2，值3)：值的范圍：0~255 如 rgb(0,0,255)

3. #值1值2值3：值的范圍：00~FF之間。如： #FF00FF

width：

1. 數(shù)值：width='20' ,數(shù)值的單位，默認(rèn)是 px(像素)

2. 數(shù)值%：占比相對于父元素的比例

3.3.3 圖片標(biāo)簽：

img：展示圖片

屬性：src：指定圖片的位置

相對路徑：以.開頭的路徑

./：代表當(dāng)前目錄

../:代表上一級目錄

代碼舉例：

3.3.4 列表標(biāo)簽：

有序列表：

ol:

li:

無序列表：

ul:

li:

3.3.5 鏈接標(biāo)簽：

a:定義一個(gè)超鏈接

屬性：

href：指定訪問資源的URL(統(tǒng)一資源定位符)

target：指定打開資源的方式

_self:默認(rèn)值，在當(dāng)前頁面打開

_blank：在空白頁面打開

代碼：

3.3.6 div和span：

div:每一個(gè)div占滿一整行。塊級標(biāo)簽

span：文本信息在一行展示，行內(nèi)標(biāo)簽內(nèi)聯(lián)標(biāo)簽

3.3.7 語義化標(biāo)簽：html5中為了提高程序的可讀性，提供了一些標(biāo)簽。

<header>：頁眉

<footer>：頁腳

3.3.8 表格標(biāo)簽：

table：定義表格

屬性：

width：寬度

border：邊框

cellpadding：定義內(nèi)容和單元格的距離

cellspacing：定義單元格之間的距離。如果指定為0，則單元格的線會合為一條、

bgcolor：背景色

align：對齊方式

tr：定義行

bgcolor：背景色

align：對齊方式

td：定義單元格

colspan：合并列

rowspan：合并行

th：定義表頭單元格

<caption>：表格標(biāo)題

<thead>：表示表格的頭部分

<tbody>：表示表格的體部分

<tfoot>：表示表格的腳部分

在線咨詢

上一篇：Thymeleaf動態(tài)菜單渲染：程序員的進(jìn)階指南
下一篇：springboot + shiro 權(quán)限注解、統(tǒng)一異常處理、請求亂碼解決

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML是什么？

、HTML是什么？

您的項(xiàng)目需求