【前端】GrokLearning-HTML&CSS

发表于 更新于 分类于 阅读次数：
本文字数： 9.6k 阅读时长 ≈ 9 分钟

https://groklearning.com/ 学习笔记。

什么是 HTML 和 CSS

  • Every time you use the web, you're seeing HTML (HyperText Markup Language) and CSS (Cascading Style Sheets).
  • A webpage is made of two things: content and style.
    • The content is defined by HTML, which describes the information in a document and its structure or meaning.
    • The style is defined by CSS.

注释方式

1
<!--这是 html 的注释方式-->
1
/*这是 css 的注释方式*/

Content（内容）

1
<!DOCTYPE html>
  • Tags
    • <h1>...</h1>, which refers to a heading. (normally 32px - pixels)
    • <p>...</p>, which refers to a paragraph.
1
2
3
<!DOCTYPE html>
<h1>This is a level 1 heading.</h1>
<p>This is a paragraph.</p>

Style（风格）

添加方式

There are two types of style settings.

  • Type 1: You can add a style attribute to the tag.
1
2
<h1>Heading</h1>
<h1 style="color: deeppink">Heading</h1>
  • Type 2: You can add a style attribute at the beginning.

Hint: The style elements must be placed at the beginning of the document before anything else (below the <!DOCTYPE html>).

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<style>
  h1 {
    color: rebeccapurple;
  }
</style>
<h1>Heading</h1>
<h1>Another Heading</h1>

一些 Style 的属性

  • Some style attributes
    • color（颜色）
      • The full list of supported colour names is defined here.
    • font-family（字体类型）
      • 'Times New Roman', Times, serif, Impact, Charcoal, sans-serif and so on.
      • A typeface or font family defines how each symbol in text looks.
    • font-size（字体大小）
      • The font size for a level 1 heading (h1) is normally 32px (where px stands for pixels – the individuals dot in an image).
    • line-height（行高）
      • The line-height property is specified relative to the font-size, e.g. a line-height of 2 is \(\color{red}{\text{double spacing}}\). (attention!)
    • margin-left, margin-right, margin-top, margin-bottom（页边距）
      • The margin property controls space between elements; you can specify top, right, bottom and left margins.
    • width（宽度）
      • The width property controls how wide an element is, not including the margins.
    • background-color（背景色）
      • The background-color property to show the true width of the paragraph element.
    • text-transform（大小写）
      • lowercase：小写
      • uppercase：大写
      • capitalize：首字母大写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>

<style>
  h1{
    margin-bottom: 30px;
    margin-left: 40px;
    margin-top: 30px;
    font-size: 36px;
    font-family: Verdana, Geneva, sans-serif;
  }
  p{
    width: 680px;
    margin-bottom: 30px;
    margin-left: 40px;
    line-height: 1.8;
    font-size: 18px;
    font-family: Georgia, Times, serif;
  }
  span{
    font-family: 'Courier New', monospace;
  }
</style>

<h1>Monospaced fonts</h1>
<p>
In a monospaced font, the letters all occupy the same amount of horizontal space. In variable-width fonts, the size of letters and spacings between them can be different.
</p>

<p>
You're editing this paragraph in a code editor with a monospace font, but styling it with a variable-width font! As well as making coding easier, monospace fonts are fun because you can create ASCII art with them. Style the following span with a monospace font and see what happens!
</p>

<span>
  ........_.......______.....______..____
  _.._____........_..............._......<br>
  ......./.\.....'.____.\...'.___..||_...
  _||_..._|....../.\............./.|_....<br>
  ....../._.\...|.(___.\_|/..'...\_|..|.|
  ....|.|......./._.\....._..--.`|.|-'...<br>
  ...../.___.\..._.____`..|.|.........|.|
  ....|.|....../.___.\...[.`/'`\]|.|.....<br>
  ..._/./...\.\_|.\____).|\.`.___.'\._|.|
  _.._|.|_..._/./...\.\_..|.|....|.|,....<br>
  ..|____|.|____|\______.'.`.____..'|____
  _||_____|.|____|.|____|[___]...\__/....<br>
</span>

Colours, alignment, links, and images（颜色和对齐方式等）

Emphasis（强调）

  • 加粗和斜体

The strong element signals that something is important, and the em element (short for emphasis) signals that the words should be read in a different voice.

  • 例子
1
2
3
4
<p>
  This is an <strong>important</strong> sentence,
  with an <em>interesting ending</em>.
</p>

Break element（断行）

The br element can be used to break up text into new lines without having to separate it into separate paragraphs.

  • <br> doesn't need closing!

  • 例子

1
2
3
4
5
6
<p>
  First paragraph which is <br> broken into two lines.
</p>
<p>
  Second paragraph which is not broken at all.
</p>

Text Alignment（对齐方式）

Text alignment determines where text is placed horizontally on a page.

  • The four main values for text alignment are left, right, center and justify（自适应）.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
h1 {
    text-align: center;
    width: 600px;
}
p {
    text-align: justify;
    width: 600px;
}
</style>
<h1>Centered Heading</h1>
<p>
This text is justified. Text lines up the left and right edges to the left and right content edges of the paragraph. Justified text is often used in newspapers, although studies have shown that text with jagged edges, that is, non-justified text, is easier to read as the eyes can more easily keep track of one's progress. 
</p>

