html 区块布局表单框架

最新推荐文章于 2024-03-12 09:22:55 发布

duyaoyuta

最新推荐文章于 2024-03-12 09:22:55 发布

阅读量297

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/duyaoyuta/article/details/105670300

版权

本文介绍了HTML的布局概念，包括内联元素的特点，并详细讲解了HTML表单的使用，如文本域、下拉列表、按钮、复选框、单选按钮等，以及如何创建各种类型的表单。此外，还提及了`<iframe>`标签的用法，用于在页面中嵌入其他网页。

摘要由CSDN通过智能技术生成

 <div> 和<span>

和将元素组合起来。

内联元素
联元素在显示时通常不会以新行开始。

 <div> 元素

元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用元素进行文档布局不是表格的正确用法。

元素的作用是显示表格化的数据。

 <span> 元素

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

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

<div>	定义了文档的区域，块级 (block-level)
<span>	用来组合文档中的行内元素， 内联元素(inline)


<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

在这里插入图片描述

<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>

在这里插入图片描述
布局

<div>布局

<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; text-align:center;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;text-align:center">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>

</div>

在这里插入图片描述

<table>布局

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;text-align:center;">
&