HTML/CSS学习记录（5）

来源：互联网发布：笔记本音效增强软件编辑：程序博客网时间：2024/06/05 16:11

HTML <div> 和 <span>

可以通过 <div> 和 <span> 将 HTML 元素组合起来。

HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
&l;div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 类

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

例如：

<html><head><style>.cities {    background-color:black;    color:white;    margin:20px;    padding:20px;}   </style></head><body><div class="cities"><h2>London</h2><p>London is the capital city of England.</p></div> </body></html>

分类块级元素

HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。
设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类：

<html><head><style>.cities {    background-color:black;    color:white;    margin:20px;    padding:20px;}   </style></head><body><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 and most populous city of France.</p></div><div class="cities"><h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p></div></body></html>

分类行内元素

HTML <span> 元素是行内元素，能够用作文本的容器。
设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。
例如：

<html><head><style>span.red {    color:red;}</style></head><body><h1>我的一个<span class="red">重要的</span>标题</h1></body></html>

“重要的”会以红色字体显示。

HTML布局

网站常常以多列显示内容.

使用 <div> 元素的 HTML 布局

注释：<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

实例：（这个例子使用了四个 <div> 元素来创建多列布局）

<html><head><style>#header {    background-color:black;    color:white;    text-align:center;    padding:5px;}#nav {    line-height:30px;    background-color:#eeeeee;    height:300px;    width:100px;    float:left;    padding:5px;          }#section {    width:350px;    float:left;    padding:10px;        }#footer {    background-color:black;    color:white;    clear:both;    text-align:center;   padding:5px;      }</style></head><body><div id="header"><h1>City Gallery</h1></div><div id="nav">London<br>Paris<br>Tokyo<br></div><div id="section"><h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></div><div id="footer">Welcome to London!</div></body></html>

使用HTML5的网站布局

HTML5 提供的新语义元素定义了网页的不同部分：

HTML5 语义元素

元素说明 header 定义文档或节的页眉 nav 定义导航链接的容器 section 定义文档中的节 article 定义独立的自包含文章 aside 定义内容之外的内容（如侧栏） footer 定义文档或节的页脚 details 定义额外的细节 summary 定义details元素的标题

使用表格的HTML布局

注释：<table> 元素不是作为布局工具而设计的。
<table> 元素的作用是显示表格化的数据。
使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式。

阅读全文

0 0