第一天：Web基础
今天是学习的第一天，我们需要学习的内容是 Web基础，也就是所有前端小白必须要了解熟悉的内容
一、网页是怎么组成的
- Html：内容层——负责页面的内容——文字、链接、图片…
- CSS: 样式层——负责页面的样式——颜色、大小、位置、表现…
- JavaScript：行为层——负责页面的行为——交互效果、轮播图
二、HTML 是什么
HTML：超文本标记语言 Hyper Text Markuip Language，可以把它简单理解成我们常见的网页，Html 是一门编程语言，由大量的标签组成。
超文本：指文本、图片、超链接、音频、视频…
标记（标签）：HTML的语法标签 <>
三、HTML的语法规则
1、HTML的特点
- HTML文档是以 .html 或者 .htm为后缀
- 需要由浏览器解析执行（默认代码从上往下、同一行从左往右执行）
- 页面中还可以嵌入JS代码（交互）
- 我们学习的是 HTML5 ，代表第5次重大版本修改，简称H5
2、语法基础
标签：<标签名>用尖括号包裹标签名，分为：
双标记标签，封闭类型标签
<开始标签> 内容区域 </结束标签> 例：
单标记标签，非封闭类型标签
<标签名/> h5 后可以单标记标签不加斜杠 <标签名> 例：
或
3、完整的HTML结构和基础标签
<!DOCTYPE HTML> <!-- 文档类型申明 -->
<!-- 写在html文件中的第一行，告诉浏览器，当前这个文档类型是HTML
并且使用了H5的语法编写的，请用H5的规范解析 --><html> <!-- 表示网页的开始与结束 --><head> <!-- 表示网页的头部，定义了当前页面的一些配置信息 --><meta charset = "utf-8"> <!-- 设置网页的编码，为了认识中文 --><title>我是标题：南昌彭于晏</title></head><body><!-- 网页的主体，所有可见的展示内容都在这里 -->我是要展示的内容<b>加粗文本 bold</b><strong>加粗文本</strong><i>斜体文本 italic</i> <u>下划线文本 underline</u><s>删除线（中划线）文本</s><del>删除线（中划线）文本 delete</del><mark>高亮标记文本</mark>上标字：X<sup>2</sup>下标字：y<sub>1</sub> <br><!-- 换行标签 --><!-- 以下的内容是转义符，同 <tom> -->< tom ><!-- 版权商标 圈 C -->©<!-- 注册商标 圈 R -->®<!-- 关闭符号 x -->×<!-- 带圈的关闭符号 x -->⊗<!-- 除号 -->÷<!-- TM商标 -->™<!-- 空格 （不使用转义符的话，多个空格与换行会折叠成一个空格显示） --> </body>
</html>
4、段落标签
<!-- 段落标签 换行、自带上下间距 --><p>我是一段话，代表自然段1</p><p>我是一段话，代表自然段2</p><!-- 标题字标签 加粗、换行、自带上下间距 --><!-- h6是最后一个标题字标签 --><!-- h4的字号和普通文字的字号一样大--><!-- 写错标签会展示普通文本--><h1>江西彭于晏</h1><h2>江西彭于晏</h2><h3>江西彭于晏</h3><h4>江西彭于晏</h4><h5>江西彭于晏</h5><h6>江西彭于晏</h6><!-- lorem + 回车 ，可以生成一个假文章 -->lorem5、分割线标签
<!-- 分割线标签 -->
<!-- color 颜色 size 像素 -->
<hr color="blue" size="10px">
四、Hbuilder 的快捷键
想要开始 html 的学习，必须下载相关的软件，Hbuilder就是一款前端开发的软件，可以去百度下载，下载地址如下：https://www.dcloud.io/
常用快捷键
- Ctrl+C 复制当前行
- Ctrl+V 粘贴当前行
- Ctrl+D 删除当前行
- Ctrl+↑/↓ 向上/向下移动当前代码
- Ctrl+/ 添加注释，再按一次取消注释
- 按出 Ctrl 点击多处可以同时编辑，按 Esc 退出多行同时编辑
- h1*100 按 Tab 键可以补全快速出现100个 h1标签
- 按 Ctrl + Enter 可以在下一行添加一个空白行
- lorem + 回车 ，可以生成一个假文章
五、图片
图片的分类
- pg / jpeg 普通图片
- png 带透明度的图片
- gif 动图
- webp 谷歌新出的图片格式（最清晰、体积最小）
你可以这样使用
src = 图片路径 （可以使用本地路径、也可以使用网络图片，使用网络图片时，需要使用绝对路径）
alt = 资源加载失败时显示的替换文字（非必填）
width = 图片的宽度，单位（% 或 px）
height = 图片的高度，单位（% 或 px）
建议修改图片宽高时，只修改宽度或高度，代码会根据设定的宽高比自动适配，如果宽高一起设置，需要按照图片宽高比例来调整。<!-- 直接填写文件名，表示在同一个文件夹内 -->
<img src="photo.jpg" alt="哎呀图片走丢了" height="100px" width="300px" >
<!-- 通过路径访问，表示在下一级目录中 -->
<img src="img/photo.jpg" alt="哎呀图片走丢了"> <!-- ../ 表示在上一级文件夹内 -->
<img src="../photo.jpg" alt="哎呀图片走丢了">
<!-- 使用网络图片 -->
<img src="https://cdn.tmooc.cn/bsfile//imgad///d65b725e8ffa4d8f9c764adde2837545.jpg" alt="">
自学如果缺乏恒心，专业知识就无法得到巩固，与大家共勉！
