HTML<div>和<span>

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

大多数 HTML 元素被定义为块级元素(block level element)或内联元素(inline element)。块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>, <table>

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

例子：<b>, <td>, <a>, <img>

HTML<div>元素

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。

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

HTML <span> 元素

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

HTML 分组标签

标签	描述
<div>	定义文档中的分区或节（division/section）。
<span>	定义 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. 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>

</body>
</html>

结果显示为：

将不同的类分别用<div>和</div>包含在内，实现不同类的分块显示。

分类行内元素

<html>
<head>
<style>
span.red{
    color:red;
}
</style>
</head>

<body>
<h1>我的<span class="red">重要的</span>标题</h1>
</body>

</html>

结果显示为：

使用<div>元素的HTML布局

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

css：

<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>

显示效果为：

使用 HTML5 的网站布局

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

HTML5 语义元素

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

css：

<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>

<body>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<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>
</section>

<footer>
Copyright W3Schools.com
</footer>

</body>

产生和上一个代码一样的效果。

HTML响应式web设计

什么是响应式 Web 设计？

RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的

创建响应式设计有两种方法：

自己创捷：使用<div>等分块元素生成响应式页面。
使用bootstrap生成

Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。

Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机。

HTML学习笔记4