Web标准的构成:
Web标准中分成三个构成:
- 结构:HTML, 页面元素和内容
- 表现:CSS, 网页元素的外观和位置等页面样式(如颜色、大小等)
- 行为: JavaScript, 网页模型的定义与交互
Web标准要求页面实现:结构、表现、行为三层分离
- HTML身体 CSS样式 Js交互的动态效果
HTML页面结构:
页面中的固定结构是要通过特点的HTML标签进行描述的。
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主题内容
</body>
</html>
HTML骨架结构的标签:
- html标签:网页的整体
- head标签:网页的头部
- body标签:网页的身体
- title标签:网页的标题
一般情况下,使用的开发工具都是VS Code,当然也可以用别的,Dreamweaver、Webstorm、Sublime、Hbuilder等。
语法规范
1.HTML注释
方便阅读代码者观看,快捷键 ctrl+/
2.HTML标签的结构
- 标签由< > /英文单词或字母组成,<>里面的东西成为标签名。
- 常见的标签由两部分组成,就是双标签,前部分开始标签,后部分结束标签,两部分之间是内容。
- 少数部分由一部分组成,称之为:单标签,自成一体,无法包裹内容。
<br />
,我们称为单标签。注意:/
之前有一个空格。原则上比群殴爱你都应有结束符即 / 。 - 注意:实际开发中不建议给单标签加斜线,任何标签都建议不要大写。
3.标签关系
包含关系(父子关系)
<head>
<tilte></tilte>
</head>
并列关系(兄弟关系)
<head></head>
<body></body>
HTML标签学习
1.标题标签
为使网页更语义化,会在网页中用到标题标签。
代码:h系列标签
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
1~6级标题,重要程度依次递减
- 文字都会加粗
- 文字都会变大,并且从h1-h6文字逐渐减小
- 独占一行
2.换行标签
让文字强制换行显示——<br>
特点:单标签, 让文字强制换行
3.水平线标签
分割不同主题内容的水平线——<hr>,主题的分割转换
特点:单标签 ,在页面中显示一条水平线
4.文本格式化标签
需要让文字加粗、下划线、倾斜、删除线等效果,代码如下:
标签 | 说明 |
b(strong) | 加粗 |
u(ins) | 下划线 |
i(em) | 倾斜 |
s(del) | 删除线 |
语义:突出重要性的强调语境
5.媒体标签
- 图片标签
在网页中显示图片,代码:<img src=" " alt=" ">。
特点:单标签,img标签需要展示对应的效果,需要借助标签的属性进行设置。
属性注意:
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
alt是替换文本,当图片加载失败时,才显示alt的文本。
title是提示文本,当鼠标悬停时,才显示的文本。title属性不仅可以用于图片标签,还可以用于其他标签。
width:宽度;height:高度(数字),如果只设置width和height中的一个,另一个没设置就会等比例缩放(此时图片不会变形),如果同时设置两个,若设置不当此时图片可能会变形。
路径:页面需要加载图片,需要先找到对应的照片
- 绝对路径(了解)
目录下的绝对位置,可以直接到达的目标位置,通常从盘符开始。
盘符开头:E:\Web前端\test\day01\1.ipg
- 网络地址
完整的网络地址:https://i-blog.csdnimg.cn/blog_migrate/9acf311f758917b671b2c15859040411.png
- 相对路径(常用)
同级路径:当前文件和目标文件在同一目录中
相对路径分类 | 符号 | 说明 |
---|---|---|
同级路径 | . | 如:<img src="目标图片.png" >或<img src="./目标图片.png"> |
下级路径 | / | 如:<img src="image/目标图片.png" /> |
上级路径 | ../ | 如:<img src="../image/baidu.png" /> |
注意:相对路径为 /
(正斜杆),绝对路径为 \
(反斜杆),实际开发中一般都用不相对路径和网络地址。/
(正斜杆)是windows环境下,而linux系统依旧是反斜杠。
2.音频标签
在页面中插入音频 <audio src=" ./music.mp3" controls></adudio>
属性名 | 功能 |
src | 音频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
注意:音频标签目前支持三种格式:mp3、wav、ogg
3.视频标签
页面中插入视频。<video src="./video.mp4" controls></video>
属性名 | 功能 |
src | 视频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(谷歌浏览器中需配合muted实现静音播放) |
loop | 循环播放 |
注意:视频标签目前支持三种格式:MP4、WebM、Ogg
4.链接标签
点击之后,从一个页面跳转到另一个页面。称呼有a标签,超链接,锚链接。
代码:<a href="./目标网页.html">超链接</a>
特点:
- 双标签,内部可以包裹内容
- 如果需要a标签点击之后去指定页面,需要设置a标签的href属性
当开发网站初期,还不知道跳转地址的值,href的值可以写为#(空链接)点击之后回到网页顶部;href作用是跳转地址。
target属性:目标网页的打开形式
取值 | 效果 |
_self | 默认值,在当前窗口中跳转(覆盖原网页) |
_blank | 在新窗口中跳转(保留原网页) |
<a href="https://www.baidu.com/" target="_blank">跳转到百度</a>