HTML5学习笔记——基本语法和语义

最新推荐文章于 2024-07-20 12:11:45 发布

心语星光

最新推荐文章于 2024-07-20 12:11:45 发布

阅读量465

点赞数 1

分类专栏：学习

本文链接：https://blog.csdn.net/weiwei1994/article/details/51620516

版权

学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<HTML lang="en">

<HEAD>
<META charset="UTF-8" />

<TITLE>HTML5,for Fun &Profit</TITLE>
<link rel="stylesheet" href="styles.css" />
<script src="scripts.js"></script>

<script>
   document.createElement('header');
   document.createElement('footer');
   document.createElement('nav');
   document.createElement('article');
   document.createElement('aside');
   document.createElement('section');
</script>
</HEAD>
<BODY>


<header>
   <h1><abbr title="Hypertext Markup Language">HTML</abbr>5,for <abbr title="Hypertext Markup Language">Fun</abbr> &Profit</h1>
   <nav>
       <ul>
           <li><a href="/Archive/">Archive</a></li>
           <li><a href="/About/">About</a></li>
       </ul>
   </nav>
</header>
<details>
   <summary>Upcoming Topics</summary>
   <p>For the new year,we have a great line up of articles!</p>
   <ul>
       <li>Understandinng the Outline Algorithm</li>
       <li>When to Use <code>hgroup</code></li>
       <li>Machine Semantics with Microdata</li>
   </ul>
</details>

<ol start="1">
   <li>Apples</li>
   <li>Oranges</li>
   <li>Bananas</li>
</ol>

<ol reversed>
   <li>Apples</li>
   <li>Oranges</li>
   <li>Bananas</li>
</ol>

<ol>
   <li value="1">Apples</li>
   <li value="1">Oranges</li>
   <li value="2">Bananas</li>
</ol>

<p hidden>As a special deal for members,use discount code AWESOMESAUCE and save 10% off all purchases from these vendors.</p>



<article contenteditable>
   <h2>Stop <code>section</code> Abuse! </h2>
   <p>As the most generic of the HTML5 structural elements,<code>section</code>
   is often incorrectly used as a styling container,when<code> div </code> is more appropriate.</p>
</article>

<h2 draggable>Block-Level Links</h2>
<article>
   <h2><code>nav</code>Is not for <em>ALL</em> Links</h2>
   <p>Though the <code>nav</code> element often contains links,that does not mean that <em>all</em> links on a site need <code> nav </code>.</p>
</article>
<abbr title="Accessible Rich Internet Applications">ARIA</abbr>
<section>
<article>
   <h2><code>nav</code>Is not for <em>ALL</em> Links</h2>
   <p>Though the<code>nav</code> element often contains links,that does not mean that <em>all</em> links on a site need <code> nav </code>.</p>
</article>
<figure>
   <img src="chart.bmp" alt="Chart of increasing awesomeness" />
   <figcaption>The incresing amount of awesome that this blog demonstrayes.</figcaption>
</figure>
</section>

<p>Published:<time datetime="2011-01-15">January 15,2011</time></p>

<p>The class starts at <time datetime="08:00">8:00 am</time>.</p>

<p>Registration opens on <time datetime="2011-01-15T08:00-07:00">January 15,2011 at 8:00 am,Moutain Time</time>.</p>

<p>Published:<time>2011-01-15</time></p>


<footer>
   <p>Copyright ©2011<a href="http://jtml5funprofit.com">HTML5,for Fun &Profit</a>.All rights reserved.</p>
</footer>
</BODY>
</HTML>