当前位置: 首页 > 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.lryc.cn/news/610786.html

相关文章:

  • 解决错误nvcc fatal : Unsupported gpu architecture ‘compute_86‘
  • ESOP-3D系统实现机械设备生产流程的可追溯性
  • 人工智能领域、图欧科技、IMYAI智能助手2025年5月更新月报
  • 树状数组的性质
  • AI 对话高效输入指令攻略(四):AI+Apache ECharts:生成各种专业图表
  • C++ ---》string类的模拟实现
  • Solidity智能合约基础
  • 单目云台双摄像头配置双摄像头的优势
  • 深入理解 Android SO 导出符号:机制与安全优化
  • Spring 的优势
  • 应急响应排查思路
  • 市场与销售协同:CRM如何打破部门数据孤岛?
  • 8.5 CSS3多列布局
  • 深入解析RNN神经网络原理与应用
  • GitCode新手使用教程
  • RabbitMQ面试精讲 Day 11:RabbitMQ集群架构与节点类型
  • 人工智能之数学基础:利用全概率公式如何将复杂事件转为简单事件
  • 大模型|极简说清“数据并行”
  • AcWing 3690:求交点 ← 复旦大学考研机试题 + 克莱姆法则
  • 嵌入式开发学习———Linux环境下IO进程线程学习(四)
  • Python爬虫09_Requests用bs4进行数据解析
  • selenium自动化收集资料
  • linux服务器上word转pdf后乱码问题
  • In-memory不要全加载怎么做?
  • 基于LDA主题的网络舆情与情感分析——以云南某景区话题为例
  • 本机部署K8S集群
  • 基于k8s环境下的pulsar常用命令(上)
  • mq_open系统调用及示例
  • ubutnu20.04更新源报错:E:...签名不再生效
  • C语言学习笔记——动态内存分配