文章目录
前言一、小白应该如何入门Web前端开发？二、HTML5-第一天a-认识HTML（阿巴阿巴...） 1.什么是HTML？2.HTML和CSS的关系？3.网页的结构、表现、行为？b-开始学习（学习前提） 开发环境搭建VScode插件推荐语法 注释、元素（标签）、属性块级元素行内元素c-基础标签的使用（重点！！！） h标签、p标签、br标签、hr标签、img标签、a标签div、span、video（HTML5新增）、audio（HTML5新增）总结前言
学习web前端开发的方法和途径有很多，本专题可以为基础弱、对web前端有兴趣的同学们参考和学习哟，或许我（准毕业生）的能力还不太能够为大家解决更多的问题，但是希望能给有需要的人提供一丝丝的帮助~~~(ง •_•)ง一起加油叭！！！
一、小白应该如何入门Web前端开发（将近3个月）？
以下是Web前端的学习内容和所学时间，可以让想学习的友友们心里有个底和查缺补漏。
二、HTML5-第一天
a-认识HTML
1、什么是HTML？
HTML是HyperText Markup Language(超文本标记语言)
它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与.htm作为HTML文件的后缀名（扩展名）
2、HTML和CSS的关系
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
HTML就像是一个人，而CSS就像是衣服和化妆品，用来装饰HTML
3、网页的结构、表现、行为？
结构——HTML用于描述页面的结构
表现——CSS用于控制页面中元素的样式
行为——JavaScript用于响应用户操作
b-开始学习（alt+b运行代码）
1、开发环境搭建
编译工具-VScode(推荐)
2、VScode插件推荐
HTML CSS Support - Html提示Css自动补全
HTML Preview - 提供预览HTML文档的功能
HTML Snippets - 完整的HTML标签，包括HTML5片段
Live Server - 启动一个开发本地服务器，为静态和动态页面提供实时重载功能
open in browser - 可以在默认浏览器或应用程序中打开当前文件。
3、语法
3.1、注释：ctrl+/
html中只有一种注释，即 <!--注释内容-->
记录编程思路，解释说明业务功能
3.2、元素（标签）
单标签元素，仅有一个标签 例如：<meta /> 、<img />、<br/>等
双标签元素，由开始标签和结束标签组成 例如：<div></div> <p></p>等
3.3、属性
HTML标签都拥有自己的属性，属性应该出现在元素的开始标签内部，属性名和属性值通过"="分割，属性与属性之间通过空格分割，属性名不区分大小写，属性值区分大小写并且属性值可以使用双引号引起来。
核心属性：绝大多数标签都具有的属性。title、id、class、style。
4、块级元素
作用：搭建网页结构
特点：
独占一行空间
默认宽度为100%
高度由子元素或内容决定
可以通过css指定其宽度
元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address...
建议：不要将块级元素嵌套在行内元素中。
5、行内元素
作用：在结构中填充网页内容
特点：
与其他行内元素共享一行空间
宽高由自身决定
由于不用来搭建网页结构，所以也无需通过css指定其宽度
行内元素中不可以嵌套块元素
元素：span、a、img、strong、b、i、em、sub、sup...
c-基础标签的使用（重点）
h标签—标题标签 h1~h6 在显示效果上，h1最大，h6最小
p标签—段落标签，段落标签用于表示内容中的一个自然段 使用p标签来表示一个段落
p标签中的文字，会独占一行，并且段与段之间会有一个间距
br标签—表示换行标签
hr标签—可以在页面中生成一个分割线
字符实体—
空格
< <
> >
“ "
& &
‘ '
img标签
作用：告诉浏览器要显示一张图片
img标签的格式 <img src="" alt="">
src:设置一个图片的路径（绝对路径和相对路径，最好使用相对路径） alt:可以用来设置在图片不能显示的时，对图片的描述 img标签的其他属性 width:设置图片的宽度 height:设置图片的高度 title：用于告诉浏览器，鼠标悬停的时候，需要弹出的描述框中显示什么内容。
a标签的作用 用于控制页面与页面之间跳转的
a标签的格式
<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>
<a href="" target="_blank" title="百度">百度一下</a>
注意点: 1.a标签不仅可以让文字点击，也可以让图片被点击 2.一个a标签必须有一个href属性，否则a标签不知道要跳转到什么地方 3.如果通过a标签href属性指定一个URL地址，那么必须在地址前面加上http://或者https:// 除了URL地址，还可以指定一个本地地址
video 标签
作用：播放视频 webm 网页中专用的视频格式
格式:<video src=""></video>
video标签的属性 src:告诉video标签需要播放的视频地址 autoplay:用于告诉video标签是否需要自动播放视频 controls:用于告诉video标签是否需要控制条 poster:用于告诉video标签视频没有播放之前显示的占位图片 loop:一般用于做广告视频，用于告诉video标签视频播放完毕之后是否需要循环播放 muted:静音 width/height: 和img标签中的一模一样
audio标签
作用: 播放音频
格式:
<audio src=""></audio><audio><source src="" type=""></audio>
注意点: audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样 只不过有3个属性不能用, height/width/poster
总结
啊啊啊写得xiao微有点疲惫了，大家看看可行嘛！！！！
对啦 如果想要源码的话可以在gitee里拉嗷 地址：
/little-hum/my-exercise.git
