前端学习第一天

认识网页
一个标准的web需要那些元素
• 结构——html
• 样式——css
• 行为——js

html的骨架

自己的代码

html的初识
概念：超文本标记语言

标签的关系
• 嵌套关系——父子关系
• 并列关系——兄弟关系

html中的标签
标题h系列标签
语义：标题

显示特点 1. 文字都有加粗 2. 文字都有变大，但是从h1~h6逐渐减小 3. 独占一行 注意点 h1不能乱用，一般只用于新闻的标题或者网页的logo

段落标签
p标签
语义：段落
显示特点

1. 段落之间有默认的间隙
2. 独占一行

水平线标签
hr标签
单标签
作用：在网页中显示一条水平线

换行标签
br标签
单标签
作用：强制换行

文本格式化标签
第一组：没有语义
b：加粗
u：下划线
i：倾斜
s：删除线
第二组：有语义的
加粗：strong
下划线：ins
倾斜：em
删除线：del

标签的属性
给html标签添加附加信息，让同一种标签有不同的效果
结构：属性名="属性值"
注意点
1、一个标签上可以有多个属性，并且属性之间以空格隔开（规范）
2、属性与标签名之间必须以空格隔开
3、属性之间没有顺序之分
4、标签的属性不完全一样
图片标签
img标签
作用：在网页中显示一张图片

属性
1、src：图片的路径
2、alt：替换文本——只有当图片加载失败时，才会显示的文字
3、title：图片的标题——鼠标悬停在图片上时，才会显示的文字
4、width宽度/height高度——如果只设置了其中的一个，另一个会等比例缩放
注意点
一般只会设置width或者height中的一个，如果同时设置了两个，图片可能会拉伸变形

路径问题
当前文件找目标文件的过程
当前文件：当前的网页
目标文件：要显示的图片

绝对路径
1、在个人电脑中，带有盘符的路径
2、外部链接，以https://开头的路径

相对路径
同级目录
1、直接写目标文件的名字
下级目录
1、写目标文件所在文件夹的名字
2、进入目录文件夹
3、直接写目标文件的名字即可
上级目录
1、去上一级目录../
2、直接写目标文件的名字即可