Web Front-End Development Example Tutorial: HTML, CSS, JavaScript

Name: Web Front-End Development Example Tutorial: HTML, CSS, JavaScript
ISBN: 9787115396891

占东明 / 张利华 / 张薇 / 谢剑猛 / 陈海林Posts & Telecom Press · ChinaSep 2021

3.0

Word count: 79K words
Chapters: 231
ISBN: 9787115396891

Report an error Find this book

Summary

The book adopts an example-based teaching approach: every knowledge point comes with an example, every chapter includes a comprehensive mini-example, and a final comprehensive case study ties everything together, so that examples throughout the book cover all knowledge points.

The book is divided into 6 parts. Part 1, Preparation (Chapters 1–3), introduces fundamental Web technology concepts, development tools, and runtime environments; Part 2, Getting Started (Chapters 4–13), provides a comprehensive introduction to HTML and its applications; Part 3, Advanced (Chapters 14–19), provides a comprehensive introduction to CSS and its applications; Part 4 (Chapters 20–23) focuses on JavaScript basic syntax, events, objects, and applications; Part 5, Hands-On Practice (Chapter 24), walks through the complete Web development process via a comprehensive case study; Part 6, Extensions (Chapters 25–26), introduces HTML5, making the book more comprehensive and practical.

This book can serve as a textbook for computer science and related majors in universities, vocational colleges, and higher vocational schools, as a training material for website creation, Web programming, and related courses, and as a self-study reference for Web programming enthusiasts.

Editor's review

Web Front-End Development by Example: HTML, CSS, JavaScript is a beginner-oriented front-end development guide published by Posts & Telecom Press. Author Zhan Dongming brings years of teaching and practical experience, breaking down complex front-end technologies into easily digestible modules. The book's standout feature is its example-driven structure: it is organized around concrete web projects, progressing from the simplest static pages to dynamic effects with interactive functionality. Readers see code results directly as they work through the exercises, an approach that effectively lowers the barrier to entry.

The content follows a classic front-end learning path: first a solid foundation in semantic HTML, then in-depth coverage of CSS layout and styling, and finally JavaScript for interactive logic. Each technical point is paired with clear code examples and screenshots of results, avoiding the dryness of pure theory. Particularly commendable is the book's attention to real-world development concerns such as responsive design and browser compatibility—areas many competing introductory books neglect.

Unlike some tutorials that aim for "broad coverage," this book focuses on solid mastery of the core trio (HTML, CSS, JS) without hastily introducing frameworks or tools—a focus that is especially important for building a firm knowledge base. The project cases, though not complex, cover typical scenarios such as a personal homepage, a product showcase page, and a simple calculator, giving them good transfer value. Overall, this is a practical, patiently explained introductory tutorial suited to steady, step-by-step learners, and it lays a solid foundation for later study of modern frameworks such as Vue and React.

Who it's for

A good fit for

Complete beginners or those new to Web development who want to systematically learn HTML, CSS, and JavaScript
Computer science and related majors who need to support coursework or complete web design assignments
Back-end or other-domain developers who want a quick grasp of the front-end fundamentals
Non-technical readers interested in web page creation who seek an easy-to-follow introductory guide

Not a good fit for

Developers with substantial front-end project experience seeking deeper principles or cutting-edge frameworks (e.g., Vue 3, React Hooks)
Readers hoping to master full-stack development or advanced topics (e.g., performance optimization, complex animations) from a single book

Reading tips

Study strictly in chapter order; do not skip the foundational chapters to jump straight into JavaScript, since front-end knowledge is highly cumulative
Be sure to type out every code snippet in the book and experiment by changing parameters and restructuring the code to observe different results—this is the most effective way to learn front-end technology
After completing each chapter's examples, try imitating a simple website you like using what you have learned, connecting scattered knowledge points into a real project

About the publisher

Posts & Telecom Press China · Founded in 1953

