当前位置: 首页 > news >正文

HTML总结全览

HTML 基础知识

HTML(HyperText Markup Language)是一种用于创建网页的标准标记语言。它通过标签(tags)定义网页的结构和内容,如文本、图片、链接等。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 页面示例:

<!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 文件。
http://www.dtcms.com/a/315520.html

相关文章:

  • JDK安装教程
  • 机器学习 集成学习之随机森林
  • 攻击实验(ARP欺骗、MAC攻击、报文洪水攻击、DNS欺骗)
  • 调用com对象的坑
  • 自由学习记录(77)
  • 【递归完全搜索】USACO Bronze 2023 January - 牛栏降温 IIAir Cownditioning II
  • 水库安全“守护者”:智能雨水情监测预报系统
  • 联发科芯片组曝高危漏洞:越界写入缺陷危及智能手机与物联网设备安全
  • 论文阅读笔记:《Curriculum Coarse-to-Fine Selection for High-IPC Dataset Distillation》
  • table行内--图片预览--image
  • 防御保护07-08
  • 2025年服务器漏洞生存指南:从应急响应到长效免疫的实战框架
  • 多层Model更新多层ListView
  • 4. 什么是字节码采用字节码的好处是什么
  • avue---upload 图片上传
  • 南柯电子|直流电机EMC整改:从干扰源到解决方案的实战指南
  • DHCP 握手原理
  • Laravel The requested URL /hellowzy was not found on this server. 404 问题的解决
  • gRPC Keepalive 机制详解与最佳实践
  • 本地部署文档管理平台 BookStack 并实现外部访问( Windows 版本)
  • C# LINQ(标准询运算符)
  • Windows 电脑远程访问,ZeroTier 实现内网穿透完整指南(含原理讲解)
  • 汽车OBD定位器:即插即用车辆管理省心又实用
  • CodeBuddy IDE 使用测评——半小时做一个web可视化数据工具
  • 数据可视化发展历程
  • eclipse类IDE导入现有工程教程
  • 分布式CAP定理
  • Java 中抽象概念的全面解析与实战指南
  • Python爬虫09_Requests用bs4进行数据解析
  • 【科研绘图系列】R语言绘制误差棒图