(一). 教学内容
HTML 总结和重要标签分类。
(二). 课程重点
数量的掌握 HTML 中的重要标签。
(三). 作业完成情况
1.将红色标注的重要标签进行整理。
注释标签 <!--...-->
文档类型标签 <!DOCTYPE>
用途 实例代码 定义文档类型 <!DOCTYPE html>
a标签 <a>
用途 实例代码 定义锚 <a href="http://www.w3school.com.cn">W3School</a>
重要属性 属性意义 href 规定链接指向的页面的 URL name 设置或返回一个链接的名称 target 规定在何处打开链接文档 type 设置或返回被链接资源的 MIME 类型
b标签 <b>
用途 实例代码 标签规定粗体文本 <p>这是普通文本 - <b>这是粗体文本</b>。</p>
长引用标签 blockquote
用途 实例代码 定义长的引用 <blockquote>This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation</blockquote>
可见区域标签 <body>
用途 实例代码 定义文档的主体 <body>文档的内容... ...</body>
重要属性 属性意义 background 规定文档的背景图像 bgcolor 规定文档的背景颜色 text 规定文档中所有文本的颜色
按钮标签 <button>
用途 实例代码 定义一个按钮 <button type="button">Click Me!</button>
重要属性 属性意义 type 规定按钮的类型 form 规定按钮属于一个或多个表单 formtarget 覆盖 form 元素的 target 属性;该属性与 type=“submit” 配合使用 name 规定按钮的名称
表格标题标签 <caption>
用途 实例代码 定义表格标题 <table border="1"> <caption>Monthly savings</caption><tr> <th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td> </tr></table>
计算机代码标签 code
下拉列表标签 <datalist>
用途 实例代码 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 <input id="myCar" list="cars" /><datalist id="cars"><optionvalue="BMW"><option value="Ford"><option value="Volvo"></datalist>
项目描述标签 dd
用途 实例代码 定义定义列表中项目的描述 <dl><dt>计算机</dt><dd>用来计算的仪器 ... ...</dd><dt显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd></dl>
定义删除文本标签 <del>
用途 实例代码 定义被删除文本 a dozen is <del>20</del> 12 pieces
重要属性 属性意义 datetime 定义文本被删除的日期和时间 cite 指向另外一个文档的 URL,此文档可解释文本被删除的原因。
布局容器标签 div
用途 实例代码 定义文档中的节 <div style="color:#00FF00"><h3>This is a header</h3><p>This is a paragraph.</p></div>
重要属性 属性意义 align 规定 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
用途 实例代码 定义 section 或 page 的页脚 <footer><p>Posted by: W3School</p><p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p></footer>
表单标签 <form>
用途 实例代码 定义供用户输入的 HTML 表单 <form action="form_action.asp" method="get"><p>First name: <input type="text" name="fname" /></p><p>Last name: <input type="text" name="lname" /></p><input type="submit" value="Submit" /></form>
重要属性 属性意义 action 规定当提交表单时向何处发送表单数据 name 规定表单的名称 target 规定在何处打开 action URL
框架标签 <frame>
重要属性 属性意义 name 设置或返回框架的名称 noResize 设置或返回框架是否可调整大小 src 设置或返回应被加载到框架中的文档的 URL
框架集标签 <frameset>
重要属性 属性意义 cols 定义框架集中列的数目和尺寸 id 规定元素的唯一 id rows 定义框架集中行的数目和尺寸 class 规定元素的一个或多个类名
标题标签
用途 实例代码 用于定义文档的头部,它是所有头部元素的容器 <h1>我的第一个标题</h1>
头部标签 <head>
用途 实例代码 定义文档的头部,它是所有头部元素的容器 <head><title>文档的标题</title></head>
重要属性 属性意义 profile 一个由空格分隔的 URL 列表,这些 URL 包含着有关页面的元数据信息
题目标签 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>
重要属性 属性意义 align 规定 hr 元素的对齐方式 noshade 规定 hr 元素的颜色呈现为纯色 size 规定 hr 元素的高度(厚度) width 规定 hr 元素的宽度
定义文档标签 <html>
用途 实例代码 定义 HTML 文档 <html><head>这里是文档的头部 ... ...</head></html>
重要属性 属性意义 manifes 定义一个 URL,在这个 URL 上描述了文档的缓存信息 xmlns 定义 XML namespace 属性
倾斜字标签 i
内联框架标签 iframe
重要属性 属性意义 align 规定如何根据周围的元素来对齐此框架 frameborder 规定是否显示框架周围的边框 height 规定 iframe 的高度 name 规定 iframe 的名称 src 规定在 iframe 中显示的文档的 URL width 定义 iframe 的宽度
图片标签 <img>
用途 实例代码 定义图像 <img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
重要属性 属性意义 alt 规定图像的替代文本 src 规定显示图像的 URL
控件标签 <input>
用途 实例代码 定义输入控件 <input type="text" name="fname" />
重要属性 属性意义 align 规定图像输入的对齐方式 alt 定义图像输入的替代文本 formt 规定输入字段所属的一个或多个表单 height 定义 input 字段的高度。(适用于 type=“image”) name 定义 input 元素的名称 size 定义输入字段的宽度 src 定义以提交按钮形式显示的图像的 URL type 规定 input 元素的类型 value 规定 input 元素的值
键盘文本标签 kbd
标注标签 <label>
用途 实例代码 定义 input 元素的标注 <label for="male">Male</label>
重要属性 属性意义 for 规定 label 绑定到哪个表单元素 form 规定 label 字段所属的一个或多个表单
定义 fieldset 元素标签 <legend>
用途 实例代码 定义 fieldset 元素的标题 <legend>health information</legend>
重要属性 属性意义 align 为 fieldset 中的标题定义对齐方式
定义 列表的项目的标签 li
用途 实例代码 定义列表的项目 <ol> <li>Coffee</li> </ol>
重要属性 属性意义 type 规定使用哪种项目符号 value 规定列表项目的数字
定义文档元信息标签 <meta>
重要属性 属性意义 content 定义与 http-equiv 或 name 属性相关的元信息 http-equiv 把 content 属性关联到 HTTP 头部 name 把 content 属性关联到一个名称 scheme 定义用于翻译 content 属性值的格式
定义导航链接标签 nav
用途 实例代码 定义导航链接 <nav><a href="index.asp">Home</a><a href="html5_meter.asp">Previous</a><a href="html5_noscript.asp">Next</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><li>Tea</li><li>Milk</li></ol>
重要属性 属性意义 compact 规定列表呈现的效果比正常情况更小巧 reversed 规定列表顺序为降序 start 规定有序列表的起始值 type 规定在列表中使用的标记类型
列表组合标签 <optgroup>
用途 实例代码 定义选择列表中相关选项的组合 <optgroup label="Swedish Cars"></optgroup>
重要属性 属性意义 label 为选项组规定描述 disabled 规定禁用该选项组
定义列表选项标签 <option>
用途 实例代码 定义选择列表中的选项 <option value ="volvo">Volvo</option>
重要属性 属性意义 disabled 规定此选项应在首次加载时被禁用 label 定义当使用 <optgroup>
时所使用的标注 selected 规定选项(在首次显示在列表中时)表现为选中状态 value 定义送往服务器的选项值
定义段落 p
用途 实例代码 定义段落 <p>This is some text in a very short paragraph</p>
重要属性 属性意义 align 规定段落中文本的对齐方式
短引用标签 <q>
用途 实例代码 定义短的引用 <p>This is some text in a very short paragraph</p>
重要属性 属性意义 cite 定义引用的出处或来源(citation)
定义客户端脚本标签 <script>
用途 实例代码 定义客户端脚本 <script type="text/javascript"></script>
重要属性 属性意义 type 指示脚本的 MIME 类型 src 规定外部脚本文件的 URL
下拉列表标签 <select>
用途 实例代码 定义选择列表(下拉列表) <select><option value ="volvo">Volvo</option><option value ="saab">Saab</option></select>
重要属性 属性意义 form 规定文本区域所属的一个或多个表单 name 规定下拉列表的名称 required 规定文本区域是必填的 size 规定下拉列表中可见选项的数目
小号文本标签 <small>
用途 实例代码 定义小号文本 <small>我的文本</small>
小号文本标签 <span>
用途 实例代码 定义文档中的节 <p><span>some text.</span>some other text.</p>
强调文本标签 <strong>
文档样式信息标签 <style>
用途 实例代码 定义文档的样式信息 <style type="text/css"></style>
重要属性 属性意义 type 规定样式表的 MIME 类型 media 为样式表规定不同的媒介类型
上标文本标签 <sup>
用途 实例代码 定义上标文本 <sup>上标</sup>
表格标签 <table>
用途 实例代码 定义表格 <table border="1">
重要属性 属性意义 align 规定表格相对周围元素的对齐方式 bgcolor 规定表格的背景颜色 border 规定表格边框的宽度 width 规定表格的背景颜色 bgcolor 规定表格的宽度
表格主体内容标签 <tbody>
用途 实例代码 定义表格中的主体内容 <tbody><tr><td>January</td><td>$100</td></tr></tbody>
重要属性 属性意义 align 定义 tbody 元素中内容的对齐方式 char 规定根据哪个字符来进行文本对齐 charoff 规定第一个对齐字符的偏移量 valign 规定 tbody 元素中内容的垂直对齐方式
单元格标签 <td>
用途 实例代码 定义表格中的单元 <td>January</td><td>$100</td>
重要属性 属性意义 align 规定单元格内容的水平对齐方式 bgcolor 规定单元格的背景颜色 char 规定根据哪个字符来进行内容的对齐 colspan 规定单元格可横跨的列数 height 规定表格单元格的高度 rowspan 规定单元格可横跨的行数 width 规定表格单元格的宽度
多行文本输入标签 <textarea>
用途 实例代码 定义多行的文本输入控件 <textarea rows="3" cols="20">在w3school,你可以找到你所需要的所有的网站建设教程。</textarea>
重要属性 属性意义 cols 规定文本区内的可见宽度 form 规定文本区域所属的一个或多个表单 name 规定文本区的名称 colspan 规定单元格可横跨的列数 rows 规定文本区内的可见行数
表格标注标签 <tfoot>
用途 实例代码 定义表格中的表注内容(脚注) <tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot>
重要属性 属性意义 align 定义 tfoot 元素中内容的对齐方式 char 规定根据哪个字符来进行文本对齐 valign 规定 tfoot 元素中内容的垂直对齐方式
表格单元格标签 <th>
用途 实例代码 定义表格中的表头单元格 <th>Company</th><th>Address</th>
重要属性 属性意义 align 规定单元格内容的水平对齐方式 bgcolor 规定表格单元格的背景颜色 colspan 设置单元格可横跨的列数
表格表头标签 <thead>
用途 实例代码 定义表格中的表头内容 <thead><tr><th>Month</th><th>Savings</th></tr></thead>
重要属性 属性意义 align 定义 thead 元素中内容的对齐方式 char 规定根据哪个字符来进行文本对齐 charoff 规定第一个对齐字符的偏移量 valign 规定 thead 元素中内容的垂直对齐方式
时间标签 <time>
用途 实例代码 定义日期/时间 <p>我们在每天早上 <time>9:00</time> 开始营业。</p>
重要属性 属性意义 datetime 规定日期 / 时间。否则,由元素的内容给定日期 / 时间 pubdate 指示 元素中的日期 / 时间是文档(或
元素)的发布日期
文档标题标签 <title>
用途 实例代码 定义文档的标题 <title>XHTML Tag Reference</title>
重要属性 属性意义 dir 规定元素中内容的文本方向 lang 规定元素中内容的语言代码 xml:lang 规定 XHTML 文档中元素内容的语言代码
表格行标签 <tr>
用途 实例代码 定义表格中的行 <tr><th>Month</th><th>Savings</th></tr>
重要属性 属性意义 align 定义表格行的内容对齐方式 bgcolor 规定表格行的背景颜色 char 规定根据哪个字符来进行文本对齐 valign 规定表格行中内容的垂直对齐方式
无序标签 <ul>
用途 实例代码 定义无序列表 <ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
重要属性 属性意义 compact 规定列表呈现的效果比正常情况更小巧 type 规定列表的项目符号的类型
视频标签 <video>
用途 实例代码 定义视频 <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>
重要属性 属性意义 height 设置视频播放器的高度 src 要播放的视频的 URL width 设置视频播放器的宽度
2.自学使用 HTML 5 的视频和音频标签,在页面中插入一段音频和视频
代码展示
<!DOCTYPE html>
< html>
< head>
< title> </ title>
</ head>
< body>
< embed src = ' http://player.youku.com/player.php/sid/XMzU5MjkxNDAwOA==/v.swf' allowFullScreen = ' true' quality = ' high' width = ' 480' height = ' 400' align = ' middle' allowScriptAccess = ' always' type = ' application/x-shockwave-flash' > </ embed>
< embed src = " html.mp3" > 音频文件</ embed>
</ body>
</ html>
成果展示
4. 回答问题
a. HTML 有哪些版本?HTML5 的新增标签有哪些?
版本 :HTML 2.0、HTML 3.2、HTML 4.0、HTML 4.01(微小改进)、HTML 5 新增标签 :<article>、<aside>、<audio>、<bdi>、<canvas>、<command>、<datalist>、<details> 、<dialog>、<embed>、<figcaption>、<figure>、<footer>、<header>、<keygen>、<mark>、<meter>、<nav>、<output>、<progress>、<rp>、<rt>、<ruby>、<section>、<source>、<summary>、<time>、<track>、<video>、<wbr>
b. 什么是浏览器的解析器,浏览器是如何解析一个 HTML 文档的?
HTML文档是作为带有字符编码信息的字节流序列在互联网中传送的。字符编码信息可以在随文档发送的HTTP响应头信息中指定,也可以在文档的 HTML标签中指定。浏览器根据字符编码信息将字节流转换为显示在浏览器上的字符。如果不知道如何构造一个页面的字符,浏览器自然也不能正确地渲染页面。绝大部分浏览器在开始执行任何JavaScript代码或者绘制页面之前都要缓冲一定数量的字节流,缓冲的同时它们也要查找相关的字符编码设定(一个值得注意的例外是IE6/7/8)。
不同浏览器需要缓冲的字节流数量不同,另外如果找不到编码设定,各浏览器默认的编码也不同。但是不管哪一种浏览器,如果在已经缓冲了足够的字节流、开始渲染页面之后才发现指定的编码设定与其默认值不同,都会导致重新解析文档并重绘页面。如果编码的变化影响到了外部资源(例如css\js\media),浏览器甚至会重新对资源进行请求。 为了避免这些延迟,对任何超过1k(精确地说是1024字节,这是我们测试过的所有浏览器的最大缓冲限制)的HTML文档,要尽早指定字符编码。