HTML-块和类

来源：互联网发布：知无涯者百度云资源编辑：程序博客网时间：2024/05/20 16:36

1.块元素

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

（2）块级元素在浏览器显示时，通常会以新行来开始（和结束），比如：<h1>, <p>, <ul>, <table>

2.内联元素

（1）在显示时通常不会以新行开始，例如：<b>, <td>, <a>, <img>

3.<div>元素

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

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

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

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

（5）设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类。

示例代码：

<html><head></head><meta charset="utf-8"><body style="background-color:green;color:white"><!--块-div--><style type="text/css">    .cities{        background-color: black;        color: white;        margin: 20px;        padding: 20px;    }</style><style type="text/css">    span.red{color: red;}</style><h3>这是一个header</h3><p>This is a paragraph.</p><div style="color:red">    <h3>这是一个header</h3>    <p>This is a paragraph.</p></div><h1>NEWS WEBSITE</h1>    <p>some text. some text...</p><div class="news" id="news1">    <h2>News headline 1</h2>    <p>some text1. some text1...</p></div><div class="news" id="news2">    <h2>News headline 2</h2>    <p>some text3. some text3...</p></div></body></html>

展示效果：

4.<span>元素

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

（2）<span> 元素也没有特定的含义，当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

示例代码1：

<html><head></head><meta charset="utf-8"><body style="background-color:green;color:white"><!--块-span--><h1>    My <span class="red">Important</span> Heading is very <span class="red">very very</span> interesting.</h1></body></html>

展示效果：

示例代码2：

<html><head></head><meta charset="utf-8"><body style="background-color:green;color:white"><!--块-span--><p>    <span>some text.</span>    some other text.</p><div class="cities">    <h2>London</h2>    <p>        London is the capital city of England.    </p></div><div class="cities">    <h2>Paris</h2>    <p>        Paris is the capital city of France.    </p></div><div class="cities">    <h2>Beijing</h2>    <p>        Beijing is the capital city of China.    </p></div></body></html>

展示效果：

5.对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式，或者为不同的类设置不同的样式

0 0