The web coures is mozilla.

HTML anotomy

<!DOCTYPE html><!--the shortest string of characters that counts as a valid doctype.-->
<html>
  <head><!--container This includes keywords and a page description that would appear in search results, CSS to style content, character set declarations, and more.-->
    <meta charset="utf-8"><!--<meta charset="utf-8">: The <meta> element. This element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>. -->
    <title>My test page</title><!--appears in the browser tab the page is loaded in. The page title is also used to describe the page when it is bookmarked.-->
  </head>
  <body>
      <!--This contains all the content that displays on the page, including text, images, videos, games, playable audio tracks, or whatever else.-->
    <p>This is my page</p>
  </body>
</html>

primary language

<html lang="en-US">

You can also set subsections of your document to be recognized as different languages. For example, we could set our Japanese language section to be recognized as Japanese, like so:

<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

These codes are defined by the ISO 639-1 standard. You can find more about them in Language tags in HTML and XML.

what’s in the <head>

<title>

<title>My test page</title>

The <title> contents are used in search results, bookmarks and tabs.

<meta> elements

character encoding

<meta charset="utf-8">

author and description

<meta name="specifies the type of meta element it is; what type of information it contains.">
<meta content="specifies the actual meta content.">

eg：

<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Web Docs Learning Area aims to providecomplete beginners to the Web with all they need to know to get started with developing web sites and applications.">

Note: In Google, you will see some relevant subpages of MDN Web Docs listed below the main homepage link — these are called sitelinks, and are configurable in Google’s webmaster tools — a way to make your site’s search results better in the Google search engine.

Note: Many <meta> features just aren’t used any more. For example, the keyword <meta> element (<meta name="keywords" content="fill, in, your, keywords, here">) — which is supposed to provide keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results.

proprietary metadata

For example, Open Graph Data is a metadata protocol that Facebook invented to provide richer metadata for websites. In the MDN Web Docs sourcecode, you’ll find this:

<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

One effect of this is that when you link to MDN Web Docs on facebook, the link appears along with an image and description: a richer experience for users.

custom icons

You may see (depending on the browser) favicons(favorites icon) displayed in the browser tab containing each open page, and next to bookmarked pages in the bookmarks panel.

<link rel="icon" href="favicon.ico" type="image/x-icon">

<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
<!-- basic favicon -->
<link rel="icon" href="https://developer.mozilla.org/static/img/favicon32.png">

The comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an iPad’s home screen.

Note: If your site uses a Content Security Policy (CSP) to enhance its security, the policy applies to the favicon. If you encounter problems with the favicon not loading, verify that the Content-Security-Policy header’s img-src directive is not preventing access to it.

Applying CSS and JavaScript to HTML

CSS

<link rel="stylesheet" href="my-css-file.css">

The <link> element should always go inside the head of your document. This takes two attributes, rel="stylesheet", which indicates that it is the document’s stylesheet, and href.

JavaScript

head

<script src="my-js-file.js" defer></script>

The <script> element should also go into the head, and should include a src attribute containing the path to the JavaScript you want to load, and defer, which basically instructs the browser to load the JavaScript after the page has finished parsing the HTML. This is useful as it makes sure that the HTML is all loaded before the JavaScript runs, so that you don’t get errors resulting from JavaScript trying to access an HTML element that doesn’t exist on the page yet.

There are actually a number of ways to handle loading JavaScript on your page, but this is the most reliable one to use for modern browsers (for others, read Script loading strategies).

rear

<script> 部分没必要非要放在文档头部；实际上，把它放在文档的尾部（在 </body>标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。

<script src="my-js-file.js"></script>

Note: The <script> element may look like an empty element, but it’s not, and so needs a closing tag. Instead of pointing to an external script file, you can also choose to put your script inside the <script> element.

Element

The terms block and inline, as used in this article, should not be confused with the types of CSS boxes that have the same names. While the names correlate by default, changing the CSS display type doesn’t change the category of the element, and doesn’t affect which elements it can contain and which elements it can be contained in. One reason HTML5 dropped these terms was to prevent this rather common confusion.

block-level element

it can not be nested inside an inline element ! It will cause a new line to appear in the document. (default CSS styling)

<h1>I am the title of the story.</h1><!--支持到<h6>-->
<p>I am a paragraph, oh yes I am.</p>

<ul>
  <li>unordered lists</li>
    <ol>
      <li>ordered lists</li>
      <li>nesting lists</li>    
    </ol>
  <li>unordered lists</li>
</ul>

inline element

简述

They are surround only small parts of the document’s content. It will not cause a new line to appear in the document.

