HTML+CSS标签 (2)

摘要:紧接前文HTML+CSS初步 (1),本文继续学习标签的用法。


8 语义化,让你的网页更好的被搜索引擎理解

在这一章节我们要开始把网页中常用到的标签一 一向大家介绍,学习这一章节的时候要记住学习html标签过程中,主要注意两个方面的学习:标签的用途、标签在浏览器中的默认样式。
标签的用途:我们学习网页制作时,常常会听到一个词,语义化。那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等。

讲了这么多语义化,但是语义化可以给我们带来什么样的好处呢?
1. 更容易被搜索引擎收录。
2. 更容易让屏幕阅读器读出网页内容。
在本章节会带领大家学习了解html中每个标签的语义(用途)。


9 标签,网页上显示的内容放在这里

在网页上要展示出来的页面内容一定要放在body标签中。

[html]  view plain  copy
 print ?
  1. >  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>了不起的盖茨比title>  
  6. head>  
  7. <body>  
  8.     <h1>了不起的盖茨比h1>  
  9.     <p>1922年的春天,一个想要成名名叫<em>尼克•卡拉威em>(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的<span>美国梦span>,他搬入纽约附近一海湾居住。p>  
  10.       
  11.     <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为<strong>"爵士乐时代"strong>吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。p>  
  12. body>  
  13. html>  
HTML+CSS标签 (2)_第1张图片


10 开始学习

标签,添加段落

如果想在网页上显示文章,这时就需要

标签了,把文章的段落放到

标签中。
语法:

段落文本



注意一段文字一个

标签,如在一篇新闻文章中有3段文字,就要把这3个段落分别放到3个

标签中。

标签的默认样式,可以在上图中看出来,段前段后都会有空白,如果不喜欢这个空白,可以用css样式来删除或改变它。

[html]  view plain  copy
 print ?
  1. >  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title> p标签title>  
  6. head>  
  7. <body>  
  8. <p>我的第一个段落。p>  
  9. <p>我的第二个段落。p>  
  10. body>  
  11. html>  
HTML+CSS标签 (2)_第2张图片


11 了解标签,为你的网页添加标题

文章的段落用

标签,那么文章的标题用什么标签呢?在本节我们将使用标签来制作文章的标题。
标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。

是最高的等级。
语法:
标题文本 (x为1-6)
文章的标题前面已经说过了,可以使用标题标签,另外网页上的各个栏目的标题也可使用它们。如下图为腾讯网站。


注意:因为h1标签在网页中比较重要,所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如:

腾讯网



h1-h6标签的默认样式:
标签代码:

[html]  view plain  copy
 print ?
  1. >  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>h1-h6标题标签title>  
  6. head>  
  7. <body>  
  8. <h1>了不起的盖茨比h1>  
  9.     <p>《了不起的盖茨比》为那个奢靡年代的缩影。盖茨比怀揣着对"美国梦"的期翼,投身到那个年代的灯红酒绿之中,却在名利场中看尽世态炎凉,以及浮华背后一切终将逝去的空虚怅惘。1925年《了不起的盖茨比》问世。 p>  
  10.     <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。p>  
  11. body>  
  12. html>  


12 加入强调语气,使用标签

有了段落又有了标题,现在如果想在一段话中特别强调某几个文字,这时候就可以用到标签。但两者在强调的语气上有区别: 表示强调, 表示更强烈的强调。并且在浏览器中 默认用斜体表示, 用粗体表示。两个标签相比,目前国内前端程序员更喜欢使用表示强调。

语法:
需要强调的文本  
需要强调的文本 

如,在网上商城中,某产品的打折后的价格是需要强调的。如下图。

代码实现:

的内容在浏览中显示为斜体,显示为加粗。如果不喜欢这种样式,没有关系,以后可以使用css样式去改变它。

[html]  view plain  copy
 print ?
  1. >  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>了不起的盖茨比title>  
  6. head>  
  7. <body>  
  8.     <p>1922年的春天,一个想要成名名叫<strong>尼克•卡拉威strong><em>托比•马奎尔Tobey Maguire饰em>)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。p>  
  9.     <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。p>  
  10. body>  
  11. html>  



13 使用标签为文字设置单独样式

