<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>标签的使用</title>
</head>
<body>
<p>blockquote 的使用</p>
<!--
作者：offline
时间：2017-07-29
描述：
空格使用
-->
<blockquote style="color: aqua;">明月出天山， 苍茫云海间。 长风几万里， 吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。 戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。</blockquote>
<address>地址信息，用于突出地址信息</address>
<code style="background-color: azure;">可以放置一行代码，什么代码都行</code>
<pre>
pre 标签显示多行代码,可以将代码的所有形式都保存起来进行显示
var i = 1
for(i; i< 10;i++){
alter(i);
}
</pre>
<!-- ul li 用于列表进行显示-->
<ul style="align-self: inherit">
<li>1111111111111111</li>
<li>2222222222222222</li>
<li>3333333333333333</li>
</ul>
<!-- ol li 有编号的显示数据-->
<ol>
<li>1111111111111111</li>
<li>2222222222222222</li>
<li>3333333333333333</li>
</ol>
<!--
作者：offline
时间：2017-07-29
描述：
div 的使用， 在网页制作过程中，可以把一些独立的逻辑部分划分出来。
使用 div 划分出独立的逻辑部分，就是一个独立的区域，然后进行操作，不与其他部分冲突
下面就划分了两个区域
-->
<div style="background-color: beige;" id="hostsrouce">
<h2>热门搜榜</h2>
<ol>
<li>11111111111</li>
<li>22222222222</li>
<li>33333333333</li>
</ol>
</div>
<div style="background-color: bisque;" id="newbook">
<h2>最新榜</h2>
<ol>
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
</ol>
</div>
<!--
作者：offline
时间：2017-07-29
描述：
table 的使用（表格） <th> 表头 ，<tr> 行 <td>列
<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。
加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，
同时如果表格很长，用tbody分段，可以一部分一部分地显示。（
通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
<style type="text/css">
table tr th,td{border: 1px solid black;}
</style>
设置样式：边框
摘要:
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，
还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：<table summary="表格简介文本">
标题:
用以描述表格内容，标题的显示位置：表格上方。
语法：
<table>
<caption>标题文本</caption>
<tr>
<td>…</td>
<td>…</td> …
</tr>…
</table>
-->
<style type="text/css">
table tr th,td{border: 1px solid black;}
</style>
<table style="text-align: center;" summary="表格简介文本，不会再页面上显示但是会提高可读性">
<caption>标题：班级成绩</caption>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>1</td>
<td>34</td>
<td>90.5</td>
</tr>
<tr>
<td>2</td>
<td>44</td>
<td>90.5</td>
</tr>
<tr>
<td>3</td>
<td>42</td>
<td>91.5</td>
</tr>
</tbody>
</table>
<!--
href 的使用：
<a href=""></a>
<a></a> 标签在默认情况下，链接的网页是在当前浏览器窗口中打开。有时候我们需要在新的浏览器窗口中打开
：target = "_blank"
-->
<a href="http://www.baidu.com" target="_blank">链接到百度，在新的窗口打开</a>
<a href="mailto:http://yy@imooc.com" ?subject="观了不起的盖茨比有感" &body="你好，对此评论有些看法"> 对此影评有何感想，发送邮件给我</a>
<!--
作者：offline
时间：2017-07-29
描述：
图片：<img></img>
src 标识图像的位置
alt：指定图像的描述性文本，当图像不可见（下载不成功时）可以，看到该属性指定的2文本
title ： 提供图像可见时对图像的描述（鼠标滑过图片时显示的文本）
-->
<img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" title="电影介绍" alt="电影介绍"/>
<!--
作者：offline
时间：2017-07-29
描述：
多行输入
-->
<form action="" method="post">
<label>个人简历:</label>
<textarea cols="40" rows="8">在这里输入</textarea>
<input type="reset" value="重置" />
<input type="submit" value="提交" />
</form>
<!--
作者：offline
时间：2017-07-29
描述：
单选框（radio）和多选框（checkbox）的练习。
type 属性 ，name 为控件起的名字，value 提交的数据
checked 当设置checked = "checked" 表示默认选上了
-->
性别：<input type="radio" name="sex" value="男" / checked="checked">男
<input type="radio" name="sex" value="女" />女
<br />
你喜欢什么？
<input type="checkbox" name="love" value="吃" />吃
<input type="checkbox" name="love" value="喝" checked="checked"/>喝
<input type="checkbox" name="love" value="玩" checked="checked"/>玩
<input type="checkbox" name="love" value="乐" />乐
<!--
作者：offline
时间：2017-07-29
描述：
下拉列表的使用：select>option value="值" selected="selected" 代表了收了列表后出现的一行那个值
select 加上multiple="multiple"属性 可以进行多选
-->
<form action="" method="post">
<label>城市</label>
<select>
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="天津">天津</option>
<option value="河北">河北</option>
</select>
<input type="submit" value="提交"/>
</form>
<hr />
<form action="#" method="post">
<label>城市</label>
<select multiple="multiple">
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="天津">天津</option>
<option value="河北">河北</option>
</select>
<input type="submit" value="提交"/>
</form>
</body>
</html>
本文详细介绍HTML常用标签的应用实例，包括区块引用、代码显示、列表、表格、表单元素及多媒体内容处理等，通过实例帮助读者掌握HTML标签的实际应用。
扫一扫
2390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
