HTML块

大多数HTML标签为块级元素或内联元素。

块级元素

块级元素在浏览器以换**行**显示。

例如：<h1>、<p>、<table>、<ul>

内联元素

内联元素通常不会换行显示。

例如：<b>、<td>、<a>、<img>

div

元素是块级元素，它是组合其它元素的容器。

元素没有具体含义，浏览器为它进行换行。

通常与CSS一起使用，对大的内容块设定样式。

span

**<span>**元素是内联元素，可以用作文本的容器。

<span>元素也没有具体含义。

通常与CSS一起使用，对包含其中的文本设定样式。

HTML类

对HTML设置类，使我们能够为元素类定义CSS。

这样在进行CSS设计时，可以将整个类作为单位。

分类块级元素

是块级元素，是其它标签的容器。

我们可以为div设置类，对div类内的标签修改样式。

<!DOCTYPE html>
<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>
</div> 

</body>
</html>

分类行内元素

<span>是行内元素，是文本的容器。

设置span类，能够为相同的span设置样式。

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

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>

HTML id

html id为每个元素指定唯一id标识符。

样式表可通过id修改样式，JavaScript也可以通过它访问元素。

id的语法是：**#id**，然后在花括号中定义CSS属性。

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>