Posts & Telecom Press is known for its strengths in science and technology, computing, and information and communications titles, and has extended its publishing into photography, art, software learning, and inspirational growth, giving it a fairly diverse range. Its catalog includes computing and communications works such as Refactoring and Patterns (Revised Edition) and Huawei Switch Learning Guide (Second Edition), alongside bilingual collector's editions such as The Little Prince (Chinese-English-French illustrated collector's edition), The Great Gatsby, and Three Days to See. Beijing Ten Years: 1980-1990 and Ghost Blade: WLOP Personal Illustration Collection reflect its presence in photography and art. Its authors include Antoine de Saint-Exupéry, Helen Keller, Joshua Kerievsky, Wang Da, Zhang Zhaozeng, and WLOP.

版权信息
内容提要
前言
准备篇
第1章 Web技术综述
1.1 Internet基础
1.2 Web概述
1.3 超文本与标签语言
1.4 Web标准综述
1.5 浏览器
1.6 知识点提炼
1.7 思考与练习
1.8 上机实例练习——浏览器安装及内核检测
第2章开发工具介绍
2.1 Web开发工具
2.2 Dreamweaver软件的使用
2.3 知识点提炼
2.4 思考与练习
2.5 上机实例练习——新建站点、新建网页
第3章 Web运行环境搭建
3.1 Web常见运行环境
3.2 Windows7 环境下IIS安装
3.3 IIS中站点配置
3.4 知识点提炼
3.5 思考与练习
3.6 上机实例练习——安装IIS并配置站点
入门篇
第4章 HTML/CSS/JavaScript综述
4.1 HTML综述
4.2 CSS综述
4.3 JavaScript综述
4.4 小实例——HTML、CSS、JavaScript的综合应用
4.5 知识点提炼
4.6 思考与练习
4.7 上机实例练习——仿照 4-3-2.html练习
第5章 HTML基础介绍
5.1 HTML文档结构
5.2 HTML基本语法
5.3 HTML文件命名规则
5.4 编写HTML文档注意事项
5.5 小实例——简单图文混排网页制作
5.6 知识点提炼
5.7 思考与练习
5.8 上机实例练习——用记事本仿 5-5.html编写一个HTML文件
第6章 HTML文件的标准结构
6.1 文件头部内容
6.2 文件主体内容
6.3 小实例——Web课程介绍网页
6.4 知识点提炼
6.5 思考与练习
6.6 上机实例练习——个人文字简历网页
第7章文本与段落
7.1 内容编辑
7.2 文本修饰
7.3 段落排版
7.4 小实例——唐诗宋词网页设计
7.5 知识点提炼
7.6 思考与练习
7.7 上机实例练习——重写唐诗宋词网页并设置网页背景和文本颜色等
第8章列表
8.1 列表类
8.2 嵌套列表
8.3 小实例——列表在网页中的应用
8.4 知识点提炼
8.5 思考与练习
8.6 上机实例练习——制作一个多类别的新闻列表网页
第9章超链接
9.1 超链接概述
9.2 超链接路径
9.3 超链接的使用
9.4 小实例——超链接的应用
9.5 知识点提炼
9.6 思考与练习
9.7 上机实例练习——小型电子书
第10章图片与多媒体的使用
10.1 图片
10.2 多媒体<embed>
10.3 知识点提炼
10.4 思考与练习
10.5 上机实例练习——多媒体网页制作
第11章表格的应用
11.1 表格概述
11.2 表格属性
11.3 表格嵌套
11.4 小实例——表格在网页布局中的应用
11.5 用DW工具快速创建表格方法
11.6 知识点提炼
11.7 思考与练习
11.8 上机实例练习——利用表格布局制作一个网页
第12章框架的应用
12.1 框架概述
12.2 框架的基本结构
12.3 设置框架集
12.4 嵌套框架
12.5 设置框架<frame>
12.6 浮动框架
12.7 小实例——利用框架制作电子简历
12.8 知识点提炼
12.9 思考与练习
12.10 上机实例练习——利用框架制作电子相册
第13章表单的设计
13.1 表单标签13.2 表单标签<form>
13.3 表单域<input/>
13.4 文本区域<textarea>
13.5 下拉菜单<select>和列表项<option>
13.6 小实例——在线报名表单设计
13.7 知识点提炼
13.8 思考与练习
13.9 上机实例练习——应聘简历表单设计
进阶篇
第14章 CSS样式表基础
14.1 CSS概述
14.2 CSS语法
14.3 CSS常用选择器
14.4 CSS使用方法
14.5 CSS特性和优先级问题
14.6 小实例——CSS样式的应用
14.7 知识点提炼
14.8 思考与练习
14.9 上机实例练习——利用外部样式设计一个网页
第15章字体样式表
15.1 字体颜色——color
15.2 字体设置——font-family
15.3 字号设置——font-size
15.4 字体样式——font-style
15.5 字体加粗——font-weight
15.6 字体变体——font-variant
15.7 组合设置字体属性——font
15.8 小实例——利用CSS进行字体综合设置
15.9 知识点提炼
15.10 思考与练习
15.11 上机实例练习——制作利用CSS进行字体设置网页
第16章段落样式表
16.1 调整字符间距——letter-spacing
16.2 调整单词间距——word-spacing
16.3 添加文本修饰——text-decoration
16.4 文本对齐方式——text-align
16.5 设置段落缩进——text-indent
16.6 设置行高——line-height
16.7 英文大小写转换——text-transform
16.8 小实例——利用CSS进行段落精确编排
16.9 知识点提炼
16.10 思考与练习
16.11 上机实例练习——制作一个利用CSS进行精美编排的网页
第17章列表和背景
17.1 列表样式——list-style-type
17.2 列表图像——list-style-image
17.3 列表位置——list-style-position
17.4 设置背景颜色——background-color
17.5 设置背景图片——background-image
17.6 设置背景附件——background-attachment
17.7 设置背景图片重复——background-repeat
17.8 设置背景图片位置——background-position
17.9 综合设置背景——background
17.10 小实例——字体和背景的综合应用
17.11 知识点提炼
17.12 思考与练习
17.13 上机实例练习——利用背景和列表样式制作新闻列表
第18章 CSS盒子模型
18.1 CSS盒子模型概述
18.2 CSS内边距——padding
18.3 CSS边框——border
18.4 CSS外边距——margin
18.5 盒子模型显示——display
18.6 小实例——盒子模型的综合应用
18.7 知识点提炼
18.8 思考与练习
18.9 上机实例练习——利用盒子模型制作照片边框效果
第19章 DIV+CSS页面布局
19.1 层的创建<div>
19.2 创建嵌套层
19.3 层的常见属性
19.4 CSS定位
19.5 页面内容样式设计
19.6 小实验——DIV+CSS页面布局
19.7 知识点提炼
19.8 思考与练习
19.9 上机实例练习——利用DIV+CSS布局一个网页
高级篇
第20章 JavaScript概述
20.1 JavaScript语言概况
20.2 JavaScript的特点
20.3 JavaScript使用方法
20.4 知识点提炼
20.5 思考与练习
20.6 上机实例练习——写一个带JS的网页
第21章 JavaScript基本语法
21.1 基本数据类型
21.2 运算符
21.3 程序结构
21.4 函数
21.5 小实例——用户登录
21.6 知识点提炼
21.7 思考与练习
21.8 上机实例练习——编写一个求长方体体积的程序网页
第22章 JavaScript事件分析
22.1 事件概述
22.2 主要事件
22.3 小实例——主要事件综合应用
22.4 知识点提炼
22.5 思考与练习
22.6 上机实例练习——制作鼠标经过图片放大效果
第23章 JavaScript对象
23.1 对象概述
23.2 浏览器对象
23.3 内置对象和方法
23.4 小实例——对象的综合应用
23.5 知识点提炼
23.6 思考与练习
23.7 上机实例练习——编写显示客户端系统及当前时间的网页
实战篇
第24章综合案例
24.1 网站开发与发布流程
24.2 花店系统前端开发过程
24.3 知识点提炼
24.4 思考与练习
扩展篇
第25章全新的HTML—HTML5
25.1 初识HTML5
25.2 HTML5 语法结构
25.3 HTML5 页面架构元素
25.4 元素的改变
25.5 属性的改变
25.6 知识点提炼
25.7 思考与练习
第26章 HTML5的表单
26.1 新的input输入类型及属性
26.2 表单的验证方式
26.3 知识点提炼
26.4 思考与练习
参考文献

