HTML 的<div>和<span>
可以通过<div>和<span>将HTML元素组合起来。
HTML块元素、内联元素
块级元素在浏览器显示时,通常会以新行来开始结束。
例子:<h1>,<p>,<ul>,<table>
HTML内联元素在显示时通常不会以新行开始。
例子:<b>,<td>,<a>,<img>
HTML <div> 元素
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
HTML <span> 元素
HTML <span> 元素是内联元素,可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
HTML <span> 元素是内联元素,可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
HTML类
对HTML进行分类,使我们能够为元素的类定义CSS样式。为相同的类设置相同的样式,或者为不同的类设置不同的样式。
分类块级元素
HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。
设置 <div> 元素的类,使我们能够为相同的 <div> 元素设置相同的类:
分类行内元素
HTML <span> 元素是行内元素,能够用作文本的容器。
设置 <span> 元素的类,能够为相同的 <span> 元素设置相同的样式。
<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>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
<p>Situated on the Seine River, it is at the heart of the
蝜e-de-France region, also known as the r間ion parisienne.</p>
<p>Within its metropolitan area is one of the largest population centers
in Europe, with over 12 million inhabitants.</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>
<p>It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
<p>The Tokyo prefecture is part of the world's most populous metropolitan area
with 38 million people and the world's largest urban economy.</p>
</div>
<head>
<style>
span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
<div>
</body>
<html>
图片下部分不齐全还请见谅。
HTML 布局
在学这一部分的时候,遇到一个难题纠结了很长时间接近一小时了都,结果发现居然是css文档里面多了<style>标签,要命了。
html文档:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="mystyle1.css" type="text/css"/>
</head>
<body>
<div id="header">
<h2>City Gallery</h2>
</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">
Copyright ? HYM.com
</div>
</body>
<html>
css文档:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="mystyle1.css" type="text/css"/>
</head>
<body>
<div id="header">
<h2>City Gallery</h2>
</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">
Copyright ? HYM.com
</div>
</body>
<html>
完成截图:
使用HTML布局
<table>不支持这种布局,用div好。
但是特殊情况下可以用。
html文档:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="mystyle1.css" type="text/css"/>
</head>
<body>
<table class="lamp">
<tr>
<th>
<img src="D:\动漫图片\h01.jpg" alt="vampier" style="height:32px;width:32px;" <!--图片文件为自己的路径-->
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
</body>
</html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="mystyle1.css" type="text/css"/>
</head>
<body>
<table class="lamp">
<tr>
<th>
<img src="D:\动漫图片\h01.jpg" alt="vampier" style="height:32px;width:32px;" <!--图片文件为自己的路径-->
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
</body>
</html>
css文档
table.lamp{
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th{
padding:5px;
}
table.lamp td{
padding:5px;
width:100%;
}
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th{
padding:5px;
}
table.lamp td{
padding:5px;
width:100%;
}
效果: