1.HTML5中区块的设置
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例：<h1>，<p>，<ul>，<table>。
内联元素在显示时通常不会以新行开始。
实例：<b>，<td>，<a>，<img>。
HTML可以通过 <div> 和 <span> 两个标签来设置相应的区块。
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
小实例如下：👇👇👇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML简单学习</title> </head> <body> <p>这是一些文本的开始</p> <div style="color: crimson;"> <h3>这是一个在div元素中的标题。。。</h3> <p>这是一个在div元素中的段落。。。</p> </div> <p>这是一些文本的结束</p> </body> </html>
HTML <span> 元素是内联元素，可用作文本的容器
<span>元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
小实例如下：👇👇👇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML简单学习</title> </head> <body> <p> Java的三大特性为： <span style="color: crimson; font-weight: bold;">封装</span> <span style="color: darkorchid; font-weight: bold;">继承</span> <span style="color: blue; font-weight: bold;">多态</span> </p> </body> </html>
2.HTML5中布局的设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML简单学习</title> </head> <body> <table width="500" border="0"> <tr> <th colspan="2" style="background-color: aqua;"> <h1>主要的网页标题</h1> </th> </tr> <tr> <td style="background-color: crimson; width: 100px; height: 200px;"> <strong>菜单</strong><br/> HTML<br/> CSS<br/> JavaScript<br/> </td> <td style="background-color: darkorchid; width: 400px; height: 200px;"> 内容在这里 </td> </tr> <tr> <td colspan="2" style="background-color: pink; text-align: center;"> 张起灵-小哥 </td> </tr> </table> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML简单学习</title> </head> <body> <div id="container" style="width: 500px;"> <div id="header" style="background-color: aqua; text-align: center;"> <h1 style="margin-bottom: 0;">主要的网页标题</h1> </div> <div id="menu" style="background-color: crimson; width: 100px; height: 200px; float: left;"> <strong>菜单</strong><br/> HTML<br/> CSS<br/> JavaScript </div> <div id="content" style="background-color: darkorchid; width: 400px; height: 200px; float: left;"> 内容在这里 </div> <div id="footer" style="background-color: pink; text-align: center;"> 张起灵-小哥 </div> </div> </body> </html>
