LearnWeb07-HTML04-表格基础

2024-02-04Updated 2024-03-04Web / HTML4 minutes read (About 607 words)

[!summary]+
HTML 中需要使用 CSS 进行样式组合才能得到一个阅读体验较好的表格，目前还是先专注在 HTML 的部分，后面到 CSS 部分的时候再合起来一起看。

本文主要是参考 MDN 范例中的源码以及对应的文章 HTML 表格基础的一篇阅读笔记。

表格基础

从源码开始我们可以看到表格对应的 Tag 核心的一下几个：

<Table> 包裹整个表格
<caption> 设置表格的标题
<tr> 一行一行的包裹表格，全称应该是 table row

可以看到 HTML 中编写表格是使用 <tr> 进行逐行编写的，逐行的描述整个表格：

用 <td> 描述表格的内容语义，table data
用 <th> 描述表格的标题语义，即首行首列的标题元素 table header

主要的元素就是上面这些，但是复杂的表格包括：合并的单元格（纵向和横向）需要再 th 和 td 中使用额外的属性来定义：colspan 和 rowspan

colspan="2" 属性定义占据两个单元格宽度（横向合并）
rowspan="3" 属性定义占据三个单元格的宽度（纵向合并）

然后每个 tr 中排除掉被合并的单元格还需要多少个 td 需要我们自己计算。

HTML 的表格基础样式

可以使用 colgroup 和 col 为整列设置同样的样式，每个 col 元素代表一列，如果需要一条元素定义多列的样式的时候可以使用 span 属性，下述代码会将第二列背景设置为黄色。

对单个单元格设置样式可以仿照使用 style 属性来嵌入对应的 css 样式，包括宽度什么的。

<table>
  <colgroup>
    <col />
    <col style="background-color: yellow" />
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

HTML 表格结构化

[!quota]+
由于表格在结构上有点复杂，如果把它们定义得更加结构化，那会帮助我们更能了解结构。一个明确的方法是使用 <thead>、<tfoot> 和 <tbody>，这些元素允许你把表格中的部分标记为表头、表尾、表体三部分。

这样的结构化实际上没有什么默认 style，主要是帮助我们后续定义各个部分的样式。

其他

表格元素支持嵌套
使用 scope 属性来支持视障人士来理解这个表格

Web, HTML

LearnWeb06-HTML03-多媒体元素

2024-02-03Updated 2024-03-04Web / HTML20 minutes read (About 2941 words)

[!summary]+
接下来主要探讨 HTML 中的多媒体元素，图片、视频、音频以及 iframe 等等。

图片元素 Image

1	`<img src="<img_url or location>" />`

src：最基本的图片元素仅需一个 src 属性来指向图片资源，这样就可以将图片导入页面中，其中关于 Location 这里有一个 SEO Tips(Google Recommand)：

本地存储推荐存储于 images
图片的命名更加具备描述性。
不要将自己的 SRC 属性指向他人网页上的照片（这种行为为”盗链”）

如图像元素和视频元素这类嵌入的元素，有时候也被成为替换元素：元素的内容和原始尺寸由外部资源所定义，而非元素本身。（可以使用属性或者 CSS 进行控制）

alt：alt 为了视障，节省带宽，浏览器支持问题等原因设置的代替图片出现的描述性文本，推荐根据图片内容进行编写：

装饰需求: 使用空的 alt="" 避免输出多余信息，同时推荐将装饰性图片在 CSS 文件中定义而非 html，下文会详细讲解 CSS 设置装饰图片
内容需求：如果正文中没有描述，则 alt 对图片进行描述，否则设置为空。

width 与 height ：上文中提到图片的 size 由外部资源决定，单位了适应页面的大小，可以使用 img 标签中的 width 和 height 属性来实现对图片的缩放，同时也会在页面尚未加载完成时预留空间，避免页面结构混乱。（因此无需缩放也建议，获取图片的 size 写入属性。）

title：类似超链接中的 title 属性，可以给照片添加悬停提示，当空间不够时可以通过这种方式来添加部分信息，但不推荐。

