前端学习第一天(HTML篇)

HTML是一种超文本标记语言,是一种标记语言。

一、HTML的基本骨架

• html:代表的是整个网页
• head:网页的头部，存放给浏览器看的代码。例如:css样式
• body:网页的主体，存放给用户看的代码。例如:文字和图片
• title:网页的标题

知识小科普:在vscode中输入!并按下TAB或者ENTER健，即可快速生成HTML基本骨架 

二、标签 

标签的关系

• 父子关系 (嵌套关系)
• 兄弟关系 (并列关系)

标题标签(双标签)

一般用在新闻标题、文章标题、网页区域名称、产品名称等等

标题标签一共有6个h1-h6，其中h1标签在整个网页中只能出现一次，一般作为网站logo或大标题。

字体大小随标签的递进而减小

 段落标签(双标签)

一般用在新闻段落、文章段落、产品描述等

写法:<p>内容</p>

特点:独占一行，段落之间存在间隙

文本格式化标签(双标签)

作用:为文本添加特殊样式，以突出重点，常见的文本格式:加粗、倾斜、下划线、删除线等。

值得注意的是虽然strong和b标签都是加粗，但在实际应用的时候strong更加能起强调作用。 

图像标签

作用:在网页中插入图片

写法:<img src="">

src指的是路径(可以是本地路径，也可以是URL)，它是img标签的必要属性。

 图像标签-属性

 

当鼠标悬停在图片上时                                 当图片不能正常显示时                                           

 src是属性名，而其路径则是属性值

属性名='属性值'

属性名卸载尖括号里面，标签名后面。属性名与标签之间用空格隔开，不区分先后顺序。

路径 

相对路径:从当前文件位置出发查找目标文件。

绝对路径:从盘符出发找到目标文件

                        windows 电脑从盘符出发

                        mac 电脑从根目录出发

相对路径

从当前文件夹开始查找目标文件

/ 表示进入该文件夹                                                                                        文件夹名/

. 表示当前文件的文件夹                                                                 ./ ( 表示进入当前文件的文件夹)  

.. 表示当前文件文件夹的上一级文件夹                       ../ (表示进入当前文件文件夹的上一级文件夹)

绝对路径 

• Windows 电脑从盘符出发
• Mac 电脑从根目录(/)出发

 

 在windows电脑默认是\，其他操作系统是/，建议统一写为/

超链接标签(双标签) 

作用:点击跳转到其他页面。

href属性值是跳转地址，是a标签的必要属性 

点击(跳转到百度)即可跳转到相关网址 

 扩展:在开发初期，跳转网址不确定时可以用#代替

a标签有个target属性，可以控制跳转网页时，是覆盖当前页面，还是打开一个新窗口。在这里_blank属性值可以在跳转网页时，打开一个新窗口来显示跳转的网页 

音频标签 

src里放音频文件路径，它是audio标签的必要属性。

除此之外audio标签还有四个常见属性 

在html中如果属性与属性值相等，则可以缩写为一个。也就是说controls='controls' 以此类推。

视频标签 

src放视频的路径，或者url，它是video的必要属性。

除此之外video还有几个常见属性;

 其中controls loop autoplay 属性的功能与音频标签audio一致，只是多了一个muted。当muted属性与autoplay属性同时存在时，浏览器支持其自动播放。

三、总结

网页制作思路:从上到下，先总体再局部，逐步实现。