FAQ

Is this book suitable for someone with no programming experience at all?

Very much so. The book starts from the basic structure of web pages, assumes no programming background, and guides newcomers step by step through examples—it is very beginner-friendly.

Is the technical content in the book outdated?

The HTML5, CSS3, and ES5 JavaScript syntax covered in this book are the enduring core of front-end development. Although the latest ES6+ syntax is not covered, the concepts, thinking, and methods taught are universal, making the transition to newer syntax very easy.

What level can I reach after finishing this book?

You will be able to independently develop static websites with common interactive features using HTML, CSS, and native JavaScript, understand the basic front-end development workflow, and be equipped for self-directed learning of modern front-end frameworks or tools.

Comments

Find this book

This site is an index: you start “Search all sources” in your browser, and the entries it lists all point to third-party sites; please judge their availability yourself.

About the author

占东明 Author

Zhan Dongming is the author of Chinese computer books, though publicly available information about him is limited. He is known for writing Web Front-End Development by Example: HTML, CSS, and JavaScript, and one title by him is held in the collection, commonly classified under general computing. Judging from the title and topic, the book is an introductory, example-based tutorial on front-end web development, covering the three foundational technologies of HTML, CSS, and JavaScript. It follows a common tutorial approach, combining explanations of key concepts with hands-on examples. Since no reliable records of the author's personal background, professional experience, or other works have been found, no speculation is made here. Based on the available information, his writing can be positioned as practical technical tutorials for beginners and classroom use, suitable for readers who want a systematic introduction to front-end basics with hands-on practice.

