面向 Web 开发者的 HTML、CSS 与 Javascript 课程

文章出处,原创于 https://HawkingOuYang.github.io/

我的GitHub


公开课:面向 Web 开发者的 HTML、CSS 与 Javascript 课程
https://www.coursera.org/learn/html-css-javascript-for-web-developers

运行代码: https://jsfiddle.net/ → 把web代码转化成链接,例如:https://jsfiddle.net/uucc0q41/

http://codepen.io/ → 把web代码转化成链接,例如: http://codepen.io/HawkingOuYang/pen/XjOpyB

https://css-tricks.com/ → 前端 教程、问答 社区

HTML:Hyper Text Markup Language

HyperText, is text which contains links to other texts, i.e. one document points to another document which points to a bunch of other documents.

Hypermedia: video, audio, etc, is just an extension of hypertext.

Markup, means to mark sth up, to annotate, to tell the browser or other machine what the content is and that’s what HTML does, by wrapping the content in some markup languages like tags.

HTML —> Structure, means what components does the HTML document has, for example, heading, paragraphs, footer, BUT does NOT tell you anything about how these components are visually laid out, NO color, NO font, NO size. —> Annotates content, Defines document structure.

CSS —> Style, color, style, font.

Javascript —> Behavior, functionality.

W3C(World Wide Web Consortium) —> HTML5(Standard)
WHATWG (Web Hypertext Application Technology Working Group) —> HTML(evolving)

html标准 参考资料:

https://www.w3.org/TR/html5/

http://caniuse.com/

https://validator.w3.org/#validate_by_url

http://www.w3schools.com/browsers/browsers_stats.asp

<!DOCTYPE html>

historical reason, without <!DOCTYPE html> mean your web page NOT follow
the HTML standard,
which results in a bit messed up, layout won’t be quite right, styles a bit well quirky.
—> noncompliant pages were rendered in quirks mode, while compliant pages were rendered in standards mode,
SO, always use the simple HTML5 doctype declaration.

工具:
chrome
sublime
git
node
npm
browsersync (npm install -g browser-sync)

1
2
3
4
5
6
7
8
9
10
11
➜ test_site git:(文稿+音乐) ✗ browser-sync start --server --directory --files "*"
[BS] Access URLs:
--------------------------------------
Local: http://localhost:3002
External: http://192.168.1.108:3002
--------------------------------------
UI: http://localhost:3003
UI External: http://192.168.1.108:3003
--------------------------------------
[BS] Serving files from: ./
[BS] Watching files...