初探HTML/CSS（二）

在上一篇文章中，我们简单介绍了HTML，CSS和JaveScript的关系，HTML的文件结构和

一级标签

二级标签

三级标签

四级标签

五级标签

六级标签

网页效果：

Snip20161214_1.png

< strong>和< em>标签

    //这两个标签都表示强调某写文字
    斜体字
    粗体字

网页效果：

Snip20161214_2.png

< span>标签

注意：标签是没有语义的，它的作用就是为了设置单独的样式用的。

    
    
就让秋风带走她的思念带走她的泪

网页效果：

屏幕快照 2016-12-14 17.21.26.png

< br>标签

由于html中没有回车的概念，所以就有了
标签来替代回车

  。
    
第一行
第二行

网页效果：

屏幕快照 2016-12-14 17.31.43.png

< hr>标签

在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。所以就用到了

---

标签。

---

标签和< br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。

    
第一部分
    

    
第二部分

网页效果：

Snip20161214_3.png

< code>标签和< pre>标签

在显示计算机语言编程代码时，我们会使用到这两个标签，他们的区别在于前者是标记单行代码，后者为标记多行代码，这里只给< code>标签的使用，< pre>标签类似：

    
下面为OC代码

    
NSString * str = @"test";

网页效果：

Snip20161214_4.png

< ul>和< ol>标签

< ul>可以定义一个无序列表，< ol>可以定义一个有序列表。使用如下：

    
        
无序第一个列表信息
        
无序第二个列表信息
        
无序第三个列表信息
    
    

        
有序第一个列表信息
        
有序第二个列表信息
        
有序第三个列表信息
    

网页效果：

Snip20161214_7.png

< div>标签

标签我们可以把它理解为一个容器，或者网页中的一个版块。
我们通常会给

一个id属性来标识它，目的就是为了利用css或者js来修改它的样式，位置以及动态效果。

    

    
热门课程排行榜
    

        
前端开发面试心法 
        
零基础学习html
        
javascript全攻略
    
    
    

    
最新课程排行
    

        
版本管理工具介绍—Git篇 
        
Canvas绘图详解
        
QQ5.0侧滑菜单
    
    

网页效果：

Snip20161214_8.png

< table>标签

  

    

      
班级
      
学生数
      
平均成绩
    
    

      
一班
      
30
      
89
    
    

      
二班
      
35
      
85
    
    

        
三班
        
32
        
80
    
  

网页效果：

Snip20161214_9.png

< caption>标签

通常用于给table添加标题。

 
       … 
   
…

    
标题文本
   
 
       
…
 
       
…

网页效果：

Snip20161214_11.png

< a>标签

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

    
    
    
   
 链接显示的文本

网页效果：

Snip20161214_14.png

< img>标签

这个不多说，往页面插入图片，具体写法如下：

      


      ![](http://upload-images.jianshu.io/upload_images/3022339-bb432cf2596c4927.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 

网页效果:

Snip20161214_16.png