HTML常用标签

 
 
网页开发工具
 
 
Hbuiler（http://www.dcloud.io/）
 
 
 
 
  
 
   
  
   
 
  
 
  

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

    image 
  
 
 
 
 
HTML简介
 
 
HTML：Hyper Text Markup Language
 
 
html文本的内部基本结构
 
 





    
    
                
        
        
        

    

    

    
        
这是一个非常漂亮的网页
    



 
 
html的注释
 
 
  
      
          
      
      
          

          
        
这是我的第二个网页
  

         -->  

      
  

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



    
    




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


第一次
今天天气真不错



    床前明月光

    疑是地上霜

    举头望明月

    低头思故乡









简介

    2008年设立人才实训中心

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






 
 
 
  
 
   
  
   
 
  
 
  

    image 
  
 
 
 
 
练习 制作《送友人》
 
 
 
  
 
   
  
   
 
  
 
  

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

    image 
  
 
 
 
 
列表标签
 
 


    
        
        
    
    
        
        

            
西红柿
            
大茄子
            
小辣椒
        

        

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

        
菜谱
        

            

                鱼香肉丝
                

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

        

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

    


 
 
 
  
 
   
  
   
 
  
 
  

    image 
  
 
 
 
 
练习 制作发帖指南
 
 
 
  
 
   
  
   
 
  
 
  

    image 
  
 
 
 
 
练习 制作书籍列表
 
 
 
  
 
   
  
   
 
  
 
  

    image 
  
 
 
 
 
图像标签
 
 
常见的图像格式
 
 
JPG
 
 
GIF
 
 
PNG
 
 
BMP
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    image 
  
 
 
 
 
绝对路径与相对路径
 
 
绝对路径
 
 
绝对路径是指文件在硬盘上真正存在的路径。例如“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 
  
 
 
 
 
所谓相对路径，就是相对于自己的目标文件位置。例如上面的例子，“11111111.html” 文件里引用了“11ha.jpg”图片，由于“11ha.jpg”图片相对于“11111111.html”来说，是在同一个目录的，那么在“11111111.html”文件里使用以下代码后：
 
 
  

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

    image 
  
 
 
 
 
当图片在image文件夹里时：
 
 
src="image/11ha.jpg" alt="小女孩" />  

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

 
 
 
  
 
   
  
   
 
  
 
  

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

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

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

 
 
链接标签
 
 
链接文本或图像

 
 
href: 链接路径
 
 
target:链接在哪个窗口打开,常用值：_self、_blank
 
 
综合实战
 
 
将本章所有练习做成一个导航
 
 
课后作业
 
 
必做任务
 
 
1.制作经典语录（p标签，h2标签，图片标签）
 
 
2.制作莎士比亚的诗（ p标签，h2标签，br标签，hr标签）
 
 
3.制作商品列表（ul标签，li标签）
 
 
扩展任务
 
 
1.制作高数目录（标签嵌套）
 
 
2.制作手机app排行榜（标签嵌套，图片标签）