标签(2)

<ul><li>文本</li></ul>显示没有前后顺序的列表信息，自带一个小圆点

<ol><li>文本</ol></li>显示有前后顺序的列表信息，自带1，2，3顺序

<div></div>相当于容器,设置id

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>div标签</title>
 6 <style type="text/css">
 7     div{
 8         color:blue;
 9     }
10 </style>
11 </head>
12 <body>
13 <div <!--style="color:#0000FF"-->id="456">
14      <h2>热门课程排行榜</h2>
15     <ol>
16         <li>前端开发面试心法 </li>
17         <li>零基础学习html</li>
18         <li>javascript全攻略</li>
19     </ol>
20 </div>
21    <div id="123">
22         <h2>最新课程排行</h2>
23     <ol>
24         <li>版本管理工具介绍—Git篇 </li>
25         <li>Canvas绘图详解</li>
26         <li>QQ5.0侧滑菜单</li>
27     </ol>
28    </div>  
29 </body>
30 </html>

 

创建表格的四个元素：

table、tbody、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。

3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

5、<th>…</th>：表格的头部的一个单元格，表格表头。

6、表格中列的个数，取决于一行中数据单元格的个数。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>认识table表标签</title>
 6 </head>
 7 <body>
 8 <table>
 9   <tbody>
10     <tr>
11       <th>班级</th>
12       <th>学生数</th>
13       <th>平均成绩</th>
14     </tr>
15     <tr>
16       <td>一班</td>
17       <td>30</td>
18       <td>89</td>
19     </tr>
20     <tr>
21       <td>二班</td>
22       <td>35</td>
23       <td>85</td>
24     </tr>
25     <tr>
26         <td>三班</td>
27         <td>32</td>
28         <td>80</td>
29     </tr>
30   </tbody>
31 </table>
32 </body>
33 </html>

为表格添加边框

在css样式中添加，border表示画边框，solid表示实线

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>为表格添加边框</title>
 6 <style type="text/css">
 7 table tr td,th{border:1px solid #000;}
 8 </style>
 9 </head>
10 
11 <body>
12 <table summary="">
13   <tr>
14     <th>班级</th>
15     <th>学生数</th>
16     <th>平均成绩</th>
17   </tr>
18   <tr>
19     <td>一班</td>
20     <td>30</td>
21     <td>89</td>
22   </tr>
23   <tr>
24     <td>二班</td>
25     <td>35</td>
26     <td>85</td>
27   </tr>
28   <tr>
29     <td>三班</td>
30     <td>32</td>
31     <td>80</td>
32   </tr>
33 </table>
34 
35 </body>
36 </html>

表格摘要：增加可读性（语义化），使搜索引擎更好的了解你，在<table summary="内容"></table>标签中声明

表格标题：在<table></table>里面添加<caption>标题</caption>标签

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>认识table表标签</title>
 6 <style type="text/css">
 7 table tr td,th{
 8     border:1px solid #000;
 9 }
10 </style>
11 </head>
12 <body>
13 <table summary="本表格记录2012年到2013年库存记录，记录包括u盘和耳机库存量">
14   <caption>"2012年到2013年库存记录"</caption>
15   <tr>
16     <th>产品名称 </th>
17     <th>品牌 </th>
18     <th>库存量（个） </th>
19     <th>入库时间 </th>
20   </tr>
21   <tr>
22     <td>耳机 </td>
23     <td>联想 </td>
24     <td>500</td>
25     <td>2013-1-2</td>
26   </tr>
27   <tr>
28     <td>U盘 </td>
29     <td>金士顿 </td>
30     <td>120</td>
31     <td>2013-8-10</td>
32   </tr>
33   <tr>
34     <td>U盘 </td>
35     <td>爱国者 </td>
36     <td>133</td>
37     <td>2013-3-25</td>
38   </tr>
39 </table>
40 </body>
41 </html>

使用<a></a>标签进行超链接，用法<a href="链接的网址" title="鼠标悬浮时显示文字"  target="_blank">链接前的文字</a>，(target改为新窗口打开内容)

<ul><li>内容</li></ul>无序显示内容，带有小圆点，<ol><li>内容</ol></li>有序显示的内容，会123排列

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>了不起的盖茨比</title>
 6 </head>
 7 <body>
 8     <ul>
 9        <li><a href="#" title="前端开发面试心法">前端开发面试心法</a> </li>
10        <li><a href="#" title="123">零基础学习html</a></li>
11        <li><a href="#" title="JavaScript全攻略">JavaScript全攻略</a></li>
12     </ul>
13     <p>1922年的春天，一个想要成名名叫尼克•卡拉威（<a href="http://www.m1905.com/mdb/star/3316/" title="人名" target="_blank">托比•马奎尔Tobey Maguire</a> 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>
14     <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
15 </body>
16 </html>

发送邮件mailto:发件人，cc抄送人，bcc密键抄送，subject为主题，body为邮件内容

1.“抄送”--就是你发给“收信人”邮件的同时,再向另一人(或几个人)同时发送该邮件,“收信人”从邮件中知道你都把邮件“抄送”给了谁.
2."密件抄送"---传送过程基本同上,但是,邮件会按照"密件"的原则,将传送给“收信人”的邮件信息中无法知道你都把邮件发给了谁,“收信人”只知道你把邮件发给了他一个人.也就是把“抄送”对象"保密"起来了.
3.“抄送”"密件抄送"和“收信人”的概念区别是:“收信人”是指邮件发送的第一接收人(最主要的接收人),.“抄送”"密件抄送"是由你选择的可以同时阅读邮件的其他人(非主要的邮件接收人).

<a href="mailto:yy@imooc.com?cc=xiaoming@imooc.com&bcc=xiaoyu@imooc.com&subject=主题&body=邮件内容">发送</a>

 插入图片

<img src="网址" title="提示文本" alt="当网速不给力时，可看到该图片指定的文本"/>

posted @ 2016-05-17 11:33  成功人土  阅读(174)  评论(0)  编辑  收藏  举报