Span element（单独元素）

The span element is designed to group some text within a paragraph to apply a style to it. It doesn't do (or mean) anything on its own.

1
2
3
4
5
6
<p>
  My favourite colour is <span style="color: red">red</span>.
</p>
<p>
  This <span>span tag</span> has no effect.
</p>

Red-Green-Blue (RGB)（颜色属性配置）

Designing beautiful websites would be difficult if the named CSS colours were the only ones you could use. You can specify your own colours as a mixture of red, green and blue (RGB) light, where each colour is a number between 0 and 255, with 0 being no colour, and 255 being maximum colour.

1
2
3
4
5
<p style="color: rgb(255, 0, 0)">Red</p>
<p style="color: rgb(0, 255, 0)">Green</p>
<p style="color: rgb(0, 0, 255)">Blue</p>
<p style="color: rgb(255, 128, 0)">Orange</p>
<p style="color: rgb(128, 20, 180)">Purple</p>

Links（超链接）

The anchor element (abbreviated to a) creates links on pages. The address to link to must be added in the href attribute.

1
2
3
<p>
  Click <a href="https://groklearning.com/about">here</a> to follow the link.
</p>

Text Decoration

  • Links are underlined by default, but we can change this for any text with the text-decoration property. The options are overline, line-through, underline and none.（对超链接文本增加属性）
1
2
3
4
5
6
7
8
<style>
  a {
    text-decoration: none;
  }
</style>
<p>
  <a href="https://groklearning.com/about/">About page</a>
</p>

Centring: Auto-width Margins（又是居中）

To centre this element h1 on the screen, you should set the left and right margins to auto.

1
2
3
4
5
6
7
8
9
10
11
<style>
h1 {    
    width: 600px;
    margin-left: auto;
    margin-right: auto; 
    background-color: lightgray;
}
</style>
<h1>
This heading and its grey background show how to centre a specific element, which could be headings or paragraphs.
</h1>

Images（插图）

插图标签

You need a src attribute (stands for source) which is the filename of the image (like a link).

  • <img> doesn't need closing!
1
<img src="cat.jpg" alt="A picture of a cat">

丢失属性

You must also include an alt attribute which is the text that should appear if the image is missing.

1
<img src="missing.jpg" alt="This image file is missing.">

Height and width（高度和宽度）

You can set width and height attributes on your <img> elements to change their size.

1
<img src="cat.jpg" alt="A cat" width="100" height="300" >

Full size images（全尺寸）

As well as changing the size of an image to specific dimensions, you can also set it to a percentage of the width of the page. You can set this on the image tag directly.

1
<img src="cat.jpg" alt="A cat" style="width:50%">

HTML document structure and lists（文档结构）

一般结构

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
    <head>
        <title>...</title>
        <style></style>
    </head>

    <body>
        ...
    </body>
</html>

Separate stylesheets（分离样式）

1
2
3
4
5
6
7
8
9
10
<!--test.html-->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Page heading </h1>
  </body>
</html>
1
2
3
4
/*main.css*/
h1 {
  color: deeppink;
}

Lists of things（编号列表的创建）

unordered list（无序）

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<p>List of fruit:</p>
<ul>
  <li>Watermelon</li>
  <li>Mango</li>
  <li>Banana</li>
  <li>Strawberry</li>
</ul>

ordered list（有序）

1
2
3
4
5
6
7
<!DOCTYPE html>
<p>Homework TODO:</p>
<ol>
  <li>Read the last act of Hamlet;</li>
  <li>Finish trigonometry assignment;</li>
  <li>Write business studies report.</li>
</ol>

列表的属性

位置

  • The list-style-position property on ol and ul elements specifies whether the bullet or number is inside or outside the list.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<body style="text-align: center;">
  <h3>Outside the list</h3>
  <ol style="list-style-position: outside;">
    <li>Centred list</li>
    <li>where list style position</li>
    <li>is set to outside.</li>
  </ol>
  <h3>Inside the list</h3>
  <ol style="list-style-position: inside;">
    <li>Centred list</li>
    <li>where list style position</li>
    <li>is set to inside.</li>
  </ol>
</body>

格式

  • 列表序号的格式
  • Another cool list property you can set is the list-style-type, which changes the bullet (for unordered lists) and the number (for ordered lists).
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<link rel="stylesheet" href="main.css">
<ul>
  <li>Code</li>
  <li>Create</li>
  <li>Compete</li>
</ul>
<ol>
  <li>Alpha</li>
  <li>Bravo</li>
  <li>Charlie</li>
</ol>
1
2
3
4
5
6
ul {
  list-style-type: square;
}
ol {
  list-style-type: lower-alpha;
}

Superscript and subscript（上下标）

  • 上标：<sup>...</sup>
  • 下标：<sub>...</sub>
1
2
3
<!DOCTYPE html>
<p>The mass-energy equivalence forumla is E = mc<sup>2</sup></p>
<p>The molecular formula for caffeine is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub></p>