HTML语言简单的总结及样例分析 | 豆包MarsCode AI刷题html的简单概述和一个完全的案例分析，案例的HTM

什么是 HTML？

HTML（超文本标记语言，Hyper Text Markup Language）是一种用于定义网页结构和内容的标记语言。它由一系列标记组成（如 <h3>、<ul>、<li> 等），这些标记通过包围内容形成元素（如 <h3>...</h3>、<li>...</li> 等），用于定义网页内容的含义和组织结构。在这些元素中，有一个尤为关键的概念——超链接，在 HTML 中通过 <a> 标签来实现。正是因为有了超链接的概念，HTML 文档之间得以相互连接，构成了我们如今的互联网世界。

<h3>王小波的代表作有哪些？</h3>

<ul>
  <li>《青铜时代》</li>
  <li>《白银时代》</li>
  <li>《黄金时代》</li>
  <li>...</li>
</ul>
<a target="_blank" href="https://baike.baidu.com/item/%E7%8E%8B%E5%B0%8F%E6%B3%A2/6673?fr=kg_general">
  了解更多
</a>

::: warning 提示 HTML 不是一种编程语言，而是一种用于定义网页内容及其结构的标记语言。 :::

超文本

超文本指的是能够连接同一网站内或跨网站网页的链接，使得 HTML 文档之间可以互相跳转。虽然超链接在 HTML 中仅仅是一个元素（通过 <a> 标签实现），但它在 HTML 和整个 Web 结构中都是核心概念。正是因为有了超链接的存在，才形成了今天的万维网。

<!-- 超链接示例 -->
<a target="_blank" href="https://www.baidu.com">
  百度一下
</a>

标记

HTML 包含多种标记，每种标记代表特定的内容含义，例如 <img> 表示图片，<h1> 表示一级标题，<a> 表示超链接等。这些标记包围着内容，形成元素，从而定义网页内容的语义和结构。

<h1>一级标题</h1>
<img src="https://wangjunliang.com/img/logo.458d8eba.svg">
<a target="_blank" href="https://wangjunliang.com">超链接</a>

元素

HTML 元素由标记和内容组成，不同标记组合形成的元素可以用来表达内容的语义（如文字、图片或视频等）。元素的顺序与嵌套也能清晰展示内容的层次和组织结构。

<h3>我和他的对话</h3>

<p>
  <em>我</em>：我非常
  <strong>愤怒</strong>😡,你知道吗？
</p>
<p>
  <em>他</em>：是吗？不好意思😣
</p>
<p>
  <em>我</em>：你不给我道歉吗🤔？
</p>
<p>
  <em>他</em>：对不起😥
</p>

元素的组成

大多数 HTML 元素由开始标签、结束标签和内容组成。

开始标签：包含标签名称（如 <h3>），用尖括号包围，表示元素的开始。
结束标签：与开始标签类似，但在标签名之前有一个斜杠（如 </h3>），表示元素的结束。
内容：元素的具体内容。

部分元素（如 <img>）没有结束标签，用于直接嵌入内容（如图片）。

<!-- 图片示例 -->
<img src="https://wangjunliang.com/img/logo.458d8eba.svg">

元素的嵌套

在 HTML 中，可以将元素放入其他元素中，形成嵌套结构。嵌套的外层元素称为父元素，内层元素为子元素。例如，下面的 <p> 元素是 <strong> 和 <em> 元素的父元素，而 <strong> 和 <em> 元素则是 <p> 元素的子元素。

<!-- 嵌套元素示例 -->

<p>
  <strong>我真的好帅</strong>
  <em>绝对帅</em>
</p>

正确的嵌套格式如下所示。理论上没有嵌套层数或元素个数的限制，可以无限嵌套。

<父元素的开始标签>
   <子元素的开始标签></子元素的结束标签>
   <子元素的开始标签></子元素的结束标签>
   <子元素的开始标签>
     <子元素的开始标签></子元素的结束标签>
   </子元素的结束标签>
</父元素的结束标签>

::: details 参考资料

MDN: Getting Started with HTML
前端与 HTML 稀土掘金

::: 案例分析

<h1>This is the Example Content H1 Tag</h1>
<p>
The HTML example content is designed to provide some dummy content to help
you design your typography and general CSS styles, and to ensure that you've
accounted for <em>every single</em> HTML5 tag in your stylesheet.
</p>

<h2>Normal, Basic Stuff headed by this H2 Tag</h2>

