下载APP 随时随地学编程
返回 首页

学习Web开发

开始阅读
手册说明:


本教程内容由Mozilla开发者网络(MDN)提供,经W3Cschool整理翻译后发布。这个《Web开发入门》的内容虽然不能让你从“小白”变成“大神”,但可以让你从“小白”到“入门”。到那个程度以后,你已经拥有许多预备知识,可以自行探索,学习更多前端初级的内容,以及其他前端中级到高级的内容。

学习建议

1、如果你是完全的web初学者,我们建议你首先通读Web开发入门章节,这个章节介绍Web开发的实用入门知识;

2、如果你已经具备了一些知识,那么下一步应当了解 HTML 和 CSS 的细节。从 HTML 章节开始,然后到 CSS 章节;

3、如果你已经熟悉 HTML 和 CSS ,或者你主要对写程序感兴趣,想进一步学习JavaScript或者服务端开发。那么就从 JavaScript 第一步 或 服务端第一步 章节开始了解吧;

4、如果你在 Web 开发中产生一些特定的疑问,那么常见问题这个章节或许能解答你的问题。


教程章节

1、Web开发入门

2、HTML—构建网络

3、CSS—网页样式

4、更新中……


Web相关学习教程

《HTML教程》

《CSS教程》

《JavaScript教程》

《HTML参考手册》

《CSS参考手册》



本文档基于 Creative Commons Attribution-ShareAlike 2.5 Generic License 协议发布。


目录

Web开发入门

Web开发入门
安装基础软件
你的网页将呈现什么样子?
文件处理
HTML基础
CSS基础
JavaScript基础
发布网站
网络是怎么工作的

HTML—构建网络

HTML介绍

HTML简介
HTML入门
head中有什么? HTML中的元数据
HTML 文本基础
Web 创建超链接
Web 高级文本格式
Web 文档和网站结构
Web 调试HTML
Marking up a letter
Structuring a page of content

Multimedia_and_embedding

Multimedia and embedding
Images in HTML
Video and audio content
From object to iframe — other embedding technologies
Adding vector graphics to the Web
Responsive images
Mozilla splash page

Introduction_to_CSS

CSS 介绍
CSS如何工作
CSS 语法
Fundamental CSS comprehension
Selectors
Simple selectors
Attribute selectors
Pseudo-classes and pseudo-elements
Combinators and multiple selectors
CSS values and units
Cascade and inheritance
The box model
Debugging CSS
CSS

Accessibility

HTML: A good basis for accessibility
CSS and JavaScript accessibility best practices
WAI-ARIA basics
Accessible multimedia
Mobile accessibility
Assessment: Accessibility troubleshooting
What is accessibility?
为文本添加样式

Styling_text

Fundamental text and font styling
Styling lists
Styling links
Web fonts
Typesetting a community school homepage
Styling boxes
盒模型概要
Backgrounds
Borders
Styling tables
Advanced box effects
Creating fancy letterheaded paper
A cool looking box
网格

First_steps

Arrays
Silly story generator
什么是JavaScript?
进入JavaScript的第一课
什么地方出了错?
如何存储你需要的信息 — 变量
Basic math in JavaScript — numbers and operators
Handling text — strings in JavaScript
Useful string methods
Server-side web frameworks
Website security
Client-Server overview

Tools_and_testing

Handling common JavaScript problems
Cross browser testing
Handling common accessibility problems
Strategies for carrying out testing
Handling common HTML and CSS problems
Implementing feature detection
Introduction to automated testing
Setting up your own test automation environment
JavaScript building blocks

Building_blocks

Making decisions in your code — conditionals
循环吧代码
Functions — reusable blocks of code
Build your own function
Function return values
Introduction to events
Image gallery

CSS_layout

CSS layout
浮动元素(Floats)
Positioning
Practical positioning examples
Flexbox
JavaScript 对象入门

Objects

JavaScript object basics
Object-oriented JavaScript for beginners
对象原型
JavaScript 中的继承
Working with JSON data
Object building practice - Learn web development
Adding features to our bouncing balls demo
Tools and testing

Express_Nodejs

Express/Node introduction
Express Tutorial Part 6: Working with forms
Setting up a Node development environment
Express Tutorial: The Local Library website
Express Tutorial Part 7: Deploying to production
Express Tutorial Part 2: Creating a skeleton website
Express Tutorial Part 3: Using a Database (with Mongoose)
Express Tutorial Part 4: Routes and controllers
Express Tutorial Part 5: Displaying library data

Django

Django Tutorial Part 6: Generic list and detail views
Django Tutorial Part 7: Sessions framework
Django Tutorial Part 8: User authentication and permissions
Django Tutorial Part 10: Testing a Django web application
Django web application security
Django Tutorial Part 3: Using models
Assessment: DIY Django mini blog
Django Tutorial Part 4: Django admin site
Django Tutorial Part 5: Creating our home page
服务器端网页编程
Express Web Framework (Node.js/JavaScript)
常见问题
Use CSS to solve common problems
Learn web development

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }