html5新增標籤以及屬性小結

時間 2019-11-16

標籤 html5 html 新增標籤以及屬性小結欄目 HTML5 简体版

原文原文鏈接

javascript

-----------------------------------------------------------css

<header>
位於網頁頂部的標題，logo等
</header>

<footer>
位於網頁底部的友情連接，版權聲明，練習方式等。
</footer>

<article>
通常狀況爲獨立完整的篇幅地方用article，article標籤裏面還能夠嵌套article
</article>
---------------
<article>
<header>
<h3>文章標題</h3>
<h5>小標題等</h5>
</header>
<p>段落具體內容1</p>
<p>段落具體內容2</p>
<p>段落具體內容3</p>
<footer>
版權部分，尾部信息
</footer>
</article>
---------------

<section>
章節部分，用於給頁面上的內容分區塊。html中的div 有時候就是用section來代替了。整個網頁結構就能夠分爲頭部header，主體section，底部footer。
</section>


<aside>側邊欄</aside>

<nav>導航。主導航，側邊導航，其餘目錄均可以</nav>
--------------------
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</nav>
--------------------

<body>
<header></header>
<nav></nav>
<aside></aside>
<section></section>
<footer></footer>
</body>

<time datetime="2017-10-21">2017年10月21日</time>

<time pubdate="pubdate"></time>
html

<div style="width:800px;height:200px;padding:50px;background:red;box-sizing:border-box;">


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dicta odit minima corrupti, sequi error harum nostrum quos maiores ab quibusdam earum doloribus soluta, rerum atque quam saepe sit in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dicta odit minima corrupti, sequi error harum nostrum quos maiores ab quibusdam earum doloribus soluta, rerum atque quam saepe sit in.</p>
html5

</div>java

<hgroup>標題分組標籤，一般放在header標籤中</hgroup>
---------------
<header>
<hgroup>
<h2></h2>
<h3></h3>
</hgroup>
</header>
----------------

<address>文章底部相關信息，做者信息，或者底部版權信息等，注意這個是斜體的喲</address>
----------------

<figure>裏面再包一個img標籤</figure>

<figcaption>給figure定義一個標題</figcaption>
---------------
<figure>
<img src="" alt="" />
</figure>
<figcaption>圖片的標題</figcaption>
---------------


<input type="url" />

<input type="tel" />

<input type="number" max="10" min="2" step="2"/>


<input type="range" min="0" max="60" />

<input type="time" />

<input type="date" />

<input type="week" />

<input type="month" />

<input type="datetime-local" />

<input type="datetime" />


<input type="color" />

<input type="search" />

<input type="file" accept="image/png" multiple="multiple" />


<form action="post">
<select name="" id="" size="3" multiple>
<optgroup>
<option value="html" selected="selected">html</option>
<option value="javascript">javascript</option>
<option value="css">css</option>
</optgroup>
</select>
</form>

<input type="text" list="cs"/>
<datalist id="cs">
<option value="df"></option>
<option value="fagb"></option>
<option value="adg"></option>
</datalist>
------------------------

<details>
<summary style="outline:none;">點擊顯示結果</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non deserunt deleniti, asperiores nulla quod cum aspernatur doloremque, reiciendis, ullam quisquam voluptatum, maiores ab placeat aut ad praesentium. Reiciendis, necessitatibus! Consectetur.</p>
</details>
-------------------------

<form action="get" id="me">
<label for="user">用戶名</label><input type="text" name="username" id="user" placeholder="請輸入用戶名"/>
<select name="" id="">
<optgroup>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</optgroup>
</select>
<input type="submit" value="提交" />
</form>架構

<input type="password" form="me" name="password" />

------------------------------------ide

<form action="get" oninput="num.value=parseInt(num1.value)+parseInt(num2.value)">
<input type="number" id="num1" />+
<input type="number" id="num2" />=
<output name="num" for="num1 num2"></output>
</form>post

-------------------------------------

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


<meter max="100" nin="0" value="30"></meter>ui

------------------------------------

<fieldset>
<legend style="text-align:center;">用戶登陸頁面</legend>
<input type="text" />
</fieldset>
----------------------------------搜索引擎

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。