Commonly used structural tags in html5
article article
header header
nav navigation
section area
aside sidebar
Information about hgroup blocks
figure defines a set of content and title
figcaption defines the title of the figure element
footer bottom
dialog box
usage habit:
header/section/footer > aside/article/figure/hgroup/nav > div
embed can insert flash files, but flash has been gradually phased out and is not recommended for use.
Meter status label, you can define the voltage
optimum is the standard state
The area between low and high appears green, and the rest appears yellow.
<meter value=”220” min=”20” max=”380” low=”200” high=”240” optimum=”220”></meter>
Automatically calculate percentages
<meter value="0.75">75%</meter>
Progress bar with steps
<progress value="30" max="100"></progress>
Loading progress bar
<progress max="100"></progress>
datalist defines drop-down list for 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>
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
details defines the detailed content of the element, in conjunction with summary
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<details>
<summary>HTML5</summary>
<p>HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。 [1-2] </p>
</details>
</body>
</html>
Ruby and rt for pinyin annotation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body> 我们来<ruby>夼<rt>kuang</rt></ruby>一个话题 </body>
</html>
Browser-compatible writing:
<!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 yellow selection effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<p>妈妈叫我回家的时候顺路买一盒<mark>牛奶</mark>，需要很新鲜的那种。</p>
</body>
</html>
output form calculation
<!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 work better on mobile
Week compatibility is not good
datetime compatibility is not good , it is recommended to use datetime-local
time is used to set the time (hours and minutes);
month is used to set the year and month;
date is used to set the year, month and day;
datetime is used to set the year, month, day and time;
<!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>
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
The autocomplete attribute specifies that the form or input field has the auto-complete function. This attribute applies to labels and tags.
autofocus automatically obtains focus
Multiple multiple selection, suitable for email and file. Use, to separate different mailboxes in 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>
In the tag, the sizes attribute can specify the size of the linked resource.
<!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 Execute the script after the page has finished loading
async Execute asynchronously once the script is available
<!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 ordered list in reverse order
<!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 page layout 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>
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
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 page layout demo2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<table id="outer-table">
<!-- 顶部 -->
<thead>
<tr>
<td><img src="img/logo.png" alt="logo"></td>
</tr>
</thead>
<!-- 主体 -->
<tbody>
<tr>
<td>
<table>
<tr>
<!-- 左侧 -->
<td width="12%">
<p class="left-p">
<span>商品管理</span><br>
<span>评价管理</span><br>
<span>咨询管理</span><br><br><br>
<span><b>全部订单</b></span><br>
<span>已完成订单</span><br>
<span>待处理订单</span><br>
<span>今日物流</span><br><br><br>
<span>月考核</span><br>
<span>季度考核</span><br>
<span>年度考核</span><br>
</p>
</td>
<!-- 右侧 -->
<td width="88%">
<table class="inner-table">
<tr>
<td><span>全部订单</span></td>
</tr>
</table>
<table class="inner-table">
<tr>
<td>
<span> 查询： <input type="date">至 <input type="date">
</span>
</td>
</tr>
</table>
<table id="order" class="inner-table" rules="all">
<tr>
<td colspan="2">宝贝信息</td>
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操作</td>
</tr>
<tr>
<td><img src="img/txue.png"></td>
<td>2019新款个性男女潮牌&暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/txue.png"></td>
<td>2019新款个性男女潮牌&暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/txue.png"></td>
<td>2019新款个性男女潮牌&暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/txue.png"></td>
<td>2019新款个性男女潮牌&暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/txue.png"></td>
<td>2019新款个性男女潮牌&暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/txue.png"></td>
<td>2019新款个性男女潮牌&暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/txue.png"></td>
<td>2019新款个性男女潮牌&暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- 页脚 -->
<tfoot>
<tr>
<td><span>2019-12-29 ©test.com</span></td>
</tr>
</tfoot>
</table>
</body>
</html>
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
demo.css
-----------------------------------
*{margin:0;padding:0;}
table{width:100%;background-color: #fff;}
#outer-table{background-color: #abcdef;}
#outer-table tfoot td{text-align:center;height:50px;line-height: 50px;}
#outer-table img{width: 150px;margin-left: 10px;}
.left-p{margin-left:10px;margin-top:-250px;}
.left-p span{line-height:2em;}
.inner-table{border:2px solid #ccc;}
.inner-table tr td{padding:10px;}
#order tr td{text-align:center;}
#order tr td img{width:50px;}
