整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
們先來看一下案例：
在瀏覽器中輸入網址可以看到需要瀏覽的網頁，那這個網頁是怎么生成的呢？那我們先了解一下什么是web（互聯網總稱）:Web：web（World Wide Web）即全球廣域網，也稱為萬維網，它是一種基于超文本和HTTP的、全球性的、動態交互的、跨平臺的分布式圖形信息系統。是建立在Internet上的一種網絡服務，為瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易于訪問的直觀界面，其中的文檔及超級鏈接將Internet上的信息節點組織成一個互為關聯的網狀結構。
Web又分為Web前端和Web后端。
什么又是Web前端和Web后端呢？前端：就是在Web應用中用戶可以看得見碰得著的東西。包括Web頁面的結構、Web的外觀視覺表現以及Web層面的交互實現。后端：更多的是與數據庫進行交互以處理相應的業務邏輯。我們這里著重介紹web前端相關的知識點。
web前端分為網頁設計師、web前端開發工程師。
網頁設計師是對網頁的架構、色彩負責；網站得做的漂亮，客戶滿意。主要需要有美術功底，會photoshop等。
web前端開發工程師是負責交互設計的，需要和后臺程序猿進行交互設計的配合。需要掌握的有腳本技術javascript、HTML+CSS現下最流行的頁面搭建技術，ajax和jquery等。
我們此階段就是web前端開發工程師。
大家都上過網，都瀏覽過網頁，那什么是網站，什么又是網頁，網站或者網頁是怎么形成的呢？
網站是用于展示相關內容的網頁的集合。
網頁是網站中的任何一頁面，通常文件擴展名為html、或htm ，那我們要實現一個網頁首先需要學習哪些技術呢？那就是HTML，其次是CSS，還有還javascript等一些相關的技術。
我們了解了網站從無到有的過程，總之就是設計要給我們一個設計好的效果，我們需要用相關技術把它生成網頁。那我們來學習一下如何生成吧。生成網頁要從以下幾方面入手學習。
√什么是HTML
√HTML的發展史
√HTML的特點
√HTML的基本組成單位
√HTML的基本結構
√HTML的常用標簽
√ HTML4.0及XHMTL1.0及HTML5的基本規范
√HTML4.0及HTML5.0的區別
√ Photoshop的基本使用
一、什么是HTML
HTML（Hyper Text Mark-up Language）即超文本標記語言或超文本鏈接標示語言，是目前網絡上應用最廣泛的語言，也是構成網頁文檔的主要語言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。也就是說文字、圖片、表格、音視頻都被看成是文本，這些部分都是用HTML的標簽生成的。
二、HTML的發展史
三、HTML的特點
1.簡易性
2.可擴展性
3.平臺無關
四、HTML的基本組成單位
HTML的基本組成單位-----標簽。那什么是標簽，標簽有那些特點呢？我們一一介紹一下。
標簽：“標簽”是一些符號，用來區分文檔中的不同部分 。
標簽的分類
–單標簽
–雙標簽
標簽的基本寫法
單標簽 ：某些標簽只需單獨使用就能完整地表達意思，控制網頁效果，這類標簽的語法是：
<標簽名/>
雙標簽：標簽成對使用，由一個開始標簽和一個結束標簽構成。開始標簽告訴Web瀏覽器從此處開始執行該標簽所代表的功能，而結束標簽告訴Web瀏覽器在這里結束該功能，結束標簽的形式是在開始標簽前加上一個斜杠。語法：
<標簽名></標簽名>
標簽屬性
在單標簽和雙標簽的開始標簽里，還可以包含一些屬性，以達到個性化的效果。
<標簽 屬性=""屬性="">內容</標簽>
標簽的組成
標簽和標簽屬性及標簽內容組成。
五、HTML的基本結構
了解了以上的知識我們開學習HTML吧。應該那里寫HTML呢？在那里運行呢？
HTML的編輯工具 :
HTML的運行環境：
我們可以用這么多的瀏覽器可以瀏覽頁面，每個瀏覽器對HTML代碼的解析是會有差異的地方的，那我們在寫代碼的時候要兼容五大主流瀏覽器（IE、Chrome、FF、Safari 、Opera）。看看這些瀏覽器的市場占有率吧!
好了開始寫HTML吧！首先要先寫個HTML的基本結構。
網頁的標題、其它的說明信息及不需要在瀏覽器中顯示的內容放在head這對標簽中。
在瀏覽器中需要顯示的內容放在body這對標簽中。
另外我們在真正寫網頁時除了以上的標簽之外，我們還需要添加其它的標簽，比如文檔聲明，中文編碼聲明等，為什么加這些呢？因為我們大家都知道瀏覽器特別多對吧。瀏覽器對HTML的代碼解析不一樣，不加文檔聲明，不同的瀏覽器會按自己的標準去解析HTML代碼！所以我們在HTML最開始的位置加<!DOCTYPE HTML>這句話,每個瀏覽器都會按著符合標準的HTML代碼去解析，說到標準，我們還要知道HTML是應該遵循誰的標準，HTML要遵循W3C標準，那W3C標準又是什么呢？
W3C標準：萬維網聯盟創建于1994年。到目前為止，W3C已發布了200多項影響深遠的Web技術標準及實施指南，（W3C）標準不是某一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）。
對應的標準也分三方面：結構化標準語言主要包括HTML和XML，表現標準語言主要包括CSS，行為標準主要包括對象模型（如W3C DOM）、ECMAScript等。這些標準大部分由W3C起草和發布。
另外加中文編碼聲明，是為了瀏覽器解析中文時以簡體中文形式顯示。
那中文編碼有那些呢？有UTF-8（用在網頁上可以統一頁面顯示中文簡體繁體及其它語言）、GB2312(信息交換用漢字編碼字符集)等。完整的HTM基本結構如下：
作網頁時，經常需要設置網頁的基本信息，如網頁的標題、作者等。為此，HTML提供了一系列設置網頁信息的標簽，這些標簽通常都寫在
<head>標簽內，也被稱為HTML.文檔頭部相關標簽。下面將介紹常用的HTML文檔頭部標簽中的<title>和<meta>標簽。
(1)<title>標簽
<title>標簽用于設置HTML頁面的標題，也就是為網頁取一個名稱。在網頁結構中，<title>標簽必須位于<head>標簽內。一個HTML.文檔只能含有一個<title>標簽，<title></title>標簽之間的內容將顯示在瀏覽器窗口的標題欄中。例如，將某個頁面標題設置為“輕松學習HTML.5”，示例代碼如下：
<title>輕松學習HIML.5</title>上述代碼對應的頁面效果如下圖：
(2)<meta>標簽
<meta>標簽用于定義頁面的元信息(元信息不會顯示在最終的頁面效果中)，可重復出現在標簽中。在HTML中,<meta>標簽是一個單標簽，本身不包含任何內容，僅表示網頁的相關信息。通過標簽的屬性，可以定義頁面的相關參數。
例如，為搜索引擎提供網頁的關鍵字、作者姓名、內容描述，以及定義網頁的刷新時間等。下面介紹<meta/>標簽常用的幾組設置，具體如下。
<meta name-”名稱”content-”值”>：在<meta>標簽中使用 name 屬性和 content 屬性可以為搜索引擎提供信息。其中，name屬性提供搜索內容名稱，content屬性提供對應的搜索內容值，這些屬性的具體應用如下。
設置網頁關鍵字，如某圖像網站的關鍵字設置，示例代碼如下：
<meta name=“keywoxds”content=“千圖網，免費素材下載，千圖網免費素材圖庫，矢量圖，矢量圖庫，圖像素材，網頁素材，
免費素材，PS素材，網站素材，設計模板，設計素材，網頁模板免費下載，千圖，素材中國，素材，免費設計，圖像”/>在上述示例代碼中，nare屬性的屬性值為"keywonds”，該屬性值用于定義搜索內容名稱為網頁關鍵字;content 屬性的屬性值用于定義關鍵字的具體內容，多個關鍵字內容之間可以用“，”分隔。
設置網頁描述，如某圖像網站的描述信息設置，示例代碼如下：
<meta name=”description”content=”專注免費設計素材下裁的網站！提供矢量圖素材，矢量青景圖像，矢量圖庫，還有
psd素材，PS素材，設計模板，設計素材，PPT素材，以及網頁素材，網站素材，網頁圖標免費下載”/>在上述示例代碼中，name屬性的屬性值為“deseription”，該屬性值用于定義搜索內容名稱為網頁描述;comtent 屬性的屬性值用于定義描述的具體內容。網頁描述的文字不必過多，能夠描述清晰即可。
設置網頁作者，如可以為網站增加作者信息，示例代碼如下：
<meta name-"author" content="網絡部"/>在上述示例代碼中，name屬性的屬性值為”author”，該屬性值用于定義搜索內容名稱為網頁作者;content屬性的屬性值用于定義具體的作者信息。
<meta http-equiv=”名稱”content=”值”>在<meta/>標簽中，http-equiv 屬性和content 屬性可以設置服務器發送給瀏覽器的HTTP頭部信息，為瀏覽器顯示該頁面提供相關的參數標準。其中，http-equiv屬性提供參數類型，content屬性提供對應的參數值，這些屬性的具體應用如下。設置字符集，如某圖像官網字符集的設置，示例代碼如下：
<meta http-equiva"Content-Type" content="text/html; charset=gbk"/>在上述示例代碼中，hitp-epuiv屬性的屬性值為“Content-Type”.content屬性的屬性值為“test/html”和“charset=gbk”，兩個屬性值之間用“：”隔開。其中，“text/html”用于說明當前文檔類型為HIML“charset=gbk”用于說明文檔字符集為GBK(中文編碼)。
目前最常用的國際化字符集編碼格式是UTF-8，常用的中文字符集編碼格式主要是GBK和GB2312。當用戶使用的字符集編碼格式與當前瀏覽器不匹配時，網頁內容就會出現亂碼。新版本的HTML.5簡化了字符集的寫法，示例代碼如下：
<meta charset="utf-g">設置頁面自動刷新與跳轉，如定義某個頁面10秒后跳轉至百度首頁，示例代碼如下：
<meta http-equiv""refresh" content="10; url- httpa://sww.baidu.com/"/>在上述示例代碼中，http-equiv屬性的屬性值為“refresh”，content屬性的屬性值為數值和URL。兩個屬性值之間用“：”隔開，分別用于指定跳轉時間和目標頁面的URL。跳轉時間默認以秒為單位。
本標記語言，即HTML（Hypertext Markup Language），是用于描述網頁文檔的一種標記語言。以下是小編為大家整理的HTML基本的標簽。
注：HTML 標簽對大小寫不敏感，但推薦使用小寫！
基本
<html>…</html> 定義 HTML 文檔
<head>…</head> 文檔的信息
<meta> HTML 文檔的元信息
<title>…</title> 文檔的標題
<link> 文檔與外部資源的關系
<style>…</style> 文檔的樣式信息
<body>…</body> 可見的頁面內容
<!--…--> 注釋
文本
<h1>...</h1> 標題字大小（h1~h6）
<b>...</b> 粗體字
<strong>...</strong> 粗體字(強調)
<i>...</i> 斜體字
<em>...</em> 斜體字(強調)
<u>...</u> 下劃線
<del>...</del> 刪除線(表示刪除)
<center>…</center> 居中文本
<ul>…</ul> 無序列表
<ol>…</ol> 有序列表
<li>…</li> 列表項目
<a href=”…”>…</a> 超鏈接
<font> 定義文本字體尺寸、顏色、大小
<sub> 下標
<sup> 上標
<br> 換行
<p> 段落
圖形
<img src=’”…”> 定義圖像
<hr> 水平線
表格
<table>…</table> 定義表格
<th>…</th> 定義表格中的表頭單元格
<tr>…</tr> 定義表格中的行
<td>…</td> 定義表格中的單元
其它
<form>…</form> 定義供用戶輸入的 HTML 表單
<frame> 定義框架集的窗口或框架
另加16進制顏色，但僅僅有16種顏色名可用英文字母，其余的要用16進制值。 記住哦！
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
