Html+CSS基础学习（二）

第十一节  

标签，为网页加入地址信息

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

标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。

语法：

联系地址信息

如：

文档编写：lilian 北京市西城区德外大街10号

本文的作者：lilian

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

标签的默认样式。

 

 

 

 

第十二节   想加入一行代码吗？使用标签

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

var i=i+300;

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

语法：

代码语言

注：如果是多行代码，可以使用

标签。
 
  
 
 
  
 
 
  
 
 
  
第十三节   使用ul，添加新闻信息列表
 
  
在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表，如下图所示。
 
  
 
  
新闻列表
 
  
 
  
图片列表
 
  
这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
 
  
语法：
 
  
 
  
  
信息
 
  
  
信息
 
  
   ......
 
  
 
  
举例：
 
  
 
  
  
精彩少年
 
  
  
美丽突然出现
 
  
  
触动心灵的旋律
 
  
 
  
ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点，如下图所示：
 
  
 
  
 
 
  
 
 
  
 
 
  
评论笔记：
 
  
li 在英文里代表 List
 
  
ol 在英文里代表 ordered list
 
  
ul 在英文里代表 unordered list(无序列表)
 
  
 
 
  
 
 
  
第十四节   认识div在排版中的作用
 
  
代码练习：
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
    
 
  
    
热门课程排行榜
 
  
    
 
  
        
前端开发面试心法 
 
  
        
零基础学习html
 
  
        
javascript全攻略
 
  
    
 
  
    
 
  
    
 
  
    
 
  
    
最新课程排行
 
  
    
 
  
        
版本管理工具介绍—Git篇 
 
  
        
Canvas绘图详解
 
  
        
QQ5.0侧滑菜单
 
  
    
 
  
    
 
  
 
  
 
  
 
 
  
 
 
  
第十五节 给div命名，使逻辑更加清晰
 
  
在上一小节中，我们把一些标签放进
里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为
提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。
 
  
如下两图进行比较，如果设计师把两个图给你，哪个图你看上去能更快的理解呢？是不是右边的那幅图呢。
 
  
 
  
语法：
 
  
…
 
  
 
 
  
代码练习：
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
   
热门课程排行榜
 
  
    
 
  
       
前端开发面试心法 
 
  
      
零基础学习html
 
  
       
javascript全攻略
 
  
    
 
  
 
  
 
  
    
web前端开发导学课程
 
  
    
 
  
       
网页专业名词大扫盲 
 
  
       
网站职位定位指南
 
  
       
为您解密Yahoo网站制作流程
 
  
    
 
  
 
  
 
  
 
  
 
 
  
 
 
  
第十六节  table标签，认识网页上的表格
 
  
有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：
 
  
 
  
想在网页上展示上述表格效果可以使用以下代码：
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 创建表格的四个元素：  
  
 
  
table、tbody、tr、th、td
 
  
1、
…：整个表格以标记开始、标记结束。
 
  
2、…：如果不加 , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
 
  
 
 
  
3、…：表格的一行，所以有几对tr 表格就有几行。
 
  
4、…：表格的一个单元格，一行中包含几对...，说明一行中就有几列。
 
  
5、…：表格的头部的一个单元格，表格表头。
 
  
6、表格中列的个数，取决于一行中数据单元格的个数。
 
  
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 
 
  
 
  
 上述代码在浏览器中显示的默认的样式为：  
  
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
总结：
 
  
1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
 
  
2、表头，也就是th标签中的文本默认为粗体并且居中显示
 
  
 
 
  
评论笔记：
 
  
1）tbody 防止那种因网速慢加载一点显示一点的情况，
如果把网页比作一个女士
加载样式的过程是化妆过程
那么tbody就相当于屏蔽了化妆的过程直到
女士化好妆在真正出来见人
 
  
2）tr是“table row（表格行）”的缩写，用于表示一行的开始和结束。这也容易理解。
 
  
td是“table data（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束。
 
  
 
 
  
 
 
  
 
 
  
第十七节  用css样式，为表格加入边框
 
  
Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。
 
  
在右侧代码编辑器中添加如下代码：
 
  
 
  
上述代码是用 css 样式代码（后面章节会详细讲解），为th，td单元格添加粗细为一个像素的黑色边框。
 
  
结果窗口显示出结果样式：
 
  
 
  
代码练习：
 
  
 
 
  
 
 
  
第十八节   caption标签，为表格添加标题和摘要
 
  
表格还是需要添加一些标签进行优化，可以添加标题和摘要。代码如下：
 
  
 
  
摘要
 
  
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
 
  
    语法：
标题
用以描述表格内容，标题的显示位置：表格上方。
     语法：
    
    
        
        
        …
    
…
 
  
标题文本
 
  
 
  
…
 
  
…
 
   
  
 
   
  
 
  
 
 
  
 
 
  
第十九节  使用标签，链接到另一个页面
 
  
使用标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。
 
  
语法：
 
  
链接显示的文本
 
  
例如：
 
  
click here!
 
  
上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。
 
  
 
 
  
title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好），如右侧案例代码（8-12行）。
 
  
注意：还有一个有趣的现象不知道小伙伴们发现了没有，只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），颜色很难看吧，不过没有关系后面我们学习了css样子就可以设置过来（a{color:#000}),后面会详细讲解。
 
  
 
 
  
 
 
  
第二十节  在新建浏览器窗口中打开链接
 
  
标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。
 
  
如下代码：
 
  
click here!
 
  
 
 
  
评论笔记：
 
  
_blank -- 在新窗口中打开链接 
_parent -- 在父窗体中打开链接 
_self -- 在当前窗体打开链接,此为默认值 
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页) 
一个对应的框架页的名称 -- 在对应框架页中打开