953 字

3 分钟

HTML学习

2022-07-15

FRONTEND

web

/

html

/

language

HTML学习#

MDN官方文档

1. 结构#

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
7
    <title>Web应用课</title>
8
</head>
9

10
<body>
11
    <h1>第一讲</h1>
12
</body>
13

14
</html>

<html>

HTML文档顶级元素

<head>

规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。

<body>

表示文档的内容。document.body

<title>

文档标题。

<meta>

表示那些不能由其它 HTML 元相关（meta-related）元素（(<base>、<link>, <script>、<style> 或 <title>）之一表示的任何元数据信息。

charset

<meta charset="UTF-8">

name content

1
<meta name="viewport" content="width=device-width,initial-scale=1.0">
2
<meta name="description" content="练习页面">
3
<meta name="keywords" content="test">

icon

<link rel="icon" href="images/icon.png">

多行注释

1
<!--
2
  注释测试
3
-->

2. 文本标签#

<div>

通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。块状，末尾带回车。

eg.<h1> <p> <pre> <ul> <ol> <table>

<span>

短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性。

eg.<i> <b> <del> <ins> <td> <a>

<h1>

标题<h1>-<h6>

<p>

段落，过滤掉空格和回车。

<pre>

表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。

< == < > == >

<br>

回车，换行。

  == 空格

<hr>

横线

<i>

斜体

<b> | <strong>

加粗

<del>

删除线

<ins>

下划线

<mark>

标注

3. 图片#

1
<img width="100px" src="/image/mountain.jpg" alt="大山">

src

图片的文件路径

alt

图片的文字描述，非强制

height

高度，单位CSS像素

width

宽度，单位CSS像素

4. 音频和视频#

音频

<audio>

播放单个音频

1
<audio
2
    controls
3
    src="/audios/bgm.mp3">
4
        播放失败
5
</audio>

播放多个音频

1
<audio controls>
2
    <source src="/audios/sound1" type="audio/mpeg"/>
3
    <source src="/audios/sound2" type="audio/mpeg"/>
4
</audio>

视频

<video>

1
<video controls width="500">
2

3
    <source src="/videos/video1.mp4" type="video/mp4">
4

5
    <source src="/videos/video2.mp4" type="video/mp4">
6

7
    播放失败
8
</video>

5. 超链接#

<a href="<https://dreaife.cc>" target="_blank">dreaife</a>

点击跳到新页面target="_blank"

6. 表单#

form

<input>

1
<form>
2
    <label for="aaa">AAA</label>
3
    <input type="text" name="AaA" id="aaa" placeholder="fdalflaf">
4
    <button type="submit">提交</button>
5
</form>

type=""

text

创建基础的单行文本框

number

输入一个数字，拒绝非数字输入，提供步进箭头

email

输入或编辑一个电子邮箱地址

password

输入密码，其中文本被遮蔽以致于无法读取，通常通过用诸如星号（“*”）或点（“•”）等符号替换每个字符来实现

radio

默认渲染为小型圆圈图表，填充即为激活，类似于checkbox

相同name互斥

常用属性有：

name id maxlength minlength required placeholder(当表单控件为空时，控件中显示的内容)

action 提交后跳转。
<textarea>
<select> & <option>

1
<label for="lang">语言</label>
2
<select name="lang" id="lang">
3
  <option value="">select...</option>
4
  <option value="cpp">cpp</option>
5
</select>

7. 列表#

<ul>

无序列表

ol

有序列表

1
<ul>
2
  <li>first item</li>
3
  <li>second item</li>
4
  <li>third item</li>
5
</ul>
6

7
<ol>
8
  <li>Fee</li>
9
  <li>Fi</li>
10
  <li>Fo</li>
11
  <li>Fum</li>
12
</ol>

<dl> <dt> <dd>

1
<dl>
2
    <dt>Name</dt>
3
    <dd>Godzilla</dd>
4
    <dt>Born</dt>
5
    <dd>1952</dd>
6
    <dt>Birthplace</dt>
7
    <dd>Japan</dd>
8
    <dt>Color</dt>
9
    <dd>Green</dd>
10
    <dd>Orange</dd>
11
</dl>

<dt> 不tab

<dd> 加tab

8. 表格#

1
<table>
2
        <caption>成绩单</caption>    <!--标题-->
3
        <thead>              <!--表头-->
4
            <tr>
5
                <th>姓名</th>
6
                <th>数学</th>
7
                <th>语文</th>
8
                <th>英语</th>
9
            </tr>
10
        </thead>
11
        <tbody>              <!--数据-->
12
            <tr>
13
                <td>Alice</td>
14
                <td>100</td>
15
                <td>99</td>
16
                <td>98</td>
17
            </tr>
18
            <tr>
19
                <td>Bob</td>
20
                <td>99</td>
21
                <td>98</td>
22
                <td>97</td>
23
            </tr>
24
        </tbody>
25
    </table>

table
thead
tbody
tr
th
td
caption

9. 语义标签#

header

用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。

nav

表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。

section

表示一个包含在 HTML 文档中的独立部分。

figure

在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。

figcaption

是与其相关联的图片的说明/标题，用于描述其父节点

元素里的其他数据。

article

表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。

aside

示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。

footer

表示最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

1
<header>
2
        <h3>我的收藏夹</h3>
3
    </header>
4
    <section>
5
        <h4>图片</h4>
6
        <figure>
7
            <img width="100" src="/images/logo.png" alt="logo">
8
            <figcaption>logo</figcaption>
9
        </figure>
10
    </section>
11
    <section>
12
        <h4>古诗</h4>
13
        <article>
14
            <h5>春晓</h5>
15
            <p>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。</p>
16
        </article>
17
    </section>
18
    <footer>
19
        &copy;2018-2022 Me 版权所有
20
    </footer>

10. 特殊符号#

HTML源代码	显示结果	描述
`<`	<	小于号或显示标记
`>`	>	大于号或显示标记
`&`	&	可用于显示其它特殊字符
`"`	”	引号
`®`	®	已注册
`©`	©	版权
`™`	™	商标
` `		不断行的空白

544 字

3 分钟

Learning HTML

2022-07-15

FRONTEND

web

/

html

/

language

HTML Learning#

MDN Official Documentation

1. Structure#

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
7
    <title>Web应用课</title>
8
</head>
9

10
<body>
11
    <h1>第一讲</h1>
12
</body>
13

14
</html>

<html>

The top-level element of an HTML document

<head>

Specifies configuration information related to the document (metadata), including the document’s title, linked styles, and scripts.

<body>

Represents the content of the document. document.body

<title>

Document title.

<meta>

Represents metadata information that cannot be represented by other HTML meta-related elements (one of <base>, <link>, <script>, <style> or <title>).

charset

<meta charset="UTF-8">

name / content

1
<meta name="viewport" content="width=device-width,initial-scale=1.0">
2
<meta name="description" content="Practice page">
3
<meta name="keywords" content="test">

icon

<link rel="icon" href="images/icon.png">

Multi-line comments

1
<!--
2
  注释测试
3
-->

2. Text Tags#

<div>

A generic block-level container for flow content; without CSS, it has no effect on the content or layout. Block-level, ends with a newline.

eg.<h1> <p> <pre> <ul> <ol> <table>

<span>

A generic inline container for phrasing content, with no specific semantic meaning. It can be used to group elements to achieve a styling intent (by using class or id attributes), or these elements share common attributes.

eg.<i> <b> <del> <ins> <td> <a>

<h1>

Heading tags <h1>-<h6>

<p>

Paragraphs; whitespace and line breaks are collapsed.

<pre>

Represents preformatted text. The text inside is usually displayed respecting the original formatting, in a monospaced font, and whitespace characters (like spaces and line breaks) are preserved.

< == < > == >

<br>

Line break.

  == Non-breaking space
<hr>

Horizontal rule

<i>

Italic

<b> | <strong>

Bold

<del>

Strikethrough

<ins>

Underline

<mark>

Highlight

3. Images#

1
<img width="100px" src="/image/mountain.jpg" alt="大山">

src

The image file path

alt

The text description of the image, optional

height

Height, in CSS pixels

width

Width, in CSS pixels

4. Audio and Video#

Audio

<audio>

Play a single audio

1
<audio
2
    controls
3
    src="/audios/bgm.mp3">
4
        Playback failed
5
</audio>

Play multiple audio sources

1
<audio controls>
2
    <source src="/audios/sound1" type="audio/mpeg"/>
3
    <source src="/audios/sound2" type="audio/mpeg"/>
4
</audio>

Video

<video>

1
<video controls width="500">
2

3
    <source src="/videos/video1.mp4" type="video/mp4">
4

5
    <source src="/videos/video2.mp4" type="video/mp4">
6

7
    播放失败
8
</video>

5. Hyperlinks#

<a href="<https://dreaife.cc>" target="_blank">dreaife</a>

Click to open in a new page target="_blank"

6. Forms#

form

<input>

1
<form>
2
    <label for="aaa">AAA</label>
3
    <input type="text" name="AaA" id="aaa" placeholder="fdalflaf">
4
    <button type="submit">提交</button>
5
</form>

type=""

text

Create a basic single-line text input

number

Enter a number, reject non-numeric input, and provide stepper arrows

email

Enter or edit an email address

password

Enter a password; the text is obscured so it cannot be read, typically replaced with symbols like asterisks (“*”) or bullets (“•”)

radio

Rendered as small circular options; the selected one is active, similar to a checkbox

Mutually exclusive for the same name

Common attributes include：

name id maxlength minlength required placeholder(when the form control is empty, the placeholder text)

action Redirects after submission.
<textarea>
<select> & <option>

1
<label for="lang">语言</label>
2
<select name="lang" id="lang">
3
  <option value="">select...</option>
4
  <option value="cpp">cpp</option>
5
</select>

7. Lists#

<ul>

Unordered list

ol

Ordered list

1
<ul>
2
  <li>first item</li>
3
  <li>second item</li>
4
  <li>third item</li>
5
</ul>
6

7
<ol>
8
  <li>Fee</li>
9
  <li>Fi</li>
10
  <li>Fo</li>
11
  <li>Fum</li>
12
</ol>

<dl> <dt> <dd>

1
<dl>
2
    <dt>Name</dt>
3
    <dd>Godzilla</dd>
4
    <dt>Born</dt>
5
    <dd>1952</dd>
6
    <dt>Birthplace</dt>
7
    <dd>Japan</dd>
8
    <dt>Color</dt>
9
    <dd>Green</dd>
10
    <dd>Orange</dd>
11
</dl>

<dt> not tab

<dd> add a tab

8. Tables#

1
<table>
2
        <caption>成绩单</caption>    <!--标题-->
3
        <thead>              <!--表头-->
4
            <tr>
5
                <th>姓名</th>
6
                <th>数学</th>
7
                <th>语文</th>
8
                <th>英语</th>
9
            </tr>
10
        </thead>
11
        <tbody>              <!--数据-->
12
            <tr>
13
                <td>Alice</td>
14
                <td>100</td>
15
                <td>99</td>
16
                <td>98</td>
17
            </tr>
18
            <tr>
19
                <td>Bob</td>
20
                <td>99</td>
21
                <td>98</td>
22
                <td>97</td>
23
            </tr>
24
        </tbody>
25
    </table>

table
thead
tbody
tr
th
td
caption

9. Semantic Elements#

header

Used to display introductory content, typically containing a set of introductory or auxiliary navigation utility elements.

nav

Represents a section of a page whose purpose is to provide navigation links within the current document or other documents.

section

Represents a standalone section of content contained within an HTML document.

figure

A figure referenced in the main text, such as an image, illustration, diagram, code snippet, etc.; when this portion is moved to an appendix or another page, it does not affect the main content.

figcaption

The caption/title for the associated image, describing the other data within its parent

element.

article

Represents a self-contained composition in a document, page, application, or site, intended to be independently distributable or reusable.

aside

Represents a part of the page that is related to the rest of the content but can be considered separate from that content and could be removed without affecting the rest of the page.

footer

Represents the footer for the nearest section or root element. A footer typically contains the author, copyright data, or links related to the document.

1
<header>
2
        <h3>我的收藏夹</h3>
3
    </header>
4
    <section>
5
        <h4>图片</h4>
6
        <figure>
7
            <img width="100" src="/images/logo.png" alt="logo">
8
            <figcaption>logo</figcaption>
9
        </figure>
10
    </section>
11
    <section>
12
        <h4>古诗</h4>
13
        <article>
14
            <h5>春晓</h5>
15
            <p>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。</p>
16
        </article>
17
    </section>
18
    <footer>
19
        &copy;2018-2022 Me 版权所有
20
    </footer>

10. Special Symbols#

HTML Source Code	Display Result	Description
`<`	<	Less-than sign or display character
`>`	>	Greater-than sign or display character
`&`	&	Used to display other special characters
`"`	”	Quotation mark
`®`	®	Registered
`©`	©	Copyright
`™`	™	Trademark
` `		Non-breaking space

1301 字

3 分钟

HTML学習

2022-07-15

FRONTEND

web

/

html

/

language

HTMLの学習#

MDN公式ドキュメント

1. 構造#

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
7
    <title>Web应用课</title>
8
</head>
9

10
<body>
11
    <h1>第一讲</h1>
12
</body>
13

14
</html>

<html>

HTML文書の最上位要素

<head>

文書に関する設定情報（メタデータ）を規定し、文書のタイトル、引用した文書スタイルやスクリプトなどを含む。

<body>

文書の内容を表します。document.body

<title>

文書のタイトル。

<meta>

他の HTML 要素（メタ関連）では表現できないメタデータ情報を表します（<base>、<link>、<script>、<style>、または <title> のいずれかが示すもの以外）。

charset

<meta charset="UTF-8">

name content

1
<meta name="viewport" content="width=device-width,initial-scale=1.0">
2
<meta name="description" content="练习页面">
3
<meta name="keywords" content="test">

icon

<link rel="icon" href="images/icon.png">

複数行のコメント

1
<!--
2
  注释测试
3
-->

2. テキストタグ#

<div>

汎用のフローコンテンツ容器。CSSを使用しない場合、内容やレイアウトには影響を与えません。ブロック要素、末尾は改行。

例：<h1> <p> <pre> <ul> <ol> <table>

<span>

語彙コンテンツの汎用行レベル容器で、特別な意味は持ちません。クラスや id 属性を用いて特定のスタイルを適用するために要素をグルーピングする際に使用します。

例：<i> <b> <del> <ins> <td> <a>

<h1>

見出し<h1>-<h6>

<p>

段落。空白と改行をフィルタします。

<pre>

事前に定義されたフォーマットのテキストを表示します。この要素内のテキストは通常、元のファイルのレイアウトに従い等幅フォントで表示され、テキスト内の空白文字（スペースや改行など）もそのまま表示されます。

< == < > == >

<br>

改行

  == 空白

<hr>

水平線

<i>

斜体

<b> | <strong>

太字

<del>

取り消し線

<ins>

下線

<mark>

マーク

3. 画像#

1
<img width="100px" src="/image/mountain.jpg" alt="大山">

src

画像ファイルのパス

alt

画像のテキスト説明（任意）

height

高さ、CSSピクセル単位

width

幅、CSSピクセル単位

4. 音声と動画#

音声

<audio>

単一の音声を再生します

1
<audio
2
    controls
3
    src="/audios/bgm.mp3">
4
        再生に失敗しました
5
</audio>

複数の音声を再生する場合

1
<audio controls>
2
    <source src="/audios/sound1" type="audio/mpeg"/>
3
    <source src="/audios/sound2" type="audio/mpeg"/>
4
</audio>

動画

<video>

1
<video controls width="500">
2

3
    <source src="/videos/video1.mp4" type="video/mp4">
4

5
    <source src="/videos/video2.mp4" type="video/mp4">
6

7
    再生に失敗しました
8
</video>

5. ハイパーリンク#

<a href="<https://dreaife.cc>" target="_blank">dreaife</a>

新しいページを開くにはクリックしますtarget="_blank"

6. フォーム#

form

<input>

1
<form>
2
    <label for="aaa">AAA</label>
3
    <input type="text" name="AaA" id="aaa" placeholder="fdalflaf">
4
    <button type="submit">提交</button>
5
</form>

type=""

text

基本的な1行テキストボックスを作成します

number

数字を入力します。非数字の入力を拒否し、ステップアップ/ダウン矢印を提供します

email

電子メールアドレスを入力または編集します

password

パスワードを入力します。文字は masking され、通常は星印（「*」）や点（「•」）などで置換されます

radio

デフォルトは小さな円形のボタンとして表示され、選択状態は塗りつぶされ、チェックボックスに似ています

同じ name は排他的

よく使われる属性には：

name id maxlength minlength required placeholder(フォームコントロールが空のときに表示される内容)

action は送信後の遷移先を指定します。
<textarea>
<select> & <option>

1
<label for="lang">言語</label>
2
<select name="lang" id="lang">
3
  <option value="">select...</option>
4
  <option value="cpp">cpp</option>
5
</select>

7. リスト#

<ul>

順序なしリスト

ol

順序付きリスト

1
<ul>
2
  <li>first item</li>
3
  <li>second item</li>
4
  <li>third item</li>
5
</ul>
6

7
<ol>
8
  <li>Fee</li>
9
  <li>Fi</li>
10
  <li>Fo</li>
11
  <li>Fum</li>
12
</ol>

<dl> <dt> <dd>

1
<dl>
2
    <dt>Name</dt>
3
    <dd>Godzilla</dd>
4
    <dt>Born</dt>
5
    <dd>1952</dd>
6
    <dt>Birthplace</dt>
7
    <dd>Japan</dd>
8
    <dt>Color</dt>
9
    <dd>Green</dd>
10
    <dd>Orange</dd>
11
</dl>

<dt> はタブなし

<dd> はタブ付き

8. テーブル#

1
<table>
2
        <caption>成績表</caption>    <!--タイトル-->
3
        <thead>              <!--表頭-->
4
            <tr>
5
                <th>姓名</th>
6
                <th>数学</th>
7
                <th>語文</th>
8
                <th>英語</th>
9
            </tr>
10
        </thead>
11
        <tbody>              <!--データ-->
12
            <tr>
13
                <td>Alice</td>
14
                <td>100</td>
15
                <td>99</td>
16
                <td>98</td>
17
            </tr>
18
            <tr>
19
                <td>Bob</td>
20
                <td>99</td>
21
                <td>98</td>
22
                <td>97</td>
23
            </tr>
24
        </tbody>
25
    </table>

table
thead
tbody
tr
th
td
caption

9. セマンティック要素#

header

導入的な内容を表示するための要素で、通常は紹介的または補助的なナビゲーションの実用的な要素を包含します。

nav

ページの一部を表し、現在の文書または他の文書にナビゲーションリンクを提供することを目的としています。

section

HTML文書内の独立した部分を表します。

figure

本文中に引用される画像、図、表、コード断片など。本文の主な部分が他の付録や別のページへ移動しても、本文には影響しません。

figcaption

関連する画像の説明/タイトルで、親要素

のデータを説明します。

article

文書、ページ、アプリケーション、サイト内の独立した構造を表します。可分離可能で再利用可能な構造として設計されています。

aside

他のページの内容とほとんど関連がない部分を示し、それが独立して分割されても全体には影響を与えません。

footer

直近の章の内容またはルート要素のフッターを表します。フッターには著者情報、著作権データ、文書に関連するリンクなどが含まれることが多いです。

1
<header>
2
        <h3>我的收藏夹</h3>
3
    </header>
4
    <section>
5
        <h4>图片</h4>
6
        <figure>
7
            <img width="100" src="/images/logo.png" alt="logo">
8
            <figcaption>logo</figcaption>
9
        </figure>
10
    </section>
11
    <section>
12
        <h4>古诗</h4>
13
        <article>
14
            <h5>春晓</h5>
15
            <p>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。</p>
16
        </article>
17
    </section>
18
    <footer>
19
        &copy;2018-2022 Me 版权所有
20
    </footer>

10. 特殊符号#

HTML源代码	表示結果	説明
`<`	<	小なり記号または表示用の記号
`>`	>	大なり記号または表示用の記号
`&`	&	他の特殊文字を表示するために使用できます
`"`	”	引用符
`®`	®	登録商標
`©`	©	著作権
`™`	™	商標
` `		改行不可の空白

HTML学习

https://dreaife.tokyo/posts/html-learning-guide/

作者

dreaife

发布于

2022-07-15

许可协议

CC BY-NC-SA 4.0

部分信息可能已经过时

前缀和、差分和双指针算法学习

Java核心技术卷学习Day02

dreaife的休憩小栈

HTML学习#

1. 结构#

2. 文本标签#

3. 图片#

4. 音频和视频#

5. 超链接#

6. 表单#

7. 列表#

8. 表格#

9. 语义标签#

10. 特殊符号#

HTML Learning#

1. Structure#

2. Text Tags#

3. Images#

4. Audio and Video#

5. Hyperlinks#

6. Forms#

7. Lists#

8. Tables#

9. Semantic Elements#

10. Special Symbols#

HTMLの学習#

1. 構造#

2. テキストタグ#

3. 画像#

4. 音声と動画#

5. ハイパーリンク#

6. フォーム#

7. リスト#

8. テーブル#

9. セマンティック要素#

10. 特殊符号#