【HTML505】HTML基础05_区块_布局

最新推荐文章于 2022-04-24 12:12:00 发布
最新推荐文章于 2022-04-24 12:12:00 发布
阅读量394 收藏
点赞数
分类专栏： HTML5 文章标签： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cs_xuhuan/article/details/86725481
版权

HTML<div>和<span>

HTML可以通过

和 将元素组合起来。

HTML区块元素

大多数HTML元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例：<h1>, <p>, <ul>, <table>

HTML内联元素

内联元素在显示时通常不会以新行开始。
实例：<b>, <td>, <a>, <img>

HTML<div>元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

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

HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

使用<span>元素对文本中的一部分进行着色：

<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
HTML分组标签
<div>	定义了文档的区域，块级 (block-level)
<span>	用来组合文档中的行内元素， 内联元素(inline)

HTML布局

网页布局对改善网站的外观非常重要。

网站布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

HTML布局-使用<div>元素

div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div id="container" style="width:1500px">

  <div id="header" style="background-color:blanchedalmond;font-family: 微软雅黑">
    <h1 style="margin-bottom:0;">主要的网页标题</h1></div>

  <div id="menu" style="background-color:aliceblue;height:500px;width:500px;float:left;">
    <b style="font-size: 40px">菜单</b><br>
    HTML<br>
    CSS<br>
    JavaScript</div>

  <div id="content" style="background-color:tomato;height:500px;width:1000px;float:left;">
    内容在这里</div>

  <div id="footer" style="background-color:navajowhite;clear:both;text-align:center;height: 50px">
    @涣涣涣涣酱 </div>

</div>

</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>世界最大的同性恋交友网站</title>
</head>
<body>
<table width="1500">
  <tr>
    <td colspan="2">
      <h1 style="text-align: center;background-color: navajowhite">GitHub</h1>
    </td>
  </tr>
  <tr>
    <td style="width:500px;background-color: #b3d4fc;height: 500px;text-align: center"><p>世界最大的同性恋交友网站</p></td>
    <td style="width:1000px;background-color: beige;text-align: center" ><p>网络一线牵，珍惜这段缘</p></td>
  </tr>
  <tr>
    <td colspan="2">
      <p style="background-color: darksalmon;color:wheat;text-align: center">@涣涣涣涣酱</p>
    </td>
  </tr>

</table>

</body>
</html>

在这里插入图片描述

HTML布局-有用的提示

Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。
Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

