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

最新推荐文章于 2024-07-11 18:25:41 发布

qq_25205059

最新推荐文章于 2024-07-11 18:25:41 发布

阅读量1.3k

点赞数

分类专栏： HTML5编程学习

HTML5编程学习专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1.HTML标题（Heading）

（1）通过<h1> - <h6>等标签进行定义的

示例代码如下：

[html]view plain copy
<span style="font-family:Microsoft YaHei;"><html>  
<body>  
    <!--h标签，标题-->  
    <h1>My First Heading</h1>  
    <h1>This is heading-1</h1>  
    <h2>This is heading-2</h2>  
    <h3>This is heading-3</h3>  
    <h6>This is heading-6</h6>  
    <h7>My 7 Headings</h7>  
    <h11>My di 11 Headings</h11>  
  
</body>  
</html></span>  

效果图：

2.HTML段落

（1）通过<p>标签进行定义

示例代码：

[html]view plain copy
<span style="font-family:Microsoft YaHei;"><html>  
<body>  
      
    <!--p标签，段落-->  
    <p>My first paragraph.</p>  
    <p>This is 1 paragraph.</p>  
    <p>This is 2 paragraph.</p>   
  
      
</body>  
</html></span>  

效果图：

3.HTML链接

（1）通过<a>标签进行定义

（2）在href属性中，指定链接地址

示例代码：

[html]view plain copy
<span style="font-family:Microsoft YaHei;"><html>  
<body>  
    <!--a标签，链接-->  
    <a href = "http://www.baidu.com">This is 1 link.</a>  
    <p><a href="http://www.sina.com">This is 2 link.</a></p>  
</body>  
</html></span>  

展现效果：

4.HTML图像

（1）通过<img>标签进行定义

（2）在src属性中指定图像名称

（3）width属性指定图像的宽度

（4）height属性指定图像的高度

示例代码：

[html]view plain copy
<span style="font-family:Microsoft YaHei;"><html>  
<body>  
      
    <!--img标签，图像-->  
    <img src="testimg1.jpg" width="104" height="142">This is a pic.</img>  
    <img src="testimg2.jpg" width="104" height="142"/>  
    <a href="http://www.taobao.com"><img src="testimg1.jpg" width="104" height="142"/></a>  
  
</body>  
</html></span>  