Html5+Css3--DAY ONE

一.准备开发环境

开发软件的介绍

编辑器:VS Code

编辑器的作用是写代码，vs是一个集成平台，除了网页还可以编辑如pt，java等语言的内容，当然对于一个前端工程师学网页VS Code就够了

VS Code下载链接:Visual Studio Code - Windows官方下载 | 微软应用商店 | Microsoft Store

浏览器:谷歌浏览器

谷歌浏览器主要是用来查看VS Code代码编辑出来之后网页的效果。

谷歌浏览器下载链接:Chrome浏览器

二.VS Code的基本使用

打开文件夹:我们做网页肯定需要一个文件夹，怎么在VS Code中打开文件夹呢，我们只需要将文件夹拖拽到VS Code中即可,或者

安装插件

安装插件扩展→搜索插件→安装→重启VS Code打开

网页插件：open in browser  汉化菜单插件：Chinese

设置默认

三.标签语法

HTML定义

HTML超文本标记语言一一HyperText Markup Language。

超文本是什么:链接

标记是什么:标签，带尖括号的文本

标签语法

标签就是不同类型内容的头尾，在标签中放内容就行了

比如你想加粗文字，就<strong>内容</strong>

拓展

有双标签也有单标签，strong就是双标签，比如br换行，hr水平线就是单标签

四.Html基本骨架

heml中包含head和body，head:网页头部，存放给浏览器看的代码，例如CSS。网页主体，存放给用户看的代码，例如图片、文字。html:整个网页，title是网页的标题，左上角网页的标题

我们可以通过!快速生成骨架

五.标签的关系

父子关系(嵌套关系）

兄弟关系（并列关系）

前后缩进技巧：tap快速向后缩进四格

                         shift tap向前缩进四格

六.注释

注释的内容不会在文件中执行，但是在开发文件中可以看到，通常用来项目代码的备注

在VS Code中，添加/删除注释的快捷键：Ctrl+/      再按一次就会取消注释

七.排版标签--标题和段落

标题标签

标签名：h1~h6(双标签)<h1> </h1>

显示特点：文字加粗   字号逐渐减小    独占一行（换行）

经验分享：h1标签在一个网页中只能用一次，用来放新闻标题或网页的logo

                  h2~h6没有使用次数的限制

段落标签

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

<p> </p>

独占一行，两个段落之间有间隙

八.换行和水平线标签

换行：<br>(单标签)

备注：浏览器不识别enter换行，想换行你得手动br换行，但是换行说的是行内元素之间的换行，块级元素默认换行，后面会将行内元素和块级元素

水平线：<hr>(单标签)

九.文本格式化标签

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

十.图像标签

作用：在网页中插入图片。

<img src="图片的URL">

alt没啥用，以前网速慢，无法显示图片显示这个，现在不会网速慢，一般不用，title有需求的时候可以写

十一.路径

分为绝对路径和相对路径

绝对路径是从盘符开始比如c盘d盘，而相对路径是从当前文件夹开始，有一套文件查找的方法：从所在的文件夹开始查找就用./ 比如在a文件夹小有b和c，我们当前所在文件夹为a，那我们想找到b就./b      b 下有d就./b/d  还有就是上一级,比如a上一级是z  就../，也就是说../是跳转到上一个文件夹,而./是从当前文件夹开始选中

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

<a href:="https:/www.baidu.com">跳转到百度</a>
href属性值是跳转地址，是超链接的必须属性。

当我们点击超链接之后会出现两种情况，一种是这个网页直接变成链接网页，一种是打开新网页，我们默认是第一种，而我们想要第二种就需要加属性

target="_blank"

十二.音频标签和视频标签

音频标签

视频标签

综合案例:

【前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员】https://www.bilibili.com/video/BV1kM4y127Li?p=15&vd_source=cead36ae88c0936fc0fb7d7b3a5817a9

作者的话：

这是一篇笔记内容，内容摘自黑马程序员，如有侵权请联系删除

我在做每一件事的时候都希望把收货详细的留下来，因为我经常会忘，所以我讲它更新并且记录下来，详细的记录是为了更好的学习。

博主辛辛苦苦整理的，希望可以点个赞两个关注，我会努力持续更新高质量文章