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