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

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.xdnf.cn/news/17174.html

相关文章:

  • Go 单元测试:如何只运行某个测试函数(精确控制)
  • 【前端】网站favicon图标制作
  • Kubernetes 已弃用 `apps/v1beta1` 版本的 StatefulSet
  • @【JCIDS】【需求论证】联合能力集成与开发系统知识图谱
  • [数组]977.有序数组的平方;209.长度最小的子数组
  • 跨越系统孤岛:4A架构如何实现企业级一体化协同
  • 深度解析 TCP 三次握手与四次挥手:从原理到 HTTP/HTTPS 的应用
  • 【AI论文】iLRM:一种迭代式大型3D重建模型
  • Vue3视频播放组件自定义封装、控制是否自动播放、全屏小屏控制、loading加载、静音播放等样式完全自定义控制,代码复制即用
  • JAVA学习笔记 自增与自减的使用-006
  • uniapp转app时,cover-view的坑
  • Chisel芯片开发入门系列 -- 18. CPU芯片开发和解释8(流水线架构的代码级理解)
  • 基于k8s环境下的pulsar常用命令(下)
  • 创维智能融合终端SK-M424_S905L3芯片_2+8G_安卓9_线刷固件包
  • 计算机网络:目的网络在路由表项中的作用
  • 如何通过 5 种方式将照片从 iPad 传输到电脑
  • MongoDB学习专题(一)介绍安装基本操作
  • 电路基础相关知识
  • 【轮播图】H5端轮播图、横向滑动、划屏效果实现方案——Vue3+CSS position
  • Python爬虫09_Requests用bs4进行数据解析
  • Java、Android及计算机基础面试题总结
  • ubuntu-server安装
  • 外协采购订单的价格差异科目没有产生差异科目问题
  • MongoDB学习专题(二)核心操作
  • 使用buildx构建镜像
  • 蓝桥杯常用java API
  • 东北大学“进化论”赋能具身导航!SE-VLN:基于多模态大模型的自进化视觉语言导航框架
  • wps创建编辑excel customHeight 属性不是标准 Excel Open XML导致比对异常
  • 【qt5_study】2.使用Qt Designer构造UI界面(信号与槽)
  • PHP实战代码解析与应用分享:用户管理、日志,配置管理与文件操作全解析