HTML学习记录
资料
标准
W3C & WHATWG:In 2019, the WHATWG and W3C signed an agreement to collaborate on a single version of HTML going forward: this document.
W3C & WHATWG (中文版)
W3C & edx Front-End Web Developer
MDN Web Docs - HTML
快速入门
A quick introduction to HTML (from W3C)
Structuring the Web with HTML (from MDN)
edx 深入课程
HTML5 & CSS Fundamentals (beginner level)
HTML5 Coding Essentials and Best Practices (intermediate level)
HTML5 Apps and Games (advanced level)
Module 0
Web editors
VS Code tips by MDN CodePen Official Doc
W3C validators
W3C Validator Nu Html Checker when validating an HTML5 document.
W3C CSS Validation Service W3C Internationalization Checker W3C Link Checker W3C Feed Validation Service W3C Markup Validation Service
Browser compatibility
Find at-a-glance Baseline statuses on Can I Use feature entries, and MDN Web Docs reference pages.
Module1 Getting started with HTML
当我读到下面这段的时候，再熟悉不过的单词 HTML 和 CSS，却仿佛是第一次见到一样，这里是他们出生的地方这种感觉。
Stands for “Cascading Style Sheets”. A style sheet language for describing how to display an HTML document.
Stands for “HyperText Markup Language”, and it is the primary document format on the Web. It is a standardized system for tagging content on a web page so that a web browser knows how to present it properly to the viewer. It is a standardized way to describe a document’s structure and the roles of the different parts of that document.
<link rel="stylesheet" href="style.css">archive.org，可以参考历史上的一切 html 存档。 CSS Zen Garden，通过不同的 CSS 文件来改变同一个 HTML 文件的外观。 我个人比较喜欢的是Steel和Verde Moderna 还有Garments和Apothecary
Modern Style Stage由Modern CSS 的博客作者发起
color
Module1 总结
CSS 设计之初就是为了让内容与表现分离。HTML 负责内容，CSS 负责表现。HTML 和 CSS 是两个独立的语言。 在 CSS 出现之前，HTML 被用来定义网页的内容和结构，同时也包含了大量的表现信息，比如字体、颜色、布局等。这种混合使得网页难以维护和更新，因为任何内容的改变都可能需要修改大量的 HTML 代码。 所以现在，HTML 负责内容和结构，而 CSS 则专注于网页的视觉表现。通过这种分离，开发者可以更容易地管理和更新网页内容，同时也能更灵活地调整网页的外观和布局。
Module 2
HTML 元素会继承样式属性，通过继承,在一个元素上设置的 CSS 属性值将沿着树转移到该元素的子节点上。 记住 HTML 文档的结构,这样就可以通过将样式应用于大多数元素并保存额外的 CSS 代码来利用继承。
用，可以同时定义多个元素的样式。
font
#design1 {
background-color: #f4f4f4;
font-family: "Lucida Sans Unicode", sans-serif;
}
#design1 h1 {
color: #c0b283;
font-size: 4em;
font-weight: 700;
font-family: Garamond;
width: 300px;
}button
basic
gmae demo page
blender page style
starbucks page
Game boy page
Hollow Knight
Module 3
selectors
Classes and IDs are “attribute selectors”
class 定义一类，用.来定义 CSS；
ID 定义某个，用#来定义 CSS。
pseudo-classes 定义动态效果
:link and :visited
:hover, :focus and :active
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
W3C & edx Front-End Web Developer
The W3C FEWD program is composed of 5 courses:
This course: CSS Basics https://www.edx.org/learn/css/the-world-wide-web-consortium-w3c-css-basics HTML5 and CSS Fundamentals https://www.edx.org/learn/css/the-world-wide-web-consortium-w3c-html5-and-css-fundamentals HTML5 Coding Essentials and Best Practices https://www.edx.org/learn/css/the-world-wide-web-consortium-w3c-html5-and-css-fundamentals HTML5 Apps and Games https://www.edx.org/learn/html5/the-world-wide-web-consortium-w3c-html5-apps-and-games JavaScript Introduction https://www.edx.org/learn/javascript/the-world-wide-web-consortium-w3c-javascript-introduction
Audit track: all course materials and activities are available to you for 5 weeks from the time you enroll. You cannot access the assessments.
Module 5
A few resources
If you look at the CSS Grid module, you may notice that it has rather a large number of properties: 18. That is because it tries to allow different manners of writing style sheets. There are many shorthand properties and many alternative ways to define the same grid. In practice, most style sheet writers will select a set of just three or four properties that suits their way of working.
When considering the CSS Grid module, also look at the CSS Flexible Box module. It only provides for alignment of elements in a single row or column, but has some features that Grid doesn’t have (and it has been around longer and works in older browsers). On the other hand, even for a single row or column, the Grid properties may turn out easier in some cases.
CSS Layout
CSS Layout News - A weekly collection of tutorials, news and information on all things CSS Layout, by Rachel Andrew.
CSS grid resources
[A complete guide to Grid】（(https://csslayout.news/) (CSS Tricks)
CSS Grid, the W3C specification
Grid by example: this site is a collection of examples, video and other information to help you learn CSS Grid Layout.
CSS Grid Garden, a game for learning CSS Grid
CSS flexbox resources
A complete guide to Flexbox (CSS Tricks)
An interactive guide to Flexbox
CSS Flexible Box Layout, the W3C specification
Flexbox froggy (game to practice CSS flexbox code)
Flat design emphasizes:
simple elements - grid layouts, limited number of elements clean typography - sans-serif fonts, large sized and lower case flat colors - no drop shadows, no attempt to make 2D elements look 3D
font
sans-serif - These are the most popular fonts for Web pages. This means the letters do not have added flourishes, so the typefaces are simpler. Their simplicity makes them easier to display on computer screens as their resolution is much lower than a printed document. It is often suggested you choose a sans-serif font for large blocks of digital text. Examples: Helvetica, Verdana, Arial, Tahoma
serif - These fonts are the second most popular typefaces. “Serif” refers to the small flourish lines at the edges of letters and symbols. “Serifs” make each character more distinct, making text easier to read in print. This is why these fonts might remind you of a text from a typewriter, or of the fonts you see in printed books, newspapers or magazines. These typefaces can often be used effectively for titles or emphasis. Examples: Times New Roman, Book Antiqua, Georgia
monospace - These fonts guarantee that all letters have the same fixed width. This is similar to a manual typewriter, or how computer code appears in editors. These fonts were designed for the ease of the technology, not humans, so they should be used sparingly. The most effective time to use these is when showing snippets of code. Example: Courier New
cursive - These fonts mimic human handwriting often by joining letters or having an italic slant. For some languages, these fonts are extra effective such as Arabic. Other than for specific languages, these fonts in English can be rather complex so they are best use extremely sparingly. Example: Comic Sans MS
fantasy - This is the most diverse category of fonts and includes all of those that are particularly decorative. These can make really great top headers as they can give your Web page a very distinct visual identity. Rarely will you want to use these for anything other than titles. It is also good to note that few of these are widely supported, so to use these you’ll probably want to download them from a font service to make them available for your user. Example: Impact
External resource Here is the W3C documentation for all of CSS’s font properties: CSS Fonts Module Level 3.
color
External resources Here is a good article that goes into detail about color theory. LCH colors in CSS: what, why and how?, by Lea Verou (April 2020)
web internationalization
Here are some examples of things that can be done with CSS.
It is already possible to make text run vertically in CSS for languages such as Chinese, Japanese, Korean and Mongolian. For more information see Styling vertical Chinese, Japanese, Korean and Mongolian text. https://www.w3.org/International/articles/vertical-text/ Vertically set Mongolian text.
You can also style counters for lists or chapter headings and such like according to local preferences. Here we see lists using Georgian and Japanese labels.
Georgian counter styles. Japanese counter styles.
When you want to justify text so that the lines are straight on both sides of your column, different strategies are used for different scripts. Most Western typography puts an emphasis on adjusting inter-word spaces, but Chinese doesn’t use spaces between words, so you generally do inter-character spacing. In text written using the arabic script it is common to stretch the baseline that joins letters, or use other techniques to balance the line.
Arabic justification.
Some scripts allow words to be hyphenated in order to improve the visual effect of a paragraph, but note that the way in which words are hyphenated depends on the language. (And in arabic script, the CSS specification requires that both parts of the word retain their joining line during hyphenation.)
Text decoration and text style features can vary in applicability from script to script. For example, Japanese characters are fairly complicated so, rather than italicise their text for emphasis, which can make it harder to read at small sizes, they have a tradition of placing special marks alongside the emphasised text (see the middle line of the Japanese example below). Also, it may be important to avoid underlines running over descenders in some scripts, since it can obscure important marks attached to a base character, so CSS allows you to skip ‘ink’ as shown in the Burmese example below.
Emphasis in Japanese. Skipping descenders in Burmese.
These are just a few examples. There are many more.
CSS & language An important point to bear in mind is that for many of these features to work as expected, you need to declare the language of the content. For example:
Hyphenation won’t work unless the content is labelled for language. This is because the way that hyphenation works, and the dictionaries it uses, are language-specific. If you want to convert Turkish or Azeri text to uppercase or vice versa, you will get incorrect results unless the browser knows that the text is in that language, because they have a dotted i and a non-dotted ı which do case conversion differently from European languages. If text wraps to a new line, by default it does so differently dependent on whether you are dealing with Chinese or Japanese. And we could continue… Therefore, you should always ensure that the correct language is specified in the lang attribute on the html tag, to indicate the default language of the page. And if you have passages in another language inside the page, you should put a lang attribute on markup that surrounds them, too.
See also this article (19 April 2020) by Chen Hui Jing on “CSS for internationalisation”.https://www.w3.org/International/articles/vertical-text/
Localization In addition, CSS provides tremendous help if you have to translate content from one language to another. Being able to change a single line in a style sheet to appy a change to all the pages being translated, rather than having to edit every page, saves a massive amount of time. However, this works best when you keep the distinction between semantics (markup) and presentation (styling) clear.
Don’t use CSS to apply direction for bidirectional or right-to-left scripts, such as content in Arabic, Hebrew, Persian, Urdu, Divehi, etc. Use HTML markup instead.https://www.w3.org/International/questions/qa-bidi-css-markup
Internationalization quick tips Language: Always declare the default language of your page using the lang attribute on the html tag, and indicate internal language changes. Localizable styling: Use CSS styling for the presentational aspects of your page. So that it’s easy to adapt content to suit the typographic needs of the audience, keep a clear separation between styling and semantic content, and don’t use ‘presentational’ markup. Use international features: Use the international features provided by CSS to make your pages look natural to your audience. The more you use such features, and the more you request them, the better browsers will support them. Check your colors and styles: Be sensitive to local preferences of your audience for things such as color, but also use of white space, two-dimensional vs. uni-directional display of information, etc. Use start and end: Using these values, where possible, rather than left and right makes it easier to convert content between languages that use right-to-left and left-to-right scripts.
CSS Basics From edx
Course outline The first set of lessons are available in “Module 1: Getting started with CSS”, where we show different examples of the amazing things you can do with CSS. This module includes a cameo of Bert Bos, co-inventor of CSS. In Module 2, we will first review HTML and then learn how to build CSS rules with some basic properties that adjust your HTML document’s color, font or spacing. illustration of a CSS property In Module 3, diagram of the structure of an HTML pagewe are going to build slightly more complex Web pages using contextual selectors, IDs, classes and pseudo-classes. The idea is to combine some selectors together into one or more CSS rules. And thanks to the “cascading” part of Cascading Style Sheets, it won’t be a problem to have multiple CSS rules competing for importance. Even with multiple rules that apply to the same HTML tag, the browser will know how to make it look! Module 4 is about layout and positioning using CSS. You will start by understanding the box model - the foundation of layout on the Web. Image of the CSS box modelYou will then learn about relative positioning and the float property in order to position your HTML elements in relation to one another on a Web page. In Module 5 (final!), we are going to talk about the design aspect of Web pages and how to give your users the best experience. We will discuss lessons learned from historical Web design trends and then meet the newest fashions in Web design, to help you give your Web pages a modern look and feel. And we’ll remind you not to forget accessibility and internationalization so as to accommodate an even wider, diverse audience.
Course information
-
Welcome to “CSS Basics”
-
Course outline, grading and certificate
-
Course practical information
-
Course tools
Module 1: Getting started with CSS 1.1 Introduction to Module 1 1.2 What is CSS? 1.3 Why CSS is important 1.4 Project 1 - Your first CSS 1.5 Conclusion and exercises (15 questions)
Module 2: Building CSS rules 2.1 Introduction to Module 2 2.2 HTML review 2.3 Building a CSS rule 2.4 Attaching CSS to HTML using selectors 2.5 Applying styles using CSS properties 2.6 Style studies 2.7 Project 2 - About me page 2.8 Conclusion and exercises (12 questions)
Module 3: Specific HTML element targeting with CSS selectors 3.1 Introduction to Module 3 3.2 Using HTML classes and IDs 3.3 CSS pseudo-classes 3.4 Combining selectors 3.5 Style studies 3.6 Project 3 - My profile 3.7 Conclusion and exercises (15 questions)
Module 4: Layout and positioning 4.1 Introduction to Module 4 4.2 The basics of layout 4.3 Floating elements 4.4 Relative positioning 4.5 Style studies 4.6 Project 4 - My resume 4.7 Conclusion and exercises (14 questions)
Module 5: Designing your Web site for your audience 5.1 Introduction to Module 5 5.2 The basics of design 5.3 Designing for your audience 5.4 Historical Web design trends 5.5 Current Web design trends 5.6 Conclusion and final exam (29 questions)