[!summary]+
设计个人首页作为 HTML 和 CSS 的实战，主要设计以下的几个部分，导航栏，侧边栏，logo，页脚，背景，以及一个简单的个人介绍页面，首先不考虑使用框架和库，仅对整体流程做熟悉，使用纯 HTML 和 CSS 进行基础实现。后续考虑使用框架和组件库进行重写。

CheckList for Web Design : Using this website to checkout those element u missed in your design. Prepare for those elements. Get Ready and Start.

Nav-Bar 页眉的导航栏设计

Buger 下拉菜单(侧边菜单)

https://alvarotrigo.com/blog/hamburger-menu-css/

flex 布局设计

使用 html css 进行布局时，如果计划使用 flex 等布局，避免无谓的划分子集的 div 等 box，避免多余的额外对齐工作，原型和草稿确认布局是很重要的。例如上述的导航栏，分成左右两个 div 即可，如果将搜索框等独立出来，在后续对齐和确认间距的时候会多出很多麻烦。

可以缩减为仅使用一个 div，使用 flex 的布局技巧来使得元素一半左对齐一半右对齐即可，下面时具体说明。可以参考文献 1 的《使用自动的外边距在主轴上对齐》章节。

如果希望让 flex 子元素靠右显示，可以在子元素中定义 margin-left: auto; (auto 也可使用其他数值单位替代)，参考 👍MDN弹性盒子容器中的对齐方式 | flex子元素靠右 | Flex的最后一个元素靠右 | Flexbox

• align-items 如果没有设置正确的话，所有的元素会按照撑满 flex 容器的高度去对齐。
• 使用 margin:auto 可以实现元素的居中
• 使用 align-self 可以实现单个 flex 子项的不同对齐方式。

可能接着阅读更多布局相关的资料，加深对布局的认识，以及正确选择合适的布局：Mdn Layout Cookbook

[!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 样式，包括宽度什么的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<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 属性 来支持视障人士来理解这个表格

[!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 一样的作用。

1
2
3
4

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

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

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

块级元素和内联元素

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

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

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

布尔属性

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

1

<input type="text" disabled />

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

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

REF: HTML 入门

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

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

Head/Overview 部分

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

1
2
3
4
5
6
7
8
9
10
11

<!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> 部分则是包含网站的全部需要显示的内容。

[!summary]+
Familiar with the pipeline of how to build a website, how to organize the files, etc…

Start Design

开始设计一个网站的时候，可以从以下三个方面入手来启动整个开发设计过程：网站的主题->基础的一些内容->整体的外观设计（草稿）

更具体一些：确定完要制作的网页，可以绘制草图有一个粗浅的整体效果，然后指定文本、图像、色彩、字体等资源，就可以开始制作了。

File Structure

关于项目中的文件命名，需要注意的是以下的三点，建议养成这样的规范去建立网页文件夹。

• 建议使用完全小写来命名文件，webserver 是大小写敏感的，所以复杂的大小写关系容易导致访问不到文件。
• 尽量不要使用空格，空格可能会破坏链接被视为两个文件等，如果没有被区分很多服务器也需要使用 %20 对空格进行替换
• 尽量使用连字符代替下划线进行文件命名，google 搜索引擎将连字符作为单词的分割符，而不会识别下划线

而文件存储结构部分，通常而言，有以下的关键文件和文件夹结构，在很多场景下也会将 image 等文件夹放到 static 文件夹中。

• index.html
• styles: 存放 css 文件
• images: 存放图片等媒体资源文件
• scripts: 存放 js 等脚本代码文件

资源的文件路径一般而言以 html 为 Basepath，然后根据上下级关系确认索引地址即可。

[!summary]+
Web 前端开发者路线学习，基本的目的是能够为自己想做的项目搭建前端界面，从 web 开始再到各个移动设备的前端 UI，基于 Mdn 课程，Roadmap 具体项目逐步推进对各个知识点的学习。

根据下面的课程、Roadmap、搭建自己的知识架构，在搭建过程中结合具体的项目，包括自己部署的界面去逐步实践，完善和熟悉整个知识体系和技术栈，并通过和现代 AI 辅助工具的合作，建立自己独立的前端开发流。

• Roadmap For Beginner
• Roadmap For All
• Mdn Web Tutor

Be Ready 准备以及基础了解

• 基础：开发环境准备、页面设计、文件架构规划（由于网站需要包含多种代码、文本、素材、因此如何组织文件是相当重要的）
• 语言：HTML 、CSS、JS 三驾马车为一个网页必不可少的要素，通过结合各自不同的功能来实现多样化的页面设计。

What’s WEB

What’s WEB? 通过 URL 统一资源定位符向服务器请求 HTML，HTML 通过包含的信息告诉 Browse 需要额外的信息来呈现该页面，因此基于 HTML 提供的信息 web browser 继续请求资源、CSS、JS 等文件，并将这些文件按照 HTML 的描述进行组合最终呈现完整的页面。