菜单 搜索
首页 前端知识 HTML标签简明通俗教程

HTML标签简明通俗教程

2024-08-21 22:08:08 前端知识 前端哥 573 915 我要收藏

HTML标签简明通俗教程

基本知识

HTML：是超文本标记语言（Hyper Text Markup Language）的缩写，它是用于创建网页的标准标记语言。标签是构成HTML文档的基本单位。

【HTML中的标签（tag）和元素（element）

“标签”（tag）和“元素”（element）在一些语境中会被混淆或交替使用，但它们确实有不同的含义。标签是元素的一部分，但元素不仅仅是标签。

标签是构成HTML文档的基本单位，它们用尖括号包围。一个标签可以是开标签、闭标签或自闭合标签。

开标签：如 <p>，表示开始一个段落（paragraph）。

闭标签：如 </p>，表示段落的结束。

自闭合标签：如 <br /> 或 <img />，表示一个独立的元素，没有结束标签。

元素包括开始标签、结束标签（如果有的话）、属性、内容和其他元素。

例如：

<a href="https://example.com">点击这里</a>

在这个例子中：

<a> 和 </a> 是标签

整个 <a href="https://example.com">点击这里</a> 是一个元素，包括了开始标签、属性（href）、内容（"点击这里"）和结束标签。

可以总结为：

标签是构成元素的标记。标签是元素的一部分，但元素不仅仅是标签。】

HTML标签的类型

1.单标签是一个标签即可完整描述某个功能的标签

格式：

<标签名/>

/可以省略

常见的单标签包括 <br/>、<img/>、<hr/> 等。在 HTML5 中，单标签的结束斜杠（/）可以省略，例如 <br>、<img> 等都是有效的。

2.双标签

双标签即可以和结束的标签组成的标签，基本格式

<标签名>内容</标签名>

<标签名>为开始标签，</标签名>为结束标签

例如：<div>内容</div>、<p>段落</p> 等。

HTML标签书写规则

1.HTML标签不区分大小写，推荐使用小写。

2.允许属性值不使用引号包起来：虽然在大多数情况下可以不使用引号，但最好还是使用引号，尤其是当值包含空格或特殊字符时。

3. 注释标签

<!--注释语句-->

常用标签及示例：

<!DOCTYPE html> <!-- 告诉浏览器使用规范-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--  title标签：网页名字-->
  <title>网页名字</title>
</head>
<body>
    <!--标题标签-->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <!--段落标签-->
    <p>段落A</p>
    <p>段落B</p>
    <!--换行标签-->
    本句后换行显示<br>    本句后换行显示<br>
    <!--水平线标签-->
    <hr>
    <!--粗体、斜体-->
    粗体：<strong>你好</strong>
    <br>
    斜体：<em>你好</em>
    <br>
    <!--特殊符号：空格：&nbsp; 大于号：&gt 小于号：&lt; -->
    在“||”内显示2个空格|&nbsp;&nbsp;| <br>
    大于号：&gt;<br>
    小于号：&lt; <br>
    <!--水平线标签-->
    <hr>
    <!--格式： <img src="图像的路径" alt="描述性文本">-->
    <img src="小花.png" alt="小花图片">

</body>
</html>

运行效果如下：

图像标签说明

HTML图像标签格式

<img src="图像的路径" alt="描述性文本">

其中：

src（必需）：指定图像的路径（图像地址）。这个路径可以是相对路径（相对于当前HTML页面的位置），也可以是绝对路径（完整的URL）。

alt（非必需）：为图像提供替代文本。当图像无法显示时（如网络问题、图像文件损坏、用户使用了屏幕阅读器等），浏览器将显示这个替代文本。

还有

width和height（非必需）

width设置图像的宽度，height设置图像的高度，可以用像素（px）或百分比（%）为单位。

class 和 id（非必需）

用于应用 CSS 样式或通过 JavaScript 进行操作。

等

超链接标签格式

<a href="链接地址"  target="打开方式">链接显示的文本或图像</a>

其中：

href属性（必需）：用于指定链接的目标地址，可以是另一个网页的URL、网站内部的页面地址、文件下载地址、电子邮件地址（mailto:），或者是一个锚点（用于页面内的跳转）。例如：<a href="https://www.baidu.com>百度一下</a>

