关于HTML必须要知道的基础结构和内容

学习 HTML(HyperText Markup Language)是前端开发的第一步,它是一种用于创建网页和 web 应用的标记语言。HTML 由一系列标签(tags)和属性(attributes)组成,这些标签和属性用于定义网页的结构和内容。
在这里插入图片描述

HTML 基础知识

1. HTML 文档结构

  • <!DOCTYPE html>:声明文档类型,告知浏览器当前文档使用的是 HTML5 规范。
  • <html>:HTML 文档的根元素。
  • <head>:包含文档的元数据(metadata),如字符集、标题、链接到 CSS、脚本等。
  • <meta charset="UTF-8">:定义文档的字符集(通常使用 UTF-8)。
  • <title>:定义文档的标题,在浏览器标签中显示。
  • <body>:包含文档的内容,即用户在浏览器中看到的部分。

2. 基本 HTML 标签及其意义

  • 文档结构标签

    • <html>:根元素,所有 HTML 元素的容器。
    • <head>:包含所有的头部元素。
    • <body>:包含所有的可见内容。
  • 文本格式标签

    • <h1><h6>:定义标题,<h1> 是最高级别标题,<h6> 是最低级别标题。
    • <p>:定义段落。
    • <br>:插入换行符。
    • <hr>:插入水平线,通常用于分隔内容。
    • <strong>:定义重要文本,通常显示为加粗文本。
    • <em>:定义强调文本,通常显示为斜体文本。
    • <b>:定义粗体文本。
    • <i>:定义斜体文本。
    • <u>:定义下划线文本。
    • <small>:定义小号文本。
  • 列表标签

    • <ul>:定义无序列表(通常用圆点符号)。
    • <ol>:定义有序列表(通常用数字)。
    • <li>:定义列表项,可以在无序或有序列表中使用。
  • 链接和媒体标签

    • <a>:定义超链接。
    • <img>:定义图像。
    • <audio>:定义音频内容。
    • <video>:定义视频内容。
  • 表格标签

    • <table>:定义表格。
    • <tr>:定义表格行。
    • <th>:定义表格头单元格。
    • <td>:定义表格数据单元格。
    • <thead>:定义表格头部。
    • <tbody>:定义表格主体。
    • <tfoot>:定义表格底部。
  • 表单标签

    • <form>:定义表单。
    • <input>:定义输入控件。
    • <textarea>:定义多行文本输入控件。
    • <button>:定义按钮。
    • <select>:定义下拉列表。
    • <option>:定义下拉列表中的选项。
    • <label>:定义表单控件的标签。
  • 结构和布局标签

    • <div>:定义文档中的块级区域,用于布局和样式。
    • <span>:定义文档中的行内区域,用于样式化一部分文本。
  • 语义化标签

    • <header>:定义文档或节的头部。
    • <nav>:定义导航链接。
    • <main>:定义文档的主体内容。
    • <section>:定义文档中的节。
    • <article>:定义独立的文章。
    • <aside>:定义侧边栏内容。
    • <footer>:定义文档或节的页脚。

3. 常用 HTML 属性

  • id:为元素定义唯一的标识符。
  • class:为元素定义一个或多个类名,用于 CSS 和 JavaScript。
  • src:用于 <img><audio><video> 等标签,指定资源的路径。
  • href:用于 <a> 标签,指定链接的目标 URL。
  • alt:用于 <img> 标签,提供图像的替代文本。
  • title:提供元素的额外信息,通常在鼠标悬停时显示为工具提示。
  • style:用于内联 CSS 样式。
  • target:用于 <a> 标签,指定链接打开的位置(如 _blank 在新窗口打开)。

总结

HTML 是构建网页的基础,通过学习上述标签和属性,我们可以掌握创建基本网页所需的知识。掌握这些基础后,我们可以进一步学习 CSS 和 JavaScript,以增强网页的样式和交互功能。

  • 9
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Dream_Bri

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值