一、什么是HTMLHTMLHyperText Markup Language超文本标记语言是用于创建网页结构和内容的标准标记语言。它通过一系列标签如p、h1、a等来定义网页中的标题、段落、链接、图片等元素是构成万维网的基础技术之一。二、HTML标签1.标签又称“元素”是HTML的基本组成单位2.标签分为双标签和单标签小写规范3.标签之间可以嵌套、并列双标签标签名标签体/标签名单标签标签名/ (/可以省略)marquee学好技术/marqueeinput三、HTML标签属性1.用于给标签提供附加信息2.写在起始标签和单标签中双标签标签名 属性名属性值 属性名属性值标签体/标签名单标签标签名 属性名属性值 属性名属性值注意存在特殊标签只有属性值没有属性名标签中不要出现同名属性后面的会失效四、HTML标准结构!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleDocument/title /head body input typetext /body /html!DOCTYPE html声明文档告诉浏览器当前网页版本html langzh-CN设置语言为简体中文meta charsetUTF-8指定字符编码titleDocument/title中document部分写标题五、HTML注释!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleDocument/title /head body !-- input typetext -- /html!-- --就是HTML的注释快捷键为Ctrl/六、HTML排版标签h1~h6为标题标签p为段落标签div没有含义用于整体布局!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleHTML排版标签/title /head body h1我是一级标题/h1 h2我是二级标题/h2 h3我是三级标题/h3 h4我是四级标题/h4 h5我是五级标题/h5 h6我是六级标题/h6 div p我是一个段落/p p我是一个段落/p p我是一个段落/p /div /body /html注意h1最好写一个h1~h6可以写多个h1~h6不可以嵌套p标签中不可以h1~h6、p、div标签七、语义化标签强调标签所包含文字的特定含义默认效果不重要后期可以通过CSS调整八、常用文本标签em用于强调文本默认显示为斜体效果。strong用于表示重要内容默认显示为加粗效果。span无语义的行内标签常用于对文本进行局部样式控制。body p 预防电信诈骗请安装em国家反诈app/em /p p 当我们出门时一定strong要关好窗/strong。 /p p 前端三个框架为spanangular、react、vue/span。 /p /body效果九、图片标签img用于在网页中插入图片是单标签常用属性如下src图片路径必填alt图片加载失败时的替代文字width / height设置图片宽高img width200 height150 src图片地址 alt图片说明 十、块级元素与行内元素HTML 中的元素按显示方式可分为块级元素和行内元素两大类理解二者的区别有助于合理布局页面。块级元素独占一行默认宽度占满父容器可设置宽高常用于搭建页面结构。常见块级元素有h1~h6、p、div、ul、li等。行内元素与其他行内元素在同一行显示宽度由内容决定不可设置宽高常用于修饰文字。常见行内元素有em、strong、span、a等。body div我是块级元素独占一行/div p我也是块级元素/p span我是行内元素/span strong我也是行内元素/strong /body注意块级元素可以包含行内元素但行内元素不能包含块级元素。开发者文档以下为 HTML 学习相关的官方文档与参考资源MDN Web DocsMozilla 提供的权威 HTML 参考文档涵盖标签、属性与示例。W3C万维网联盟负责制定 HTML 等 Web 标准规范。W3Schools提供交互式在线教程与实例适合快速上手练习。常用快捷键Ctrlshiftk 删除行Ctrlenter 换行Altshift箭头 当前行向下/上复制作业!DOCTYPE html html langzh-CN head meta charsetUTF-8 title10.1_作业/title style h2{ color:darkblue } h3{ color:grey } /style /head body div aligncenter h2梅花/h2 h32~4/h3 img width100 height150 srcC2.png img width100 height150 srcC3.png img width100 height150 srcC4.png /div div aligncenter h2方片/h2 h35~7/h3 img width100 height150 srcD5.png img width100 height150 srcD6.png img width100 height150 srcD7.png /divs div aligncenter h2红桃/h2 h38~10/h3 img width100 height150 srcH8.png img width100 height150 srcH9.png img width100 height150 srcH10.png /div div aligncenter h2黑桃/h2 h3j~a/h3 img width100 height150 srcSJ.png img width100 height150 srcSQ.png img width100 height150 srcSK.png img width100 height150 srcSA.png /div /body /html效果持续更新中ing~~