HTML总结全览

HTML 基础知识

HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。它通过标签(tags)定义网页的结构和内容,如文本、图片、链接等。HTML 文档由一系列嵌套的标签组成,浏览器解析这些标签并渲染成可视化的网页。

基本结构

一个典型的 HTML 文档结构如下:

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>
  • <!DOCTYPE html> 声明文档类型为 HTML5。
  • <html> 是根元素,包含整个网页内容。
  • <head> 包含元数据,如标题、字符集、视口设置等。
  • <body> 包含网页的可见内容。

常用标签

  • 文本标签

    • <h1><h6>:标题标签,数字越小字号越大。
    • <p>:段落标签。
    • <a>:超链接标签,通过 href 属性指定链接地址。
    • <strong><em>:分别表示加粗和斜体文本。
  • 列表标签

    • <ul>:无序列表。
    • <ol>:有序列表。
    • <li>:列表项。
  • 多媒体标签

    • <img>:图片标签,通过 src 属性指定图片路径。
    • <audio><video>:分别用于嵌入音频和视频。
  • 表单标签

    • <form>:表单容器。
    • <input>:输入框,类型由 type 属性指定(如 textpasswordsubmit 等)。
    • <textarea>:多行文本输入框。
    • <button>:按钮。

语义化标签

HTML5 引入了语义化标签,使代码更易读且对搜索引擎更友好:

  • <header>:页眉或区块标题。
  • <nav>:导航栏。
  • <section>:文档的独立区块。
  • <article>:独立的内容块(如文章)。
  • <footer>:页脚或区块结尾。

属性

HTML 标签可以通过属性提供额外信息或功能。常见属性包括:

  • id:唯一标识符。
  • class:为元素指定一个或多个类名。
  • style:内联 CSS 样式。
  • srchref:分别指定资源路径和超链接地址。

注释

HTML 注释用于添加说明或临时禁用代码:

html 复制代码
<!-- 这是注释内容 -->

示例代码

以下是一个简单的 HTML 页面示例:

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
    </nav>
    <section>
        <p>这是一个示例段落。</p>
    </section>
</body>
</html>

注意事项

  • 确保标签正确嵌套和闭合。
  • 使用语义化标签提升可读性和 SEO 效果。
  • 避免过度依赖内联样式,推荐使用外部 CSS 文件。
相关推荐
namekong812 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天13 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄15 小时前
HTML 表单控件
前端·microsoft·html
学习笔记10116 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-194316 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧17 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台17 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪10017 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc18 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
繁花与尘埃18 小时前
CSS引入方式(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
css·笔记·学习