HTML

Web标准的构成：

Web标准中分成三个构成：

结构：HTML, 页面元素和内容表现：CSS, 网页元素的外观和位置等页面样式（如颜色、大小等）行为： JavaScript, 网页模型的定义与交互

Web标准要求页面实现：结构、表现、行为三层分离

HTML身体  CSS样式   Js交互的动态效果 HTML页面结构：

页面中的固定结构是要通过特点的HTML标签进行描述的。

 
    
 
 
    网页的主题内容
 

HTML骨架结构的标签：

html标签：网页的整体head标签：网页的头部body标签：网页的身体title标签：网页的标题

一般情况下，使用的开发工具都是VS Code，当然也可以用别的，Dreamweaver、Webstorm、Sublime、Hbuilder等。

语法规范

1.HTML注释

方便阅读代码者观看，快捷键 ctrl+/

2.HTML标签的结构

标签由< > /英文单词或字母组成，<>里面的东西成为标签名。常见的标签由两部分组成，就是双标签，前部分开始标签，后部分结束标签，两部分之间是内容。少数部分由一部分组成，称之为：单标签，自成一体，无法包裹内容。
，我们称为单标签。注意：/ 之前有一个空格。原则上比群殴爱你都应有结束符即 / 。注意：实际开发中不建议给单标签加斜线，任何标签都建议不要大写。

3.标签关系

包含关系（父子关系）

并列关系（兄弟关系）

HTML标签学习 1.标题标签

为使网页更语义化，会在网页中用到标题标签。

代码：h系列标签

一级标题
二级标题
三级标题
四级标题
五级标题
六级标题

1~6级标题，重要程度依次递减

文字都会加粗文字都会变大，并且从h1-h6文字逐渐减小独占一行    2.换行标签

让文字强制换行显示——
      

特点：单标签， 让文字强制换行

3.水平线标签

分割不同主题内容的水平线——

---

，主题的分割转换

特点：单标签 ，在页面中显示一条水平线

4.文本格式化标签

需要让文字加粗、下划线、倾斜、删除线等效果,代码如下：

标签	说明
b（strong）	加粗
u（ins）	下划线
i（em）	倾斜
s(del)	删除线

语义：突出重要性的强调语境

5.媒体标签 图片标签

在网页中显示图片，代码：。

特点：单标签，img标签需要展示对应的效果，需要借助标签的属性进行设置。

属性注意：

标签的属性写在开始标签内部标签上可以同时存在多个属性属性之间以空格隔开标签名与属性之间必须以空格隔开属性之间没有顺序之分

alt是替换文本，当图片加载失败时，才显示alt的文本。

title是提示文本，当鼠标悬停时，才显示的文本。title属性不仅可以用于图片标签，还可以用于其他标签。

width:宽度；height:高度（数字），如果只设置width和height中的一个，另一个没设置就会等比例缩放（此时图片不会变形），如果同时设置两个，若设置不当此时图片可能会变形。

路径：页面需要加载图片，需要先找到对应的照片

绝对路径（了解）

目录下的绝对位置，可以直接到达的目标位置，通常从盘符开始。

盘符开头：E:\Web前端\test\day01\1.ipg

网络地址

完整的网络地址：http://www.kaotop.com/file/tupian/20220523/6364731a3ed9484ca3118af6f78fde52.png

相对路径（常用）

同级路径：当前文件和目标文件在同一目录中

相对路径分类	符号	说明
同级路径	.	如：或
下级路径	/	如：
上级路径	../	如：

注意：相对路径为 /（正斜杆），绝对路径为 \（反斜杆），实际开发中一般都用不相对路径和网络地址。/（正斜杆）是windows环境下，而linux系统依旧是反斜杠。

2.音频标签

在页面中插入音频   

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

注意：音频标签目前支持三种格式：mp3、wav、ogg

3.视频标签

页面中插入视频。

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需配合muted实现静音播放）
loop	循环播放

注意：视频标签目前支持三种格式：MP4、WebM、Ogg

4.链接标签

点击之后，从一个页面跳转到另一个页面。称呼有a标签，超链接，锚链接。

代码：超链接

特点：

双标签，内部可以包裹内容如果需要a标签点击之后去指定页面，需要设置a标签的href属性

当开发网站初期，还不知道跳转地址的值，href的值可以写为#（空链接）点击之后回到网页顶部；href作用是跳转地址。

target属性：目标网页的打开形式

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

跳转到百度

总结： 1. 排版标签： 标题h系列、段落p、换行br、水平线hr 2. 文本格式化标签：  加粗strong、下划线ins、倾斜em、删除线del 3. 图片标签： img标签 + src属性 + alt属性 + title属性 + width属性 + height属性 4. 路径： 相对路径：同级目录 + 下级目录 + 上级目录 5. 音频标签、视频标签： audio标签、 video标签 + src属性 + controls属性 6. 链接标签： a标签 + href属性 + target属性