当前位置： 首页 > news >正文

《Web前端工程师修炼之道》学习笔记：第二部分

news 2026/7/27 5:38:58

第二部分：HTML结构化标记

第4章 创建简单网页(HTML概述)

第一步：从内容开始

练习4-1：

本人使用cursor作为编写器新建文件夹bistro，并新建文件index.html，编写以下内容：

Black Goose Bistro The restaurant The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients. Catering You have fun... we'll handle the cooking. Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers. Location and Hours Seekonk, Massachusetts; Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight

在浏览器打开刚才编写的index.html文件。

图4.1 index.html文件在Chrome浏览器的显示内容

可观察到，浏览器忽略多个空格、换行，此外浏览器还会忽略制表符、不可识别标签、注释中的文本。

第2步：文档结构化

HTML元素由开始标记、内容、结束标记组成：

图4.2 HTML元素组成结构
  • HTML中元素不区分大小写。
  • 没有内容的元素为空元素，空元素可用添加图像到网页中。
图4.3 HTML文档的最小结构
  • 1、第一行是一个文档类型声明，说明这是一个HTML 5文档。
  • 2、html元素为根元素，包含文档中所有的元素。
  • 3、html元素中，文档分为head和body元素，head元素包含关于文档本身的描述性信息，例如标题、样式表、脚本、元标签(meta)等。
  • 4、meta元素，提供文档本身的信息，告诉浏览器如何处理文档内容，例如在此处指明文档的字符编码。
  • 5、title元素，告诉浏览器该网页的标题是什么，这是HTML规范之一，每个HTML文档都必须包含描述性的title。
  • 6、body元素，包含我们希望浏览器想要显示的内容。

练习4.2：

打开刚才创建的index.html文件，并编写以下内容：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Black Goose Bistro</title> </head> <body> The restaurant The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients. Catering You have fun... we'll handle the cooking. Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers. Location and Hours Seekonk, Massachusetts; Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight </body> </html>

在浏览器中打开index.html文件：

图4.4 上述修改后在浏览器中显示的内容

第3步：确定文本元素

语义标记，选择合适的HTML元素，为当前内容进行描述。

练习4-3：

打开index.html文件，并编写以下内容：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Black Goose Bistro</title> </head> <body> <h1>Black Goose Bistro</h1> <h2>The restaurant</h2> <p>The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients.</p> <h2>Catering</h2> <p>You have fun... <em>we'll handle the cooking</em>. Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers.</p> <h2>Location and Hours</h2> <p>Seekonk, Massachusetts;</p> <p>Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight</p> </body> </html>

在浏览器中打开index.html文件。

图4.5 修改上述后浏览器显示的网页内容

块元素(block)和内嵌元素(em)，处理块元素时将元素按照矩形盒子堆积，处理em元素时会突出显示内容。一般浏览器会使用默认样式来显示网页，但Web开发者可以通过修改样式来更优雅地显示网页。

图4.6 块元素和内嵌元素的显示

第4步：添加图像

使用图像元素(img)、空元素和特性来给网页添加图像。

图4.7 空元素-换行元素(br元素)

特性用于阐明或修改元素的指示，对于img元素，src通过URL来提供图像文件的位置。

图4.8 包含特性的img元素
  • 特性只出现在开始元素中，不能出现在结束元素中。
  • 元素可以有多个特性，用空格隔开，不区分顺序。
  • 大多数特性后面有值，其后跟着等号(=)。
  • 特性值放在引号内，保持风格一致。
  • 有些特性是必须的，例如img元素中必须有src和alt特性。
  • 每个元素可用的特性名都在HTML规范中，Web开发者不能自创特性。

练习4-4：

自己随意下载一个图片，放在bistro文件夹下（本人的图片名为blackgoose.png），并编写index.html内容：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Black Goose Bistro</title> </head> <body> <h1><img src="blackgoose.png" alt="Black Goose Bistro logo" /><br>Black Goose Bistro</h1> <h2>The restaurant</h2> <p>The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients.</p> <h2>Catering</h2> <p>You have fun... <em>we'll handle the cooking</em>. Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers.</p> <h2>Location and Hours</h2> <p>Seekonk, Massachusetts;</p> <p>Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight</p> </body> </html>

