HTML5基礎-新增標簽+新增屬性+布局案例

tml5中常用的結構標簽

article 文章

header 頭部

nav 導航

section 區(qū)域

aside 側邊欄

hgroup 區(qū)塊的相關信息

figure 定義一組內容及標題

figcaption 定義figure元素的標題

footer 底部

dialog 對話框

使用習慣：

header/section/footer > aside/article/figure/hgroup/nav > div

embed可插入flash文件，但flash已經逐漸被淘汰，不建議使用

meter狀態(tài)標簽，可以定義電壓

optimum是標準狀態(tài)

low與high之間呈現(xiàn)綠色，其余呈現(xiàn)黃色

<meter value=”220” min=”20” max=”380” low=”200” high=”240” optimum=”220”></meter>

自動計算百分比

<meter value="0.75">75%</meter>

有步長的進度條

<progress value="30" max="100"></progress>

不斷加載的進度條

<progress max="100"></progress>

datalist為input定義下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <input placeholder="請選擇手機品牌" list="phoneList">
    <datalist id="phoneList">
        <option value="iphone">iphone</option>
        <option value="samsung">samsung</option>
        <option value="huawei">huawei</option>
        <option value="oppo">oppo</option>
        <option value="htc">htc</option>
    </datalist>
</body>
</html>

details定義元素的詳細內容，配合summary

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <details>
        <summary>HTML5</summary>
        <p>HTML5是構建Web內容的一種語言描述方式。HTML5是互聯(lián)網的下一代標準，是構建以及呈現(xiàn)互聯(lián)網內容的一種語言方式．被認為是互聯(lián)網的核心技術之一。HTML產生于1990年，1997年HTML4成為互聯(lián)網標準，并廣泛應用于互聯(lián)網應用的開發(fā)。
HTML5是Web中核心語言HTML的規(guī)范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息。HTML5在從前HTML4.01的基礎上進行了一定的改進，雖然技術人員在開發(fā)過程中可能不會將這些新技術投入應用，但是對于該種技術的新特性，網站開發(fā)技術人員是必須要有所了解的。 [1-2] </p>
    </details>
</body>
</html>

ruby和rt進行拼音的注釋

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    我們來<ruby>夼<rt>kuang</rt></ruby>一個話題
</body>
</html>

兼容瀏覽器的寫法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    我們來<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp></ruby>一個話題
</body>
</html>

mark黃色選中效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <p>媽媽叫我回家的時候順路買一盒<mark>牛奶</mark>，需要很新鮮的那種。</p>
</body>
</html>

output表單計算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <form oninput="sum.value=parseInt(num1.value)*parseInt(num2.value)">
        <input type="number" id="num1">*
        <input type="number" id="num2">=<output name="sum" for="num1 num2"></output>
    </form>
</body>
</html>

date pickers在移動端效果比較好

week兼容性不好

datetime兼容性不好，推薦用datetime-local

time用來設置時間（小時和分鐘）；

month用來設置年和月；

date用來設置年月日；

datetime用來設置年月日和時間；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    email:<input type="email" name="email"><br>
    url:<input type="url" name="url"><br>
    tel:<input type="tel" name="tel"><br>
    number:<input type="number" name="number"><br>

    date:<input type="date" name="date"><br>
    month:<input type="month" name="month"><br>
    week:<input type="week" name="week"><br>
    time:<input type="time" name="time"><br>
    datetime:<input type="datetime" name="datetime"><br>
    datetime-local:<input type="datetime-local" name="datetime-local"><br>

    range:<input type="range" name="range" min="1" max="10"><br>
    search:<input type="search" name="search"><br>
    color:<input type="color" name="color"><br>

</body>
</html>

autocomplete屬性規(guī)定form或input域擁有自動完成功能，該屬性適用于<form>標簽和<input>標簽

autofocus自動獲取焦點

multiple多選，適用于email和file，email中不同郵箱用,隔開

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <form action="lesson2_1 autocomplete.html" autocomplete="on">
        <input type="text" name="text" autofocus="autofocus" placeholder="您好，請在這里輸入您的用戶名！"><br>
        <input type="email" name="email" autocomplete="off" multiple="multiple"><br>
        <input type="file" name="file" multiple="multiple"><br>
        <input type="submit">
    </form>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="icon" href="icon.gif" type="image/gif" sizes="16x16">
    <base href="http://localhost" target="_blank">