当你想让用户能够通过点击链接来发送电子邮件时，你可以将 <a> 标签的 href 属性设置为 mailto: 后跟电子邮件地址。例如：

<a href="mailto:someone@example.com">发送邮件给某人</a>

<a> 标签也可以用作页面内的锚点，允许用户点击链接后跳转到同一页面的特定部分。这通过给目标元素（通常是 <h1>、<h2>、<p> 等）设置一个 id 属性，并在 <a> 标签的 href 属性中使用 # 后跟该 id 值来实现。例如：

<!-- 目标位置 --> 

<h2 id="section1">第一节</h2>  

<!-- 链接到页面内的锚点 --> 

<a href="#section1">跳转到第一节</a>

target属性（非必需）：用于指定链接的打开方式。常用的值包括_self（在当前窗口打开，默认值）、_blank（在新窗口或新标签页中打开）、_parent（在父框架中打开）、_top（在整个浏览器窗口中打开，忽略任何框架）。

<a> 标签也可以用于创建指向电子邮件地址的链接。

超链接标签示例：

<!DOCTYPE html>  
<html>  
<head>  
    <title>示例</title>  
</head>  
<body>  
  <h3>超链接</h3>  
  <p>点击下面的链接访问百度：</p>  
  <a href="https://www.baidu.com/">访问百度一下</a>
  
  <h3>页面内链接示</h3>
  <a href="#section2">跳转到第二部分</a>  
  <p>这是第一部分的内容...</p>    
  <p>第一部分的1...</p> 
  <p>第一部分的2...</p> 
  <p>第一部分的3...</p> 
  <p>第一部分的4...</p> 
  <p>第一部分的5...</p> 
  <p>第一部分的6...</p> 
  <p>第一部分的7...</p> 
  <p>第一部分的8...</p> 
  <p>第一部分的9...</p> 
  <p>第一部分的10...</p> 
  <p>第一部分的11...</p> 
  <p>第一部分的12...</p> 
  <p>第一部分的13...</p> 
  <p>第一部分的14...</p> 
  <p>第一部分的15...</p> 
  <p>第一部分的16...</p> 
  <p>第一部分的17...</p> 
  <p>第一部分的18...</p> 
  <p>第一部分的19...</p> 
  <p>第一部分的20...</p> 
  <p>第一部分的21...</p> 
  <p>第一部分的22...</p> 
  <h3 id="section2">第二部分</h3>  
  <p>这是第二部分的内容...</p> 
  <p>这是第二部分的内容...</p>   
</body>  
</html>

输入和文本域标签

在 HTML 中，输入（标签是 <input>）和文本域（标签是<textarea>）是表单的基本元素，用于接受用户输入数据。

<input> 标签用于创建各种类型的输入字段（也称为输入控件），如文本框、密码框、单选按钮、复选框等。输入（Input）标签基本格式：

<input type="type_of_input" name="name_of_input" value="initial_value" placeholder="placeholder_text" />

其中

type属性定义输入字段（Input Fields）类型，常见值：

text：文本输入框

password：密码输入框

email：电子邮件地址输入框

number：数字输入框

radio：单选按钮

checkbox：复选框

submit：提交按钮

button：普通按钮

file：文件上传

date：日期选择器

submit：提交按钮

reset：重置按钮

相关属性

name属性定义输入字段的名称，，每个输入字段都会通过其 name 属性来识别。

value 属性通常定义输入字段的初始值。

placeholde属性提供了一个灰色、弱化的提示文本，它在用户开始输入之前显示在输入字段中。当用户开始输入时，提示文本会消失。这对于提示用户输入格式或内容非常有用。

<textarea> 标签用于创建多行的文本输入框，适合用于较长的文本输入，这些字符会按用户输入的方式（包括换行）进行显示。<textarea> 标签的基本格式：

<textarea 

  name="name_of_textarea"  <!-- 文本区域的名称，用于提交表单时识别数据 --> 

  rows="number_of_rows"    <!-- 文本区域的可见行数 --> 

  cols="number_of_columns" <!-- 文本区域的可见列数（字符宽度），但现代浏览器大多会忽略此值，转而使用 CSS 来控制宽度 --> 

  placeholder="placeholder_text" <!-- 占位符文本，在用户输入前显示 --> 

  // 其他可能的属性... 