<p>
This is a normal paragraph.  It contains some text.  According to
<a href="http://www.threestyles.com/tutorials/css-tips-for-better-typography/" title="The ultimate guide to CSS Typography">some sources</a>,
paragraphs should be 30em x the font size (for example, 10px font size = 300px wide paragraph).  Use <em>ems</em> to
make this happen.  Also, line height should be 6 - 7px bigger than the font size.   It may or may
not be appropriate to use <em>ems</em> for this.  Here is some <small>small text</small>
</p>

<p>
Complex computer systems find their way into everyday life, and at the same time the market is saturated with competing brands. This has made usability more popular and widely recognized in recent years, as companies see the benefits of researching and developing their products with user-oriented methods instead of technology-oriented methods. By understanding and researching the interaction between product and user, the usability expert can also provide insight that is unattainable by traditional company-oriented market research. For example, after observing and interviewing users, the usability expert may identify needed functionality or design flaws that were not anticipated. A method called contextual inquiry does this in the naturally occurring context of the users own environment.
</p>

<h3>A Level Three Heading</h3>

<p>
There is no consensus about the relation of the terms ergonomics (or human factors) and usability. Some think of usability as the software specialization of the larger topic of ergonomics. Others view these topics as tangential, with ergonomics focusing on physiological matters (e.g., turning a door handle) and usability focusing on psychological matters (e.g., recognizing that a door can be opened by turning its handle).
</p>

<h4>Level Four Heading</h4>

<p>
Drinking vinegar Carles Banksy messenger bag, skateboard literally tofu selfies fugiat. Aesthetic Marfa minim, Odd Future craft beer art party sint 3 wolf moon hella viral. Yr 8-bit whatever skateboard church-key aute. +1 velit pariatur fugiat disrupt, nisi you probably haven't heard of them stumptown. Sed quinoa lomo, officia flannel Pinterest fingerstache letterpress et 8-bit 3 wolf moon occaecat +1 fixie. Delectus occupy fugiat chillwave, tousled fap sunt Carles four loko Portland tempor single-origin coffee pug Brooklyn. Chillwave deep v meggings mixtape fashion axe mumblecore adipisicing, butcher Austin +1 literally banjo.
</p>

<p>
Delectus seitan fashion axe, four loko pop-up Portland nisi slow-carb YOLO. Cillum sartorial excepteur aliqua before they sold out sriracha. Ut master cleanse wolf, occaecat banh mi gentrify narwhal normcore pickled id nihil. Ethical vinyl fixie, sunt mlkshk trust fund non cillum freegan bicycle rights hella pop-up Williamsburg. Bicycle rights proident assumenda Thundercats, skateboard lo-fi four loko church-key High Life Brooklyn cray dolore kale chips. Literally brunch fanny pack, in authentic pork belly sartorial normcore banh mi +1 Neutra squid pug chillwave Marfa. Laborum jean shorts bicycle rights mixtape, eiusmod ut excepteur.
</p>

<p>
This seems like a good place for an image:
</p>

<p>
<img src="http://dummyimage.com/400x250/333/fff.png" alt="Dummy Image" />
</p>

<p>
Okay, so here's something kind of sort of new.  The figure tags are very useful when displaying
images with figures and captions and what-not.  This paragraph needs to be a little longer,
so here comes some lorum ipsum!  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.
</p>

<figure>
  <img src="http://dummyimage.com/400x250/666/fff.png" alt="Dummy Figure Image" />
  <figcaption>
    This is the figure caption of what we are looking at.  With <a href='#'>a link</a>.
  </figcaption>
</figure>


<p>
The &lt;q&gt; tag is used to define a short quotation: <q cite="http://example.com">do not use me</q>.
</p>

<h3>Blockquotes below</h3>

<blockquote>
The Internet will change the world.
</blockquote>

<blockquote>
Hello, world.
<blockquote>
  I did not say that!
</blockquote>
</blockquote>

<p>Here are some blockquotes with cite tags</p>

<blockquote>
Stuff is Good.
<cite>Some Dude, 2011</cite>
</blockquote>

<p>
This paragraph contains <a href="#" title="Dummy Link">a link</a>, some <em>em text (typically italicized)</em>, and
some <strong>strong test</strong>, typically bolded.  In addition don't forget to style the &lt;abbr&gt; tag: <abbr title="Cascading Style Sheets">CSS</abbr>
tag!  The &lt;sup&gt; tag: 1<sup>st</sup>.  The &lt;sub&gt; tag: M<sub>c</sub>Laughlin.
</p>

