关于 HTML 的所有事

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="UTF-8">
 5    <meta name="description" content="This is an example.">
 6    <title>Title</title>
 7  </head>
 8  <body>
 9  <h2>Hello World!</h2>
10  <p>Hello World!</p>
11  </body>
12</html>

Basic Tags

html, head, body, meta, title, hx(x=1~6), p, b(bold), i(italic), br/, hr/, big, small, sub, sup, aside, a, img, video, iframe, ul, ol, li, dl, dt, dd

Comments

1<!-- -->

Style and Colors

1<p style="color: green;">Hello World!</p>

Formatting a Page

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="UTF-8">
 5    <meta name="description" content="This is an example.">
 6    <title>Title</title>
 7  </head>
 8  <body>
 9    <header>
10      <nav></nav>
11    </header>
12    <main>
13      <article>
14        <section>
15          <h2>Hello World!</h2>
16          <p>Hello World!</p>
17        </section>
18      </article> 
19    </main>
20    <footer></footer>
21  </body>
22</html>
1<a href="https://www.google.com" target="_blank"><h1>Google's Homepage</h1></a>
2<a href="pages2.html">Tss</a>

Images

1<a href="">
2  <img src="" alt="" width="" height="100"/> <!-- 100px pixels-->
3</a>

在进行图片的显示大小设置时,可以只设置一个(width 或 height),之后 HTML 会自动把没有设置的那一个按图片比例调整到合适大小。adjust the aspect ratio for you(为你调整长宽比)。

Videos and YouTube iFrames

1<video src="" width="" height="" poster="" loop autoplay controls></video> <!-- 添加封面 -->
2
3<iframe width="560" height="315" src="https://www.youtube.com/embed/pQN-pnXPaVg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Lists

 1<ul>
 2  <li><a href="#">Apples</a></li>
 3  <li>Oranges
 4    <ol>
 5      <li>tetx</li>
 6    </ol>
 7  </li>
 8  <li>Bananas</li>
 9</ul>
10
11<ol type="a/A/I/i">
12  <li>Apples</li>
13  <li>Oranges</li>
14  <li>Bananas</li>
15</ol>
16
17<dl>
18  <dt>Apples</dt>
19  <dd>- They are red.</dd>
20  <dt>Oranges</dt>
21  <dd>- They are orange.</dd>
22</dl>

Tables

 1<table>
 2  <thead>
 3    <caption><h2>List of Numbers</h2></caption>
 4    <tr>
 5      <th>Num1</th>
 6      <th>Num2</th>
 7      <th>Num3</th>
 8    </tr>
 9  </thead>
10  <tbody>
11    <tr>
12      <td colspan="2">Four</td>
13      <td>Five</td>
14      <td>Six</td>
15    </tr>
16  </tbody>
17</table>

Divs and Spans

 1<!-- Inline element -->
 2<a href="#">link1</a>
 3<a href="#">linkk2</a>
 4<span>text</span>
 5
 6<!-- block element -->
 7<hr>
 8  <p>Text</p>
 9  <p>Tsts</p>
10  <div>div1</div>
11  <div>div2</div>

Input and Forms

 1<form>
 2  <input type="text" value="Enter your username"/>
 3  <input type="password" />
 4  <textarea rows="10" cols="30">
 5  Enter a paragraph
 6  </textarea>
 7  <input type="date" />
 8  <input type="email" />
 9  <input type="range" />
10  <input type="file" />
11  <input type="checkbox" />
12  <input name="btn" type="radio" />
13  <input name="btn" type="radio" />
14  <input type="submit" />
15</form>

iFrames

1<iframe src="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/" frameborder="0" width="" height="">
2fCC JavaScript
3</iframe>

有些网站不允许通过 iframe 嵌入到其他网站中,因为这会使得浏览网站的人误以为“其他网站”才是真网站,而把那个真正的官方网站视为假网站。

Meta Tags

1<meta charset="UTF-8">
2<meta name="description" content="This is an example.">
3<meta name="author" content="Jim Gao">
4<meta name="keywords" content="Tags, HTML">
5
6<meta name="viewport" content="width=device-width, initial-scale=1.0">

参考资料

  1. Basic HTML and HTML5 - freeCodeCamp
  2. HTML Full Course - Build a Website Tutorial
  3. HTML Tutorial - W3Schools