HTML 教程

阅读(19949.5k) 收藏赞(1750)

手册简介

HTML 指超文本标记语言。 HTML 是通向 WEB 技术世界的钥匙。在 W3Cschool 的 HTML 教程中，您将学习如何使用 HTML 来创建站点。 HTML 非常容易学习！你会喜欢它的！

手册说明

HTML是现在世界通用的超文本标记语言，通过它，可以实现图片、链接、音乐以及程序等等多种元素。现如今，HTML已经是程序员必须掌握的一项基本功。

如果您想要更快、更系统地学会HTML，您最好采用边学边练的学习模式：HTML微课

如果您觉得HTML的学习难度较高，不易理解，建议您采用视频教程进行学习：HTML视频课程

学完本教程之后，W3Cschool推荐您进行实战练习：HTML实战

html

HTML发展史

HTML没有1.0，因为关于它的初版存在争议，1995年HTML 2.0面世，1997年由国际官方组织W3C推出了HTML 3.2以及HTML 4.0标准，后面W3C(万维网联盟)也渐渐变成Web技术领域的权威，经过漫长的演变，2014年，HTML 5标准最终面世。

HTML 2.0——1995年11月，RFC 1866发布
HTML 3.2——1997年1月14日，W3C发布推荐标准
HTML 4.0——1997年12月18日，W3C发布推荐标准
HTML 4.01——1999年12月24日，W3C发布推荐标准
HTML 5——2014年10月28日，W3C发布推荐标准

HTML结构

HTML的结构一般包括<head>标签和<body>标签，<head>和<body>这2个标记符分别表示网页的头部和正文。头部中可包含页面的标题、关键词、描述说明等内容，它本身不作为内容来显示，但影响网页显示的效果。<body></body>当中是网页实际显示的内容，正文标记符又被称为实体标记。页面当中通常包含有很多指向其他相关页面或其他节点的指针，通过点击，可以很方便地获取新的网页，这是HTML获得广泛推广运用最重要的原因之一，而由这些相互之间存在关联的页面组成的有机集合便是网站。

究竟HTML为什么会被普及?这就要归功于互联网的高速发展，对于编程语言的需求直线上升。而HTML5具有超集方式的简易性、运用广泛的可拓展性、灵活应变的平台适应性以及简单的通用性。凭借着这些特性，HTML越来越受到人们的喜爱。

HTML5编辑规范

文件拓展名默认使用htm或者html，便于操作系统或者程序辨认文件，而图片则基本上存为gif或jpg
浏览器默认忽视回车符，不过为了方便阅览，人们还是会习惯地在写完一段代码后进行回车
标记符号用尖括号括起来，带斜杠的元素表示该标记说明结束，大多数标记符必须成对使用，用以说明起始和结束。
必须使用半角而不是全角字符
HTML注释的内容不给予显示。

除了这本手册，你还可以参考

开始学习HTML

接下来，你可以打开这本教程，先了解html的基本概念，然后一个一个地掌握HTML标签、HTML注释、HTML框架的用法，并且参考借鉴一些优秀的网站，通过浏览器的“查看源代码”功能来了解别人写的HTML代码结构。

HTML对于系统环境配置要求一点也不高，基本上，你只需要有一台电脑就够了。

HTML相关教程

《HTML入门教程》

HTML视频课程

《零基础入门Web开发[精品视频课]》

书籍推荐

免费领取编程资料包

更新记录

HTML 术语词典：全面解析 HTML 核心概念与常用标签 04-09 18:53
通义灵码 - HTML智能编码辅助AI工具 03-12 09:52
HTML 总结 12-11 11:28
HTML CSS百科及常用嵌入方式 12-01 09:51
HTML 图像 09-07 12:01
HTML 插件 08-21 14:14
HTML URL字符编码 08-21 14:14
HTML 引用 08-21 14:13
HTML 头部 06-03 16:55
HTML 文本格式化 05-30 14:39

多端阅读

意见反馈 X

意见反馈：

联系方式：

查看完整版笔记

违规举报 X

广告等垃圾信息
不友善内容
违反法律法规的内容
不宜公开讨论的政治内容
其他

