HTML

HTML

目录

• HTML
  • 1.HTML是什么
    • • 1) 超文本
      • 2) 标记语言
      • 总结
  • 2.HTML元素
    • 2.1.块级元素
    • 2.2.内联元素
    • 2.3.内联块级元素
    • 2.4.表单元素
    • 2.5.表格元素
  • 3.HTML5新元素
    • 1. 语义化元素
    • 2. 表单控件
    • 3. 多媒体元素
    • 4. 图形元素
  • 4.HTML中的语义化符号
    • 1. <header>
    • 2. <footer>
    • 3. <article>
    • 4. <section>
    • 5. <aside>
    • 6. <nav>
    • 7. <main>
    • 8. <figure> 和 <figcaption>

1.HTML是什么

HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。

使用 HTML 编写的文件称为“HTML 文档”，一般后缀为.html（也可以使用.htm，不过比较少见）。HTML 文档是一种纯文本文件，您可以使用 Windows 记事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本编辑来打开或者创建。

每个网页都是一个 HTML 文档，使用浏览器访问一个链接（URL），实际上就是下载、解析和显示 HTML 文档的过程。将众多 HTML 文档放在一个文件夹中，然后提供对外访问权限，就构成了一个网站

首先，HTML 不是编程语言，没有逻辑处理能力，没有计算能力，不能动态地生成内容，而只能静态地展示网页信息。

我们从 HTML 中文全称来分析一下它的本质：

1) 超文本

也即超越纯文本，这意味着 HTML 文档不仅能包含文本（文字），还能包含图片、音视频、表格、列表、链接、按钮、输入框等高级内容。

超链接是互联网的纽带，它能将众多网页连接起来，让它们交织在一起，形成一张“网”。没有超链接，就没有互联网。

2) 标记语言

HTML 是一种计算机语言，但它不能编程，只能用来标记网页中的内容。HTML 通过不同的标签来标记不同的内容、格式、布局等，例如：

• 标签表示一张图片；

• 标签表示一个链接；

• 标签表示一个表格；

• 标签表示一个输入框；

• 标签表示一段文本；

• 标签表示文本加粗效果；

• 标签表示块级布局。

本文最后给出的示例中演示了 HTML 标签的用法，您也可以转到《HTML标签与元素》学习 HTML 标签的具体语法格式。

总结

HTML 是一种用来开发网页的计算机语言，它通过标签（标记式指令）将文本、音视频、图片、表格、按钮、输入框等内容显示出来。也就是说，HTML 是用来给网页内容进行排版和布局的。

2.HTML元素

2.1.块级元素

HTML中的块级元素（Block-level elements）通常用于以块的形式布局网页，它们通常会占据其父元素的全部宽度（默认行为，可以通过CSS修改），并且在其前后通常会添加换行符（即它们通常会在其前后显示“空白”或新的行）。以下是一些常见的HTML块级元素及其示例：

1. <div> - 这是一个非常通用的容器元素，用于组织或包裹其他HTML元素。它不自带任何特定的样式或语义。

   html复制代码
   
   <div>这是一个div元素，它是块级元素。</div>
   

2. <p> - 段落元素，用于定义文本的一个段落。

   html复制代码
   
   <p>这是一个段落。</p>
   

3. <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - 这些是标题元素，<h1> 是最高级别的标题，<h6> 是最低级别的标题。

   <h1>这是一个主标题</h1>  
   <h2>这是一个二级标题</h2>
   

4. <ol> - 有序列表元素，用于创建一个有序列表。

   <ol>  
     <li>第一项</li>  
     <li>第二项</li>  
   </ol>
   

5. <ul> - 无序列表元素，用于创建一个无序列表。

   <ul>  
     <li>列表项一</li>  
     <li>列表项二</li>  
   </ul>
   

6. <li> - 列表项元素，通常包含在<ol>或<ul>元素中。

   <ul>  
     <li>苹果</li>  
     <li>香蕉</li>  
   </ul>
   

