前端基础 HTML

一、前端开发准备

必备软件安装：ide、浏览器等
项目组织方式
- An aside on casing and spacing : it is best to get into the habit of writing your folder and file names lowercase with no spaces and with words separated by hyphens. 这也是一般的项目文件组织方式
- website project structure
  1. index.html
  2. images folder
  3. styles folder
  4. scripts folder

二、Getting started with HTML

basics of HTML: elements, attributes …

1. html 元素

The opening tag
The content
The closing tag

HTML 标签是一个闭合标签

1.1. 嵌套元素

1

<p>My cat is <strong>very</strong> grumpy.</p>

1.2. 元素分类

Block-level: For example, a block-level element might represent headings, paragraphs, lists, navigation menus, or footers. A block-level element wouldn’t be nested inside an inline element, but it might be nested inside another block-level element.
Inline: It is typically used with text, for example an <a>element creates a hyperlink, and elements such as <em> or <strong> create emphasis.

1.3. 空元素

2. html 属性

&amp;lt;p class=“editor-note”>My cat is very grumpy&amp;lt;/p>

Attributes contain extra information about the element that won’t appear in the content.

example

1

<p>A link to my <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">favorite website</a>.</p>

class
href
title
target

1.1. Boolean attributes

disabled属性

1
2
3
4
5


<!-- using the disabled attribute prevents the end user from entering text into the input box -->
<input type="text" disabled>

<!-- text input is allowed, as it doesn't contain the disabled attribute -->
<input type="text">

1.2. 属性引号

在属性值上加引号

3. html 文档

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

<!DOCTYPE html>: The doctype. 指明文档类型，历史原因
<html></html>
<head></head>: that isn’t the content the page will show to viewers
<meta charset="utf-8">: metadata
<title></title>
<body></body>

Whitespace in HTML

三、What’s in the head? Metadata in HTML

To learn about the HTML head, its purpose, the most important items it can contain, and what effect it can have on the HTML document.

1. title 与 h1

2. meta

1

<meta charset="utf-8">

设置编码格式，对于一些浏览器可能会自动设置

1
2
3
4


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

3. link, script

ico for “favorites” and “bookmarks”

1

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

CSS and JavaScript

1
2
3


<link rel="stylesheet" href="my-css-file.css">
<script src="my-js-file.js" defer></script>

四、HTML text fundamentals

Learn how to mark up a basic page of text to give it structure and meaning—including paragraphs, headings, lists, emphasis, and quotations.

1. The basics: headings and paragraphs

In HTML, each paragraph has to be wrapped in a <p> like so:

1

<p>I am a paragraph, oh yes I am.</p>

Each heading has to be wrapped in a heading element:

1
2


<h1>I am the title of the story.</h1>
<h1><h2><h3>...<h6>

a example:

1
2
3


<h1>My short story</h1>
<p>I am a statistician and my name is Trish.</p>
<p>My legs are made of cardboard and I am married to a fish.</p>

On the other hand, you could make any element look like a top level heading. Consider the following:

1

<span style="font-size: 32px; margin: 21px 0; display: block;">Is this a top level heading?</span>

2. List

2.1 Unordered

Every unordered list starts off with a <ul> element–this wraps around all the list items:

1
2
3
4
5
6


<ul>
milk
eggs
bread
hummus
</ul>

The last step is to wrap each list item in a <li> (list item) element:

1
2
3
4
5
6


<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</li>
  <li>hummus</li>
</ul>

2.2 Ordered

The markup structure is the same as for unordered lists, except that you have to wrap the list items in an <ol> element, rather than ul:

1
2
3
4
5
6
7


<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <li>Go straight across the first two roundabouts</li>
  <li>Turn left at the third roundabout</li>
  <li>The school is on your right, 300 meters up the road</li>
</ol>

2.3 Emphasis and importance

Emphasis

1

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

Strong importance

1
2
3


<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <strong>Do not</strong> be late!</p>

Italic, bold, underline…

Here’s the best rule of thumb: It’s likely appropriate to use <b>, <i>, or <u> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<p>
  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>)
  is the most common hummingbird in Eastern North America.
