HTML常用标签之排版标签

HTML常用标签之排版标签,第1张

单词缩写: head 头部. 标题 title 文档标题

为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题,即

标题标签语义: 作为标题使用,并且依据重要性递减

其基本语法格式如下:

小结 :

单词缩写: paragraph 段落 [ˈpærəgræf]无须记这个单词

作用语义:

可以把 HTML 文档分割为若干段落

在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是

是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。

单词缩写: horizontal 横线[ˌhɔrəˈzɑntl]同上

在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,<hr />就是创建横跨网页水平线的标签。其基本语法格式如下:

在网页中显示默认样式的水平线。

单词缩写: break 打断 ,换行

在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签

这时如果还像在word中直接敲回车键换行就不起作用了。

div span是没有语义的 是我们网页布局主要的2个盒子 想必你听过 css+div

div 就是 division 的缩写 分割, 分区的意思 其实有很多div 来组合网页。

span 跨度,跨距;范围

语法格式:

他们两个都是盒子,用来装我们网页元素的, 只不过他们有区别,现在我们主要记住使用方法和特点就好了

要回家了有点按捺不住心里的躁动,来点简单轻松的话题。

这是个有趣的问题,应该有不少人搜过,我也搜过。出现这个问题主要还是滥用块级元素,或者是不会使用一些小技巧。举个例子,有时候我们想实现如下表单效果:

但有时候写着写着会变成下面的样子:

按我从以前遇到过情况来说,出现上面的情况的原因,可能有2个:

第一,就是可能在某个地方<label>被设置块级元素包住了

解决方法: 在外部样式使用 display: inline-block

第二,就是<label>的样式使用了 display: block

所以如果以后在写表单的时候,出现这个问题,可以从上面2个方向去查找原因,以及找出相应的解决方法。

(1)、<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html>标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。使用 <!Doctype>会让文档中的所有盒子模型以w3c标准盒子模型呈现。

(2)、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

在HTML与CSS的标准化未完成之前,各个浏览器对于HTML和CSS的解析有各自不同的实现,而有很多旧的网页都是按照这些非标准的实现去设计的。在HTML与CSS标准确定之后,浏览器一方面要按照标准去实现对HTML与CSS的支持,另一方面又要保证对非标准的旧网页设计的后向兼容性。因此,现代的浏览器一般都有两种渲染模式: 标准模式 怪异模式 。在 标准模式 下,浏览器按照HTML与CSS标准对文档进行解析和渲染;而在 怪异模式 下,浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。这样的话,对于旧有的网页,浏览器启动怪异模式,就能够使得旧网页正常显示;对于新的网页,则可以启动标准模式,使得新网页能够使用HTML与CSS的标准特性。

Reference1 - h5新增标签

Reference2 - HTML元素分类

Reference3 - html标签分类及常用元素

Reference4 - HTML5常用标签分类

表格

1、<table></table>:声明一个表格,所有表格的内容应该放在table标签内

属性:

border:表示边框是否显示

width:表格的宽度

height:表格的高度

cellpadding:单元格边框和内容之间的补白

cellspacing:单元格和单元格之间的补白

align:表格的位置

值:

left:默认值 左对齐

center:居中

right:右对齐

2、<caption></caption>:表格的标题

3、<thead></thead>:表格的表头

4、<tbody></tbody>:表格的主体

5、<tfoot></tfoot>:表格的底部

6、<tr></tr>:表格的行

7、<td></td>和<th></th>:

表格的单元格

th修饰的单元格内容会加粗

属性:

colspan:横跨列,值为要横跨的列数 左到右

rowspan:横跨行,值为要横跨的行数 上到下


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8311718.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存