7. <header> - 表示页面或页面某个区域的头部/标题部分。

   <header>  
     <h1>我的网站</h1>  
   </header>
   

8. <footer> - 表示页面或页面某个区域的页脚部分，通常包含版权信息、作者信息等。

   <footer>  
     © 2023 我的网站  
   </footer>
   

9. <article> - 表示一个独立的、可复用的内容块，如博客帖子或新闻文章。

   <article>  
     <h2>文章标题</h2>  
     <p>这里是文章内容...</p>  
   </article>
   

10. <section> - 表示文档中的一个区段（或节），通常用于将文档分割成逻辑部分。

    <section>  
      <h2>章节标题</h2>  
      <p>这里是章节内容...</p>  
    </section>
    

11. <nav> - 表示导航链接的集合。

    <nav>  
      <ul>  
        <li><a href="#">首页</a></li>  
        <li><a href="#">关于我们</a></li>  
      </ul>  
    </nav>
    

12. <aside> - 表示与页面其余部分稍微独立的内容，如侧边栏。

    <aside>  
      <h2>侧边栏标题</h2>  
      <p>这里是侧边栏内容...</p>  
    </aside>
    

13. <main> - 表示文档的主要内容。一个文档应该只有一个<main>元素。

    <main>  
      <h1>主要内容标题</h1>  
      <p>这里是主要内容...</p>  
    </main>
    

14. <blockquote> - 表示从另一个源引用的长文本。

    <blockquote>  
      这是一个引用...  
    </blockquote>
    

15. <address> - 表示文档或文章的联系信息（如作者、电子邮件地址等）。

    <address>  
      联系信息: <a href="mailto:example@example.com">example@example.com</a>  
    </address>
    

请注意，随着HTML5的引入，许多新的块级元素被添加，同时一些旧元素（如<center>和<font>）由于它们的不推荐或过时状态，现在不建议使用。

2.2.内联元素

HTML中的内联元素（Inline elements）通常不会以新行开始，也不会在其前后添加任何额外的空白（除了元素内部的内容所包含的空白），而是与周围的文本内容位于同一行内。它们主要用于文本内容的内部，用于控制文本的样式或添加链接等。以下是一些常见的HTML内联元素及其示例：

1. <span> - 这是一个非常通用的内联容器元素，用于对文档中的小块内容应用样式。它本身不带有任何特定的样式或语义。

   html复制代码
   
   <p>这是一段<span style="color: red;">红色</span>文本。</p>
   

2. <a> - 超链接元素，用于创建到另一个页面、文件、邮箱地址、位置或同一页面内某个元素的链接。

   html复制代码
   
   <a href="https://www.example.com">访问Example.com</a>
   

3. <img> - 图像元素，尽管<img>是内联元素，但它主要用于在文档中嵌入图像。它本身不包含结束标签，而是通过src属性指定图像文件的路径。

   html复制代码
   
   <img src="example.jpg" alt="示例图片">
   

4. <strong> - 表示文本内容的重要性，通常显示为加粗文本。

   html复制代码
   
   <p>这是一段包含<strong>重要信息</strong>的文本。</p>
   

5. <em> - 表示文本内容的强调，通常显示为斜体文本。

   html复制代码
   
   <p>这是一段包含<em>强调文本</em>的文本。</p>
   

6. <br> - 换行元素，用于在文本中插入一个简单的换行，而不是开始一个新段落。<br>是一个空元素，意味着它不需要结束标签。

   html复制代码
   
   <p>第一行。<br>第二行。</p>
   

7. <code> - 表示计算机代码文本。浏览器通常会以等宽字体显示<code>元素中的内容。

   html复制代码
   
   <p>这是一个示例代码：<code>var x = 5;</code></p>
   

8. <u> - 下划线元素，用于给文本添加下划线。尽管<u>元素存在，但通常推荐使用<ins>（表示插入的文本）或CSS样式来替代，因为<u>的原始意图是表示非文本装饰的下划线，这可能导致语义上的混淆。

   html复制代码
   
   <p>这是<u>下划线</u>文本。</p>
   