</p>
<p>
	The menu was a sea of exotic words like <i>vatrushka</i>,
	<i>nasi goreng</i> and <i>soupe à l'oignon</i>.
</p>
<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>

五、Creating hyperlinks

1. link 刨析

基本链接由文本及其他内容构建，利用<a> element and using the href attribute

1
2
3


<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>

1.1 Adding supporting information with the title attribute

Another attribute you may want to add to your links is title. The title contains additional information about the link, such as which kind of information the page contains, or things to be aware of on the web site.

1
2
3
4
5


<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/"
   title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepage</a>.
</p>

1.2 Block level links

As mentioned before, almost any content can be made into a link, even block-level elements. If you have an image you want to make into a link, use the <a> element and reference the image file with the<img>element.

1
2
3
4
5
6


<p>I'm creating a link to
<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>
<a href="https://www.mozilla.org/en-US/">
<img src="./images/unnamed.ico" alt="mozilla logo that links to the mozilla homepage">
</a>

1.3 Document fragments

It’s possible to link to a specific part of an HTML document, known as a document fragment, rather than just to the top of the document. To do this you first have to assign an id attribute to the element you want to link to.

1

<h2 id="Mailing_address">Mailing address</h2>

Then to link to that specific id, you’d include it at the end of the URL, preceded by a hash/pound symbol (#), for example:

1

<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>

You can even use the document fragment reference on its own to link to another part of the current document:

1

<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>

2. Link best practices

Link best practices

2.1 Use clear link wording

Good link text:

1
2
3


<p><a href="https://firefox.com/">
  Download Firefox
</a></p>

Bad link text:

1
2
3
4


<p><a href="https://firefox.com/">
  Click here
</a>
to download Firefox</p>

2.2 Linking to non-HTML resources — leave clear signposts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<p><a href="https://www.example.com/large-report.pdf">
  Download the sales report (PDF, 10MB)
</a></p>

<p><a href="https://www.example.com/video-stream/" target="_blank">
  Watch the video (stream opens in separate tab, HD quality)
</a></p>

<p><a href="https://www.example.com/car-game">
  Play the car game (requires Flash)
</a></p>

2.3 Use the download attribute when linking to a download

1
2
3
4


<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
   download="firefox-latest-64bit-installer.exe">
  Download Latest Firefox for Windows (64-bit) (English, US)
</a>

3. E-mail links

It’s possible to create links or buttons that, when clicked, open a new outgoing email message rather than linking to a resource or page. This is done using the <a> element and the mailto: URL scheme.

In its most basic and commonly used form, a mailto: link indicates the email address of the intended recipient. For example:

1

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

六、Advanced text formatting

1. Description lists

The purpose of these lists is to mark up a set of items and their associated descriptions, such as terms and definitions, or questions and answers.

Description lists use a different wrapper than the other list types —<dl>; in addition each term is wrapped in a<dt>(description term) element, and each description is wrapped in a <dd>(description definition) element.

1
2
3
4
5
6
7
8


<dl>
  <dt>soliloquy</dt>
  <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd>
  <dt>monologue</dt>
  <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd>
  <dt>aside</dt>
  <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.</dd>
</dl>

……

七、Document and website structure

1. HTML for structuring content

header:<header>
navigation bar: <nav>
main content: main, with various content subsections represented by <article>,section and <div> elements.
sidebar: <aside>;often placed inside <main>
footer:<footer>

Non-semantic wrappers

<div>, <span>

Line breaks and horizontal rules

<br>, <hr>

1
2
3
4


<p>There once was a man named O'Dell<br>
Who loved to write HTML<br>
But his structure was bad, his semantics were sad<br>
and his markup didn't read very well.</p>

1
2
3
4
5
6
7
8


<p>Ron was backed into a corner by the marauding
   netherbeasts. Scared, but determined to protect his friends, he raised his
   wand and prepared to do battle, hoping that his distress call had made it through.</p>
<hr>
<p>Meanwhile, Harry was sitting at home, staring at his royalty statement
  and pondering when the next spin off series would come out, when an enchanted
  distress letter flew through his window and landed in his lap. He read it
  hazily and sighed; "better get back to work then", he mused.</p>