HTML/CSS学习记录（5）

最新推荐文章于 2024-09-30 14:01:51 发布

Ascine

最新推荐文章于 2024-09-30 14:01:51 发布

阅读量437

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Ascine/article/details/74988060

版权

html学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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元素的标题