Coursera课程笔记：HTML, CSS, and Javascript for Web Developers

week1

1、Welcome to HTML, CSS, and Javascript for Web Developers!

推荐的书：Soft Skills: A Developer’s Life Manual by John Sonmez
 
The following is a link to a GitHub.com repository we are using for this course:

https://github.com/jhu-ep-coursera/fullstack-course4

It contains:

1. Source code for ALL examples used in this course
2. Lecture Slide PDFs
3. Starter code for end of module assignments.

2、Development Environment Setup

Github and Browser Sync

其中，Browser Sync用途：在本地编辑代码然后保存后，可以即时显示在浏览器中
安装方法：
要先安装Node.js，然后打开命令行或者Node.js command prompt:

// 配置国内的npm源：
npm config set registry https://registry.npm.taobao.org 
// 配置后可通过下面方式来验证是否成功 
npm config get registry 
// 安装
npm install -g browser-sync
// 验证是否安装成功
browser-sync --version

使用：在对应的文件夹中输入命令（在命令行）

browser-sync start --server --directory --files "*" 

Resources for Asking Questions

1. stackoverflow.com
2. https://jsfiddle.net/ : 在网页中输入代码，复制链接，重新打开后仍然可见
3. codepen.io : 功能比第二个网站更强大

3、HTML Basic

Lecture 1: What is HTML?

summary：

Lecture 2: Relevant History of HTML

html5 standards: https://www.w3.org/TR/html52/
caniuse.com : 查某项功能有哪些浏览器支持
validator.w3.org : 验证html代码的语法是否正确

Lecture 3: Anatomy of an HTML Tag

等号前后可以有空格

Lecture 4: Basic HTML Document Structure

The head tag contains items that describe the main content of the page. Things like what character coding should the browser use for the main content. It can contain authors description of the page, page title, and whatever other external resources are needed to render the page properly, among other things. ==The point is it contains some metadata about the main content. ==

Lecture 5: HTML Content Models

The term content model refers to the full behavior the browser applies to the elements belonging to that content model, and to the nesting rules of those elements. In other words, which elements are allowed to be nested inside which other elements. Prior to HTML5 specification, HTML elements were either block level or inline elements. HTML5 split these two content models into seven models.

The div element stands for division, and the span element stands for span. The div element is your most generic block-level element, and the span is your super generic, inline element.

4、Essential HTML5 tags

Lecture 6: Heading Elements (and some new HTML5 semantic comments)

New HTML5 Elements
The most interesting new HTML5 elements are:

• New semantic elements like <header>, <footer>, <article>, and <section>

• New attributes of form elements like number, date, time, calendar, and range.

• New graphic elements: <svg> and <canvas>.

• New multimedia elements: <audio> and <video>.

Lecture7: Lists

Lecture 8: HTML Character Entity References

Non-breaking Space
A common character entity used in HTML is the non-breaking space: &nbsp;

A non-breaking space is a space that will not break into a new line.

Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive.

Examples:

• § 10
• 10 km/h
• 10 PM
  不要将&nbsp当成单纯的空格来用