HTML5程序设计-3期（KC014） HTML5保留的基本标签 KC014070000007-1 HTML5保留的常用标签.pptx

HTML5保留的常用标签主讲人： 任文娟HTML5段落及文本格式标签列表标签保留的常用标签图像标签超链接标签表格标签框架标签容器标签1.HTML5段落及文本格式标签标签名称说明<p></p>段落标签,产生一个段落，段落与段落之间默认为空一行<hn></hn>标题标签,n取值为1-6，取值越大，字体越小，默认为左对齐显示的黑体字<hr/>水平线标签，单标签，可以写作<hr><br/>换行标签,单标签，可以写作<br><i></i>斜体字标签<b></b>和<strong></strong>粗体字标签和 上标标签下标标签<del></del>和<ins></ins>修订标签，分别用于为文本内容添加删除线和下划线<pre></pre>预格式化标签试一试1.HTML5段落及文本格式标签<p>这是段落1</p><p>这是段落2</p><hr/><h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><i>这里是斜体字</i><br/><b>这里是粗体字</b>试一试2.列表标签标签名称说明<ol>有序列表标签<ul>无序列表标签<dl>定义列表标签<ol> <li>水果</li> <ul> <li>苹果</li> <li>橘子</li> <li>香蕉</li> <li>柠檬</li> </ul> <li>饮品</li> <ul> <li>咖啡</li> <li>茶</li> <li>汽水</li> </ul></ol>试一试3.图像标签图像标签<img> 图像标签<img>用于在网页中嵌入图片，该标签无需结束标签，可单独使用。基本用法如下：<img src="图像文件URL" /><img src="img/landscape.jpg" alt="风景名胜" border="2" title="风景区"/>4.超链接标签超链接标签<a> 超链接可以用于指向其他任何位置，包括Internet上的其他网页、本地其他文档甚至当前页面中其他位置。适用于制作网页的导航菜单或列表，也可以用于发送邮件或下载文件等。基本用法如下：<a href=”URL地址”target=“ ”>链接文本或图片</a>超链接标签有如下两个重要属性：href：目标内容的URL地址。target：目标内容的打开方式，取值如下：target属性值说明_self链接的目标页面在自身窗口中打开，覆盖原页面内容_blank链接的目标页面在新窗口中打开_top链接的目标页面在顶层框架中打开_parent链接的目标页面在父框架中打开试一试4.超链接标签<a href="test3.html" target="_blank">图像标签的使用</a> | <a href="test2.html" target="_self">列表标签的使用</a>超链接标签也可以通过点击跳转同一页面的指定区域，其语法格式如下：<a href="#指定区域名">链接文本或图像</a>这里的“指定区域名”可以自定义，其格式如下：<a name="区域名">目标内容</a>试一试5.表格标签标签名称说明 <table>表格标签<tr>表格行标签<td>单元格标签<th>表头标签<caption>表格标题标签<caption>成绩一览表</caption><table border="1"> <th>姓名</th> <th>语文</th> <th>数学</th> <tr> <td>张三</td> <td>86</td> <td>90</td> </tr> <tr> <td>李四</td> <td>80</td> <td>70</td> </tr></table>试一试6.框架标签内联框架标签<iframe> 框架标签用于在网页的框架内定义子窗口。 由于框架标签对于网页的可用性有负面影响，在HTML5中不再支持HTML4.01中原有的框架标签<frame>和<frameset>。只保留了内联框架标签<iframe>。该标签在HTML5中仅支持src属性，用于指定框架内部的网页来源。基本格式如下：<iframe src="网页URL" /><iframe src="test3.html" width="500" height="300"></iframe>试一试7.容器标签标签名称说明<div>用于定义文档中的区域或节，是一个块级元素<span>通常作为文本的容器，是一个内联元素<div> <p>这是一个div标签，用于容纳一些段落文本或者图片</p> <img src="img/landscape.jpg" /></div><hr /><div style="width: 200px;color: red;"> <p>这是一个di