Coursera课程笔记：HTML, CSS, and Javascript for Web Developers_css for javascript developers-优快云博客

本文链接：https://blog.youkuaiyun.com/alexkx/article/details/89298756

Week 1: Introduction to HTML5

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:

Source code for ALL examples used in this course
Lecture Slide PDFs
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

stackoverflow.com
https://jsfiddle.net/ : 在网页中输入代码，复制链接，重新打开后仍然可见
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>.

在这里插入图片描述

Lecture 7: 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当成单纯的空格来用

Lecture 9: Creating Links

In HTML, links are defined with the <a> tag:
href: hypertext reference
Link Titles:
The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.
在这里插入图片描述

Lecture 10: Displaying Images

In HTML, images are defined with the <img> tag. It is an inline element.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The alt Attribute
The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
在这里插入图片描述

Week 2: Introduction to CSS3

1、Cascading Style Sheets Basics

Lecture 11: Power of CSS

在这里插入图片描述

Lecture 12: Anatomy of a CSS Rule

在这里插入图片描述

Lecture 13: Element, Class, and ID Selectors

在这里插入图片描述

So one thing to notice here is that out of all the selectors, the element selector, the class selector and the id selector, the id is the least reusable one. That makes sense, right? Since by HTML rules, a particular id attribute value can only appear once in a document.