整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
html是一種簡單易記，功能強大的標記語言，它是學習前端知識的第一站，也是所有WEB開發者、乃至產品經理、運營人員必須學習的一項基礎內容。
1. html5是WEB開發者，必須掌握的基礎知識；
2. html5應用廣泛，它可以用來開發網站、WEB應用、WEB游戲等等，如微信小程序、移動端小游戲等都跟html5有關；
3. html5很容易掌握，花幾個小時就可以掌握它；
1. 講師講課風格幽默，整個學習過程輕松有趣，不枯燥、不乏味；
2. 以就業為導向，與實戰相結合，滿足大部分學員的學習需求；
1. 學完每一節課程，動手將代碼打一遍；
2. 舉一反三，學完每節課程，思考一下它的應用場景；
3. 完成本門課程，試著自己寫一個純html5的網頁；
1. 零基礎學員；
2. 前端愛好者；
1、DOCTYPE 描述文檔的類型，規定web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。
網頁可以使用的具體版本，網頁中可以使用那些標記，每個版本的DTD版本均有不同
2、<html></html> 網頁文檔中的根標記
html 標簽有三個特殊的屬性
3、<head></head>頭部標簽在網頁中只能有一個，設置HTML文檔的頭部信息，里面內容不會在頁面中顯示出來·。
head里面的標記
4、<body></body>只能有一個，顯示網頁的主體內容。
<meta>元素的屬性：
1、name 屬性
1 <meta name="author" content="nyw">
2 <!--作者， 定義網頁的作者 -->
3 <meta name="description" content="meta標記學習">
4 <!-- 描述，描述網頁的實際內容 -->
5 <meta name="keywords" content="HTML,meta">
6 <!-- 關鍵字，定義網頁關鍵字 -->2、http-equiv屬性
1 <meta http-equiv="refresh" content="30">
2 <!-- 網頁30s后自動刷新 -->
3 <meta http-equiv="refresh" content="5,url=dom.html">
4 <!-- 網頁30秒后跳轉到dom.html文檔 --><meta http-equiv="refresh" content="5,url=dom.html">
http-equiv描述網頁的行為，行為 refresh刷新，內容為5，表示5秒后跳轉到 dom.html這個文檔。
3、content 屬性
特殊屬性
4、charset屬性
指定網頁的編碼，推薦使用UTF-8來增加網頁的兼容性。
代碼實例：
為搜索引擎抓取機器人準備一些信息
這段代碼可以禁止搜索引擎緩存和跟蹤網頁。
<meta name="robots" content="noindex,nofollow">
<!-- name定義的是機器人，內容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 -->代碼實例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>網頁標題(顯示在瀏覽器上)</title>
6 <meta name="author" content="nyw">
7 <!--作者， 定義網頁的作者 -->
8 <meta name="description" content="meta標記學習">
9 <!-- 描述，描述網頁的實際內容 -->
10 <meta name="keywords" content="HTML,meta">
11 <!-- 關鍵字，定義網頁關鍵字 -->
12 <meta http-equiv="refresh" content="30">
13 <!-- 網頁30s后自動刷新 -->
14 <meta http-equiv="refresh" content="5,url=dom.html">
15 <!-- 網頁30秒后跳轉到dom.html文檔 -->
16 <meta name="robots" content="noindex,nofollow">
17 <!-- name定義的是機器人，內容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 -->
18 </head>
19 <body>
20 </body>
21 </html>title和base標記都是寫在head標簽中
title：設置網頁的標題
寫法：<title>內容</title>。
base：指定網頁跳轉基準URL，如果不指定的話默認為當前網站的當前路徑。
寫法：<base href="http://www.aaa.zzz/">
base屬性值：
<base href="http://baidu.com/"> 這是將頁面跳轉到百度的網站打開。
<base target="_blank"> 網頁中的鏈接都應該在新的窗口中打開。
terget屬性值：
link標記：鏈接外部文件時使用的標記，可以把外部文件的內容引入到當前文件中來，使當前網頁實現更多的功能。
link屬性：
href：指定鏈接外部路徑的路徑和文件名，要設置全路徑并且帶文件名
rel：引用文件，引用資源的類型定義
我們在使用link標簽引用外部文件的時候，外部文件的類型是多種多樣的。
alternate 代替文檔（種子，其他語言版本，其他格式等等）
author 網頁的作者
help 幫助文件的鏈接
icon 網頁的圖標
next 如果是連續網頁的時候，指定下一個網頁
prefetch 把鏈接外部資源時提前緩存起來。
prev 如果是連續網頁
media 鏈接文件或是資源屬于哪一種資源。
hreflang 鏈接文件的語言種類
type 鏈接文件的mi/me類型（比如說，圖片圖標文本）
sizes 根據link鏈接文件的類型，來指定文件的大小
代碼示例：
鏈接網頁圖標：
網站的圖標指定，可以顯示在瀏覽器的圖標欄，也可以被手機讀取作為網站的圖標存入收藏夾1 <!-- 網站的圖標指定，可以顯示在瀏覽器的圖標欄，也可以被手機讀取作為網站的圖標存入收藏夾 -->
2 <link rel="icon">
3 <!-- 示例 -->
4 <link rel="icon" href="img/favicon.png" type="image/png">
5 <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
6 <link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png">注意：后面的href和前面type標注的類型要一致，這樣既可以顯示在瀏覽器，又可以顯示在手機上
鏈接外部樣式單
1 <link rel="stylesheet">
2 <link rel="stylesheet" href="style1.css" media="screen">
3 <link rel="stylesheet" href="style2.css" title="主題樣式文件">
4 <link rel=" alternate stylesheet" href="style3.css" title="可選樣式單">說明：
alternate 會在瀏覽器中會彈出一個對話框，供用戶可以進行選擇
media 表示媒體類型為屏幕，可以是手機，但不包括打印機和投影儀
title 對這個link進行簡單的說明
網站RSS種子指定
<!-- 網站RSS種子指定 -->
<link rel="alternate" type="application/rss+xml">為搜索引擎的準備的網頁的URL
<!-- 為搜索引擎的準備的網頁的URL -->
<link rel="canonical">
<link rel="canonical" href="http://www.aaa.zzz/help.html">告訴搜索引擎代替URL是哪里。
果想開發一個網站，除了要精通后端開發語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標記語言，它包含有眾多的標簽，我們可以通過這些標簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個統一的文檔中，這就形成了我們可以看得見的網頁。那么，HTML都有哪些常用的標簽呢？
html5文檔類型聲明：<!doctype html>
html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這個標簽是html最外層的標簽，所有其它的HTML標簽都要放在這個標簽的內部。
<html>
<head></head>
<body></body>
</html>
在HTML標簽中，有的標簽是成雙成對的，如：<html></html>（如下圖）；而有的標簽是單個的，如：<hr>橫線標簽。
head頭部有以下幾種常用標簽：
meta：主要提供有關頁面的元信息。
link：用來定義文檔與外部資源的關系，最常用的是調用CSS樣式文件。
title：頁面標題的標簽。
script：用來調用JS文件或JS代碼。當然，script標簽也可以在body主體中使用。
1、塊級標簽。
塊級標簽的特性是：獨自占有一行；標簽的高與寬、邊距可以修改；沒有設置寬與高時，默認繼承父標簽。例如：
<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
前端頁面顯示的效果如下圖：
常用的塊級標簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。
2、內聯標簽。
內聯標簽與塊級標簽不同，它不能獨自占有一行，會與其它內聯標簽在同一樣展示；內聯標簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>
CSS樣式代碼跟塊級標簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：
常用的內聯標簽有：span、a、b、strong、i、em 。
3、內聯塊級標簽。
內聯塊級標簽，既有一些內聯標簽的特性，也有一些塊級標簽的特點：它不能獨自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">
CSS樣式代碼跟塊級標簽的那個例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個圖片不能獨自占有一行，而是在同一行。如下圖：
常用的內聯塊級標簽有：img、input、textarea。
4、區域標簽。
所謂區域標簽，就是主要用來劃分布局頁面區域的。如：頭部、主體內容、側邊欄、底部。這樣劃分的好處是：讓頁面布局更加清晰明了。
常用的區域標簽有：header（頭部）、footer（底部）、nav（導航）、aside（側邊欄）、section（主體）、article（獨立內容）。
5、表單標簽。
這個表單標簽我們也是會經常用到的，如：登錄網站的時候、提交數據的時候。如下圖的評論表單：
?表單常用的標簽有：form、input、select、option、textarea 。
以上就是我們開發網頁時，會常用到的HTML標簽。當然，HTML標簽遠不止這些，尤其是html5出來后，新增了許多的新標簽。但是，有些標簽在我們開發中很少用到，所以，這里就沒有做相應的介紹。
大家好，今天給大家帶來一套比較不錯的單頁制作課程。
本套課程作者在9年多時間里，一直專注于單頁網站制作、優化、推廣和單頁營銷方面的研究，并帶領一批學員通過單頁網站銷售產品，實現網上成功創業！
什么是手機版單頁網站
手機版單頁網站，是用Html5代碼編寫的純靜態獨立頁面網站，自動適應手機、臺式電腦、平板電腦的用戶屏幕觀看，完美展現產品和項目內容，用戶體驗好。
在單頁網站里面，可以添加文字、圖片、視頻、動畫、客服系統、訂單系統、分享系統、流量統計系統等等功能，使單頁網站功能強大、內容豐富多彩！
本套“單頁網站制作教程”，是由作者根據多年的實戰經驗總結，原創開發錄制而成，教程系統全面、簡單易學、上手快速，即使是0基礎的新手朋友，也能快速學會。
手機版單頁網站能做什么
1.產品展示
單頁網站是一個獨立的頁面，不存在分散目標客戶注意力的信息。頁面簡單直接，從頭至尾展示產品信息。讓目標客戶最直觀的的全方位了解你的產品，達到快速成交的目的。
2.服務展示
如果你有一技之長，想通過提供自己的技術服務來賺錢，只需要制作一個單頁面，把自己當特長展示出來，留下聯系方式，做好網站推廣，就有客戶主動找上門。
3.競價推廣
用競價推廣是當前大流量入口之一。競價推廣排名快，效果好，利潤高。而競價推廣的落地頁，全部用的自適應競價單頁面，自動適應手機和電腦用戶屏幕，完美展示產品信息，
4.做信息流
信息流屬于競價推廣的一種，是把廣告信息展示在百度和360旗下相關聯平臺上面，訪客點擊信息流鏈接進入單頁面，進行產品展示和客戶轉化，完成產品銷售。
單頁網站強大優勢
1.制作超級簡單
單頁網站模板，可做任何編輯和排版。包括修改文字內容、更換圖片、更換視頻、修改背景顏色以及訂單系統。只要會打字會做圖片，就可以實現自己動手不求人，制作出精美的符合你要求的單頁網站，實現銷售產品網絡賺錢的目的！
2.全方位展示產品
單頁網站因為沒有網站的固定框架和固定表格限制，也沒有分散目標顧客注意力的信息。可以輕松的添加文案、圖片、視頻、見證和訂單系統，全方位展示你的產品，達到快速成交的目的！
3.吸引目標客戶注冊
單頁網站很容易吸引訪客注意力，在頁面上添加客戶注冊系統，通過設置免費贈品方式，很容易獲得訪客聯系信息，方便后期對潛在客戶進行后端培養和產品銷售。
4.易被搜索引擎收錄
因為單頁網站，是精心設計和布局的，有著良好的用戶體驗和網站優化，更容易被搜索引擎搜錄，帶來好的排名！
5.單頁網站安全性高
單頁網站沒有后臺管理，如果有人想攻擊你的單頁，他只有攻陷整臺服務器，才能拿到控制權。但是服務器都是放在專業的IDC機房，有高級防火墻和殺毒軟件防護，還有專業的技術人員維護，難度可想而知。
6.單頁網站管理方便
單頁網站只有簡單的文字信息、圖片資料、視頻和其他代碼組成。即使網站程序壞了，恢復數據也就幾分鐘的事情。需要修改內容，只需要在電腦上面編輯完成，用FTP軟件上傳，覆蓋掉前一個單頁即可。
手機版單頁制作教程介紹
手機版單頁網站制作教程，包含“單頁制作”和“單頁優化”2部分視頻內容，是由作者總結9年多建站實戰經驗，原創開發的高清視頻課程。旨在幫助想用單頁網站，在網上賣產品的朋友，實現網上賺錢的夢想！
本套手機版單頁網站制作課程，共有21課時，通過精心排版、錄制、剪輯，時間控制在15分鐘左右，只講干貨不說廢話。
單頁網站制作視頻，全部是高于720P高清視頻，由淺入深、循序漸進講解，簡單易懂，即使零基礎的朋友，都能輕輕松松學會單頁網站制作。
想要學習的話，可以私聊視頻內容！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
