重要标签
| 标签 | 描述 | 实例 | ||
|---|---|---|---|---|
<!--...--> |
定义注释 | <!--这是一段注释。注释不会在浏览器中显示。--> |
||
<!DOCTYPE> |
定义文档类型 | <!DOCTYPE html> |
||
<a> |
定义锚 | <a href="http://www.w3school.com.cn">W3School</a> |
||
<b> |
定义粗体字 | |||
<blockquote> |
定义长的引用 | <blockquote>This is a long quotation.</blockquote> |
||
<body> |
定义文档的主体 | <body><p>body 元素的内容会显示在浏览器中。</p></body> |
||
<button> |
定义按钮 (push button) | <button type="button">Click Me!</button> |
||
<caption> |
定义表格标题 | <caption>Monthly savings</caption> |
||
<code> |
定义计算机代码文本 | |||
<datalist> |
定义下拉列表 | <datalist id="cars"> <option value="BMW"><option value="Ford"><option value="Volvo"></datalist> |
||
<dd> |
定义定义列表中项目的描述 | <dd>用来计算的仪器 ... ...</dd> |
||
<del> |
定义被删除文本 | a dozen is <del>20</del> 12 pieces |
||
<div> |
定义文档中的节 | <div style="color:#00FF00"><h3>This is a header</h3><p>This is a paragraph.</p></div> |
||
<dl> |
定义定义列表 | <dl><dt>计算机</dt><dd>用来计算的仪器 ... ...</dd><dt></dt><dd>以视觉方式显示信息的装置 ... ...</dd></dl> |
||
<dt> |
定义定义列表中的项目 | <dl><dt>计算机</dt><dd>用来计算的仪器 ... ...</dd<dt>显示器</dt><dd>以视觉方式显示信息的装置 ... ...</dd></dl> |
||
<em> |
定义强调文本 | |||
<figure> |
定义媒介内容的分组，以及它们的标题 | <figure><p>黄浦江上的的卢浦大桥</p> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /></figure> |
||
<footer> |
定义强调文本 | |||
<form> |
定义供用户输入的 HTML 表单 | <form action="form_action.asp" method="get"></form> |
||
<frame> |
定义框架集的窗口或框架 | <frame src="frame_a.htm" /> |
||
<frameset> |
定义框架集 | <frameset cols="25%,50%,25%"></frameset> |
||
<h1> to <h6> |
定义 HTML 标题 | <h1>这是标题 1</h1> |
||
<head> |
定义关于文档的信息 | <head><title>文档的标题</title></head> |
||
<header> |
定义 section 或 page 的页眉 | <header><h1>Welcome to my homepage</h1><p>My name is Donald Duck</p></header> |
||
<hr> |
定义水平线 | <h1>This is header 1</h1><hr /><p>This is some text</p> |
||
<html> |
定义 HTML 文档 | <html><head>这里是文档的头部 ...</head></html> |
||
<i> |
定义斜体字 | |||
<iframe> |
定义内联框架 | |||
<img> |
定义图像 | <img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" /> |
||
<input> |
定义输入控件 | <input type="text" name="fname" /> |
||
<kbd> |
定义键盘文本 | |||
<label> |
定义 input 元素的标注 | <label for="male">Male</label> |
||
<legend> |
定义 fieldset 元素的标题 | <legend>health information</legend> |
||
<li> |
定义列表的项目 | <li>Coffee</li> |
||
<meta> |
定义关于 HTML 文档的元信息 | |||
<nav> |
定义导航链接 | <nav><a href="index.asp">Home</a></nav> |
||
<noframes> |
定义针对不支持框架的用户的替代内容 | <noframes><body>Your browser does not handle frames!</body></noframes> |
||
<noscript> |
定义针对不支持客户端脚本的用户的替代内容 | <noscript>Your browser does not support JavaScript!</noscript> |
||
<ol> |
定义有序列表 | <ol> <li>Coffee</li></ol> |
||
<optgroup> |
定义选择列表中相关选项的组合 | <optgroup label="Swedish Cars"><option value ="volvo">Volvo</option><option value ="saab">Saab</option></optgroup> |
||
<option> |
定义选择列表中的选项 | <option value ="volvo">Volvo</option> |
||
<p> |
定义段落 | <p>This is some text in a very short paragraph</p> |
||
<q> |
定义短的引用 | <q>Here is a short quotation here is a short quotation</q> |
||
<script> |
定义客户端脚本 | <script type="text/javascript">document.write("Hello World!")</script> |
||
<select> |
定义选择列表（下拉列表） | <select> <option value ="volvo">Volvo</option></select> |
||
<small> |
定义小号文本 | |||
<span> |
定义文档中的节 | <p><span>some text.</span>some other text.</p> |
||
<strong> |
定义强调文本 | |||
<style> |
定义文档的样式信息 | `` | ||
<sup> |
定义上标文本 | 这段文本包含 <sup>上标</sup> |
||
<table> |
定义表格 | <table border="1"><tr><th>Month</th></table> |
||
<tbody> |
定义表格中的主体内容 | <tbody><tr><td>January</td></tr> </tbody> |
||
<td> |
定义表格中的单元 | <td>January</td><td>$100</td> |
||
<textarea> |
定义多行的文本输入控件 | <textarea rows="3" cols="20"> |
||
<tfoot> |
定义表格中的表注内容（脚注） | <tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot> |
||
<th> |
定义表格中的表头单元格 | <th>Company</th><th>Address</th> |
||
<thead> |
定义表格中的表头内容 | <thead><tr><th>Month</th><th>Savings</th></tr></thead> |
||
<time> |
定义日期/时间 | <p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p> |
||
<title> |
定义文档的标题 | <head> <title>XHTML Tag Reference</title></head> |
||
<tr> |
定义表格中的行 | <tr><th>Month</th><th>Savings</th></tr> |
||
<ul> |
定义无序列表 | <ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul> |
||
<video> |
定义视频 | <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video> |
作业完成汇报
编程题
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<section id="one">
<div class="inner">
<iframe height="500" width="500" src="http://v.youku.com/v_show/id_XMzYxODEwNjA0MA==.html?spm=..m_26664.5~5!2~5~5~5!2~5!4~5~5~A" frameborder="0"></iframe>
</div>
</section>
</body>
</html>
HTML有哪些版本？HTML5的新增标签有哪些？
一共有5个版本。
1、结构标签
（1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；
（2）article：特殊独立区块，表示这篇页眉中的核心内容；
（3）aside：标签内容之外与标签内容相关的辅助信息；
（4）header：某个区块的头部信息/标题；
（5）hgroup：头部信息/标题的补充内容；
（6）footer：底部信息；
（7）nav：导航条部分信息
（8）figure：独立的单元，例如某个有图片与内容的新闻块。
2、表单标签
（1）email：必须输入邮件；
（2）url：必须输入url地址；
（3）number：必须输入数值；
（4）range：必须输入一定范围内的数值；
（5）Date Pickers：日期选择器；
a.date：选取日、月、年
b.month：选取月、年
c.week：选取周和年
d.time：选取时间（小时和分钟）
e.datetime：选取时间、日、月、年（UTC时间）
f.datetime-local：选取时间、日、月、年（本地时间）
（6）search：搜索常规的文本域；
（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：数据标签，给搜索引擎使用；发布日期<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:加密；
什么事浏览器的解析器，浏览器是如何解析一个 HTML 文档的
HTML解析器的工作是将html标识解析为解析树。
HTML文法定义 The HTML grammar definition
W3C组织制定规范定义了HTML的词汇表和语法。
非上下文无关文法 Not a context free grammar
正如在解析简介中提到的，上下文无关文法的语法可以用类似BNF的格式来定义。
不幸的是，所有的传统解析方式都不适用于html（当然我提出它们并不只是因为好玩，它们将用来解析css和js），html不能简单的用解析所需的上下文无关文法来定义。
Html 有一个正式的格式定义——DTD（Document Type Definition 文档类型定义）——但它并不是上下文无关文法，html更接近于xml，现在有很多可用的xml解析器，html有个xml的变体——xhtml，它们间的不同在于，html更宽容，它允许忽略一些特定标签，有时可以省略开始或结束标签。总的来说，它是一种soft语法，不像xml呆板、固执。
显然，这个看起来很小的差异却带来了很大的不同。一方面，这是html流行的原因——它的宽容使web开发人员的工作更加轻松，但另一方面，这也使很难去写一个格式化的文法。所以，html的解析并不简单，它既不能用传统的解析器解析，也不能用xml解析器解析。
今日学习总结
- 重要标签的整理，学习