HTML布局标签
<div>	定义文档区块，块级(block-level)
<span>	定义 span，用来组合文档中的行内元素。
cs_xuhuan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS初心自学记录（五）多列布局&伸缩盒
VON
01-30 334
有一些我觉得暂时没必要专门做笔记的都跳过去啦所以这里真的只是记录 ???? 一个简单的多列布局，在chrome上没问题但是在firefox好像不能正常应用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多列布局&...
HTML状态码大全
木槿花开
08-13 740
HTML状态码被分为五大类： 100-199 用于指定客户端应相应的某些动作。 200-299 用于表示请求成功。 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 400-499 用于指出客户端的错误。 （自己电脑这边的问题） 自己电脑这边的问题） 500-599 用于支持服务器错误。 （对方的问题） 对方的问题） 一些常见的状态码为：
html页面505,html
weixin_36368932的博客
06-03 1182
htmlEaton VanceSenior Income TrustMarch31, 2020PORTFOLIO OF INVESTMENTS (Unaudited)Senior Floating-Rate Loans — 143.9%(1)Borrower/Tranche DescriptionPrincipalAmount*(000’somitted)ValueAerospace and ...
网页错误代码列表 200~505
Go With Java
05-04 4295
Successful Client Requests200 OK201 Created202 Accepted203 Non-Authorative Information204 No Content205 Reset Content206 Partial ContentClient Request Redirected300 Multiple Choices301 Moved Permanent
全球最大的同性交友网站，竟然还有这些骚操作
纯洁的微笑
04-24 5万+
大家好,我是前端实验室的大师兄！作为一名程序员，相信大家都很熟悉gitHub这个网站，我们也推过许多开源项目供大家学习，除了用来学习，GitHub里的其他项目项目，也骚的很啊~灭霸脚本随机删掉电脑里一半的文件，我很好奇真的有人会用？这些终究都是些小把戏你永远想不到，除了编程，程序员还会整些什么活。大师兄找了一些，给大家开开眼。程序员斗图指南作为程序员，除了痛骂产品经理之外...
HTML.zip_网抓 html
09-22
HTML（HyperText Markup Language）是用于创建网页的标准标记语言，它是互联网的基础，使得开发者能够构建结构化的、可交互的和动态的网页。本压缩包"HTML.zip_网抓 html"显然是针对HTML的学习资源，特别适合初学者...
DIVCSS.rar_css pdf_css布局
最新发布
09-24
1. 盒模型：CSS盒模型是理解布局的基础，它包括元素的content（内容）、padding（内边距）、border（边框）和margin（外边距）。盒模型决定了元素占据的空间大小。 2. 属性选择器：如.id和.class选择器，用于选取...
html_html_源码
10-04
这个压缩包"html_html_源码"包含了几个HTML的实例，旨在展示基础到进阶的HTML应用，如弹窗、轮播图和页面布局。这些案例对于初学者理解和实践HTML编程至关重要。 首先，让我们深入了解HTML的基本结构。HTML文档由一...
HTML.zip_html+js+css
09-22
通过选择器（如类选择器 `.class`，ID选择器 `#id`，元素选择器 `element`等）来定位HTML元素，并应用样式规则，如颜色、字体、布局等。CSS还支持盒模型、浮动、定位、响应式设计等概念，能够帮助你创建美观且适应...
html学习日记6_网站.rar
01-05
在网页布局中，HTML通过`<div>`元素来创建区块，并利用CSS（Cascading Style Sheets）进行样式控制。`<header>`、`<nav>`、`<main>`、`<article>`、`<aside>`和`<footer>`等语义化标签则帮助构建更结构化的网页，...
经验总结：HTTP返回505错误小记
热门推荐
我的地盘
10-28 6万+
<br />昨天调试代码的时候，用http请求一个图片，返回的结果为如下：<br />HTTP/1.1 505 HTTP Version Not Supported<br />Server: Apache-Coyote/1.1<br />Date: Wed, 27 Oct 2010 05:13:08 GMT<br />Connection: close<br /> <br />马上google一下，大多说505 HTTP Version Not Supported是由于服务器对http1.1协议不支持或者支
HTML————14、HTML 布局
Fly_鹏程万里
07-26 421
网页布局对改善网站的外观非常重要。 请慎重设计您的网页布局。 网站布局 大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。 大多数网站可以使用 &lt;div&gt; 或者 &lt;table&gt; 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具...
Nginx之——封ip，禁用IP段的设置说明
冰河的专栏
05-20 4万+
转载请注明出处：https://blog.csdn.net/l1028386804/article/details/90371134 nginx的ngx_http_access_module 模块可以封配置内的ip或者ip段，语法如下： deny IP; deny subnet; allow IP; allow subnet; # block all ips deny all; # a...
前端学习（505）：垂直居中的第一种方式的优点和缺点
歌谣的博客
03-11 156
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>居中布局一&lt...
Web前端——HTML中的区块布局
巧克力布丁的博客
09-29 6496
一. HTML的区块元素和内联元素 大多数 HTML 元素被定义为块级元素或内联元素。 块级元素在浏览器显示时，通常会以新行来开始（和结束）。 实例: <h1>, <p>, <ul>, <table> 内联元素在显示时通常不会以新行开始。 实例: <b>, <td>, <a>, <img> 二. <div>元素 HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容
HTTP 请求状态码！从100到505！收藏！
騒周的博客
07-25 2232
1开头的http状态码 表示临时响应并需要请求者继续执行操作的状态代码。 100   （继续） 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。   101   （切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。 2开头的http状态码 表示请求成功 200     成功处理了请求，一般情况下都是返回此状态码；  201     请求成功并且服...
HTML5画布剪裁区域教程
limeiyans喜欢编程的那些事
01-16 816
定义一个剪辑区域使用HTML5画布,我们可以画一个路径,然后使用clip()方法画布的背景。一切之后将被绑定在剪裁区域。一旦我们完成剪裁区域内图纸的事情,我们可以返回画布上下文与restore()方法,以便进一步的图纸不绑定到剪裁区域。 在本教程中,我们将定义一个循环剪切区域画一个圈,然后使用clip(),然后我们就画几个圈内剪循环路径。接下来,我们将恢复画布背景用restore()方法,然后画
掌握HTML布局：列表、区块、表单与多媒体
在PHP全站开发工程师的学习过程中，第03章着重于HTML布局元素的理解和实践。这一章节是前端开发的基础，共分为6个课时，涵盖了HTML的关键组成部分，以便让学员掌握网站构建的核心技能。 首先，本章教学内容包括HTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值