9. <ins> - 表示文档中被插入的文本。大多数浏览器默认将其显示为带有下划线的文本。

   html复制代码
   
   <p>这是<ins>新插入的</ins>文本。</p>
   

10. <del> - 表示文档中被删除的文本。大多数浏览器默认将其显示为带有删除线的文本。

    html复制代码
    
    <p>这是<del>已删除的</del>文本。</p>
    

11. <q> - 短引用元素，用于包含短的引用或引述。浏览器可能会以引号包围<q>元素中的内容，但具体的表现取决于浏览器的样式表。

    html复制代码
    
    <p>他说：<q>这是一个很好的例子。</q></p>
    

12. <sub> - 下标元素，用于表示下标文本，如化学公式中的下标。

    html复制代码
    
    <p>水的化学式是H<sub>2</sub>O。</p>
    

13. <sup> - 上标元素，用于表示上标文本，如平方、立方或脚注。

    html复制代码
    
    <p>2的<sup>3</sup>次方是8。</p>
    

14. <label> - 通常与表单控件（如<input>）一起使用，定义<input>元素的标签。尽管<label>主要用于表单，但它也可以被视为一种内联元素，因为它不会导致文本换行。

    <label for="username">用户名:</label>  
    <input type="text" id="username">
    

请注意，<label>通常与表单控件相关联，并且其行为在某些方面可能更接近于“辅助”元素，但它在文档流中确实表现为内联元素。此外，随着HTML5的引入，虽然一些新的元素被添加到HTML中，但大多数新增的元素要么属于块级元素，要么不直接属于内联元素的范畴（如语义化元素）。

2.3.内联块级元素

HTML中没有直接被称为“内联块级元素”的术语。然而，有一些元素可以通过CSS被设置为表现为类似内联（inline）和块级（block）元素的混合体，即它们可以像内联元素一样不会造成文本换行，但又可以像块级元素一样设置宽度和高度等样式。这类元素在默认情况下可能是内联元素，但通过CSS的display: inline-block;属性可以改变其表现。

虽然HTML本身没有直接定义这样的元素类型，但以下是一些常见的内联元素，以及它们如何通过CSS的display: inline-block;属性被用作“内联块级元素”的示例：

1. <span> - 默认情况下是内联元素，用于对文档中的小块内容应用样式。当display属性被设置为inline-block时，它可以具有宽度和高度。

   html复制代码
   
   <span style="display: inline-block; width: 100px; height: 50px; background-color: lightblue;">内联块级元素</span>
   

2. <img> - 尽管<img>本身是内联元素，用于在文档中嵌入图像，但它通常会被浏览器当作特殊处理的元素，允许你设置宽度和高度等样式。不过，<img>不是通过display: inline-block;来获得这些属性的，但它可以作为“内联块级”行为的一个例子，因为它可以影响周围的布局而不需要换行。

   html复制代码
   
   <img src="example.jpg" alt="示例图片" style="width: 100px; height: 100px;">
   

3. <a> - 超链接元素，默认情况下是内联元素。通过设置display: inline-block;，<a>元素可以拥有宽度和高度，从而像块级元素一样布局。

   html复制代码
   
   <a href="#" style="display: inline-block; width: 150px; height: 50px; background-color: lightgreen; text-align: center; line-height: 50px;">点击我</a>
   

4. <button> - 在HTML5中，<button>元素是块级元素还是内联元素取决于上下文，但在大多数情况下，它表现得像内联元素（尤其是在表单中）。然而，通过CSS，你可以轻松地将其设置为display: inline-block;来拥有更多的布局灵活性。

   html复制代码
   
   <button style="display: inline-block; width: 100px; height: 50px;">按钮</button>
   

需要注意的是，<button>在默认情况下并不总是内联元素的行为，但它可以很容易地通过CSS调整为inline-block来模仿这种混合行为。