<p>
A new tag is the &lt;progress&gt; tag, which shows progress: <progress value="2" max="5">Page 2 of 5</progress>.  Here's another
example: <progress value="76" max="100">76%</progress>.  You can style them based on their <em>value</em> and <em>max</em> attributes.
</p>

<p>
The following content is inside an address tag (most browsers typically render this in italics):
</p>

<address>
<a href="mailto:someone@example.com" title="An Email in an Address">Link to Email</a>
<span>123 Regular Address Lane #A-123, Some City, ST 12345-6789</span>
</address>

<h2>Below this H2 tag is an example of a table</h2>

<h3>Oh, and here is a H3 tag</h3>

<h4>And a H4 Tag right here</h4>

<p>
Here comes a perfectly coded table, with all elements:
</p>

<h5>The table is below this H5 tag</h5>

<table>
<caption>How I feel on different days of the week</caption>
<thead>
  <tr>
    <th>Day of Week</th>
    <th>How I feel</th>
    <th>Score</th>
    <th>Random Number</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Sunday</th>
    <td>Relaxed</td>
    <td>5</td>
    <td>15</td>
  </tr>
  
  <tr>
    <th scope="row">Monday</th>
    <td>Stressed</td>
    <td>1</td>
    <td>123</td>
  </tr>
  
  <tr>
    <th scope="row">Tuesday</th>
    <td>Hyped</td>
    <td>8</td>
    <td>432.3</td>
  </tr>
  
  <tr>
    <th scope="row">Wednesday</th>
    <td>Zoned</td>
    <td>3</td>
    <td>234.2</td>
  </tr>
  
  <tr>
    <th scope="row">Thursday</th>
    <td>Anxious</td>
    <td>4</td>
    <td>8423.3</td>
  </tr>
  
  <tr>
    <th scope="row">Friday</th>
    <td>Stoked</td>
    <td>7</td>
    <td>401.2</td>
  </tr>   

  <tr>
    <th scope="row">Saturday</th>
    <td>Elated</td>
    <td>9</td>
    <td>2340.2</td>
  </tr>   
  
</tbody>
<tfoot>
  <tr>
    <td>That is All</td>
    <td>No more</td>
    <td>Number</td>
    <td>Number</td>
  </tr>
</tfoot>
</table>

<h2>Here comes some code examples under this H2 tag</h2>

<h3>Inline code (this is a h3 tag)</h3>

<p>
It is usually a good idea to use the &lt;code&gt; tag for inline code, like:
<code>this is some code</code>.
There is also the &lt;sampe&gt; tag, which defines sample output (not the same as
code), so you should style it similarly, but perhaps a tiny bit different:
<samp>this is some sample output</samp>.  Also, there is the &lt;kbd&gt; tag for
marking up keyboard input (ie. keystrokes).  Here are some keystrokes:
<kbd>Ctrl</kbd> + 
<kbd>Alt</kbd> +
<kbd></kbd> +
<kbd>Q</kbd>
</p>

<h6>This is just an excuse for me to use the H6 tag in context</h6>

<p>
Final there's the &lt;var&gt; tag.  It's kind of ambiguous, but from best I can
tell, it is used to apply custom markup to a variable inside of a &lt;code&gt; block.
Example:  <code><var>variable</var> = 1234.56</code>.  It is probably a good idea
to style it in normal paragraph context, too: <var>a_variable</var>.
</p>

<h3>Block code H3 Header</h3>

<p>
The above examples describe inline code.  There is also block code, which can be
styled effectively with CSS.  Use the &lt;pre&gt; tag to style that code.  Here is
some basic &lt;pre&gt; tag stuff:
</p>

<pre>
I am the very model of a modern Major-General,
I've information vegetable, animal, and mineral,
I know the kings of England, and I quote the fights historical
From Marathon to Waterloo, in order categorical;
I'm very well acquainted, too, with matters mathematical,
I understand equations, both the simple and quadratical,
About binomial theorem I'm teeming with a lot o' news,
With many cheerful facts about the square of the hypotenuse.

I'm very good at integral and differential calculus;
I know the scientific names of beings animalculous:
In short, in matters vegetable, animal, and mineral,
I am the very model of a modern Major-General.

