HTML-h、p、a、img标签的使用

1.HTML标题(Heading)

(1)通过

-

等标签进行定义的

示例代码如下:

[html]  view plain  copy
  1. <span style="font-family:Microsoft YaHei;"><html>  
  2. <body>  
  3.       
  4.     <h1>My First Headingh1>  
  5.     <h1>This is heading-1h1>  
  6.     <h2>This is heading-2h2>  
  7.     <h3>This is heading-3h3>  
  8.     <h6>This is heading-6h6>  
  9.     <h7>My 7 Headingsh7>  
  10.     <h11>My di 11 Headingsh11>  
  11.   
  12. body>  
  13. html>span>  
效果图:


2.HTML段落

(1)通过

标签进行定义

示例代码:

[html]  view plain  copy
  1. <span style="font-family:Microsoft YaHei;"><html>  
  2. <body>  
  3.       
  4.       
  5.     <p>My first paragraph.p>  
  6.     <p>This is 1 paragraph.p>  
  7.     <p>This is 2 paragraph.p>   
  8.   
  9.       
  10. body>  
  11. html>span>  
效果图:

3.HTML链接

(1)通过标签进行定义

(2)在href属性中,指定链接地址

示例代码:

[html]  view plain  copy
  1. <span style="font-family:Microsoft YaHei;"><html>  
  2. <body>  
  3.       
  4.     <a href = "http://www.baidu.com">This is 1 link.a>  
  5.     <p><a href="http://www.sina.com">This is 2 link.a>p>  
  6. body>  
  7. html>span>  
展现效果:

4.HTML图像

(1)通过标签进行定义

(2)在src属性中指定图像名称

(3)width属性指定图像的宽度

(4)height属性指定图像的高度

示例代码:

[html]  view plain  copy
  1. <span style="font-family:Microsoft YaHei;"><html>  
  2. <body>  
  3.       
  4.       
  5.     <img src="testimg1.jpg" width="104" height="142">This is a pic.img>  
  6.     <img src="testimg2.jpg" width="104" height="142"/>  
  7.     <a href="http://www.taobao.com"><img src="testimg1.jpg" width="104" height="142"/>a>  
  8.   
  9. body>  
  10. html>span>  
效果:

其中最后一张图片,点击会进入淘宝网页


HTML-h、p、a、img标签小试

你可能感兴趣的:(HTML5编程学习)