另外，值得注意的是，没有HTML元素默认就是“内联块级”的；这是通过CSS的display属性来控制的。通过将display设置为inline-block，你可以让任何内联元素表现得像内联块级元素一样。

2.4.表单元素

HTML表单元素是用于收集用户输入的数据的HTML标签。这些元素可以创建文本字段、密码字段、单选按钮、复选框、下拉列表、提交按钮等。以下是一些常见的HTML表单元素及其示例：

1. <form> - 表单容器元素，用于收集用户输入的数据。它包含其他表单元素，如输入框、选择框等，并将这些数据提交到服务器。

   <form action="/submit-form" method="post">  
     <!-- 表单元素 -->  
   </form>
   

2. <input> - 输入元素，是最常用的表单元素之一。它可以根据type属性的不同而具有不同的行为。

   • 文本字段：

     html复制代码
     
     <input type="text" name="username" placeholder="用户名">
     

   • 密码字段：

     html复制代码
     
     <input type="password" name="password" placeholder="密码">
     

   • 提交按钮：

     html复制代码
     
     <input type="submit" value="提交">
     

   • 单选按钮：

     <input type="radio" name="gender" value="male"> 男  
     <input type="radio" name="gender" value="female"> 女
     

   • 复选框：

     <input type="checkbox" name="interest" value="sports"> 体育  
     <input type="checkbox" name="interest" value="music"> 音乐
     

3. <textarea> - 多行文本输入元素，允许用户输入任意数量的文本。

   html复制代码
   
   <textarea name="message" rows="10" cols="30" placeholder="在此输入消息..."></textarea>
   

4. <button> - 按钮元素，可以用于提交表单、重置表单或作为一般的点击按钮。

   • 提交按钮：

     html复制代码
     
     <button type="submit">提交</button>
     

   • 重置按钮：

     html复制代码
     
     <button type="reset">重置</button>
     

   • 普通按钮（不直接关联表单提交）：

     html复制代码
     
     <button type="button">点击我</button>
     

5. <select> - 下拉选择菜单元素，允许用户从预定义选项中选择一个或多个值。

   • 单选下拉列表：

     <select name="country">  
       <option value="china">中国</option>  
       <option value="usa">美国</option>  
     </select>
     

   • 多选下拉列表（添加

     multiple
     

     属性）：

     <select name="hobbies" multiple>  
       <option value="reading">阅读</option>  
       <option value="swimming">游泳</option>  
       <option value="coding">编程</option>  
     </select>
     

6. <label> - 标签元素，用于定义<input>、<select>、<textarea>等表单控件的标签。它改善了用户体验，因为点击标签时，相关的表单控件也会获得焦点。

   <label for="email">电子邮件:</label>  
   <input type="email" id="email" name="email">
   

7. <fieldset> - 对表单中的相关元素进行分组。它通常与<legend>元素一起使用，以提供组的标题。

   <fieldset>  
     <legend>个人信息</legend>  
     <input type="text" name="firstname" placeholder="名">  
     <input type="text" name="lastname" placeholder="姓">  
   </fieldset>
   

这些元素共同构成了HTML表单的基础，允许开发者收集和处理用户输入的数据。

2.5.表格元素

HTML中用于创建表格的元素主要有几个关键部分：<table>、<tr>、<th>、<td>，以及一些可选的元素如<thead>、<tbody>、<tfoot>、<caption>等，用于增强表格的结构和可读性。以下是这些元素及其示例：

基本表格元素

1. <table> - 定义一个表格。所有表格内容（如行、单元格、标题等）都包含在这个元素内。

   <table>  
     <!-- 表格内容 -->  
   </table>
   

2. <tr> - 定义表格中的一行。

   <table>  
     <tr>  
       <!-- 行内容 -->  
     </tr>  
   </table>
   

3. <th> - 定义表格的表头单元格。通常，<th> 元素内的文本会加粗并居中显示。

   <table>  
     <tr>  
       <th>姓名</th>  
       <th>年龄</th>  
     </tr>  
   </table>
   

