4495ae0e28
- Created multiple exercises under the CSS layout section, including: - Final page layout with CSS styles and HTML structure. - Display and flow concepts with examples of block, inline, and none display types. - Selectors and pseudo-classes with practical examples. - Overflow and sizing handling in CSS. - Grid layout basics for two-dimensional layouts. - Fixed and sticky positioning examples. - Centering techniques for common layout scenarios. - Added README files for each exercise to outline objectives and file structures. - Updated main README to include new sections and usage instructions.
HTML Structure
这部分只解决一个问题：你能不能把页面内容写成清晰、正确、可维护的 HTML 结构。
学完后你应该掌握
- HTML 文档的基本骨架
- 标签的嵌套关系
- 常见文本标签的作用
- 块级元素和行内元素的区别
- 列表、链接、图片的结构写法
- 媒体标签的基础写法
- 表格和表单的基础结构
- 进阶表单控件的使用
- 语义化标签的使用场景
- 如何把一个页面先拆成结构，再开始写代码
HTML 是什么
HTML 不是“样式语言”，也不是“交互语言”。
HTML 负责的是：
- 页面有什么内容
- 内容之间是什么关系
- 哪部分是标题，哪部分是正文，哪部分是导航，哪部分是表单
你可以把 HTML 理解成网页的骨架。
必须建立的 5 个核心意识
1. 页面是树状结构
一个页面不是一堆标签平铺，而是父子嵌套关系。
示例：
<body>
<main>
<section>
<h1>标题</h1>
<p>正文</p>
</section>
</main>
</body>
这里的关系是：
body包含mainmain包含sectionsection包含h1和p
2. 先想结构，再写标签
写页面前先问自己：
- 这一块是不是标题区
- 这一块是不是导航区
- 这一块是不是主要内容
- 这一块是不是补充信息
- 这一块是不是页脚
3. 能用语义化标签时，别只会写 div
常见语义化标签：
headernavmainsectionarticleasidefooter
4. 标签要和内容类型匹配
- 标题用
h1到h6 - 段落用
p - 列表用
ul/ol/li - 链接用
a - 图片用
img - 表单用
form - 表格用
table
5. 结构正确比数量多更重要
不是标签越多越厉害，而是结构越合理越好。
高频标签速记
文本
h1-h6：标题p：段落strong：强调em：语气强调
容器
div：通用容器span：行内容器section：主题分区article：独立内容块
导航和布局
headernavmainasidefooter
列表和媒体
ulolliaimgvideo
表格和表单
tabletheadtbodytrthtdformlabelinputtextareabuttonselectoption
常用属性
id：唯一标识class：分组标识href：链接地址src：资源地址alt：图片说明name：表单字段名placeholder：输入提示type：输入类型
学习顺序
- 文档骨架
- 文本结构
- 链接、图片、列表
- 语义化布局
- 表格
- 表单
- 综合页面拆解
练习目录
- [01-document-skeleton/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/01-document-skeleton/README.md)
- [02-text-links-lists/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/02-text-links-lists/README.md)
- [03-semantic-layout/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/03-semantic-layout/README.md)
- [04-tables-and-forms/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/04-tables-and-forms/README.md)
- [05-final-project/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/05-final-project/README.md)
- [06-block-and-inline/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/06-block-and-inline/README.md)
- [07-media-and-paths/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/07-media-and-paths/README.md)
- [08-advanced-form-controls/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/08-advanced-form-controls/README.md)
- [09-nesting-review/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/09-nesting-review/README.md)
过关标准
如果你能独立做到下面这些，就说明你已经真正入门：
- 不看答案写出完整 HTML 基本骨架
- 能把一段需求描述拆成标题区、内容区、列表区、表单区
- 能区分
div、span、section、article - 能区分块级元素和行内元素
- 能独立写出列表、表格、表单的正确嵌套
- 能写出图片、视频、
select等常见结构 - 能写出一个结构清晰的单页介绍页面
学习建议
- 每个练习至少手写一遍，不要只看答案
- 写完后自己检查嵌套关系
- 不要急着加 CSS，先把结构写准
- 每次写页面都先画结构草图