I know our mythic history, King Arthur's and Sir Caradoc's;
I answer hard acrostics, I've a pretty taste for paradox,
I quote in elegiacs all the crimes of Heliogabalus,
In conics I can floor peculiarities parabolous;
I can tell undoubted Raphaels from Gerard Dows and Zoffanies,
I know the croaking chorus from The Frogs of Aristophanes!
Then I can hum a fugue of which I've heard the music's din afore,
And whistle all the airs from that infernal nonsense Pinafore.
</pre>

<p>
You may want to use the &lt;pre&gt;&lt;code&gt; combination to style
preformatted code separately from regular preformatted text:
</p>

<pre class="code">
//a terrible idea -- breaking the right-click functionality on web sites
var message="Copyright Year by Your Site. WARNING ! All content contained within this site is protected by copyright laws. Unauthorized use of our material is strictly prohibited.";
function click(e) {
if (document.all) {
if (event.button==2||event.button==3) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
</pre>

<h4>The &lt;del&gt; and &lt;ins&gt; tags H4</h4>
<p>
The &lt;del&gt; and &lt;ins&gt; tags are especially useful in preformatted
blocks.  Typically, you want to use a red background for &lt;del&gt; tags, 
and use a green background for &lt;ins&gt; tags.  Below are some preformatted
blocks in a table with two columns, with these tags in use.
</p>

<table>
<caption>Use of DEL and INS tags</caption>
<thead>
  <tr>
    <th>Old</th>
    <th>New</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
      <pre>
abc
def
ghi
lnm
opq
rst
uvw
xyz
      </pre>
    </td>
    <td>
      <pre>
abc
def
<ins>ghi</ins>
jki
<del>lnm</del>
<ins>lmn</ins>
opq
rst
uvw
xyz
      </pre>        
    </td>
  </tr>
</tbody>
</table>

<h3>The definition tag H3</h3>

<p>
Finally there's the definition tag: <dfn title="A jerk who never does anything">Steve</dfn>
Oh, and below is a horizontal rule&hellip;
</p>

<hr />

<p>
The &lt;cite&gt; tag is used to provide citations within HTML, similar to how
you would provide footnotes in printed text.  Here is a citation, in context (mouse over it):
As outlined in
<cite title="McPherson, J. M. (1988). Battle cry of freedom: The Civil War era. New York: Oxford University Press.">
  The Battle Cry of Freedom
</cite>, the Civil War had many complex causes.
</p>

<p>
The &lt;summary&gt; tag is a block-level item, that can be used to provide a summary
for an article or section of your site:
</p>

<details>
<summary>Copyright 1999-2011.</summary>
<p>All pages and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

<hr />

<h2>Let us look at some lists H2</h2>

<h3>Un-ordered lists H3</h3>

<p>Below we shall look at some unordered lists.</p>

<h4>Single layer H4</h4>

<ul>
<li>Oranges</li>
<li>Apples</li>
<li>Carrots</li>
<li>Tomatoes</li>
<li>Spinach</li>
</ul>

<h4>Multi-Layer H4</h4>

<ul>
<li>
  Fruit
  <ul>
    <li>Oranges</li>
    <li>Apples</li>
    <li><dfn title="Yes, it really is a fruit">Tomatoes</dfn></li>
  </ul>
</li>

<li>
  Vegetables
  <ul>
    <li>Carrots</li>
    <li>
      Spinach
      <ul>
        <li>Canned</li>
        <li>Fresh</li>
        <li>Baby</li>
        <li>Frozen</li>
      </ul>
    </li>     
  </ul>
</li>
</ul>

<h3>Same Content with Ordered Lists</h3>

<h4>Single layer H4</h4>

<ol>
<li>Oranges</li>
<li>Apples</li>
<li>Carrots</li>
<li>Tomatoes</li>
<li>Spinach</li>
</ol>

<h4>Multi-Layer H4</h4>

<ol>
<li>
  Fruit
  <ol>
    <li>Oranges</li>
    <li>Apples</li>
    <li><dfn title="Yes, it really is a fruit">Tomatoes</dfn></li>
  </ol>
</li>

<li>
  Vegetables
  <ol>
    <li>Carrots</li>
    <li>
      Spinach
      <ol>
        <li>Canned</li>
        <li>Fresh</li>
        <li>Baby</li>
        <li>Frozen</li>
      </ol>
    </li>     
  </ol>
</li>
</ol>

<h3>Do not forget about definition lists!</h3>

<dl>
<dt>Coffee</dt>
  <dd>Black hot drink</dd>
<dt>Milk</dt>
  <dd>White cold drink</dd>
<dt>Beer</dt>
  <dd>The best drink of all</dd>
</dl>

这个 HTML 文件包含了不同的标签和元素，用于展示网页内容的结构、样式和格式。是一个很好的实例

1. 标题标签 `<h1>` - `<h6>`

文件包含不同级别的标题标签 <h1> 到 <h6>。这些标签用于定义内容的标题和副标题，以区分内容的层次结构。

2. 段落标签 `<p>`

文件中的 <p> 标签定义了多个段落，用于存放文本内容。段落内容主要用于测试各种文本样式、链接、引用、图像等。

3. 链接标签 `<a>`

使用 <a> 标签创建超链接。例如：

<a href="http://www.threestyles.com/tutorials/css-tips-for-better-typography/" title="The ultimate guide to CSS Typography">some sources</a>

链接允许用户点击并跳转到其他页面或资源。

4. 图片标签 `<img>`

<img> 标签用于插入图片。例如：

<img src="http://dummyimage.com/400x250/333/fff.png" alt="Dummy Image" />

通过 src 属性指定图片来源，并通过 alt 属性添加替代文本。

5. 图像与标题 `<figure>` 和 `<figcaption>`

<figure> 和 <figcaption> 标签用于组合图像和标题。<figcaption> 为图像提供说明文字。

6. 引用标签 `<q>` 和 `<blockquote>`

<q> 标签用于短引用，并在文本中呈现为内嵌样式。
<blockquote> 标签用于较长的引用段落，并呈现为独立的块级元素。

7. 表格标签 `<table>`

表格标签包括 <table>、<thead>、<tbody>、<tfoot>、<tr>、<th> 和 <td> 等标签，用于创建表格结构和内容。例如：

<table>
  <caption>How I feel on different days of the week</caption>
  <thead>
    <tr><th>Day of Week</th><th>How I feel</th></tr>
  </thead>
  ...
</table>

此表格展示了每周不同日子的情感分数。

8. 代码标签 `<code>`、`<samp>` 和 `<kbd>`

<code> 标签用于显示代码片段。
<samp> 标签用于展示样例输出。
<kbd> 标签用于展示键盘输入，通常用于指引用户按下特定按键组合。

9. 列表标签 `<ul>`、`<ol>` 和 `<dl>`

无序列表 <ul> 和有序列表 <ol> 展示了单层和多层的列表结构。
定义列表 <dl> 展示了词汇定义的列表，使用 <dt> 定义术语，<dd> 描述定义内容。

10. 定义标签 `<dfn>`

<dfn> 标签用于标识词汇定义，例如：

<dfn title="A jerk who never does anything">Steve</dfn>

11. 地址标签 `<address>`

<address> 标签用于定义地址信息。通常在页面中显示联系信息，例如电子邮件和物理地址。

12. 进度条标签 `<progress>`

<progress> 标签用于展示进度。例如：

<progress value="76" max="100">76%</progress>

进度条展示任务或加载进度。

13. 表单元素 `<del>` 和 `<ins>`

<del> 标签表示删除的内容，<ins> 标签表示新增的内容。通常用于标记文本的更改内容。

14. 其他标签 `<hr>`、`<summary>`、`<details>`

<hr> 创建水平线，用于分割内容。
<summary> 和 <details> 用于创建可展开/收起的内容，以便展示详细信息。

总结

该文件的 HTML 标签用于展示网页中常见的元素和内容结构，包括标题、段落、链接、图像、引用、表格、列表和表单等，帮助用户掌握 HTML 基本结构和标签的应用。

HTML语言简单的总结及样例分析 | 豆包MarsCode AI刷题

什么是 HTML？

超文本

标记

元素

元素的组成

元素的嵌套

这个 HTML 文件包含了不同的标签和元素，用于展示网页内容的结构、样式和格式。是一个很好的实例

1. 标题标签 <h1> - <h6>

2. 段落标签 <p>

3. 链接标签 <a>

4. 图片标签 <img>

5. 图像与标题 <figure> 和 <figcaption>

6. 引用标签 <q> 和 <blockquote>

7. 表格标签 <table>

8. 代码标签 <code>、<samp> 和 <kbd>

9. 列表标签 <ul>、<ol> 和 <dl>

10. 定义标签 <dfn>

11. 地址标签 <address>

12. 进度条标签 <progress>

13. 表单元素 <del> 和 <ins>

14. 其他标签 <hr>、<summary>、<details>

总结