HTML5
1.网页开发概念
1.目标
什么网页？ 什么是网站，网站和网页的关系？
2.实现思路
1. 互联网公司有很多， 譬如：京东，淘宝，拼多多等等，都有自己的网站，网站的特点，有很多网页组成的。
2. 网页是由html（接下来要学的） ```css javascript(后面要学习)```组成的.
3. 网站包含网页
3.效果呈现
2.开发工具的安装
1.目标
我们知道了，网站是由若干网页组成的，网页是有html,css，js编写的, 那么我们需要先学习html，在学习html时，我们需要开发工具 vscode.
2.实现思路
-
百度上搜索
vscode，进入到vscode官方网站 -
我们下载，
vscode是开源的，就免费使用 -
双击安装包
标题标签
1.目标
我们会咨询类等各大网站看到一些文章，都有标题，我们要学会使用标题标签，能够写出标题
2.实现思路
- 打开
vscode， 新建一个xxx.html文件 - 安装shift + ！ 生成一个html结构 回车
- 在html body结构中使用h1标签，完成标题的开发。
3.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>此生第二次写的 Hello World</h1>
</body>
</html>
4.总结
-
h1是一级标题，具有很高特出强调， 它的语义是标题， 我们在开发网站时，比较重要的logo, 或者是段落的标题，可以突出他们重要性，我们可以使用h1标签
2.h1标题， 每个网页或者是每个xxx.html文件中，只能有一个h1标签， h1它的语义是强调重要性，便于网站SEO优化，便于被搜索出来
-
标题： h1-h6
4.注释
1.目标
我们在实际开发， 一个项目会划分为前端和后端，无论还是前端还是后端，都需要团队合作，大家的写的代码，方便别人阅读，新员工来交接工作时，为了方便交接工作，我们需要把自己当代码注释要写好。
2.语法
-
单行注释
-
多行注释
<!-- 多行注释： -->5.段落标签
1.目标
在新浪, 腾讯一些新闻网站，看到一些文章段落，使用p标签完成
2.实现思路
- 在html中写一个成对的p标签
- 把内容放到p标签里面
3.总结
- 段落使用p标签，每个段落使用一个p标签
- 每个p标签内容会换行显示
5.无序列表
1.目标
生活中，我们超时买铅笔，橡皮，本，尺子等，都是看成商品列表， 我们使用列表相关的标签
2.实现思路
1.在html 使用 ul和 li标签来实现一个列表
ul标签包含li标签
3.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>铅笔</li>
<li>笔记本</li>
<li>尺子</li>
<li>橡皮</li>
<!-- <li></li>
<li></li>
<li></li>
<li></li> -->
</ul>
</body>
</html>
4.总结
当一个列表无需排序时，我们可以使用ul li完成无序列表, 注意：li标签会自带小圆点的样式。
6.有序列表
1.目标
音乐排行榜，成绩表，都是列表，特点是有序， 这时需要使用有序列表完成开发
2.实现思路
-
使用
ol 和 li完成有序列表 -
在浏览器预览1
3.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>音乐排行榜</h3>
<ol>
<!-- <li>凤凰传奇</li>
<li>玖月奇迹</li>
<li>黑豹乐队</li>
<li>黄家驹</li> -->
<!--shift + alt + 下箭头 往下复制你选中内容 -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>
4.总结
- 有序列表
ol li， 突出有序的特性， 自带序号（1,2,3） - li元素之间都是隔行显示
7.语义化
-
html语义化就是使用正确的标签做正确的事
比如： 列表没有顺序，使用
ul li标题 就要使用h标签， 段落就是使用p标签， 有序列表就是ol li -
标签语义化的作用， 便于爬虫爬取，有利于搜索引擎优化，有利于SEO