4. <td> - 定义表格的标准单元格。用于存放数据。

   <table>  
     <tr>  
       <td>张三</td>  
       <td>30</td>  
     </tr>  
   </table>
   

可选表格元素

1. <thead> - 定义表格的头部。它包含<tr>元素，这些<tr>元素又包含表格的表头（<th>）。<thead> 元素有助于使用CSS对表格的头部进行样式设置。

   <table>  
     <thead>  
       <tr>  
         <th>姓名</th>  
         <th>年龄</th>  
       </tr>  
     </thead>  
     <tbody>  
       <!-- 数据行 -->  
     </tbody>  
   </table>
   

2. <tbody> - 定义表格的主体部分，包含表格的数据行（<tr>）。<tbody> 元素有助于使用CSS对表格的主体进行样式设置，并且在使用JavaScript时，可以更容易地引用表格的数据部分。

   <table>  
     <thead>  
       <!-- 表头 -->  
     </thead>  
     <tbody>  
       <tr>  
         <td>张三</td>  
         <td>30</td>  
       </tr>  
       <!-- 更多数据行 -->  
     </tbody>  
   </table>
   

3. <tfoot> - 定义表格的页脚。它通常包含表格的汇总行或注释性文本。<tfoot> 元素应该位于<tbody>元素之后，但在所有<tr>元素之前（包括<tbody>、<thead>或<tr>），以确保在打印时<tfoot>出现在表格的底部。

   <table>  
     <thead>  
       <!-- 表头 -->  
     </thead>  
     <tbody>  
       <!-- 数据行 -->  
     </tbody>  
     <tfoot>  
       <tr>  
         <td colspan="2">总计: ...</td>  
       </tr>  
     </tfoot>  
   </table>
   

4. <caption> - 定义表格的标题。<caption> 元素应该紧跟在<table>标签之后，并且只能作为<table>的直接子元素出现。

   <table>  
     <caption>员工信息表</caption>  
     <thead>  
       <!-- 表头 -->  
     </thead>  
     <tbody>  
       <!-- 数据行 -->  
     </tbody>  
   </table>
   

请注意，<caption>、<thead>、<tbody>和<tfoot>元素是可选的，但它们可以帮助提高表格的可读性和可维护性，特别是在处理大型表格或需要对表格的不同部分进行样式设置时。此外，<th>元素不仅限于<thead>中，它也可以用于<tbody>中的行，以标记该行中的关键数据列。

3.HTML5新元素

HTML5 引入了许多新的元素，这些元素旨在提供更丰富的语义化标记，支持多媒体内容，以及改善表单控件等。下面是一些 HTML5 中新添加的重要元素及其示例：

1. 语义化元素

<article> - 定义独立的、可复用的内容块，如博客帖子或新闻文章。

<article>  
  <h1>文章标题</h1>  
  <p>这里是文章内容...</p>  
</article>

<aside> - 定义与页面内容稍微独立的内容，如侧边栏、广告、导航链接组等。

<aside>  
  <h2>相关链接</h2>  
  <ul>  
    <li><a href="#">链接一</a></li>  
    <li><a href="#">链接二</a></li>  
  </ul>  
</aside>

<footer> - 定义文档或节的页脚，通常包含版权信息、作者信息、链接到条款和条件等。

<footer>  
  <p>版权所有 &copy; 2023 示例公司</p>  
</footer>

<header> - 定义文档或节的页眉，通常包含介绍性内容或导航链接。

<header>  
  <h1>我的网站</h1>  
  <nav>  
    <ul>  
      <li><a href="#">首页</a></li>  
      <li><a href="#">关于</a></li>  
    </ul>  
  </nav>  
</header>

<nav> - 定义导航链接的容器。

（已在上面的 <header> 示例中展示）

<section> - 定义文档中的一个区域（或节），比如章节、页眉、页脚或文档中的其他部分。

<section>  
  <h2>章节一</h2>  
  <p>这里是章节一的内容...</p>  
</section>

