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

来源：互联网发布：数据分析挖掘主观题编辑：程序博客网时间：2024/05/12 23:18
<!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 = 1for(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>
阅读全文
1 0