一步步用HTML搭建个人作品集页面-html教程-PHP中文网

不推荐从零手写纯html作品集——易漏语义、错嵌套、卡在响应式与可访问性；应以html5语义标签（header/main/section/article）为骨架，配最小css，严格设置alt、id及平滑锚点js。

一步步用html搭建个人作品集页面

直接说结论：用纯 HTML 搭建个人作品集页面，不推荐从零手写全部结构——容易漏语义、错嵌套、卡在响应式或可访问性上，反而拖慢展示进度。真正高效的做法是：用 HTML 作为骨架，明确每个区块的语义目的，再用最小必要 CSS 控制基础布局和视觉区分。

用 `<header></header>`、`<main></main>`、`<section></section>` 而不是一堆 `<div> <p>很多人一上来就写 <code><div class="container"> 套 <code><div class="hero">，结果搜索引擎和屏幕阅读器根本不知道哪块是导航、哪块是作品列表。HTML5 语义标签不是装饰，是给机器“读得懂”的信号。 <ul> <li> <code><header></header>` 放 logo、主导航（`<nav></nav>`）、简短标语，不要塞作品图
`<main></main>` 只包核心内容，一个页面只出现一次，里面用 `<section></section>` 划分「关于我」「作品集」「联系」等逻辑块

每个作品项用 `<article></article>` 包裹，内部至少含 `<h2></h2>`（项目名）、`<p></p>`（简介）、`<a href="..."></a>`（链接）

避免嵌套过深：`<section><div><div><div>... 这种结构既难维护，也削弱语义 <h3> <code><img>` 必须带 `alt`，且不能留空或填“图片”

这是最常被跳过的合规项，但后果实际：没有 alt 的图在弱网下不显示文字提示，盲人用户完全丢失该作品信息，SEO 也会降权。关键不是“有没有”，而是“准不准”。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

描述性文字，比如：<img src="dashboard-ui.jpg" alt="数据看板 UI 设计稿，含深蓝主色、卡片式布局与实时图表">
纯装饰图用 alt=""（空字符串，不是空格），告诉辅助技术忽略它
避免 alt="我的作品1" 这类无信息内容；也别写 alt="点击查看详情"（那是按钮职责，不是图的职责）
如果图里有文字（如截图中的标题），alt 要复述那行文字

导航链接别只靠 `<a href="#about"></a>` 锚点跳转

单页作品集常用锚点滚动，但仅靠 href="#xxx" 会出问题：刷新后 URL 不变、前进/后退失效、SPA 感差。必须配合 id 和基础 JS 行为补位。

目标区块要有对应 id，比如 <section id="about"></section>，且确保全页唯一

加一行轻量 JS 防止默认跳转打断体验：

document.querySelectorAll('a[href^="#"]').forEach(a => a.addEventListener('click', e => { e.preventDefault(); document.querySelector(a.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }));