Html 布局总结

最新推荐文章于 2022-07-24 16:04:25 发布

wangyihero8

最新推荐文章于 2022-07-24 16:04:25 发布

阅读量354

点赞数

分类专栏： Cocos Creator

Cocos Creator 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1、<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

2、文本格式化标签

标签	描述
<b>	定义粗体文本。
<big>	定义大号字。
<em>	定义着重文字。
<i>	定义斜体字。
<small>	定义小号字。
<strong>	定义加重语气。
<sub>	定义下标字。
<sup>	定义上标字。
<ins>	定义插入字。
<del>	定义删除字。

3、html中的代码显示

<p>Coding Example:</p>
<code
<pre>
var person = {
   firstName:"Bill",
   lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>

5、表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

<tr>

</tr>

<tr>

</tr>

</table>

浏览器可能会这样显示：

注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<tr>

</tr>

<tr>

</tr>

</table>

在浏览器中显示如下：

row 1, cell 1	row 1, cell 2
	row 2, cell 2

6、表格跨行、跨列

<tr>

</tr>

<tr>

</tr>

7、HTML 分组标签

标签	描述
<div>	定义文档中的分区或节（division/section）。
<span>	定义 span，用来组合文档中的行内元素。

8、相对布局使用案例：

http://www.w3school.com.cn/tiy/t.asp?f=html_layout_divs

9、表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

在浏览器显示如下：

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

10、

重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）

<frameset cols="25%,75%">

   <frame src="frame_a.htm">

   <frame src="frame_b.htm">

</frameset>

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档
很难打印整张页面

11、iframe 用于在网页内显示网页。

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

12、HTML 文件路径

路径	描述
<img src="picture.jpg">	picture.jpg 位于与当前网页相同的文件夹
<img src="images/picture.jpg">	picture.jpg 位于当前文件夹的 images 文件夹中
<img src="/images/picture.jpg">	picture.jpg 当前站点根目录的 images 文件夹中
<img src="../picture.jpg">	picture.jpg 位于当前文件夹的上一级文件夹中

13、不间断空格（non-breaking space）

HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用   字符实体。

14、

史上最全Html和CSS布局技巧

https://www.cnblogs.com/-sayaa/p/7403743.html

HTML+CSS 五种布局方式

https://blog.csdn.net/m0_38134431/article/details/84372226

float布局不需要指定父元素的布局模式（如：绝对、相对布局）：因为默认文档流就行流式布局。

绝对、相对布局是用来控制子元素的，设置在父元素中

flex布局：自适应好，类似于弹性盒子的模式（flex-basis: 300px;）来指定盒子的弹性宽度，会受其他弹性盒子的影响

15、

①div默认是纵向排列的，例子如下：

</div>

②如果要div横向排列，用：float：left

#div1{

float: left;

}

#div2 {

float: right;

}

#div3 {

float: right;

}

横向排列了，但是顺序错位了。

div2 和 div3，可以通过将它们再用一个 div 包起来的方法解决。

15、

兄弟之间用marging、父子之间用padding

16、布局总结（非常好！）

html+css布局整理笔记：https://www.cnblogs.com/hugewilliam/p/8659456.html

用CSS实现“表格布局”： https://www.cnblogs.com/shixizhi/p/8319298.html

17、html区块元素: 大多数html元素为块级元素或内联元素

块级元素： 通常在浏览器显示时会以新行开始（和结束）；例： <ul> <p> <h1> <table>等

内联元素： 在显示时不会以新的一行开始；例：<strong> <a> <img> <span>等 <span>文本的容器

html的几种布局方式：通常网页都是用<div>、<table>来进行布局，CSS渲染整个布局的样式使页面边的好看

①流动布局

块级元素都会自上而下按顺序垂直延伸分布，默认状态下块级元素的宽默认为100%

内联元素都会从左到友水平延伸分布

②浮动布局

在默认布局下，如果我们想让两个块级元素并排显示，通过float浮动实现，使用后记得清除浮动

③层模型

通过设置定位position实现 absolute 绝对定位； relative 相对定位； fixed 固定定位等

目前前端的几种布局方式：

18、display:table;使用小结

IE8支持很多新的CSS display属性值，包括与表格相关的属性值：table、table-row和table-cell，它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束，同时也给了HTML表格布局致命一击。最终，使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。

①为什么不用table元素？

目前，在大多数开发环境中已经不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用table元素呢？

用DIV+CSS编写出来的文件k数比用table写出来的要小。

table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示。

非表格内容用table来装，不符合标签语义化要求，不利于SEO。

table的嵌套性太多，用DIV代码会比较简洁。

.......

②要是想要一个表格的布局方式怎么办？

可以用display:table来解决。

display:table系列几乎是和table系的元素相对应的，请看下表：