打开浏览器并显示index.html文件中的内容:

图4.9 在浏览器中显示图片的效果

第5步：使用样式表来改变外观

使用CSS来美化刚才的Black Goose Bistro主页。

练习4-5：

打开编写index.html文件：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Black Goose Bistro</title> <style> body { background-color: #faf2e4; margin: 0 15%; font-family: sans-serif; } h1 { text-align: center; font-family: serif; font-weight: normal; text-transform: uppercase; border-bottom: 1px solid #57b1dc; margin-top: 30px; } h2 { color: #d1633c; font-size: 1em; } </style> </head> <body> <h1><img src="blackgoose.png" alt="Black Goose Bistro logo" /><br>Black Goose Bistro</h1> <h2>The restaurant</h2> <p>The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients.</p> <h2>Catering</h2> <p>You have fun... <em>we'll handle the cooking</em>. Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers.</p> <h2>Location and Hours</h2> <p>Seekonk, Massachusetts;</p> <p>Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight</p> </body> </html>
图4.10 在浏览器显示CSS样式表的美化效果
图4.11 该章节中所使用的HTML元素

第5章 标记文本

  • 段落元素<p></p>
  • 标题元素<h1></h1><h2></h2>...
图5.1 不同标题元素的显示效果
  • 水平分割线<hr>
图5.2 水平分割线的显示效果
  • 群组标题<hgroup></hgroup>该<hgroup>元素允许将一个标题与任意次要内容（例如子标题、副标题或口号）组合在一起。在<hgroup>中，这些类型的内容也表示为<p>元素。
图5.3 群组标题元素的显示效果
  • 在HTML中主要列表形式有三种：无序列表、有序列表、定义列表。无序列表元素<ul>，无序列表中的列表项使用<li></li>。有序列表元素使用<ol></ol>，同样有序列表中的列表项使用<li></li>。定义列表元素<dl></dl>，<dt>元素为一个表项，<dd>元素为表项的“定义”。
HTML中的代码
无序列表的显示效果
  • 块级引用元素<blockquote>、预格式化文本<pre>、独立的流内容元素<figure>和<figcpation>，作用是对内容进行分类。
  • 区段元素<section></section>、独立内容<article></article>、侧栏<aside></aside>、导航<nav></nav>、页眉<header></header>、页脚<footer></footer>、地址<address></address>。
图5.4 文本级别语义元素
  • 泛型块级元素<div>和泛型内联元素<span>，id和class特性，id特性用于给HTML文档中的元素指派唯一的标识符，class用于组合相似的元素。
  • 所有字符引用都以“&”开头，以“;”结尾。
图5.5 常见特殊字符及其引用

第6章 添加链接

  • 使用锚元素<a>，在<a>中给出href特性的URL地址来添加链接，两种指定URL方式：绝对路径和相对路径。
  • 链接到网页中的指定点，在<a>中的href特性指定到网页中元素的id。若是要链接到另一个文档的片段时，需要指定该文档的绝对或相对路径+#(元素id)。
  • 使用HTML标记打开新窗口，可以在<a>元素中使用target特性，设置target="_blank"会使得每次点开这个链接的时候会让浏览器打开新窗口。还有邮件链接和电话链接。

第7章 添加图片

  • 使用img元素插入图片，还需指定特性src和alt，另外img是空元素；alt提供替换文本，档图片失效的时候会显示alt中的文本。
  • 使用特性width和height来指定图片的宽度像素和高度像素。
  • 窗口中的窗口，使用ifram元素可以将一个单独的HTML文件或其他资源内嵌到一个HTML文件中。

第8章 表格标记

  • 表格元素<table></table>、表行<tr></tr>、表头<th></th>、表格单元格中的数据<td></td>。
图8.1 创建表格基本结构的元素
  • 合并单元格使用clospan属性(列合并)和rowspan属性(行合并)，使用caption元素给表添加一个标题或显示表格附近的简短说明。使用scope属性对表头单元格进行配置，以应用于指定的行或者列。
图8.2 与表格相关的元素和属性

第9章 表单

  • 表单由两部分组成，第一部分是网页看到的表单本身，另一部分是服务器端的应用程序或脚本。
图9.1 Web表单提交时后台运行流程
  • 表单元素<form></form>，使用form元素来将表单添加到网页中。action特性用于处理表单的程序或者脚本的URL；method特性指定信息将如何发送到服务器上，POST方法只有服务器才能看到请求的内容，GET方法，编码后的表单数据附在URL中。
  • 变量和内容，name特性表示控件的变量名。
  • 单行文本输入控件<input>，多行文本输入控件<textarea></textarea>。
  • 专用文本输入域：密码输入域、搜索域、电子邮件地址、电话号码、URL地址等。
  • 按钮，图像按钮、自定义输入按钮、button元素；单选和复选框按钮。
  • 菜单，select元素添加下拉菜单和滚动菜单添加到表单中；组合菜单选项元素optgroup。
  • 文件选择控件，使用input元素，设置type特性为file，就可以使用户选择硬盘中的文档。
  • 隐藏控件，使用input元素，设置type特性为hidden。
  • 日期和时间控制，在input元素中，设置type特性为date、time、datetime、datetime-local、month、week等。
图9.2 日期和时间选择器输入
  • 数字输入和颜色选择器等等输入控件。
  • label元素表示用户界面中某个元素的说明；
  • fieldset元素表示表单控件的逻辑组和legend元素表示内容标题。

第10章 HTML5

该章节结构如下：

HTML历史 ↓ HTML5文档结构与新元素 ↓ 浏览器API ↓ video / audio ↓ canvas + JavaScript绘图

注：本章内容不为重点，故不再赘述，可自行翻阅浏览。

http://www.jsqmd.com/news/1272080/

相关文章：

  • 长三角注塑机工业设计优选 深耕设备外观结构全案服务，塑胶设备外观设计/设备外观设计/半导体设备外观设计，工业设计企业案例 - 品牌推荐师
  • 90% 的人都搞错过的国外 AI 名词，一篇给你全理清楚
  • Em Dash与AI：提升技术文档可读性的实用指南
  • C#开发OPC UA客户端：工业数据采集实战指南
  • AI量化投资平台架构解析与风险管理实践
  • C语言分支与循环结构详解与应用实践
  • 工业级AI智能体的关键技术架构与落地实践
  • Python实战：用LangChain构建高效RAG工作流
  • 2026 年新发布：吉安诚信的小C中C,大C护栏批发厂家哪个好,打破认知：小C中C的护栏，竟是保护大C的秘密？-鼎泽橡塑科技 - 实业推荐官【官方】
  • TI C6678 DSP时钟与复位系统配置详解：从PLL原理到实战避坑
  • C++实现Windows开机自启动：注册表操作与Wow64兼容性详解
  • EKF-SLAM可观测性分析与Matlab实现
  • Gemma 4开源大模型：工程化实践与多模态技术解析
  • C++内存管理与性能优化实战：从智能指针到并发编程的进阶指南
  • 二分查找解决LeetCode 1283最小除数问题
  • Windows 11无线网卡驱动安装与优化全指南
  • 【python】开发了一个电子桌面桌宠，会要饭，满屏跑，效果太棒了
  • 2026黄鹤杯网络安全人才创新大赛学生组（Misc部分）
  • ChatGPT优化服务商如何助力企业AI价值转化
  • RAG技术解析：如何提升大模型的事实准确性
  • 从SVN迁移到Git：原理、工具与自动化实践指南
  • C++编译原理全解析：从源码到可执行文件的完整流程与Java对比
  • 杭州燕壹画室值不值得去？一份来自实地走访的真实测评！ - 资讯报道
  • 小论文/大论文必备 | RT-DETR多模态目标检测、绘制曲线对比图 | 引入多种绘制曲线对比图，包括mAP0.5，mAP0.5:0.95，Loss损失变化的曲线对比
  • Opus 5模型在ARC-AGI-3基准测试中创下SOTA成绩，突破AI抽象推理能力
  • Chrome插件图标与品牌设计：从设计到实现
  • Linux数据写入磁盘的IO路径与优化实践
  • OpenRouter API密钥安全配置与VSCode集成实战指南
  • AI幻觉技术解析：原理、检测与应对策略
  • MySQL从入门到实战：手把手教你掌握数据库核心技能