<a>anchor: 锚，使成为超链接 hyper link</a>
<strong>非常重要 strong importance</strong>
<em>强调 emphasis</em>

详述

<em>emphasis: Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling.</em>
To do that, you'd use a <span> element and some CSS, or perhaps an <i> element.

<p>Browsers style <strong>strong importance</strong> as bold text by default.</p>
but you shouldn't use this tag purely to get bold styling. To do that, you'd use a <span> element and some CSS, or perhaps a <b> element.
    
You can nest strong and emphasis inside one another if desired:
<p>This liquid is <strong>highly toxic</strong> —
if you drink it, <strong>you may <em>die</em></strong>.</p>

italic, bold, underline…

They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as presentational elements and should no longer be used because, as we’ve seen before, semantics is so important to accessibility, SEO(搜索引擎优化), etc.

<i> 被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想…… is used to convey a meaning traditionally conveyed by italic: foreign words, taxonomic designation, technical terms, a thought…
<b> 被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句…… is used to convey a meaning traditionally conveyed by bold: key words, product names, lead sentence…
<u> 被用来传达传统上用下划线表达的意义：专有名词，拼写错误…… is used to convey a meaning traditionally conveyed by underline: proper name, misspelling…

Note: People strongly associate underlining with hyperlinks. Therefore, on the web, it’s best to underline only links. Use the <u> element when it’s semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the web. The example below illustrates how it can be done.

<!-- scientific names -->
<p>
  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
  is the most common hummingbird in Eastern North America.
</p>

<!-- foreign words -->
<p>
  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- a known misspelling -->
<p><!--看这里的格式-->
  Someday I'll learn how to <u style="text-decoration-line: underline; text-decoration-style: wavy;">spel</u> better.
</p>

<!-- Highlight keywords in a set of instructions -->
<ol>
  <li>
    <b>Slice</b> two pieces of bread off the loaf.
  </li>
  <li>
    <b>Insert</b> a tomato slice and a leaf of
    lettuce between the slices of bread.
  </li>
</ol>

Empty elements’ Single Tag

<img src="https://.png" alt="alter:更改、改变">
<img src="images/cat.jpg" alt="cat" /> 后面加/(backslash)来适配XML

Attributes

Elements can alse have attributes. 属性始终要添加引号，单双都行，但不能混用，双引号里的单引号可以显示出来（反之同理）。如果要把同类型引号当作文本显示，得使用实体引用 HTML entities:<a href='https://www.example.com' title='Isn't this fun?'>A link to my example.</a>

class: <p class="editor-nots"></p>

anchors attributes

<a href="web address"></a> here reference somewhere?
<a title=""></a> description of the page being linked to. when cursor(鼠标) hovers(盘旋、彷徨、靠近), it appears.
<a target="_blank"></a> : open in a new tags(标签页)

Boolean attributes

布尔属性的值和属性名称是一样的

<input type="text" disabled="disabled">标记表单输入使之变为不可用(变灰色)
<input type="text" disabled><!-- using the disabled attribute prevents the end user from entering text into the input box -->
<input type="text"><!-- text input is allowed, as it doesn't contain the disabled attribute -->

syntax

nesting: elements can be placed within other elements
<p>
    This is called <strong>nesting(嵌套)</strong>
</p>
overlap 交叠：<p><strong></p></p><strong>

Witespace in HTML

the HTML parser reduces each sequence of whitespace to a single space when rendering the code.

<p>Dogs are silly.</p>
<p>Dogs        are
         silly.</p>

Entity references

<less than,>,",',&ampersand他们都是特殊字符，使用的时候需要特殊引用。Each character reference starts with an ampersand (&), and ends with a semicolon (;).

Literal character 原义字符	Character reference equivalent等价字符引用
<	&lt ; less than
>	&gt ;
"	&quot ; quotation
'	&apos ;
&	&amp ;

HTML comments

Browsers ignore comments, effectively making comments invisible to the user.

<!--<p>I am!</p>This is very useful if you return to a code base after being away for long enough that you don't completely remember it.
Likewise, comments are invaluable as different people are making changes and updates.-->

HTML anotomy#

primary language#

what’s in the <head> #

<title> #

<meta> elements#

character encoding#

author and description#

proprietary metadata#

custom icons#

Applying CSS and JavaScript to HTML#

CSS#

JavaScript#

head#

rear#

Element#

block-level element#

inline element#

简述#

详述#

italic, bold, underline…#

Empty elements’ Single Tag#

Attributes#

anchors attributes#

Boolean attributes#

syntax#

Witespace in HTML#

Entity references#

HTML comments#