</head>
<body>
</body>
</html>

script:

defer 頁面已完成加載后再執(zhí)行腳本

async 一旦腳本可用，則異步執(zhí)行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script async="async" type="text/javascript" src="async.js"></script>
    <script defer="defer" type="text/javascript" src="defer.js"></script>
</head>
<body>
</body>
</html>

ol有序列表倒序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ol</title>
</head>
<body>
<ol start="2" reversed="reversed">
    <li>Html</li>
    <li>Html5</li>
    <li>Css</li>
    <li>Css3</li>
    <li>JavaScript</li>
</ol>
</body>
</html>

html頁面布局demo:

demo.html
----------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <div class="container">
            <a href="index.html"><img src="images/logo.png"></a>
            <nav>
                <a class="active" href="index.html">Home</a>
                <a href="#">Course</a>
                <a href="#">Actual</a>
                <a href="#">Plan</a>
                <a href="#">FAQ</a>
                <a href="#">Notes</a>
            </nav>
        </div>
    </header>
    <section class="banner">
        <ul>
            <li class="active"><img src="images/banner/banner1.jpg"></li>
            <li class="left"><img src="images/banner/banner3.jpg"></li>
            <li class="right"><img src="images/banner/banner2.jpg"></li>
        </ul>
    </section>
    <section class="main">
        <aside>
            <h1>Recent <samp>Course</samp></h1>
            <dl>
                <dt>Hyper Text Markup Language</dt>
                <dd><img src="images/Course/05_05.png"></dd>
                <dd>HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.</dd>
            </dl>
            <dl>
                <dt>Cascading Style Sheets</dt>
                <dd><img src="images/Course/06_04.png"></dd>
                <dd>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</dd>
            </dl>
            <dl>
                <dt>JavaScript</dt>
                <dd><img src="images/Course/09_07.png"></dd>
                <dd>JavaScript is a high-level, dynamic, untyped, and interpreted programming language.</dd>
            </dl>
            <dl>
                <dt>AngularJS</dt>
                <dd><img src="images/Course/02_09.png"></dd>
                <dd>AngularJS is an open-source web application framework mainly maintained by Google and by a community of individuals and...</dd>
            </dl>
        </aside>
        <article>
            <h1>Welcome to <samp>Massive Open Online Course!</samp></h1>
            <p>We provide the latest knowledge to help you cope with the changing world!</p>
            <img src="images/article.jpg">
            <p>We hope that all the students who love the Internet can be more convenient access to learning resources, using the Internet thinking to change our learning.</p>
            <p>Focus on IT skills education MOOC, consistent with the development trend of the Internet down to earth's MOOC. We are free, we only teach useful, we concentrate on education.</p>
        </article>
    </section>
    <footer>
        <div class="container">
            <p>Copyright ? 2019 test.com All Rights Reserved.</p>
            <span>
                <img src="images/icon/weichat.png">
                <img src="images/icon/sina.png">
                <img src="images/icon/qq.png">
            </span>
        </div>
    </footer>
</body>
</html>

style.css
------------------------------------------

/* All tag */
* { font-family: Arial; font-size: 14px; margin: 0; padding: 0; border: none; }
a { text-decoration: none; }
ul { list-style: none; }