figure 与 figcaption：创建一个容器（box），可以为图片在图片下方添加说明，像论文中的那种，对于无障碍用户来说起到和 alt 一样的作用。

<figure>
	<img src= "https://the-network-photo" alt="" title="key img", width="400", height="200" />
	<figcaption>通过为网络添加一个低纬嵌入来实现用最小的空间代价控制网路行为</figcaption>
</figure>

figure 中可以存放几张图片、一段代码、音视频、方程、或者任何其他的内容，而不只是单张照片，类似的补充说明的场景都可以使用 figure 元素呈现。

Web, HTML

LearnWeb05-HTML02-要素察觉

2024-02-02Updated 2024-03-04Web / HTML24 minutes read (About 3631 words)

[!summary]+
本章节在 HTML01 的基础上加深对于一些基础概念，标签等的认知，还是以 HTML 编写的基础知识为主。

块级元素和内联元素

块级元素和内联元素就像 Markdown 的内联代码和代码块两种写法，一个需要另起一行且会占据行，下一个元素必须另起一行，如 <p> 段落等。而内联元素就是可以嵌入行内，内联元素前后都无需换行，一般如强调，高亮，超链接一类。

正是由于这种结构，块级元素在使用的时候除了内容，往往还承担着网页的结构相关的工作，如页眉，页脚, 列表，导航栏等等；
块级元素不会嵌套在内联元素中，但是可能嵌套在另一个块级元素中。
内联元素则通常在块级元素中和文本一起使用。

需要注意的是这类元素分类是过时的，HTML 定义了更加详细具体的分类，为了便于理解暂时使用旧的定义来做简单的区分。

布尔属性

前文提到过，属性通常以 k-v 键值对的形式呈现，但是有部分属性是没有值的，其 key 通常与值有着相同的含义，如 disabled，该布尔属性本身就代表着禁用，例如输入框 <input> 禁用就会阻止用户的输入。

1	`<input type="text" disabled />`

这样就会创建一个无法输入的输入框，通常会以灰色呈现，type 则限制了输入框的输入类型。

Web, HTML

LearnWeb02-HTML01-基础的标签

2024-01-31Updated 2024-03-04Web / HTML6 minutes read (About 899 words)

[!Intro]+
在 Web 入门，How HTML Work 部分已经简单介绍过，HTML 是一种定义内容结构的标记语言，通过一系列标记（确定其表现形式）和对应内容组成的元素，嵌套，排列，构成完整的页面。本文主要是整理和熟悉一下基础的标记元素

REF: HTML 入门

从上述图像可以看到一个基本的 HTML 元素的构成，元素的 Tag 可以包含属性，多个属性之间用空格隔开，Class 属性可以为元素标识名称，进而为其指定 Style 等。

属性通常为 K-V 键值对，attr=”value” 的形式呈现，这里引号可以是单或者双，甚至可以没有，但是没有引号有时候会导致问题，所以建议保持使用引号的风格去编写。

Head/Overview 部分

参考网站中的范例如下，一个基本的 HTML 文件有以下这些可以注意的地方：

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
  </body>
</html>

<head> 就如 cpp 中的 head 文件，定义一些不用于向用户显示的内容，给浏览器的关键词，字符集声明，页面描述等内容
<meta charset="utf-8"> 定义文档使用的字符串编码类型，utf-8 支持世界上大部分语言的渲染，避免因为中文等出现乱码的情况。
<meta name="viewport" content="width=device-width"> 视口元素，可以确保页面以视口宽度进行渲染，避免移动端浏览器上因页面过宽导致缩放。
<title> 对当前网页的描述和注解，显示在标签栏中，以及收藏时显示的文字
<body> 部分则是包含网站的全部需要显示的内容。

Web, HTML

LearnWeb07-HTML04-表格基础

表格基础

HTML 的表格基础样式

HTML 表格结构化

其他

LearnWeb06-HTML03-多媒体元素

图片元素 Image

LearnWeb05-HTML02-要素察觉

块级元素和内联元素

布尔属性

LearnWeb02-HTML01-基础的标签

Head/Overview 部分

Recents

Tags

Categories