Learning Notes

# HTML入门笔记1

# HTML 是谁发明的

李爵士

# HTML 起手应该写什么

<!DOCTYPE html> //文档类型
<html lang="en"> //语言
<head>
  <meta charset="UTF-8"> //字符编码
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  // 防止页面缩放
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  // 兼容手机 告诉IE使用最新内核
  <title>Document</title>
</head>
<body>
  
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 常用的表章节的标签有哪些, 分别是什么意思

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

<section>章节<section>
<article>文章<article>
<header>头部<header>
<footer>底部<footer>
<aside>旁侧<aside>
<main>主要部分<main>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 全局属性有哪些

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>全局属性</title>
  </head>
  <body>
    <style contenteditable>
      style {
        display: block;
      }
      [class="color"] {
        background: #eee;
      }
      .content {
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }
    </style>
    <header hidden>顶部广告</header>
    <div class="color" tabindex=1>
      class
    </div>
    <div tabindex=2 contenteditable="true" class="content"></div>
    <div tabindex=3>id的唯一性就是fart, 在HTML里使用两个一样的id完全没有报错而且能成功运行</div>
    <ul tabindex=4>
      <!--* tabindex=0 最后一个 -->
      <!--* tabindex=-1 不要找我 -->
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>
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

# 常用的内容标签有哪些, 分别是什么意思

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>内容标签</title>
</head>
<body>
  <div>
    <ol>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ol>
  </div>
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  <div>
    <dl>
      <dt>等宽字体</dt>
      <dd>无论字母的size都是一样的宽,有利于对齐,方便寻找</dd>
    </dl>
  </div>
  <div>
    <p><pre>hello             world, pre标签不会忽略空格</pre></p>
  </div>
  <hr>
  <div>
    你好<br>
    世界
  </div>
</body>
</html>
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

← HTML重点标签 →