您的位置：首页 > Web前端 > HTML

Html 标签的使用小结（实例代码）

2017-07-29 19:36 507 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航