<> /* 初始状态隐藏组件 */ #aiBox.m-aiTool { visibility: hidden; opacity: 0; transition: opacity 0.3s ease; } #aiBox { box-sizing: border-box; } /* 组件加载完成后的显示状态 */ #aiBox.loaded.m-aiTool.loaded { visibility: visible; opacity: 1; } .m-aiTool { display: none; position: fixed; bottom: 20px; right: 5px; width: 40px; height: 40px; } .m-aiTool img { width: 100%; height: 100%; } .ai-warp { position: fixed; bottom: 30px; right: 20px; width: 128px; height: 128px; background-image: url("https://atts.w3cschool.cn/ai-tool.png"); background-repeat: no-repeat; background-position: center; background-size: 100% auto; cursor: pointer; z-index: 2000; user-select: none; /* 防止拖拽时选中文本 */ } /* 修改样式部分 */ #popup-window { position: fixed; bottom: -100%; /* 初始位置在视口下方 */ left: 80px; width: 530px; height: 600px; border: 1px solid #c5c5c5; border-radius: 5px; background-color: #fff; opacity: 0; z-index: 2000; transition: opacity 0.3s ease; } /* 显示状态的样式 */ #popup-window.show { bottom: 20px; opacity: 1; } .popup-window-warp { width: 100%; height: 100%; display: flex; flex-flow: row wrap; } .popup-nav { width: 110px; height: 100%; flex: 0 0 80px; background-color: #232324; padding: 5px; box-sizing: border-box; } .popup-iframe { flex: 1; display: flex; flex-direction: column; background: #fff; overflow: hidden; } .popup-iframe iframe { width: 100%; height: 100%; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; } .popup-iframe .ai-tool-top { padding: 8px; background: #EEF0F4; display: flex; justify-content: flex-end; align-items: center; height: 32px; } .popup-iframe .ai-tool-top .maxkb-chat-close { cursor: pointer; padding: 4px; border-radius: 4px; transition: background-color 0.3s; } .popup-iframe .ai-tool-top .maxkb-closeviewport { cursor: pointer; } .popup-iframe .ai-tool-top .maxkb-openviewport { cursor: pointer; } .popup-iframe .ai-tool-top .maxkb-viewportnone { display: none; } .nav-title-openwin { width: 100px; height: 36px; display: flex; align-items: center; box-sizing: border-box; padding: 5px 3px; margin-bottom: 3px; font-size: 12px; color: rgb(201205212); cursor: pointer; } .nav-title-openwin img { width: 22px; height: 22px; margin-right: 5px; } .nav-title { width: 100px; height: 36px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 5px 3px; margin-bottom: 3px; font-size: 12px; color: rgb(201205212); cursor: pointer; } .nav-title img { width: 22px; height: 22px; margin-right: 5px; } .nav-title:hover { background-color: #2C2C2D; border-radius: 8px; } .nav-title.nav-active { border-radius: 8px; background-color: #2C2C2D; color: #fff; } /* 放大状态的样式 */ #popup-window.maxkb-enlarge { width: 50% !important; height: 100% !important; top: 0 !important; right: 0 !important; /* 改为right: 0，使其靠右显示 */ left: auto !important; /* 改为auto，避免left属性影响 */ bottom: auto !important; opacity: 1; transition: width 0.3s easeheight 0.3s ease; } /* 移动端适配 */ @media only screen and (max-width: 768px) { #aiBox { display: none; } .m-aiTool { display: block; } } .ai-tool-top { padding: 8px; background: #EEF0F4; display: flex; justify-content: flex-end; align-items: center; height: 32px; box-sizing: border-box; } .tool-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .tool-title { font-size: 16px; font-weight: 500; color: #333; } .more-link { display: flex; align-items: center; color: #666; text-decoration: none; font-size: 14px; gap: 4px; } .more-link:hover { color: #1890ff; } .tool-content { flex: 1; overflow-y: auto; padding: 20px; } .tool-grid { display: grid; grid-template-columns: repeat(41fr); gap: 12px; padding: 0; max-width: 100%; } .tool-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; padding: 8px; border-radius: 6px; transition: background-color 0.3s; aspect-ratio: 1; width: 90px; height: 90px; box-sizing: border-box; } .tool-item:hover { background-color: #e8e8e8; } .tool-icon { width: 32px; height: 32px; /* 固定图标容器高度 */ display: flex; align-items: center; justify-content: center; margin-bottom: 6px; } .tool-icon img { width: 32px; height: 32px; /* 固定图标大小 */ object-fit: contain; /* 保持图片比例 */ } .tool-name { font-size: 12px; color: #333; text-align: center; width: 100%; line-height: 1.2; height: 2.4em; /* 固定文字容器高度，刚好容纳两行 */ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; padding: 0 4px; position: relative; } /* 工具提示样式 */ .tool-name::after { content: attr(data-tooltip); position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); background: rgba(0000.75); color: white; padding: 3px 6px; border-radius: 4px; font-size: 12px; white-space: normal; /* 允许提示文字换行 */ max-width: 200px; /* 设置最大宽度 */ text-align: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.2svisibility 0.2s; } .tool-name::before { content: ''; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-bottom-color: rgba(0000.75); z-index: 1000; } /* 响应式布局调整 */ @media (max-width: 768px) { .tool-grid { grid-template-columns: repeat(31fr); gap: 10px; } .tool-item { width: 70px; height: 70px; } .tool-icon { width: 28px; height: 28px; } .tool-icon img { width: 20px; height: 20px; } } @media (max-width: 480px) { .tool-grid { grid-template-columns: repeat(21fr); gap: 8px; } .tool-item { width: 60px; height: 60px; } .tool-icon { width: 24px; height: 24px; } .tool-icon img { width: 18px; height: 18px; } .tool-name { font-size: 11px; } } .maxkb-chat-close { cursor: pointer; padding: 4px; border-radius: 4px; transition: background-color 0.3s; } .maxkb-chat-close:hover { background-color: rgba(0000.05); }