HTML标签|青训营笔记

107 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

由于我其实有一点HTML基础,所以在这里记录关于HTML的相关要点。
HTML其实是页面的基石,后面学的很多高级的玩意还是要依赖html.

页面布局

HTML的标签都是从上往下扫描,所以要放在前面的元素绝大部分必须写在前面。而块级元素

很多时候要用来分割元素块,实现页面分块分区效果。如横三竖三栏式:
其中的各个标签中均可插入新的标签用于编写页面内容,形成各个页面的具体内容。当然这种布局不是一定的,根据HTML5提供个各个题头,还有:

标签描述
<article>定义页面独立的内容区域。
<aside>定义页面的侧边栏内容。
<bdi>允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command>定义命令按钮,比如单选按钮、复选框或按钮
<details>用于描述文档或文档某个部分的细节
<dialog>定义对话框,比如提示框
<summary>标签包含 details 元素的标题
<figure>规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption>定义
元素的标题
<footer>定义 section 或 document 的页脚。
<header>定义了文档的头部区域
<mark>定义带有记号的文本。
<meter>定义度量衡。仅用于已知最大和最小值的度量。
<nav>定义导航链接的部分。
<progress>定义任何类型的任务的进度。
<ruby>定义 ruby 注释(中文注音或字符)。
<rt>定义字符(中文注音或字符)的解释或发音。
<rp>在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section>定义文档中的节(section、区段)。
<time>定义日期或时间。
<wbr>规定在文本中的何处适合添加换行符。

以上表格搬运自HTML5 新元素 | 菜鸟教程 (runoob.com)可以用于爬虫读取和收集。

内容填充

文本填充

类似于<h1>等自带的格式标签常用于文章的格式化,但是<div>,<span>和<p>也可以实现类似的效果,所以大部分其实不常用,但是多用对页面的分割还是很有帮助的.

图片填充

图片很广泛的使用在网页中.很多网页有很多的图片,但其实很多网站的图片数据包中图片的个数很少,往往倾向于将多张图片合成成一张来减少网络传输延迟等,改善用户的体验.使用时,截取对应的部分即可完成.也有一些效果需要通过背景图片的形式来实现,比如随翻页换图等,举个例子: 其他的就以后再补啦!