本节内容分成4部分
1. 区块
2. 布局
3. 表单
4. 框架
1. 区块
大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以来开始（和结束）。实例:
<h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img>
HTML 还可以通过 <div> 和 <span>将元素组合起来。
1.1 区块元素
HTML <div>元素是块级元素，它可用于组合其他 HTML 元素的容器。<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示。如果与 CSS 一同使用，
<div> 元素可用于对大的内容块设置样式属性。<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。
语法：
<p>这是一些文本。</p>
<div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>
<p>这是一些文本。</p>
输出：
区块
1.2 内联元素
HTML <span> 元素是内联元素，可用作文本的容器。<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span>应用样式，那么<span>元素中的文本与其他文本不会任何视觉上的差异。<span>标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。当与 CSS 一同使用时，<span>元素可用于为部分文本设置样式属性。
语法：
<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛。</p>
<p>我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>
输出：
内联元素
2. 布局
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。上面已经介绍了<div> ，这是用于分组 HTML 元素的块级元素。
一个例子：
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
上面把页面分成4块，其中container定义画布大小，header定义首行，menu定义菜单栏，content为内容栏，footer为脚注。
输出：
布局
找些现成的网站模板来优化可以省下很多事情
3. 表单
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 <form>来设置:
多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性type定义的。
3.1 文本域
语法：
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lasttname">
</form>
输出为：
文本域
3.2 密码
语法：
<form>
Password: <input type="password" name="pwd">
</form>
输出为：
密码
3.3 单选按钮
语法：
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
输出为：
单选按钮
3.4 复选框
语法：
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
输出为：
复选框
3.5 提交按钮
语法：
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
输出为：
提交按钮
4. 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。就是在网页上显示另外一个网页。
语法：
<iframe src="https://finance.sina.com.cn/" width="200" height="200" frameborder="0">
</iframe>
在页面中输出一个200*200的没有边框的页面
页面中的页面
参考：
HTML教程
网友评论