> 初始文本内容（可选）</textarea>

输入和文本域标签示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Examples</title>
</head>
<body>
    <h1>Input&Textarea Examples</h1>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" placeholder="Enter your username" required>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" placeholder="Enter your password" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" required>
        <br>
        <label for="age">Age:</label>
        <input type="number" id="age" name="age" min="1" max="120">
        <br>
        <label for="gender">Gender:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">Male</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label>
        <br>
        <label for="newsletter">Subscribe to newsletter:</label>
        <input type="checkbox" id="newsletter" name="newsletter">
        <br>
        <label for="file">Upload File:</label>
        <input type="file" id="file" name="file">
        <br>
        <label for="comments">Comments:</label>
        <br>
        <textarea id="comments" name="comments" rows="4" cols="50" placeholder="Enter your comments here" required></textarea>
        <br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

下拉列表

<select> 标签用于创建下拉列表。可让用户可以从一个预定义的选项中选择一个或多个值。<select>标签内部包含一系列的<option>标签，每个<option>标签定义了一个可供选择的选项。

基本结构

<select name="dropdown" id="dropdown">

    <option value="option1">选项1</option>

    <option value="option2" selected>选项2</option>

    <option value="option3">选项3</option>

</select>

其中：

<option>标签之间的文本（如“选项 1”）是用户在下拉列表中看到的选项文本。

属性

name：定义下拉列表的名称，用于提交表单时的参数名称。

id：定义下拉列表的唯一标识符，常用于 JavaScript 和 CSS 选择器。

multiple：允许用户选择多个选项（默认为单选模式）。

size：定义下拉列表的可见选项数（如果 multiple 属性存在）。

value：指定选项的值，提交表单时传递。

selected：指定默认选中的选项。

disabled：使选项不可选。

下拉列表示例：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例</title>  
</head>  
<body>  
  <p>下拉框
    <select name="列表名称">
        <option value="选择项">中国</option>
        <option value="选择项" selected>美国</option>
       <option value="选择项">英国</option>
    </select>
 </p>

</body>  
</html>

自定义按钮

使用<button>或<input type="button">标签创建基础按钮。

<button> 标签是 HTML 中用于创建按钮的元素。它的基本格式如下：

<button type="button|submit|reset" [name="buttonName"] [disabled] [onclick] >按钮文本</button>

其中

type 属性指定按钮的类型。默认值是 submit。

    type="button"：普通按钮，点击时不会提交表单。

    type="submit"：提交按钮，点击时会提交表单数据。

    type="reset"：重置按钮，点击时会重置表单中的所有控件到初始值。

name 属性定义按钮的名称（用于表单提交时），可选。

disabled 属性是一个布尔属性，当存在时，按钮将被禁用，用户无法与之交互。

onclick：绑定 JavaScript 事件处理程序，在按钮被点击时执行。

使用<button>标签创建按钮

a.基本按钮:

<button>点击我</button>

b.带有类型的按钮:

<button type="button">普通按钮</button>

<button type="submit">提交按钮</button>

<button type="reset">重置按钮</button>

c.带有图标的按钮:

<button>

    <img src="icon.png" alt="图标"> 带图标的按钮

</button>

d.使用CSS样式的按钮:

<button style="background-color: #4CAF50; color: white; padding: 10px 20px;">

    绿色按钮

</button>

e.带有onclick事件的按钮:

<button οnclick="alert('按钮被点击了！')">点击我</button>

使用input标签创建按钮:

<input type="button" value="输入按钮">

<input type="submit" value="提交">

<input type="reset" value="重置">

