1、HTML入门指南：从零开始学网页开发-北京尧图网络

提示本文章只属于个人观点仅供参考文章目录前言基本概念HTML 1、什么是HTML2、什么是HTML 标签3、什么是HTML 元素4、什么是接口地址一、HTML 网页结构二、页面搭建1、创建THML网页HTML文档的后缀名.html、.htm2、总结三、HTML 元素的嵌套四、HTML 空元素五、HTML基础1、标题h1 定义最大的标题 h6 定义最小的标题2、HTML 段落3、HTML 链接4、HTML 图像六、HTML 属性1、总体概述2、全局属性1id为元素指定唯一的标识符。2class为元素指定一个或多个类名用于 CSS 或 JavaScript 选择。3style用于直接在元素上应用 CSS 样式。4title为元素提供额外的提示信息通常在鼠标悬停时显示。5data-*用于存储自定义数据通常通过 JavaScript 访问。3、特定元素的属性1href用于 a 和 link 元素指定链接的目标 URL。2src用于 img, script, iframe 等元素指定外部资源的 URL。3alt用于 img 元素为图像提供替代文本当图像无法显示时显示。4type用于 input 和 button 元素指定输入控件的类型。5value用于 input, button, option 等元素指定元素的初始值。6disabled用于表单元素禁用元素使其不可交互。7checked用于 input typecheckbox 和 input typeradio指定复选框或单选按钮是否被选中。8placeholder用于 input 和 textarea 元素在输入框中显示提示文本。9target用于 a 和 form 元素指定链接或表单提交的目标窗口或框架。4、布尔属性1disabled禁用元素。2readonly使输入框只读。3required指定输入字段为必填项。4autoplay用于 audio 和 video 元素自动播放媒体。5、事件处理属性1onclick当用户点击元素时触发。2onmouseover当用户将鼠标悬停在元素上时触发。3onchange当元素的值发生变化时触发。七、HTML 水平线八、HTML 折行总结前言基本概念HTML 1、什么是HTMLHTML超文本标记语言是一种用于创建网页的标准标记语言。使用 HTML 来建立自己的 WEB 站点HTML文档也叫做 web 页面HTML 运行在浏览器上由浏览器来解析。2、什么是HTML 标签HTML 标记标签通常被称为 HTML 标签HTML 标签是由尖括号包围的关键词HTML 标签通常是成对出现的标签内容/标签。3、什么是HTML 元素“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思HTML 元素是从开始标签start tag到结束标签end tag之间的完整结构元素这是一个标题/元素。4、什么是接口地址前端就是数据网页客户端向服务器请求不同的接口地址url就会得到不同的数据请求 http://shuige.com/api/user 得到用户数据请求 http://shuige.com/api/posts 得到文章数据请求 http://shuige.com/api/goods 得到商品数据一、HTML 网页结构白色区域为页面显示部分二、页面搭建1、创建THML网页HTML文档的后缀名.html、.htm!DOCTYPEhtml//告诉浏览器这是一个 HTML5 网页声明这是 HTML5 页面html//整个页面的根网页里所有内容都必须放在html和/html之间放配置看不见head//网页头部放不显示在页面上的配置信息标题、编码、样式等metacharsetutf-8//设置字符编码为 UTF-8让网页能正常显示中文、英文、符号不会乱码titleHTML/title//网页标题显示在浏览器标签栏上的文字/head//头部结束标签body//网页主体h1我的第一个标题/h1//一级标题标签p我的第一个段落。/p//段落标签/body/html2、总结!DOCTYPEhtml//声明这是 HTML5 页面html//整个页面的根完整HTML的页面 ----------------head//页面设置标题、编码【头部元素】/head//元素包含了文档的元meta数据 ----------------body//页面能看到的所有内容【展示部分】/body----------------/html三、HTML 元素的嵌套HTML 元素可以相互嵌套形成树状结构一个元素可以包含其他元素HTML 文档本质上是一个嵌套结构DOM 树!DOCTYPEhtmlhtml//整个 HTML 文档的根节点所有内容都必须包含在其中。bodyp这是第一个段落。/p/body/html包含 3 个核心元素html、body、p。四、HTML 空元素空元素是指没有内容的元素br///换行img///图片input///输入框五、HTML基础1、标题h1 定义最大的标题 h6 定义最小的标题h1这是一个标题/h1//1号大小h2这是一个标题/h2//2号大小h3这是一个标题/h3//3号大小2、HTML 段落p这是一个段落。/pp这是另外一个段落。/p3、HTML 链接ahrefhttps://www.baidu.com这是一个链接/a4、HTML 图像imgsrc/images/logo.pngwidth258height39//img六、HTML 属性1、总体概述属性名适用元素说明id所有元素为元素指定唯一的标识符。class所有元素为元素指定一个或多个类名用于 CSS 或 JavaScript 选择。style所有元素直接在元素上应用 CSS 样式。title所有元素为元素提供额外的提示信息通常在鼠标悬停时显示。data-*所有元素用于存储自定义数据通常通过 JavaScript 访问。hrefa, link指定链接的目标 URL。srcimg, script, iframe指定外部资源如图片、脚本、框架的 URL。altimg为图像提供替代文本当图像无法显示时显示。typeinput, button指定输入控件的类型如 text, password, checkbox 等。valueinput, button, option指定元素的初始值。disabled表单元素禁用元素使其不可交互。checkedinput type“checkbox”,input type“radio”指定复选框或单选按钮是否被选中。placeholderinput, textarea在输入框中显示提示文本。targeta, form指定链接或表单提交的目标窗口或框架如 _blank 表示新标签页。readonly表单元素使输入框只读。required表单元素指定输入字段为必填项。autoplayaudio, video自动播放媒体。onclick所有元素当用户点击元素时触发 JavaScript 事件。onmouseover所有元素当用户将鼠标悬停在元素上时触发 JavaScript 事件。onchange表单元素当元素的值发生变化时触发 JavaScript 事件。2、全局属性全局属性是所有 HTML 元素都可以使用的属性。1id为元素指定唯一的标识符。dividheaderThis is the header/div2class为元素指定一个或多个类名用于 CSS 或 JavaScript 选择。pclasstext highlightThis is a highlighted text./p3style用于直接在元素上应用 CSS 样式。pstylecolor:blue;font-size:14px;This is a styled paragraph./p4title为元素提供额外的提示信息通常在鼠标悬停时显示。abbrtitleHyperText Markup LanguageHTML/abbr5data-*用于存储自定义数据通常通过 JavaScript 访问。divdata-user-id12345User Info/div3、特定元素的属性某些属性仅适用于特定的 HTML 元素。1href用于 a 和 link 元素指定链接的目标 URL。ahrefhttps://www.example.comVisit Example/a2src用于 img, script, iframe 等元素指定外部资源的 URL。imgsrcimage.jpgaltAn example image3alt用于 img 元素为图像提供替代文本当图像无法显示时显示。imgsrcimage.jpgaltAn example image4type用于 input 和 button 元素指定输入控件的类型。inputtypetextplaceholderEnter your name5value用于 input, button, option 等元素指定元素的初始值。inputtypetextvalueDefault Value6disabled用于表单元素禁用元素使其不可交互。inputtypetextdisabled7checked用于 input type“checkbox” 和 input type“radio”指定复选框或单选按钮是否被选中。inputtypecheckboxchecked8placeholder用于 input 和 textarea 元素在输入框中显示提示文本。inputtypetextplaceholderEnter your email9target用于 a 和 form 元素指定链接或表单提交的目标窗口或框架。ahrefhttps://www.example.comtarget_blankOpen in new tab/a4、布尔属性布尔属性是指不需要值的属性它们的存在即表示 true不存在则表示 false。1disabled禁用元素。inputtypetextdisabled2readonly使输入框只读。inputtypetextreadonly3required指定输入字段为必填项。inputtypetextrequired4autoplay用于和元素自动播放媒体。videosrcvideo.mp4autoplay/video5、事件处理属性HTML 元素可以通过事件处理属性来响应特定的事件如点击、鼠标悬停等。1onclick当用户点击元素时触发。buttononclickalert(Button clicked!)Click Me/button2onmouseover当用户将鼠标悬停在元素上时触发。divonmouseoverthis.style.backgroundColoryellowHover over me/div3onchange当元素的值发生变化时触发。inputtypetextonchangealert(Value changed!)七、HTML 水平线hr 标签在 HTML 页面中创建水平线hr 元素可用于分隔内容。p这是一个段落。/phrp这是一个段落。/phrp这是一个段落。/p八、HTML 折行在不产生一个新段落的情况下进行换行新行p这个br段落br演示了分行的效果/p标签描述p定义一个段落br插入单个折行换行总结各位彦祖和热巴们本文系统性地介绍了 HTML 的基础知识和属性大家喜欢就请一键三连吧

1、HTML入门指南：从零开始学网页开发

相关推荐

2026小程序自助搭建平台有哪些？分享几个优质小程序制作工具！

AI智能体偏科真相：能安全测试却做不好PPT的工程解法

TongWeb7.0默认仅本机可访问TongWeb控制台

更多资讯

Gemini 生成文件入门：在对话里直接产出 Word、Excel 和 PDF

Dify 入门：用 Docker 自部署并搭建知识库问答助手

Cline 入门：在 VS Code 里用 Plan/Act 模式让 AI 帮你写代码

手写表白代码指南：C/C++实现心形动画与避坑全攻略

浙江省八大流域SHP数据在ArcGIS中的处理与应用全攻略

C# 身份证图片信息识别源码：从照片到结构化字段的落地路径

今日更新

微信个人号API开发案例：图片/语音/视频消息怎么下载解析存到本地？

Python股票自动交易系统源码解析：从行情获取到风控的完整链路

视酷酷信IM源码部署指南：Java 17+MySQL 8.0.33实战配置

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？