web前端学习（九）——HTML5区块与布局的相关标签设置

2022-06-15 162

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： web前端学习（九）——HTML5区块与布局的相关标签设置

1.HTML5中区块的设置

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

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

实例：<h1>，<p>，<ul>，<table>。

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

实例：<b>，<td>，<a>，<img>。

HTML可以通过 <div> 和 <span> 两个标签来设置相应的区块。

1.1 <div> 标签

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。

<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

小实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <p>这是一些文本的开始</p>
    <div style="color: crimson;">
      <h3>这是一个在div元素中的标题。。。</h3>
      <p>这是一个在div元素中的段落。。。</p>
    </div>
    <p>这是一些文本的结束</p>
  </body>
</html>

1.2 <span> 标签

HTML <span> 元素是内联元素，可用作文本的容器

<span>元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

小实例如下：👇👇👇

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <p>
      Java的三大特性为：
      <span style="color: crimson; font-weight: bold;">封装</span>
      <span style="color: darkorchid; font-weight: bold;">继承</span>
      <span style="color: blue; font-weight: bold;">多态</span>
    </p>
  </body>
</html>

2.HTML5中布局的设置

2.1 使用 <table> 标签构造的布局（不建议）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <table width="500" border="0">
      <tr>
        <th colspan="2" style="background-color: aqua;">
          <h1>主要的网页标题</h1>
        </th>
      </tr>
      <tr>
        <td style="background-color: crimson; width: 100px; height: 200px;">
          <strong>菜单</strong><br/>
          HTML<br/>
          CSS<br/>
          JavaScript<br/>
        </td>
        <td style="background-color: darkorchid; width: 400px; height: 200px;">
          内容在这里
        </td>
      </tr>
      <tr>
        <td colspan="2" style="background-color: pink; text-align: center;">
          张起灵-小哥
        </td>
      </tr>
    </table>
  </body>
</html>

运行结果如下：

2.2 使用 <div> 标签构造的布局（建议）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <div id="container" style="width: 500px;">
      <div id="header" style="background-color: aqua; text-align: center;">
        <h1 style="margin-bottom: 0;">主要的网页标题</h1>
      </div>
      <div id="menu" style="background-color: crimson; width: 100px; height: 200px; float: left;">
        <strong>菜单</strong><br/>
        HTML<br/>
        CSS<br/>
        JavaScript
      </div>
      <div id="content" style="background-color: darkorchid; width: 400px; height: 200px; float: left;">
        内容在这里
      </div>
      <div id="footer" style="background-color: pink; text-align: center;">
        张起灵-小哥
      </div>
    </div>
  </body>
</html>