2. 表单控件

<datalist> - 定义了一组预定义选项，供其他输入元素（如 <input>）使用。

<input list="browsers" name="browser">  
<datalist id="browsers">  
  <option value="Internet Explorer">  
  <option value="Firefox">  
  <option value="Chrome">  
  <option value="Opera">  
  <option value="Safari">  
</datalist>

<output> - 用于不同类型的输出，比如脚本的输出。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">  
  <input type="number" id="a" value="50"> +  
  <input type="number" id="b" value="50"> =  
  <output name="x" for="a b"></output>  
</form>

3. 多媒体元素

<audio controls>  
  <source src="audiofile.mp3" type="audio/mpeg">  
  您的浏览器不支持 audio 元素。  
</audio>

<video width="320" height="240" controls>  
  <source src="movie.mp4" type="video/mp4">  
  您的浏览器不支持 video 元素。  
</video>

4. 图形元素

<canvas> - 用于通过 JavaScript 绘制图形，如图表、游戏图形或任何视觉图像。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">  
  您的浏览器不支持 HTML5 canvas 标签。  
</canvas>  
  
<script>  
  var canvas = document.getElementById("myCanvas");  
  var ctx = canvas.getContext("2d");  
  ctx.fillStyle = "#FF0000";  
  ctx.fillRect(0, 0, 150, 75);  
</script>

4.HTML中的语义化符号

HTML（HyperText Markup Language）的语义化元素是指那些能够明确表达其内容和结构含义的HTML标签。使用语义化元素有助于提升网页的可访问性、搜索引擎优化（SEO）以及让网页内容更加清晰易懂。下面列举了一些常见的HTML语义化元素及其示例与用法：

1. <header>

• 用途：定义页面或页面内某个区域的头部（标题、导航等）。

• 示例：

  <header>  
    <h1>我的网站标题</h1>  
    <nav>  
      <ul>  
        <li><a href="/">首页</a></li>  
        <li><a href="/about">关于我们</a></li>  
        <li><a href="/contact">联系我们</a></li>  
      </ul>  
    </nav>  
  </header>
  

2. <footer>

• 用途：定义页面或页面内某个区域的底部。通常包含版权信息、联系方式等。

• 示例：

  <footer>  
    <p>版权所有 &copy; 2023 我的网站. 保留所有权利。</p>  
  </footer>
  

3. <article>

• 用途：定义独立的、可复用的内容区块，比如博客帖子、新闻文章等。

• 示例：

  <article>  
    <h2>文章标题</h2>  
    <p>这里是文章的内容...</p>  
  </article>
  

4. <section>

• 用途：定义文档中的一个区域（或节），通常用于对文档内容或应用中的页面进行分段。

• 示例：

  <section>  
    <h2>章节标题</h2>  
    <p>这里是章节的内容...</p>  
  </section>
  

5. <aside>

• 用途：定义与页面内容稍微独立的部分，如侧边栏、广告、友情链接等。

• 示例：

  <aside>  
    <h2>相关链接</h2>  
    <ul>  
      <li><a href="/related1">相关文章1</a></li>  
      <li><a href="/related2">相关文章2</a></li>  
    </ul>  
  </aside>
  

6. <nav>

• 用途：定义导航链接的容器。
• 示例：已在<header>示例中展示。

7. <main>

• 用途：定义文档的主要内容。一个页面应该只有一个<main>元素。

• 示例：

  <main>  
    <article>  
      <h1>主文章标题</h1>  
      <p>这里是主文章的内容...</p>  
    </article>  
  </main>
  

8. <figure> 和 <figcaption>

• 用途：<figure>用于表示独立的流内容（如图表、照片、代码等），<figcaption>为<figure>元素提供标题。

• 示例：

  <figure>  
    <img src="image.jpg" alt="示例图片">  
    <figcaption>示例图片的标题</figcaption>  
  </figure>
  

使用这些语义化元素可以帮助你构建更加清晰、结构化的网页，并提升用户体验和SEO效果。