/* header */
header { position: relative; height: 80px; background: #000; }
header:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 7px; content: ''; background: #d6d6d6; }
header > .container { position: relative; z-index: 1; width: 1200px; margin: 0 auto; }
header > .container > a { display: block; float: left; margin: 5px 25px; }
header > .container > nav { float: right; }

/* nav */
nav > a { font-size: 24px; line-height: 73px; display: block; float: left; width: 110px; height: 73px; text-align: center; color: #fff; }
nav > a:nth-child(1) { background: #433b90; }
nav > a:nth-child(2) { background: #017fcb; }
nav > a:nth-child(3) { background: #78b917; }
nav > a:nth-child(4) { background: #feb800; }
nav > a:nth-child(5) { background: #f27c01; }
nav > a:nth-child(6) { background: #d40112; }
nav > a:hover,
nav > a.active { padding-bottom: 7px; }

/* banner */
.banner { position: relative; background: #eaeaea; }
.banner:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; content: ''; background: #d6d6d6; }
.banner > ul { position: relative; width: 1490px; height: 538px; margin: 0 auto; padding-top: 10px; }
.banner > ul > li { position: absolute; width: 610px; height: 300px; overflow: hidden; }
.banner > ul > li.active { z-index: 2; top: 37px; right: 0; left: 0; width: 960px; height: 460px; margin: auto; border: 1px solid #fff; box-shadow: 0 30px 140px 22px rgba(0, 0, 0, .35); }
.banner > ul > li.left { z-index: 1; top: 0; bottom: 0; left: 0; margin: auto; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35); }
.banner > ul > li.right { z-index: 1; top: 0; right: 0; bottom: 0; margin: auto; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35); }
.banner > ul > li > img { position: absolute; left: -30%; height: 100%; }

/* main */
.main { position: relative; width: 1200px; height: 473px; margin: 34px auto 0; }
.main h1 { font-size: 30px; font-weight: lighter; margin-bottom: 23px; }
.main h1 > samp { font-size: 30px; color: #7c7c7c; }
.main > aside { float: left; width: 450px; }
.main > aside > dl { position: relative; display: block; height: 74px; margin-bottom: 17px; }
.main > aside > dl > dt { position: absolute; top: -1px; left: 92px; font-size: 16px; font-weight: bold; line-height: 16px; text-decoration: underline; }
.main > aside > dl > dd:first-of-type { position: absolute; left: 0; }
.main > aside > dl > dd:last-of-type { position: absolute; top: 20px; left: 90px; }
.main > article { float: right; width: 720px; overflow: hidden; }
.main > article > p,
.main > article > img { margin-bottom: 20px; }

/* footer */
footer { position: relative; background: #000; }
footer:before { position: absolute; z-index: -1; top: -6px; left: 0; width: 100%; height: 6px; content: ''; background: #d6d6d6; }
footer > .container { width: 1200px; height: 64px; margin: 0 auto; }
footer > .container > p { line-height: 64px; float: left; color: #fff; }
footer > .container > span { float: right; margin: 14px 40px; }
footer > .container > span > img { margin-left: 4px; opacity: .7; }
footer > .container > span > img:hover { opacity: 1; cursor: pointer; }

html頁面布局demo2:

年初，當白鷺時代CEO陳書藝喊出“2017年HTML5游戲市場規(guī)模將突破30億大關，最高可達到50億”這一觀點時，曾引起了業(yè)界的轟動。但在一大波“傳奇類”HTML5游戲產品的帶動下，50億的市場規(guī)模已經不是天花板。明年HTML5游戲的市場規(guī)模突破百億大關，也不再是癡人說夢。

頭部產品流水過五千萬，多家手游發(fā)行商“跨界”入局

為何手游那點事敢于作出這樣的研判，這與當下HTML5游戲市場的“火爆”有著密切的關系。

當2015年年初《愚公移山》的月流水突破百萬之時，不少從業(yè)者高呼HTML5游戲的春天已經到來；而一年后，當蝴蝶互動宣布《傳奇世界》成為業(yè)界首款流水過千萬的產品之時，引起業(yè)界一片嘩然。

據(jù)手游那點事的了解，目前一款質量尚可的HTML5游戲，特別是傳奇類，過千萬的月流水已漸成常態(tài)。不少優(yōu)質產品的月流水集中在一千至二千萬這一區(qū)間。根據(jù)手游那點事收集到的信息，目前幾款HTML5游戲市場的頭部產品，月流水已經突破五千萬，這一收入也超過原生手游市場上的大部分產品。

360游戲年初對于HTML5游戲的分析報告

隨著產品收入的提高，市場也出現(xiàn)了不少新組建的HTML5游戲研發(fā)和發(fā)行團隊。不少有實力的團隊，在成立不到半年的時間內，月流水已經達到數(shù)百萬的量級。更重要的是，它們實現(xiàn)了自負盈虧，這和過去兩年不少“賠錢賺吆喝”的HTML5游戲企業(yè)形成了鮮明的對比。

而不少手游發(fā)行商，也在今年內或明或暗地進入了HTML5游戲領域。保守估計，僅在廣州一地，HTML5業(yè)務月流水破兩千萬的手游發(fā)行商就不下5家，而月流水在千萬級別的則有十數(shù)家之多。憑借在產品調優(yōu)和買量上的豐富經驗，這些手游發(fā)行商也迅速地成為了HTML5市場有力的競爭者。

“火爆”的市場背后，大部分的錢都被這一類公司賺走了

在不少HTML5游戲從業(yè)者看來，雖然目前HTML5游戲的市場規(guī)模在迅速擴張，但是大部分增長的背后都指向了同一種方式，那就是“頁游化”。這也是為何華南的游戲企業(yè)能在HTML5游戲業(yè)務上突飛猛進的重要原因。

早在2015年初，觸控科技CEO陳昊芝就提出了“手機頁游”這一概念，來代替HTML5游戲。或許令他自己也沒有想到的是，兩年后，HTML5游戲市場無論是產品屬相還是市場打法，都在“頁游化”的道路上越走越遠。

首先是產品層面，頁游化的標志，無疑是大量以“掛機+ARPG”為核心的傳奇類HTML5游戲的出現(xiàn)。這類游戲最大的共通點就是擁有像素級的畫面以及幾乎不用玩家任何操作的玩法。有業(yè)內人士透漏，目前市面上百余款傳奇類HTML5游戲，其實真正的源代碼（數(shù)值）不超過10款，大部分都是換皮甚至只是換名字和icon的產品。

HTML5游戲大量重復的產品

其次是在入口方式上，與傳統(tǒng)HTML5游戲“即玩即走，隨處是入口”的特點不同，這些傳奇類的HTML5游戲，往往有自己的包體，玩家需要通過下載才能進入游戲。不過這些的包體往往只有1-2m，對于用戶而言，下載一個這樣的包可以說毫無負擔。但對于發(fā)行商來說，這樣的做法不僅可以更好地留住用戶，更為重要的是，他們可以通過買量，解決HTML5游戲渠道少、獲取用戶難等一系列問題。

最后自然是在市場打法上，正因為“微端”的特點，現(xiàn)階段不少HTML5游戲正是通過瘋狂買量的來獲取大量的用戶。有消息指，個別廠商在微端買量上的投入費用達到了千萬規(guī)模，這也與過往頁游主要獲取用戶的方式雷同。

通過對得到市場驗證、成熟的產品（數(shù)值）進行換包、換皮等的手段快速上線，再通過大規(guī)模買量的模式來“洗”用戶，這就是目前大部分傳奇類HTML5游戲和發(fā)行商的商業(yè)邏輯。以至于有從業(yè)者表示：“一旦被頁游公司盯上的話，（哪個行業(yè)）基本都是那套玩法了?！?/p>

東邊日出西邊雨，HTML5游戲市場便是如此

但除卻這些傳奇類產品，其他類型的HTML5游戲則顯得不溫不火，這也是目前HTML5游戲市場最大的問題所在。

2017年上半年，能被業(yè)界所熟知的非傳奇類HTML5游戲并不多，《豬來了》、《絕世神功》以及《原諒帽大作戰(zhàn)》是當中為數(shù)不多的幾款。而在今年4月騰訊UP發(fā)布會上公布、進入了“極光計劃”的《瘋狂雪球H5》，至今仍未正式上線。缺產品、特別是優(yōu)質產品，依舊是HTML5游戲市場的主旋律。

《瘋狂雪球H5》入選了騰訊的“”極光計劃

此外，流量仍然是繞不過去的一道坎。有消息指，目前市場最大的流量入口騰訊對HTML5游戲的扶持力度并沒有預期中那樣大。在微信上，騰訊十分謹慎地選擇了自研產品而非第三方產品作為第一波的嘗試；而在手Q中，騰訊則對合作產品的類型和數(shù)量有著明確的要求，并且入口較深，不容易被發(fā)現(xiàn)。而騰訊體系以外的流量，也相對集中在頭部的幾個渠道當中，競爭相當激烈。

而由于傳奇類HTML5游戲大火，迫于變現(xiàn)和KPI的壓力，渠道也將更多的資源傾斜到這類型的游戲上。這也導致相較以往，非傳奇類的產品需要更高的質量和更好的數(shù)據(jù)才能打動渠道。而這無疑令HTML5游戲的研發(fā)成本大為上升。據(jù)悉，單款非傳奇類HTML5游戲的研發(fā)成本從今年年初的幾十萬，發(fā)展成當下的五六十萬甚至過百萬。

一方面是傳奇類產品的持續(xù)火熱帶動整個HTML5游戲市場規(guī)模的高速發(fā)展；另一方面則是非傳奇類產品（團隊）在流量、資金上的吃緊。這一看似矛盾的現(xiàn)狀，卻的的確確發(fā)生在當下的HTML5游戲市場中。

結語

可以預見，在沒有大的沖擊和改變的情況下，未來過百億規(guī)模的HTML5游戲市場收入，恐怕大部分將落入到頁游套路（掛機+買量）的公司的手中。

TML5增加標簽：

1、結構標簽

（1）section：獨立內容區(qū)塊，可以用h1~h6組成大綱，表示文檔結構，也可以有章節(jié)、頁眉、頁腳或頁眉的其他部分；

（2）article：特殊獨立區(qū)塊，表示這篇頁眉中的核心內容；

（3）aside：標簽內容之外與標簽內容相關的輔助信息；

（4）header：某個區(qū)塊的頭部信息/標題；

（5）hgroup：頭部信息/標題的補充內容；

（6）footer：底部信息；

（7）nav：導航條部分信息

（8）figure：獨立的單元，例如某個有圖片與內容的新聞塊。

2、表單標簽

（1）email：必須輸入郵件；

（2）url：必須輸入url地址；

（3）number：必須輸入數(shù)值；

（4）range：必須輸入一定范圍內的數(shù)值；

（5）Date Pickers：日期選擇器；

a.date：選取日、月、年

b.month：選取月、年

c.week：選取周和年

d.time：選取時間（小時和分鐘）

e.datetime：選取時間、日、月、年（UTC時間）

f.datetime-local：選取時間、日、月、年（本地時間）

（6）search：搜索常規(guī)的文本域；

（7）color：顏色

3、媒體標簽

（1）video：視頻

（2）audio：音頻

（3）embed：嵌入內容（包括各種媒體），Midi、Wav、AU、MP3、Flash、AIFF等。

4、其他功能標簽

（1）mark：標注（像熒光筆做筆記）

（2）progress：進度條；<progress max="最大進度條的值" value="當前進度條的值">

（3）time：數(shù)據(jù)標簽，給搜索引擎使用；發(fā)布日期<time datetime="2014-12-25T09:00">9：00</time>更新日期<time datetime="2015-01-23T04:00" pubdate>4:00</time>

（4）ruby和rt：對某一個字進行注釋；<ruby><rt>注釋內容</rt><rp>瀏覽器不支持時如何顯示</rp></ruby>

（5）wbr：軟換行，頁面寬度到需要換行時換行；

（6）canvas：使用JS代碼做內容進行圖像繪制；

（7）command：按鈕；

（8）deteils ：展開菜單；

（9）dateilst：文本域下拉提示；

（10）keygen:加密；

ES6常用新特性總結

1.let && const

let命令，用來聲明變量。它的用法類似于var，但是所聲明的變量，只在let命令所在的代碼塊內有效。

const用于聲明一個常量，設定后值不會再改變。

2.iterable類型（遍歷器（Iterator）)

為了統(tǒng)一集合類型，ES6標準引入了新的iterable類型，Array、Map和Set都屬于iterable類型，具有iterable類型的集合可以通過新的for … of循環(huán)來遍歷。

3.箭頭函數(shù)

ES6中新增箭頭操作符用于簡化函數(shù)的寫法，操作符左邊為參數(shù)，右邊為具體操作和返回值。

箭頭函數(shù)還修復了this的指向，使其永遠指向詞法作用域

4.類

ES6提供了更接近傳統(tǒng)語言的寫法，引入了Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類，與多數(shù)傳統(tǒng)語言類似。

在線咨詢

上一篇：Spring Boot集成X-admin2.2時，l
下一篇：淘寶輪播圖

您的項目需求

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

整合營銷服務商

HTML5基礎-新增標簽+新增屬性+布局案例

頭部產品流水過五千萬，多家手游發(fā)行商“跨界”入局

“火爆”的市場背后，大部分的錢都被這一類公司賺走了

東邊日出西邊雨，HTML5游戲市場便是如此

結語

您的項目需求

頭部產品流水過五千萬，多家手游發(fā)行商“跨界”入局

“火爆”的市場背后，大部分的錢都被這一類公司賺走了