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; 100px; float:left; padding:5px; } #section { 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 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机。