当前位置:首页 > 产品中心 > 正文

菜鸟教程html5网页设计

  今天我们来接着讲其他HTML标签

  HTML 块元素:

  大多数 HTML 元素被定义为块级元素或内联元素。

  编者注:“块级元素”译为 block level element,“内联元素”译为 inline element。

  块级元素在浏览器显示时,通常会以新行来开始(和结束)。

  例子:<h1>, <p>, <ul>, <table>

  HTML 内联元素:

  内联元素在显示时通常不会以新行开始。

  例子:<b>, <td>, <a>, <img>

  <span>标签

  <span>标签是双标签,是内联元素,就是我前面说的行级标签。例如我们打了一句话:我爱中国。我想改变中国的颜色并且加粗等,那就可以用span标签,我爱<span style="font-size:24px;color:red;weight:bold;">中国</span>其中style就是CSS样式表属性。浏览器会解释这个CSS样式。

  <p>标签是定义段落标签

  <p>是一个块级元素,p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。例如:

  <!DOCTYPE html>

  <html lang="zh-cn">

  <head>

  <meta charset="utf-8" />

  <title>hello,world</title>

  </head>

  <body>

  <p>

  PHP原始为Personal Home Page的缩写,已经正式更名为 "PHP: Hypertext Preprocessor"。...

  </p>

  <p>

  在1995年以Personal Home Page Tools (PHP Tools) 开始对外发表第一个版本,Lerdorf写了一些介绍此程序的文档。...

  </p>

  </body>

  </html>

  显示粗来就这个样子滴:

  

  <br />标签是 HTML里的换行符

  <a> 标签定义超链接和加锚点的标签,用于从一张页面链接到另一张页面。

  <a> 元素最重要的属性是 href 属性,它指示链接的目标。

  在所有浏览器中,链接的默认外观是:

未被访问的链接带有下划线而且是蓝色的

已被访问的链接带有下划线而且是紫色的

活动链接带有下划线而且是红色的

  提示:您可能已经注意到了,W3School 站点内的链接外观与默认的链接外观非常不同。您可以使用 CSS 伪类向文本超链接添加复杂而多样的样式。

  例如:<a href="https://www.laoyang.com">laoyang</a>

  <img> 图片标签

  img 元素向网页中嵌入一幅图像。

  请注意,从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

  <img> 标签有两个必需的属性:src属性 和 alt属性。

  实例<img src="/uploadfile/201201/19/6011443968.jpg" alt="郁金香" />

  最后来一个总结实例:

  <!DOCTYPE html>

  <html lang="zh-cn">

  <head>

  <meta charset="utf-8" />

  <title>hello,world</title>

  </head>

  <body>

  <div>

  <div>块级元素1</div>

  <div>块级元素2</div>

  <div>内联元素:<span style="weight:bold;color:ccc;font-size:24">老杨</span>和大<a href="https://www.wz5s.com">家</a>在一起</div>

  </div>

  <div>

  p标签:

  <p>

  PHP原始为Personal Home Page的缩写,已经正式更名为 "PHP: Hypertext Preprocessor"。...

  </p>

  <p>

  在1995年以Personal Home Page Tools (PHP Tools) 开始对外发表第一个版本,Lerdorf写了一些介绍此程序的文档。...

  </p>

  </p>

  img 元素向网页中嵌入一幅图像。

  请注意,从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

  <img> 标签有两个必需的属性:src 属性 和 alt 属性。

  实例

  <img src="" alt="郁金香" />

  </p>

  <p>

  a标签的用法:

  <a href="https://www.baidu.com">百度</a> <a href="https://www.qq.com">腾讯</a>

  </p>

  </div>

  </body>

  </html>

  显示出来的效果就是:

  

  即时世界抛弃了我,可是还有PHP

  赞赏

  人赞赏

相关文章:

  • 菜鸟教程html在线2024-04-15 15:49:13
  • 发表评论

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。