{"id":18644081,"url":"https://github.com/sgalcheung/web.html-and-css-visual-quickstart-guide","last_synced_at":"2026-05-02T03:08:35.991Z","repository":{"id":114773180,"uuid":"183746125","full_name":"sgalcheung/web.html-and-css-visual-quickstart-guide","owner":"sgalcheung","description":"主要用来学习记录《HTML5与CSS3基础教程》这本书的demo","archived":false,"fork":false,"pushed_at":"2019-07-29T06:32:20.000Z","size":13271,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-17T17:40:03.695Z","etag":null,"topics":["css","css3","html","html5","html5css3guide","web"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sgalcheung.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-27T08:09:34.000Z","updated_at":"2019-07-29T06:32:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"4f2cc872-6aeb-40ed-972b-321057a97687","html_url":"https://github.com/sgalcheung/web.html-and-css-visual-quickstart-guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sgalcheung/web.html-and-css-visual-quickstart-guide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgalcheung%2Fweb.html-and-css-visual-quickstart-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgalcheung%2Fweb.html-and-css-visual-quickstart-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgalcheung%2Fweb.html-and-css-visual-quickstart-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgalcheung%2Fweb.html-and-css-visual-quickstart-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sgalcheung","download_url":"https://codeload.github.com/sgalcheung/web.html-and-css-visual-quickstart-guide/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sgalcheung%2Fweb.html-and-css-visual-quickstart-guide/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32521136,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T01:12:54.858Z","status":"online","status_checked_at":"2026-05-02T02:00:05.923Z","response_time":132,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3","html","html5","html5css3guide","web"],"created_at":"2024-11-07T06:09:53.949Z","updated_at":"2026-05-02T03:08:35.986Z","avatar_url":"https://github.com/sgalcheung.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 《HTML5与CSS3基础教程》\n### 主要用来学习记录这本书的demo，监督自己学习，同时作为学习笔记，方便查阅\n## [第 1 章 网页的构造块](chapter-01)\n* HTML思想\n* 基本的HTML页面\n* 标签：元素、属性、值及其他\n* 网页的文本内容\n* 链接、图像和其他非文本内容\n* 文件名和文件夹名\n* URL\n* HTML：有含义的标记\n* 浏览器对网页的默认显示效果\n* 要点回顾\n## 第 2 章 处理网页文件\n* 规划网站\n* 创建新的网页\n* 保存网页\n* 指定默认页面或主页\n* 编辑网页\n* 对文件进行组织\n* 在浏览器中查看网页\n* 借鉴他人灵感\n## [第 3 章 基本HTML结构](chapter-03)\n* 开始编写网页\n* 创建页面标题\n* 创建分级标题\n* 普通页面构成\n* 创建页眉\n* 标记导航\n* 标记网页主要区域\n* 创建文章\n* 定义区块\n* 指定附注栏\n* 创建页脚\n* 创建通用容器\n* 使用ARIA改进可访问性\n* 为元素指定类或ID\n* 为元素添加title属性\n* 添加注释\n## [第 4 章 文本](chapter-04)\n* 添加段落\n* 指定细则\n  * (small表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等)\n* 标记重要或强调的文本\n* 创建图\n* 指明引用或参考\n* 引述文本\n* 指定时间\n* 解释缩写词\n* 定义术语\n* 创建上标和下标\n* 添加作者联系信息\n* 标注编辑和不准确的文本\n* 标记代码\n* 使用预格式化的文本\n  * (pre保持文本固有的换行和空格)\n* 突出显示文本\n  * (mark想象成荧光笔的语义化对照物)\n* 创建换行\n* 创建sapn\n* 其他元素\n## [第 5 章 图像](chapter-05)\n* 关于Web图像\n* 获取图像\n  * [https://www.flickr.com/](https://www.flickr.com/)\n* 选择图像编辑器\n* 保存图像\n* 在页面中插入图像\n* 提供替代文本\n* 指定图像尺寸\n* 在浏览器中改变图像的尺寸\n* 在图像编辑器中改变图像的尺寸\n* 为网站添加图标\n## [第 6 章 链接](chapter-06)\n* 创建指向另一个网页的链接\n* 创建锚并链接到特定的锚\n* 创建其他类型的链接\n## [第 7 章 CSS构造块](chapter-07)\n* 构造样式规则\n* 为样式规则添加注释\n* 理解继承\n* 层叠：当样式发生冲突时\n* 属性的值\n## [第 8 章 操作样式表](chapter-08)\n* 创建外部样式表\n* 链接到外部样式表\n* 创建嵌入式样式表\n* 应用内联样式\n* 样式表的层叠和顺序\n* 使用与媒体相关的样式表\n* 借鉴其他人的灵感：CSS\n## [第 9 章 定义选择器](chapter-09)\n* 构造选择器\n* 按名称选择元素\n* 按类或ID选择元素\n* 按上下文选择元素\n* 选择第一个或者最后一个子元素\n* 选择元素的第一个字母或者第一行\n* 按状态选择链接元素\n* 按属性选择元素\n* 指定元素组\n* 组合使用选择器\n## [第 10 章 为文本添加样式](chapter-10)\n* 文章之前与文章之后\n* 选择字体系列\n* 指定替代字体\n* 创建斜体\n* 应用粗体格式\n* 设置字体大小\n* 设置行高\n* 同时设置所有字体值\n* 设置颜色\n* 设置背景\n* 控制间距\n* 增加缩进\n* 对齐文本\n* 修改文本的大小写\n* 使用小型大写字母\n* 装饰文本\n* 设置空白属性\n## [第 11 章 用CSS进行布局](chapter-11)\n* 开始布局的注意事项\n* 建立页面结构\n* 在旧版浏览器上为HTML5元素添加样式\n* 对默认样式进行重置或标准化\n* 盒模型\n* 控制显示类型和元素的可见性\n* 设置元素的高度和宽度\n* 添加元素周围的内边距\n* 设置元素的边框\n* 设置元素周围的外边距\n* 使元素浮动\n* 控制元素浮动的位置\n* 对元素进行相对定位\n* 对元素进行绝对定位\n* 在栈中定位元素\n* 处理溢出\n* 垂直对齐元素\n* 修改鼠标指针\n## [第 12 章 构建响应式网站](chapter-12)\n* 响应式Web设计：概述\n* 创建可伸缩图像\n* 创建弹性布局网格\n* 理解和实现媒体查询\n* 汇总\n* 兼容旧版IE\n## [第 13 章 使用Web字体](chapter-13)\n* 为什么是Web字体\n* 在哪里能找到Web字体\n  * 自托管[https://www.fontsquirrel.com/](https://www.fontsquirrel.com/)\n  * Web字体服务[https://fonts.google.com/](https://fonts.google.com/)\n* 下载第一个Web字体\n* 理解@font-face规则\n* 为Web字体添加样式\n* 为Web字体应用斜体和粗体\n* 使用Google Fonts的Web字体\n## [第 14 章 使用CSS3进行增强](chapter-14)\n* 浏览器兼容性、渐进增强和polyfill\n* 理解厂商前缀\n* 为元素创建圆角\n* 为文本添加阴影\n* 为其他元素添加阴影\n* 应用多重背景\n* 使用渐变背景\n* 为元素设置不透明度\n* 生成内容的效果\n* 使用sprite拼合图像\n## [第 15 章 列表](chapter-15)\n* 创建有序列表和无序列表\n* 选择标记\n* 使用定制的标记\n* 选择列表的起始编号\n* 控制标记的位置\n* 同时设置所有的列表样式属性\n* 设置嵌套列表的样式\n* 创建描述列表\n## [第 16 章 表单](chapter-16)\n* HTML5对表单的改进\n* 创建表单\n* 处理表单\n* 对表单元素进行组织\n* 创建文本框\n* 为表单组件添加标签\n* 创建密码框\n* 创建电子邮件框、搜索框、电话框和URL框\n* 创建单选按钮\n* 创建复选框\n* 创建文本区域\n* 创建选择框\n* 让访问者上传文件\n* 创建隐藏字段\n* 创建提交按钮\n* 禁用表单元素\n* 根据状态为表单设置样式\n## [第 17 章 视频、音频和其他多媒体](chapter-17)\n* 第三方插件与步入原生\n* 视频文件格式\n* 在网页中添加单个视频\n* 为视频添加控件和自动播放\n* 为视频指定循环播放和海报图像\n* 阻止预加载视频\n* 使用多种来源的视频和备用文件\n* 提供可访问性\n* 音频文件格式\n* 为网页添加带控件的音频文件\n* 自动播放、循环和预加载音频\n* 提供带有备用设置的多种音频来源\n* 添加具有备用Flash的视频和音频\n* 高级多媒体\n* 更多资源\n## [第 18 章 表格](chapter-18)\n* 结构化表格\n* 让单元格跨越多列或多行\n## [第 19 章 添加JavaScript](chapter-19)\n* 加载外部脚本\n* 添加嵌入脚本\n* JavaScript事件\n## [第 20 章 测试和调试网页](chapter-20)\n* 验证代码\n  * [https://html5.validator.nu/](https://html5.validator.nu/)\n  * [https://validator.w3.org/](https://validator.w3.org/)\n  * [http://jigsaw.w3.org/css-validator/](http://jigsaw.w3.org/css-validator/)\n* 测试页面\n* 尝试一些调试技巧\n* 检查常见错误：一般问题\n* 检查常见错误：HTML\n* 检查常见错误：CSS\n* 如果图像不显示\n## 第 21 章 发布网站\n* 获得域名\n* 为网站寻找主机\n* 将文件传送至服务器\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsgalcheung%2Fweb.html-and-css-visual-quickstart-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsgalcheung%2Fweb.html-and-css-visual-quickstart-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsgalcheung%2Fweb.html-and-css-visual-quickstart-guide/lists"}