HTML常用标签

网页开发工具

Hbuiler（http://www.dcloud.io/）

image.png

WebStorm（https://www.jetbrains.com/webstorm/）

image.png

HTML简介

HTML：Hyper Text Markup Language

html文本的内部基本结构

    
    
                
        
        
        

    

    
    

    
        
这是一个非常漂亮的网页
    
    

html的注释

  
      
          
      
      
          
  
          
        
这是我的第二个网页
  
  
         -->  
          
  
  
      
  

标题标签 ，段落标签，水平线，换行，加粗，斜体

    
    




一级标题标签
二级标题标签
三级标题标签
四级标题标签
五级标题标签
六级标题标签


第一次
今天天气真不错



    床前明月光

    疑是地上霜

    举头望明月

    低头思故乡









简介

    2008年设立人才实训中心

    2009年成为教育部软件工程专业大学生实习基地

image.png

练习 制作《送友人》

image.png

练习 制作 制作东软睿道简介

image.png

列表标签

    
        
        
    
    
        
        

            
西红柿
            
大茄子
            
小辣椒
        
        
        

            
桃花源记
            
岳阳楼记
            
小石潭记
            
醉翁亭记
        
        
        
菜谱
        

            

                鱼香肉丝
                

                    
鱼
                    
香
                    
肉丝
                
            
            
宫保鸡丁
            
青椒肉丝
        
        
        

            
武松
            
景阳冈上的大虎英雄，战斗力99
            
后来打死西门大官人，后逃逸，出家为僧
            
武大
            
著名餐饮企业家，战斗力0
        
        
    
    

image.png

练习 制作发帖指南

image.png

练习 制作书籍列表

image.png

图像标签

常见的图像格式
JPG
GIF
PNG
BMP

image.png

绝对路径与相对路径

绝对路径

绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“E:\book\网页布局代码\第2章”目录下，那么 “bg.jpg”这个图片的绝对路径就是“E:\book\网页布\代码\第2章\bg.jpg"。那么如果要使用绝对路径指定网页的背景图片就应该使用 以下语句：

使用绝对路径的缺点
在网页编程时，很少会使用绝对路径，如果使用“E:\book\网页布\代码\第2章\bg.jpg”来指定图片的位置，在自己的计算机上 浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了。因为上传到Web服务器上时，可能整个网站并没有放在Web服务器的E盘， 有可能是D盘或H盘。即使放在Web服务器的E盘里，Web服务器的E盘里也不一定会存在“E:\book\网页布局\代码\第2章”这个目录，因此在浏 览网页时是不会显示图片的。

相对路径

image.png

所谓相对路径，就是相对于自己的目标文件位置。例如上面的例子，“11111111.html” 文件里引用了“11ha.jpg”图片，由于“11ha.jpg”图片相对于“11111111.html”来说，是在同一个目录的，那么在“11111111.html”文件里使用以下代码后：

只要这两个文件的相对位置没有变(也就是说还是在同一个目录内)，那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。

image.png

当图片在image文件夹里时：

src="image/11ha.jpg" alt="小女孩" />  

如果在image里很深的文件夹，也可以一直罗列下去：

image.png

如果html文件在比图片深一层的文件夹里：

如果html文件在比图片深两层的文件夹里，就在前面再罗列两个点“..”，深几层罗列几次。

图片在html文件上两级image文件夹中的renwu文件夹里

链接标签

链接文本或图像

href: 链接路径
target:链接在哪个窗口打开,常用值：_self、_blank

综合实战

将本章所有练习做成一个导航

课后作业

必做任务
1.制作经典语录（p标签，h2标签，图片标签）
2.制作莎士比亚的诗（ p标签，h2标签，br标签，hr标签）
3.制作商品列表（ul标签，li标签）

扩展任务
1.制作高数目录（标签嵌套）
2.制作手机app排行榜（标签嵌套，图片标签）