下面提供一个完整的HTML页面示例，展示如何使用<button>和<input>标签创建不同类型的按钮，并附带简单的JavaScript交互。源码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML按钮示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }
        h1 {
            color: #333;
        }
        .button-group {
            margin-bottom: 20px;
        }
        button, input[type="button"], input[type="submit"], input[type="reset"] {
            margin: 5px;
            padding: 10px 15px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>HTML按钮示例</h1>

    <div class="button-group">
        <h2>使用 &lt;button&gt; 标签</h2>
        <button>基本按钮</button>
        <button type="button">按钮类型</button>
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
        <button disabled>禁用按钮</button>
        <button onclick="myFun()">点击事件按钮</button>
        <button style="background-color: #4CAF50; color: white;">带样式的按钮</button>
    </div>

    <div class="button-group">
        <h2>使用 &lt;input&gt; 标签</h2>
        <input type="button" value="输入按钮">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="禁用按钮" disabled>
    </div>

    <div class="button-group">
        <h2>带图标的按钮</h2>
        <button>
            <img src="按钮.png" alt="图标" style="vertical-align: middle; margin-right: 5px;">
            运行
        </button>
    </div>

    <script>
         function myFun(){
             alert('按钮被点击了！')
         }
    </script>
</body>
</html>

列表

HTML中的列表标签用于在网页上创建有序列表、无序列表以及定义列表。这些列表标签为内容的组织和展示提供了灵活的方式。

1. 无序列表 (<ul>)

无序列表使用<ul>（Unordered List）标签定义，其列表项使用<li>（List Item）标签包裹。无序列表中的每个列表项前面通常会显示一个项目符号（通常是圆点），但这个样式可以通过CSS进行自定义。

示例代码：

<ul type="square"> 

  <li>列表项 1</li> 

  <li>列表项 2</li> 

  <li>列表项 3</li> 

  <!-- 可以继续添加更多的<li>元素 --> 

</ul>

其中，属性：

  type：指定项目符号的样式，常见值包括：

    disc：实心圆点（默认）

    circle：空心圆点

    square：方块

2. 有序列表 (<ol>)

有序列表使用<ol>（Ordered List）标签定义，同样使用<li>标签包裹列表项。与无序列表不同，有序列表中的每个列表项前面会显示一个编号（默认是阿拉伯数字），但编号的样式和类型（如罗马数字、字母等）也可以通过CSS进行自定义。

示例代码：

<ol type="A" start="2"> 

  <li>列表项 1</li> 

  <li>列表项 2</li> 

  <li>列表项 3</li> 

  <!-- 可以继续添加更多的<li>元素 --> 

</ol>

其中属性：

  type：指定列表项的编号样式。可选值包括：

    1：阿拉伯数字（默认）

    A：大写字母

    a：小写字母

    I：大写罗马数字

    i：小写罗马数字

  start：指定列表项的起始编号（默认为 1）。

3. 定义列表 (<dl>)

定义列表使用<dl>（Description List）标签定义，它通常用于术语及其定义的列表，或者任何成对的列表项。在定义列表中，<dt>（Definition Term）标签用于标记术语或名称，而<dd>（Definition Description）标签则紧跟在<dt>之后，用于提供该术语的定义或描述。

示例代码：

<dl> 

  <dt>HTML</dt> 

  <dd>HyperText Markup Language，超文本标记语言，用于构建网页。</dd> 

  <dt>CSS</dt> 

  <dd>Cascading Style Sheets，层叠样式表，用于设计网页的外观。</dd> 

  <dt>JavaScript</dt>

  <dd>一种编程语言，用于网页的交互和动态效果。</dd>

  <!-- 可以继续添加更多的<dt>和<dd>元素 --> 

</dl>

在定义列表中，<dt>和<dd>元素不必成对出现，但它们通常用于定义和描述成对的关系。

一个简单而完整的列表示例：

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

</head>  
<body>  
  
<h2>列表示例</h2> 

    <!--有序列表-->
    <ol>
      <li>C++</li>
      <li>JavaScript</li>
      <li>Python</li>
    </ol>

    <!--无序列表-->
    <ul>
      <li>C++</li>
      <li>JavaScript</li>
      <li>Python</li>
    </ul>

    <!--自定义列表-->
    <!--dt:列表名称；dd：列表内容-->
    <dl>
      <dt>学科</dt>
      <dd>C++</dd>
      <dd>JavaScript</dd>
      <dd>Python</dd>
    </dl>

</body>
</html>

表格

HTML的表格使用<table>标签来创建，它允许你以行和列的形式组织数据。表格在网页上非常有用，尤其是当你需要展示大量数据，如统计信息、商品列表、财务数据、成绩单等时。

基本表格结构

<table border="1"> <!-- border属性在这里仅用于演示，实际开发中推荐使用CSS来设置边框 --> 

  <tr> 

    <th>标题1</th> 

    <th>标题2</th> 

    <th>标题3</th> 

  </tr> 

  <tr> 

    <td>数据1</td> 

    <td>数据2</td> 

    <td>数据3</td> 

  </tr> 

  <!-- 可以继续添加更多的<tr>元素来创建更多的行 --> 

</table>

在上面的例子中，border="1"属性被添加到<table>标签中，以便能够清楚地看到表格的边框。然而，在现代网页设计中，推荐使用CSS来设置表格的样式，因为这样可以提供更灵活和强大的样式控制标签：

<tr>：定义表格的行。

<th>：定义表头单元格。

<td>：定义普通单元格。

rowspan 和 colspan：用于合并单元格。

<caption>：为表格提供标题。它应该被放置在<table>标签内部的最前面。

一个简单而完整的表格示例：

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

</head>  
<body>  

<h2>表格示例</h2>  

<!-- border属性在这里仅用于演示，实际开发中推荐使用CSS来设置边框 -->    
<table  border="1">  
    <caption style="font-size: 20px; font-weight: bold;">学生信息表</caption>  
 
    <tr>  
        <th>姓名</th>  
        <th>年龄</th>  
        <th>专业</th>  
    </tr>
 
    <tr>  
        <td>张三</td>  
        <td>20</td>  
        <td>计算机科学</td>  
    </tr>  
    <tr>  
        <td>李四</td>  
        <td>22</td>  
        <td>软件工程</td>  
    </tr>  
    <tr>  
        <td>王五</td>  
        <td>19</td>  
        <td>数据科学</td>  
    </tr>

    <tr>  
      <td colspan="3">制表：某某</td>  
    </tr>  
 
</table> 
</body>
</html>

例子中，colspan="3"属性被添加到页脚行的<td>标签中，以便该单元格能够横跨三列。这对于在表格底部添加总结信息或脚注非常有用。

与表格相关的标签还有：

<thead>：包含表格的表头内容。虽然这不是必需的，但它有助于在视觉上区分表头和表格主体，并且对于屏幕阅读器等辅助技术来说也是有益的。

<tbody>：包含表格的主体内容。同样，这不是必需的，但有助于组织和样式的应用。

<tfoot>：包含表格的页脚内容。它通常用于包含表格的总结或脚注信息。

表单

HTML中的表单（Forms）是一种允许用户输入数据的结构，这些数据通常会被发送到服务器进行处理。表单的基本结构由 <form> 标签定义，表单可以包含多种输入元素，如文本框、密码框、单选按钮、复选框、下拉选择菜单、提交按钮等，用于收集用户的信息。

表单的基本结构由 <form> 标签定义，内部可以包含各种输入控件（也称为输入字段）、按钮和标签。包含：输入标签(<input>)、多行文本框标签(<textarea>)、下拉列表标签(<select> 和 <option>)、按钮标签(<button>)。

表单数据处理

表单（Forms）是用户与网站交互的重要方式之一，允许用户输入数据并提交给服务器处理。处理表单数据时，HTTP协议提供了两种主要的方法：GET和POST。

GET 方法：将数据附加到 URL 中，适合获取数据，不适合处理大量数据或敏感信息。

GET方法的数据是附加在URL上的，当使用GET方法提交表单时，表单中的数据会被附加到URL的末尾，数据之间用&符号分隔，每个数据项由键=值的形式组成。例如，如果你有一个包含用户名（username）和密码（password）的表单，并且用户输入了user作为用户名和pass作为密码，那么提交表单后，URL可能会变成类似http://example.com/login?username=user&password=pass的形式。不适合处理大量数据或者敏感信息（如密码），因为 URL 有长度限制，而且在浏览器历史记录或者服务器日志中可能会暴露这些信息。

POST 方法：将数据包含在请求体中，适合提交数据和处理敏感信息。

POST方法将表单数据包含在HTTP请求的体（body）中发送给服务器，而不是附加在URL上。这意味着数据的发送对用户来说是不可见的，也不会在URL中留下痕迹。因此它非常适合用于提交表单数据，特别是包含敏感信息（如密码、个人信息等）的表单。此外，POST方法也适用于提交大量数据，因为请求体的大小限制通常比URL的长度限制要大得多。

HTML5的表单(form)介绍 https://blog.csdn.net/cnds123/article/details/120653578

行内元素与块元素

在HTML（HyperText Markup Language）中，元素根据其显示方式和在文档流中的行为被分类为行内元素（Inline Elements）和块元素（Block Elements）。

行内元素（Inline Elements）

定义：行内元素则是与文本在同一行内显示的元素，通常不会独占一行。

特点：

    只占据其内容的宽度。

    不能设置宽度和高度。

    边距会影响到其周围的文本行。

常见的行内元素：

    <span>

    <a>

    <img>

    <strong>

    <em>

块级元素（Block Elements）

定义：块级元素是指可以独占一行的元素。它们通常在页面中形成一个“块”，并且在其前后会自动换行。

特点：

    占据整个宽度。

    可以设置宽度、高度、边距和内填充等样式。

常见的块级元素：

    <div>

    <p>

    <h1> 到 <h6>

    <ol>、<ul>（有序和无序列表）

    <table>

行内元素与块元素示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例</title>
</head>
<body>
    <p>这是一个包含<span style="color: red; font-size: 20px;">红色行内元素</span>的文本示例。</p>  

    <div style="background-color: yellow;">
        <h3>这是一个div块级元素的标题</h3>
        <p>这是一个一个div块级元素的段落。</p>
    </div>
</body>
</html>

HTML页面结构框架标签

HTML页面结构框架标签指的是用于定义网页整体结构的HTML元素。这些标签为网页提供了基本的骨架，帮助浏览器理解页面的不同部分。主要的结构标签包括：

<!DOCTYPE html>: 声明文档类型，告诉浏览器这是一个HTML5文档。

<html>: 整个HTML文档的根元素，包含了整个页面的内容。

<head>: 包含文档的元数据，如标题、字符集声明、样式表链接等。

这个标签包含了文档的元（meta）数据，如<title>、<meta>标签，这些标签描述了文档的各种属性和设置，比如字符集、文档标题、引入的CSS样式文件和JavaScript文件等，但它们并不直接显示在网页上。

<title>: 定义文档的标题，显示在浏览器的标签页上。

    <meta charset="UTF-8">: 指定了文档使用的字符编码，UTF-8是广泛使用的编码。

    <link rel="stylesheet" href="style.css">: 链接外部CSS文件，用于设置网页的样式。"rel"属性指定了链接的类型（在这里是样式表），"href"属性指定了CSS文件的路径。

    <script src="script.js"></script>: 引入外部JavaScript文件，用于增加网页的交互性。这个标签用于引入外部JavaScript文件。"src"属性指定了JavaScript文件的路径。值得注意的是，这个标签可以放在<head>或<body>中中的末尾，放置位置会影响脚本的加载和执行时机。

<body>: 包含文档的可见内容，如文本、图像、链接等。

还还包括布局（Layout）标签：

  • <header>: 通常包含介绍性的内容或导航链接。它代表了页面的头部或标题区域。
  • <nav>: 定义导航链接的部分，常用于创建菜单、目录或搜索工具。
  • <main>: 包含页面主要内容的区域。每个页面只能有一个<main>元素。
  • <section>: 将文档内容分为多个逻辑部分或章节。
  • <article>: 指定独立的、可复用的内容或与其余部分不同的内容块（如博客帖子或新闻报道）。
  • <aside>: 定义与其余页面内容稍微独立的内容，如侧边栏。
  • <footer>: 包含了作者信息、版权信息、联系方式或链接到网站的其它部分（如首页、隐私政策等）的底部信息。

请注意，并不是每个HTML页面都必须包含上述所有元素，而是根据你的网页布局和需要来选择合适的标签。

附、HTML布局（HTML Layout）简介 https://blog.csdn.net/cnds123/article/details/126901017

OK！

转载请注明出处或者链接地址：https://www.qianduange.cn//article/16464.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

HTML5 Boilerplate - 让页面有个好的开始

2024-08-30 20:08:14

ui-router，html5移动web开发指南

2024-06-07 23:06:32

HTML5入门基础

2024-06-16 09:06:50

h5页面 打开自动跳转小程序

2024-08-30 20:08:44

绿色服装B2C在线购物商城HTML5模板设计与实现

2024-08-30 20:08:42

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
3

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
4

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
5

npm的使用

2024-08-18 00:08:131000
6

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
7

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
8

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
9

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
10

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！