提示本文章只属于个人观点仅供参考文章目录前言基本概念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 的基础知识和属性大家喜欢就请一键三连吧