张利华 Author

Zhang Lihua, about whom limited public information is available, writes across management, finance and accounting, and general computing, with five works held in the collection. In management and finance, the author wrote Huawei R&D (3rd Edition), which focuses on corporate R&D management and practice, and also published a series of works on contrarian investing: The Psychology of Contrarian Investing (Commemorative Award Edition), Emotional Management for Outstanding Investors, and The Psychology of Contrarian Investing: An Analysis of Non-Technical Factors Behind Market Fluctuations, which examine market fluctuations and investment decisions from the perspective of psychology and emotion. In computing, the author also compiled Web Front-End Development by Example: HTML, CSS, JavaScript, teaching front-end fundamentals through examples. Overall, the writing balances practical guidance with accessibility, addressing business managers, investment enthusiasts and technology learners, with an emphasis on applicability and hands-on analysis.

张薇 Author

Zhang Wei's publicly available information is limited. Judging from the works currently on record, her writing and editorial interests are wide-ranging, covering photography, biography, medicine, exam preparation, children's books and computer technology. The book Why Mobile Photography Is Cooler Than a Camera, which she co-authored, along with its revised edition, focuses on the practice and aesthetics of shooting with a phone, while her biography of Darwin introduces his life to general readers. In medicine she has explored family resilience among patients with chronic illness and compiled a collection of exam questions on laboratory animal science. She has also worked on comics about self-management for children and a tutorial on front-end web development with HTML, CSS and JavaScript. Overall, her works combine knowledge popularization with practical skills for a broad readership.

谢剑猛 Author

Xie Jianmeng: public information about this author is limited. What can be confirmed is that he is an author of computer books, with one work held in the collection: Web Front-End Development Example Tutorial: HTML, CSS, JavaScript. Judging from the title and its classification, the book is an introductory and practical textbook on front-end web development, covering the three foundational technologies of HTML, CSS, and JavaScript; it falls under the general category of computer books. The author organizes the content around examples, suggesting a writing approach that emphasizes hands-on practice and the application of knowledge, helping readers understand the structure, styling, and interactive logic of web pages through doing. Due to limited sources, Xie Jianmeng's nationality, dates of birth and death, educational background, and professional experience cannot be verified, and no English name is recorded. Further understanding of the author and the book must await the release of more public information.

陈海林 Author

Chen Hailin is an author about whom limited public information is available. To date, two works are known under this name, covering the quite different fields of computing and history. One is a practical tutorial on web front-end development with HTML, CSS, and JavaScript, a general computing title that, judging from its name, teaches the basics of front-end web development through hands-on examples and is aimed at beginners or readers who wish to learn by doing. The other is a history of the development of the College of Engineering at Nanjing Agricultural University, a historical work that traces the college's growth over time. The two books differ widely in subject: the first focuses on technical practice, the second on the orderly recounting of historical facts. Because reliable information on the author's life, career, and academic background is lacking, no further inferences are made here; this introduction is based solely on the existing works.