HTML5学习笔记，附有自己的注释
涉及到HTML5的标签，音频，Inputs，数据属性，IE支持。
<!doctype html>
<html>
<head>
<title>Lin's First Webpage</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<header> <!-- 标头 -->
<h1>Lin's Website</h1>
<p><em>Where you'll learn to code.</em></p>
</header>
<h2>HTML5 Tag</h2>
<nav> <!-- 导航栏 -->
<h3>Navigate this site</h3>
<ul>
<li><a href="">HTML Form</a></li>
<li><a href="">HTML Heading</a></li>
<li><a href="">HTML Images</a></li>
</ul>
</nav>
<article> <!-- 文章 -->
<section class="article-heading"> <!-- 定义文章的一个部分 -->
<h3>Learning to code from scratch</h3>
<span>By Lin</span>
</section>
<section class="article-body">
<p>That is some text.That is some text.</p>
<p>That is some text.That is some text.</p>
<p>That is some text.That is some text.</p>
<aside> <!-- 在主体里面添加分支 -->
<h4>Quick story about how I made my first $500 in web design</h4>
<p>That is some text.That is some text.</p>
</aside>
</section>
<section class="article-footer">
<footer>Posted in <strong>Coding</strong></footer>
<div>Posted on <time datetime="1-4-2018">Apr 1，2018</time></div>
<div class="further-reading"> <!-- 添加一个分区 -->
<h4>If you lieke this article, you'll love:</h4>
<nav>
<ul>
<li><a href="">HTML Form</a></li>
<li><a href="">HTML Heading</a></li>
<li><a href="">HTML Images</a></li>
</ul>
</nav>
</div>
</section>
</article>
<aside>
<h4>More about this site</h4>
<p>That is some text.That is some text.</p>
</aside>
<h2>HTML5 Audio</h2>
<audio controls> <!--<audio controls>...</audio> 添加音频，controls是让用户可以自行调节-->
<!--音频存放的位置, 设定播放的类型-->
<source src="audio/朴树-平凡之路.mp3" type="audio/mpeg"> <!--本地音频-->
<source src="audio/朴树-平凡之路.mp3" type="audio/ogg"> <!--有的浏览器不支持mp3格式，可以选择ogg格式-->
The audio element is not supported in your browser! <!--都不支持的情况-->
</audio>
<h2>HTML5 Inputs</h2>
<label for="fname">Click this label</label> <!--设定一个文字标签, 指定目标为“fname”-->
<input type="text" id="fname"> <!--定义输入的类型，设定ID为“fname”与label建立联系，点击label的时候会跳到输入框-->
<br><br>
<label for="form-search">Search</label>
<input type="search" id="form-search"> <!--用GoogleChrome打开输入框会变圆角，输入内容后会出现一个能清除输入内容的按钮x, Firefox则跟上面的一样-->
<br><br>
<label for="form-email">Email</label>
<input type="email" id="form-email"> <!--要求输入邮箱格式，如果不符合FireFox的方框会变红色提醒，GoogleChrome则不会-->
<br><br>
<label for="form-url">URL</label> <!--要求输入一个链接-->
<input type="url" id="form-url">
<br><br>
<label for="form-num">Number</label> <!--可以输入数值，也可以在输入框右侧用鼠标点击增大或减小-->
<input type="number" id="form-number" min="1" max="50" step="5"> <!--设定最小值和最大值, 每次增减的大小，这里设定的是每次增大或减小5-->
<br><br>
<label for="form-range">Range</label> <!--设定一个滑块-->
<input type="range" id="form-range" min="1" max="100" value="50"> <!--滑块最小值为1，最大值为100，初始值为50-->
<br><br>
<label for="form-date">Date</label> <!--设定一个日期选项-->
<input type="date" id="form-date" min="2000-1-1" max="2018-4-3">
<br><br>
<label for="form-color">Color</label> <!--设定一个颜色选项-->
<input type="color" id="form-color">
<h2>HTML5 Custom Data Attributes</h2>
<div id="customID" class="fancyPants" data-account="Chequing" data-max="123" data-min="0">Some text goes here!</div>
<!--可以自定义一些数据属性-->
<h3>Make HTML5 work in Internet Explorer</h3>
<!--有的IE版本不支持HTML5，解决方法是插入一个HTML5脚本-->
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<p>IE does not like HTML5. All you have to do is include a conditional comment in the<code><head></code>tag
that link the <a href="http://html5shim.googlecode.com/svn/trunk/html5.js" target="_blank">HTML5 Shim script</a>.</p>
<footer> <!-- 注脚 -->
<p>© 2018 - Lin</p>
</footer>
</body>
</html>
扫一扫
2165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