这一小节讲解标签,我们对这三个标签进行一下总结:
1. 标签是为了强调一段话中的关键字时使用,它们的语义是强调。
2. 标签是没有语义的,它的作用就是为了设置单独的样式用的。

如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue(蓝色),但注意不是为了强调“美国梦”,而只是想为它设置和其它文字不同的样式(并不想让屏幕阅读器对“美国梦”这三个字加重音读出),所以这样情况下就可以用到标签了。

如下面例子:

1922年的春天,一个想要成名名叫尼克•卡拉威(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。


语法:
文本
我来试试:把“美国梦”设置为蓝色
1. 在右部编辑器中的第13行对“美国梦”文本加上标签。
2. 在第8行输入color:blue;,为元素设置文本颜色为蓝色。

[html]  view plain  copy
 print ?
  1. >  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>了不起的盖茨比title>  
  6. <style>  
  7. span{  
  8.    color:blue;   
  9. }  
  10. style>  
  11. head>  
  12. <body>  
  13.     <p>1922年的春天,一个想要成名名叫尼克•卡拉威(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的<span>美国梦span>,他搬入纽约附近一海湾居住。p>  
  14.     <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。p>  
  15. body>  
  16. html>  




14 标签,短文本引用

想在你的html中加一段引用吗?比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么标签是你所需要的。

语法:
引用文本

如下面例子:

最初知道庄子,是从一首诗庄生晓梦迷蝴蝶。望帝春心托杜鹃。开始的。虽然当时不知道是什么意思,只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》,《逍遥游》代表了庄子思想的最高境界,是对世俗社会的功名利禄及自己的舍弃。



讲解:
1. 在上面的例子中,“庄生晓梦迷蝴蝶。望帝春心托杜鹃。” 这是一句诗歌,出自晚唐诗人李商隐的《锦瑟》 。因为不是作者自己的文字,所以需要使用实现引用。
2. 注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。

注意这里用标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话。

[html]  view plain  copy
 print ?
  1. >  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>q标签title>  
  6. head>  
  7. <body>  
  8. <p>周瑜,不可否认,他是历史上一个了不起的英雄人物!确实也配的上那句<q>聪明秀出为之英,胆略过人为之雄。q>p>  
  9. body>  
  10. html>  

15
标签,长文本引用

的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。等等,上一节标签不是也是对文本的引用吗?不要忘记标签是对简短文本的引用,比如说引用一句话就用到标签。
如想在我的文章中引用李白《关山月》中的诗句,因为引用文本比较长,所以使用


语法:
引用文本

[html]  view plain  copy
 print ?
  1. >  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>blockquote标签的使用title>  
  6. head>  
  7. <body>  
  8. <h2>心似桂花开h2>  
  9. <p>大家都在忙于自认为最重要的事情,却没能享受到人生的乐趣,反而要吞下苦果?p>  
  10. <blockquote>“暗淡轻黄体性柔,情疏迹远只香留。何须浅碧深红色,自是花中第一流。”blockquote>  
  11. <p>这是李清照《咏桂》中的词句,在李清照看来,桂花暗淡青黄,性情温柔,淡泊自适,远比那些大红大紫争奇斗艳花值得称道。p>  
  12. body>  
  13. html>  
HTML+CSS标签 (2)_第3张图片



16 使用
标签分行显示文本

对于上一小节的例子,我们想让那首诗显示得更美观些。
怎么可以让每一句诗词后面加入一个折行呢?那就可以用到
标签了,在需要加回车换行的地方加入

标签作用相当于word文档中的回车。
上节的代码改为:

语法:

xhtml1.0写法:


html4.01写法:


注意,现在一般使用 xhtml1.0 的版本的写法(其它标签也是),这种版本比较规范。

与以前我们学过的标签不一样,
标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有


讲到这里,你是不是有个疑问,想折行还不好说嘛,就像在 word 文件档或记事本中,在想要折行的前面输入回车不就行了吗?很遗憾,在 html 中是忽略 回车 空格 的,你输入的再多回车和空格也是显示不出来的。

总结:在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行,就必须输入

[html]  view plain  copy
 print ?
  1. >  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>br标签的使用title>  
  6. head>  
  7. <body>  
  8. <h2>《咏桂》h2>  
  9. <p>暗淡轻黄体性柔,<br />情疏迹远只香留。<br />何须浅碧深红色,<br />自是花中第一流。p>  
  10. body>  
  11. html>  
HTML+CSS标签 (2)_第4张图片



17 为你的网页中添加一些空格

在上一节的例子,我们已经讲解过在html代码中输入空格、回车都是没有作用的。要想输入空格,必须写入 。

语法:
 

[html]  view plain  copy
 print ?
  1. >  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>空格讲解title>  
  6. head>  
  7. <body>  
  8. <h1>感悟梦想h1>  
  9. 来源:作文网  作者:为梦想而飞   
  10. body>  
HTML+CSS标签 (2)_第5张图片


18 认识
标签,添加水平横线

在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些。
语法:
html4.01版本



xhtml1.0版本


注意:
1.
标签和
标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。
2.
标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改。
3. 大家注意,现在一般使用 xhtml1.0 的版本(其它标签也是),这种版本比较规范。

[html]  view plain  copy
 print ?
  1. >  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>hr标签使用title>  
  6. head>  
  7. <body>  
  8. <p>火车飞驰过暗夜里的村庄,月光,总是太容易让思念寂寞,太容易让人觉得孤独。p>  
  9. <hr />  
  10. <p>每一枚被风吹起的蒲公英,都载满了一双眼睛的深情告别与一个目光的依依不舍。那天,我拿着行李,带上一个背影的祝福与惆怅,挥手告别了这片土地。我不知道,我何时会回来。p>  
  11. body>  
  12. html>  


19
标签,为网页加入地址信息

一般网页中会有一些地址信息需要在网页中展示出来,这些地址信息如公司的地址就可以

标签。

语法:
地址信息

如:
北京市西城区德外大街10号


在浏览器上显示的样式为斜体,如果不喜欢斜体,当然可以,可以在后面的课程中使用css样式来修改它
标签的默认样式。

[html]  view plain  copy
 print ?
  1. >  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>address标签介绍title>  
  6. head>  
  7. <body>  
  8. <h2>慕课网h2>  
  9. <p>超酷的互联网、IT技术免费学习平台,创新的网络一站式学习、实践体验;服务及时贴心,内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!公司地址:<address>北京市西城区德外大街10号address>p>   
  10. body>  
  11. html>  
HTML+CSS标签 (2)_第6张图片


20 想加入一行代码吗?使用标签

在介绍语言技术的网站中,必免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用标签了,如下面例子:

var i=i+300;

注意:在文章中一般如果要插入多行代码时不能使用标签了。

语法:
代码语言

注:如果是多行代码,可以使用

标签。

[html]  view plain  copy
 print ?
  1. >  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>code标签介绍title>  
  6. head>  
  7. <body>  
  8. <p>我们可能知道水平渐变的实现,类似这样:<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}code>p>  
  9. body>  
  10. html>  


21 使用
标签为你的网页加入大段代码

在上节中介绍加入一行代码的标签为,但是在大多数情况下是需要加入大段代码的,如下图:

怎么办?不会是每一代码都加入一个标签吧,没有这么复杂,这时候就可以使用

标签。

语法:

语言代码段

 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

[html]  view plain  copy
 print ?
  1. >  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>pre标签的使用title>  
  5. head>  
  6.   
  7. <body>  
  8. <pre>  
  9. var message="欢迎";  
  10. for(var i=1;i<=10;i++)  
  11. {  
  12.     alert(message);  
  13. }  
  14. pre>  
  15. body>  
  16. html>  

HTML+CSS标签 (2)_第7张图片

在上面的例子中可以看到代码中的空格,换行符都保留下来。如果用以前的方法,回车需要输入
签,空格需要输入 

注意:

 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是
标签的一个常见应用就是用来展示计算机的源代码。

22 使用ul,添加新闻信息列表

在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表、图片列表,如下图所示。

新闻列表

图片列表

这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

语法:

  • 信息
  • 信息
  • ......

举例:

  • 精彩少年
  • 美丽突然出现
  • 触动心灵的旋律
ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点。

ul 在英文里代表 unordered list

ol 在英文里代表 ordered list

li 在英文里代表 list

[html]  view plain  copy
 print ?
  1. >  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title> p标签title>  
  6. head>  
  7. <body>  
  8. <ul><li>我的第一个列表信息li>ul>  
  9. <ul><li>我的第二个列表信息li>ul>  
  10. body>  
  11. html>  

HTML+CSS标签 (2)_第8张图片


23 使用ol,添加图书销售排行榜

如果想在网页中展示有前后顺序的信息列表,怎么办呢?如,当当网上的书籍热卖排行榜,如下图所示。这类信息展示就可以使用

    标签来制作有序列表来展示。

    语法:

    1. 信息
    2. 信息
    3. ......

    举例:

    下面是一个热点课程下载排行榜:

    1. 前端开发面试心法
    2. 零基础学习html
    3. JavaScript全攻略
      在网页中显示的默认样式一般为:每项
    1. 前都自带一个序号,序号默认从 1 开始。

      [html]  view plain  copy
       print ?
      1. >  
      2. <html>  
      3. <head>  
      4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
      5. <title> p标签title>  
      6. head>  
      7. <body>  
      8. <ol>  
      9. <li>我的第一个列表信息li>  
      10. <li>我的第二个列表信息li>  
      11. ol>  
      12. body>  
      13. html>  
      HTML+CSS标签 (2)_第9张图片



      24 认识div在排版中的作用

      在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个

      标签中,这个
      标签的作用就相当于一个容器。

      语法:


      确定逻辑部分:
      什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用
      标签作为容器。

      [html]  view plain  copy
       print ?
      1. >  
      2. <html>  
      3. <head>  
      4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
      5. <title>div标签title>  
      6. head>  
      7. <body>  
      8.     <div>  
      9.     <h2>热门课程排行榜h2>  
      10.     <ol>  
      11.         <li>前端开发面试心法 li>  
      12.         <li>零基础学习htmlli>  
      13.         <li>javascript全攻略li>  
      14.     ol>  
      15.     div>  
      16.     <div>  
      17.     <h2>最新课程排行h2>  
      18.     <ol>  
      19.         <li>版本管理工具介绍—Git篇 li>  
      20.         <li>Canvas绘图详解li>  
      21.         <li>QQ5.0侧滑菜单li>  
      22.     ol>  
      23.     div>  
      24. body>  
      25. html>  
      HTML+CSS标签 (2)_第10张图片


      25 给div命名,使逻辑更加清晰

      在上一小节中,我们把一些标签放进

      里,划分出一个独立的逻辑部分。为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用id属性来为
      提供唯一的名称,这个就像我们每个人都有一个身份证号,这个身份证号是唯一标识我们的身份的,也是必须唯一的。

      如下两图进行比较,如果设计师把两个图给你,哪个图你看上去能更快的理解呢?是不是右边的那幅图呢。

      语法:

      [html]  view plain  copy
       print ?
      1. >  
      2. <html>  
      3. <head>  
      4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
      5. <title>div标签title>  
      6. head>  
      7. <body>  
      8. <div id="hotList">  
      9.    <h2>热门课程排行榜h2>  
      10.     <ol>  
      11.        <li>前端开发面试心法 li>  
      12.       <li>零基础学习htmlli>  
      13.        <li>javascript全攻略li>  
      14.     ol>  
      15. div>  
      16. <div id="learningInstructed">  
      17.     <h2>web前端开发导学课程h2>  
      18.     <ul>  
      19.        <li>网页专业名词大扫盲 li>  
      20.        <li>网站职位定位指南li>  
      21.        <li>为您解密Yahoo网站制作流程li>  
      22.     ul>  
      23. div>  
      24. body>  
      25. html>  
      HTML+CSS标签 (2)_第11张图片



      26 table标签---认识网页上的表格

      有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。如下表:

      想在网页上展示上述表格效果可以使用以下代码:

      创建表格的四个元素:

      table、tbody、tr、th、td

      1、

      :整个表格以标记开始、
      标记结束。

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

      3、…:表格的一行,所以有几对tr 表格就有几行。

      4、…:表格的一个单元格,一行中包含几对...,说明一行中就有几列。

      5、…:表格的头部的一个单元格,表格表头。

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

      总结:

      1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的

      2、表头,也就是th标签中的文本默认为粗体并且居中显示

      [html]  view plain  copy
       print ?
      1. >  
      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>30td>  
      18.       <td>89td>  
      19.     tr>  
      20.     <tr>  
      21.       <td>二班td>  
      22.       <td>35td>  
      23.       <td>85td>  
      24.     tr>  
      25.     <tr>  
      26.       <td>三班td>  
      27.       <td>32td>  
      28.       <td>80td>  
      29.     tr>  
      30.   tbody>  
      31. table>  
      32. body>  
      33. html>  
      HTML+CSS标签 (2)_第12张图片



      27 用css样式,为表格加入边框

      Table表格在没有添加css样式之前,是没有边框的。这样不便于我们后期合并单元格知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框。
      添加如下代码:


      上述代码是用css样式代码(后面章节会详细讲解),为th,td单元格添加粗细为一个象素的黑色边框。

      [html]  view plain  copy
       print ?
      1. >  
      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. <body>  
      11. <table summary="">  
      12.   <tr>  
      13.     <th>班级th>  
      14.     <th>学生数th>  
      15.     <th>平均成绩th>  
      16.   tr>  
      17.   <tr>  
      18.     <td>一班td>  
      19.     <td>30td>  
      20.     <td>89td>  
      21.   tr>  
      22.   <tr>  
      23.     <td>二班td>  
      24.     <td>35td>  
      25.     <td>85td>  
      26.   tr>  
      27.   <tr>  
      28.     <td>三班td>  
      29.     <td>32td>  
      30.     <td>80td>  
      31.   tr>  
      32. table>  
      33.   
      34. body>  
      35. html>  
      HTML+CSS标签 (2)_第13张图片



      28 caption标签,为表格添加标题和摘要

      表格还是需要添加一些标签进行优化,可以添加标题和摘要。

      摘要

      摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

          语法:

      标题

      用以描述表格内容,标题的显示位置:表格上方。

           语法:

      … …
      标题文本
[html]  view plain  copy
 print ?
  1. >  
  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>500td>  
  25.     <td>2013-1-2td>  
  26.   tr>  
  27.   <tr>  
  28.     <td>U盘 td>  
  29.     <td>金士顿 td>  
  30.     <td>120td>  
  31.     <td>2013-8-10td>  
  32.   tr>  
  33.   <tr>  
  34.     <td>U盘 td>  
  35.     <td>爱国者 td>  
  36.     <td>133td>  
  37.     <td>2013-3-25td>  
  38.   tr>  
  39. table>  
  40. body>  
  41. html>  
HTML+CSS标签 (2)_第14张图片



29 使用标签,链接到别一个页面

使用标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。

语法:
链接显示的文本


例如:
click here!

上面例子作用是单击click here!文字,网页链接到http://www.imooc.com这个网页。
title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)。
注意:还有一个有趣的现象不知道小伙伴们发现了没有,只要为文本加入a标签后,文字的颜色就会自动变为蓝色(被点击过的文本颜色为紫色),颜色很难看吧,不过没有关系后面我们学习了css样子就可以设置过来(a{color:#000}),后面会详细讲解。

[html]  view plain  copy
 print ?
  1. >  
  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="零基础学习html">零基础学习htmla>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="托比•马奎尔Tobey Maguire">托比•马奎尔Tobey Maguirea> 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。p>  
  14.     <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。p>  
  15. body>  
  16. html>  



30 在新建浏览器窗口中打开链接

标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。
如下代码:
click here!

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


31 使用mailto在网页中链接Email地址

标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解,请看详细图示:



注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

下面是一个完整的实例:

在浏览器中显示的结果:

发送
点击链接会打开电子邮件应用,并自动填写收件人等设置好的信息,如下图:


HTML+CSS标签 (2)_第15张图片



32 认识标签,为网页插入图片

在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用标签来插入图片。

语法:
下载失败时的替换文本

举例:
My Image

讲解:
1、src:标识图像的位置;
2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
4、图像可以是GIF,PNG,JPEG格式的图像文件。

[html]  view plain  copy
 print ?
  1. >  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>了不起的盖茨比title>  
  6. head>  
  7. <body>  
  8.     <p>1922年的春天,一个想要成名名叫尼克•卡拉威(<a href="http://www.m1905.com/mdb/star/3316/">托比•马奎尔Tobey Maguire a>饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。p>  
  9.   <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。p>  
  10.   <img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" title="电影介绍">   
  11. body>  
  12. html  
HTML+CSS标签 (2)_第16张图片

你可能感兴趣的:(四,前端学习)