整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
HTML(Hyper Text Mark-up Language )即是超文本標記語言，是 WWW 的描述語言，由 Tim Berners-lee提出。通過使用標記標簽來描述頁面文檔結構和表現形式的一種語言，再由瀏覽器進行解析，然后把結果展示在網頁上。HTML標簽是網頁構成的基礎，我們所見到的幾乎所有網頁都離不開HTML，所以學習HTML可以算是基礎中的基礎了。
/一、網頁
//a:什么是網頁？
網站是指因特網根據一定規則，使用HTML等制作的用于展示特定內容相關的網頁集合。
網頁是網站的一‘頁’，通常是HTML格式的文件，它要通過瀏覽器閱讀。
網頁是構成網站的基本元素，它通常由圖片，鏈接，文件，聲音，視頻等元素組成，通常我們看到的網頁。
常以.htm 或 .html后綴結尾的文件，因此將其俗稱為HTML文件
//b:什么是html?
HTML指的是超文本標記語言，它是用來描述網頁的一種語言。
HTML不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽
所謂超文本，有2層含義
1、它可以加入圖片，聲音，動畫，多媒體等內容（超越了文本限制）。
2、它還可以從一個文件跳轉到另外一個文件，與世界各地主機的文件連接（超級鏈接文本）。
//c:網頁的形成？
網頁是由元素組成，這些元素利用html標簽描述出來，然后通過瀏覽器解析來顯示給用戶的
網頁總結：網頁是圖片，鏈接，文字，聲音，視頻等元素組成，其實就是一個html文件（后綴名為html ）
//d:常用的瀏覽器
網頁是通過瀏覽器來展示的，關于瀏覽器我們要介紹下面兩點：
1、常用瀏覽器
瀏覽器是網頁顯示，運行平臺，常用的瀏覽器有IE、火狐、谷歌、safari和Opera等。平時稱為五大瀏覽器。
2、瀏覽器內核
瀏覽器內核:負責讀取網頁內容，整理訊息，計算網頁的顯示方式并顯示頁面。
//e:Web標準
Web標準是由W3C組織和其他標準化組織制定一系列標準的集合，W3C（萬維網聯盟）是國際最著名的標準化組織。
接下來圍繞web標準，我們學習以下兩點：
1、我們需要web標準
瀏覽器不同，它們顯示頁面或者排版有些許差異
遵循Web標準除了可以讓不同的開發人員寫出的頁面更加標準，更統一外，還有以下優點：
讓Web的發展前景更廣闊
內容能被更廣泛的設備訪問
更容易被搜索引擎搜索
降低網站流量費用
使網站更易于維護
提高頁面瀏覽速度
2、Web標準的構成
主要包括結構，表現和行為三個方面
Web標準提出的最佳體驗方案：結構，樣式，行為相分離。
簡單理解：結構寫到HTML文件中，表現寫到CSS文件中，行為寫到JavaScript文件中。
、web概念概述
1.1 JavaWeb：使用Java語言開發基于互聯網的項目
1.2 軟件架構：
1.2.1 C/S: Client/Server 客戶端/服務器端
在用戶本地有一個客戶端程序，在遠程有一個服務器端程序
如：QQ，迅雷...
優點：用戶體驗好
缺點：開發、安裝，部署，維護 麻煩
1.2.2 B/S: Browser/Server 瀏覽器/服務器端
只需要一個瀏覽器，用戶通過不同的網址(URL)，客戶訪問不同的服務器端程序
優點：開發、安裝，部署，維護 簡單
缺點：如果應用過大，用戶的體驗可能會受到影響，對硬件要求過高
二、B/S架構詳解
2.1 資源分類：
2.1.1 靜態資源：使用靜態網頁開發技術發布的資源。
特點：
所有用戶訪問，得到的結果是一樣的。
如：文本，圖片，音頻、視頻, HTML,CSS,JavaScript
如果用戶請求的是靜態資源，那么服務器會直接將靜態資源發送給瀏覽器。瀏覽器中內置了靜態資源的解析引擎，可以展示靜態資源
HTML：用于搭建基礎網頁，展示頁面的內容
CSS：用于美化頁面，布局頁面
JavaScript：控制頁面的元素，讓頁面有一些動態的效果
2.1.2 動態資源：使用動態網頁及時發布的資源。
特點：
所有用戶訪問，得到的結果可能不一樣。
如：jsp/servlet,php,asp...
如果用戶請求的是動態資源，那么服務器會執行動態資源，轉換為靜態資源，再發送給瀏覽器
2.1.3 注意：我們要學習動態資源，必須先學習靜態資源！
三、HTML
3.1 概念：是最基礎的網頁開發語言
Hyper Text Markup Language 超文本標記語言
超文本：超文本是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本.
標記語言:
由標簽構成的語言。<標簽名稱> 如 html，xml
標記語言不是編程語言
3.2 快速入門：
3.2.1 語法：
1. 創建html文檔，后綴名為.html 或者 .htm
2. 標簽分類：
圍堵標簽：有開始標簽和結束標簽。如 <html> </html>
自閉和標簽：開始標簽和結束標簽在一起。如 <br/>
3. 標簽可以嵌套：
需要正確嵌套，不能你中有我，我中有你
錯誤：<a><b></a></b>
正確：<a><b></b></a>
4. 在開始標簽中可以定義屬性。屬性是由鍵值對構成，值需要用引號(單雙都可)引起來
5. html的標簽不區分大小寫，但是建議使用小寫。
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 標簽學習：
3.3.1 文件標簽：構成html最基本的標簽
1、html:html文檔的根標簽
2、head：頭標簽。用于指定html文檔的一些屬性。引入外部的資源
3、title：標題標簽。
4、body：體標簽
5、<!DOCTYPE html>：html5中定義該文檔是html文檔
3.3.2 文本標簽：和文本有關的標簽
1、注釋：<!-- 注釋內容 -->
2、<h1> to <h6>：標題標簽，h1~h6:字體大小逐漸遞減
3、<p>：段落標簽
4、<br>：換行標簽
5、<hr>：展示一條水平線
文本標簽屬性：
color：顏色
width：寬度
size：高度
align：對其方式
center：居中
left：左對齊
right：右對齊
6、<b>：字體加粗
7、<i>：字體斜體
8、<font>:字體標簽
9、<center>:文本居中
字體標簽屬性：
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. 數值：width='20' ,數值的單位，默認是 px(像素)
2. 數值%：占比相對于父元素的比例
3.3.3 圖片標簽：
img：展示圖片
屬性：src：指定圖片的位置
相對路徑：以.開頭的路徑
./：代表當前目錄
../:代表上一級目錄
代碼舉例：
<img src="./image/jiangwai_1.jpg">
<img src="../image/jiangwai_1.jpg">
3.3.4 列表標簽：
有序列表：
ol:
li:
無序列表：
ul:
li:
3.3.5 鏈接標簽：
a:定義一個超鏈接
屬性：
href：指定訪問資源的URL(統一資源定位符)
target：指定打開資源的方式
_self:默認值，在當前頁面打開
_blank：在空白頁面打開
代碼：
<a href="http://www.baidu.com">點我</a>
<a href="http://www.baidu.com" target="_blank">點我</a>
<a href="http://www.baidu.com"><img src="image/jiangwai_1.jpg"></a>
3.3.6 div和span：
div:每一個div占滿一整行。塊級標簽
span：文本信息在一行展示，行內標簽 內聯標簽
3.3.7 語義化標簽：html5中為了提高程序的可讀性，提供了一些標簽。
<header>：頁眉
<footer>：頁腳
3.3.8 表格標簽：
table：定義表格
屬性：
width：寬度
border：邊框
cellpadding：定義內容和單元格的距離
cellspacing：定義單元格之間的距離。如果指定為0，則單元格的線會合為一條、
bgcolor：背景色
align：對齊方式
tr：定義行
bgcolor：背景色
align：對齊方式
td：定義單元格
colspan：合并列
rowspan：合并行
th：定義表頭單元格
<caption>：表格標題
<thead>：表示表格的頭部分
<tbody>：表示表格的體部分
<tfoot>：表示表格的腳部分
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
