HTML教程 #19：学习常见的块级元素和内联元素用法和样式设置

2023-06-30

摘要: 常见的块级元素和内联元素的用法和样式设置如下：常见的块级元素：1. `div`：用于创建一个块级容器，常用于组织和布局其他元素。 - 用法示例： div !-- 其他内容 -- /div - 样式设置示例： style div { width: 300px ...

常见的块级元素和内联元素的用法和样式设置如下：

常见的块级元素：

1. `<div>`：用于创建一个块级容器，常用于组织和布局其他元素。

- 用法示例：

     <div>
       <!-- 其他内容 -->
     </div>

- 样式设置示例：

     <style>
       div {
         width: 300px;
         height: 200px;
         background-color: #f0f0f0;
         margin-bottom: 10px;
         padding: 20px;
       }
     </style>

2. `<p>`：用于表示段落文本。

- 用法示例：

<p>这是一个段落。</p>

- 样式设置示例：

     <style>
       p {
         font-size: 16px;
         line-height: 1.5;
         color: #333333;
         margin-bottom: 10px;
       }
     </style>

3. `<h1>`~`<h6>`：用于表示标题，其中 `<h1>` 是最高级标题，`<h6>` 是最低级标题。

- 用法示例：

<h1>这是一个标题</h1>

- 样式设置示例：

<style>

       h1 {
         font-size: 24px;
         font-weight: bold;
         color: #000000;
         margin-bottom: 10px;
       }
     </style>

常见的内联元素：

1. `<span>`：用于包裹一小段文本或行内元素，并可以用于设置样式或操作。

- 用法示例：

<span>这是一小段文本。</span>

- 样式设置示例：

     <style>
       span {
         color: red;
         font-weight: bold;
       }
     </style>

2. `<strong>`：用于表示强调的文本，通常会以粗体显示。

- 用法示例：

<p>这是一段 <strong>重要的</strong> 文本。</p>

- 样式设置示例：

     <style>
       strong {
         font-weight: bold;
       }
     </style>

3. `<a>`：用于创建超链接，链接到其他页面或位置。

- 用法示例：

<a href="https://www.example.com">访问示例网站</a>

- 样式设置示例：

<style>
       a {
         color: blue;
         text-decoration: none;
       }
       a:hover {
         color: red;
         text-decoration: underline;
       }
     </style>

通过合理使用这些常见的块级元素和内联元素，你可以组织内容、设置样式，并根据需要创建链接和强调文本。通过在 CSS 中设置相应的样式属性，可以实现各种布

局和外观效果。记得根据实际需求和设计要求，调整元素的样式属性以达到所需的效果。

查看全文

上一篇：HTML教程 #18：了解块级元素和内联元素的概念及其区别下一篇：HTML教程 #20：了解 HTML 语义化的概念和重要性

HTML教程 #19：学习常见的块级元素和内联元素用法和样式设置

常见的块级元素：

常见的内联元素：

相关阅读

热门文章