HTML 布局


HTML布局示例

UIHTML

什么是HTML?

HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言: HyperText Markup Language(缩写html). HTML 不是一种编程语言,而是一种标记语言. 标记语言是一套标记标签 (markup tag).

HTML 文档也叫做 web 页面. HTML 文档包含了HTML 标签及文本内容. HTML 使用标记标签来描述网页.

Footer

运行 »

HTML布局标签

网站通常以多列(如杂志或报纸)显示内容。

HTML5提供了定义网页不同部分的新语义标签:

HTML5语义元素
  • <header> - 标签定义文档或者文档的一部分区域的页眉
  • <nav> - 定义导航链接的容器
  • <section> - 定义文档中的部分
  • <article> - 定义一个独立的自包含文章
  • <aside> - 定义除内容之外的内容(如侧边栏)
  • <footer> - 为文档或文档部分区域定义页脚
  • <details> - 定义其他详细信息
  • <summary> - 定义<details>元素的标题

HTML布局方法

创建多列布局有五种不同的方法。每种方式都有其优点和缺点:

  • HTML 表格(不推荐)
  • CSS 浮动(float)
  • CSS flexbox
  • CSS 框架(framework)
  • CSS 网格(grid)


到底该选择哪一个?

HTML表格

<table>元素不是设计来布局的! <table>元素的目的是显示表格数据。所以,不要使用表格进行页面布局!它们会给你的代码带来麻烦。想象一下几个月后重新设计网站会有多难。

提示:请勿使用表格进行页面布局!


CSS框架(framework)

如果要快速创建布局,可以使用Bootstrap等框架。


CSS浮动(float)

使用CSS浮动属性执行整个Web布局是很常见的。 Float易于学习 - 您只需要记住浮动和清除属性的工作原理。 缺点:浮动元素与文档流相关联,这可能会损害灵活性。在我们的 CSS 浮动和清除浮动章节中了解有关float的更多信息。

浮动示例

UIHTML

什么是HTML?

HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言: HyperText Markup Language(缩写html). HTML 不是一种编程语言,而是一种标记语言. 标记语言是一套标记标签 (markup tag).

HTML 文档也叫做 web 页面. HTML 文档包含了HTML 标签及文本内容. HTML 使用标记标签来描述网页.

Footer

运行 »

CSS Flexbox

Flexbox是CSS3中的一种新布局模式。

当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,使用flexbox可确保元素的行为可预测。 缺点:在IE10及更早版本中不起作用。

在我们的CSS Flexbox章节中了解有关flexbox的更多信息。

Flexbox示例

UIHTML

什么是HTML?

HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言: HyperText Markup Language(缩写html). HTML 不是一种编程语言,而是一种标记语言. 标记语言是一套标记标签 (markup tag).

HTML 文档也叫做 web 页面. HTML 文档包含了HTML 标签及文本内容. HTML 使用标记标签来描述网页.

Footer

运行 »

CSS网格视图(Grid View)

CSS网格布局模块提供了基于网格的布局系统,包括行和列,使得设计网页更加容易,而无需使用浮动和定位。

缺点:在IE或Edge 15及更早版本中不起作用。

CSS Grid View一章中了解有关CSS网格的更多信息。