开发第一个网页-元素
回顾 0324上午
一、邂逅前端开发
1.1.软件开发、软件开发体系
1.2.完善的应用程序包括那些？
- 服务器开发
- iOS开发 Android开发
- web开发
- 桌面开发 (window Mac)
1.3.前端开发的内容
- 前端开发的任务
- web开发 小程序开发
- 移动端 桌面端 服务端开发(Node)
- 前端开发的路线
1.4.学习方法和学习建议
- 学习任何新的东西的，最好了解他的历史，局限行、本质
- 知识进行分类
- 常用的知识 必须熟练掌握
- 不常用的知识i 知道有它，知道在哪里查
二、邂逅Web开发
2.1.电脑配置、推荐如阿纳金
2.2.网站和网页的关系
2.3.网页的显示过程
- 用户的角度
- 前端开发工程师的角度
- 服务器是什么？
2.4.网页的组成部分
- HTML
- 网页的结构
- CSS
- 网页的样式(美化)
- JavaScript
- 网页的交互(灵魂)
浏览器的作用
- 浏览器最核心的部分其实 ”浏览器内核“
- 浏览器最核心的部分是渲染引擎，一般也称之为 ”浏览器内核“
- 负责解析网页语法，并渲染(显示)网页
常见的浏览器
- Trident(三叉戟)
- IE
- 360安全浏览器
- 搜狗高速浏览器
- 百度浏览器
- uc浏览器
- Gecko(壁虎)
- Mozilla Firefox
- Presto(急板乐曲) -> Blink(眨眼)
- Opera
- Webkit
- Safari
- 360极速浏览器
- 搜狗高速浏览器
- 移动端浏览器
- Webkit -> Blink
- Google Chrome
- Edge
不同的浏览器内核有不同的解析、渲染规则，所以在同一网页在 不同内核的浏览器中的渲染效果也可能不同
我的第一个网页
记事本开发
<!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>
HelloWorld
</body>
</html>
<!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>【奋进新征程 建功新时代·伟大变革】福建木兰溪的绿色之变</h1>
<h3>
1.央视网消息（新闻联播）：位于福建省莆田市的木兰溪曾经水患严重，20多年前，习近平总书记在福建工作期间，指挥推动木兰溪流域治理，木兰溪也成为了全国第一条全流域系统治理的河流。
</h3>
<p>
2.党的十八大以来，福建广大干部群众牢记总书记嘱托，坚持不懈、久久为功，木兰溪再次迎来绿色之变，昔日水患之河如今已成为造福人民的生态之河、发展之河。
</p>
</body>
</html>
邂逅HTML
- 不是编程语言 ，而是一种标记语言
-
超文本标记语言是一种用于创建网页的标记语言
- HTML元素是构建网站的基石
-
什么是标记标记语言
- 有无数个标记(标签、tag)组成
- 是对某些内容进行特殊的标记，以供其他解释器识别处理
- 比如使用<h2></h2>标记的文本会被标识为“”进行加粗、文字放大显示
- 由标签和内容组成的部分成为元素
-
什么是超文本呢
- 不仅仅可以插入普通的文本，还可以插入图片、音频、视频等内容
- 还可以表示超链接，从一个网页跳转到另一个网页
-
HTML文件的扩展名.html .htm
- 因历史遗留问题，win95/win98系统的文件扩展名不能超过3字符，所以使用.htm
- 现在同一使用.html
-
HTML文件的特点 - 结构
<!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></body> </html>
此时安装了搜狗输入法
- 摒弃微软输入法
- 虽然好用，但是还是使用搜狗输入法的工具
VSCode开发工具
开发工具选择
- 记事本
- 创建和管理文件不方便
- 没有颜色表示
- 没有智能提示
- 无法调试程序
- VSCode
- webstorm
- sublime text
- atom
- hbuilder
- idea
- dreamwear
- 智能提示
- 高亮识别
- 语法检测
- 集成环境
- 开发效率高
上课推荐开发工具
- Webstorm
- 优点
- 集成开发工具，包罗万象
- 缺点
- 重
- 收费
- 优点
- VSCode(微软开发的)
- 优点
- 免费
- 缺点
- 需要安装一些插件来辅助开发
- 优点
<!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>
<style>
.red {
color: #ff0000;
}
</style>
</head>
<body>
<h1>【奋进新征程 建功新时代·伟大变革】福建木兰溪的绿色之变</h1>
<h3>
1.央视网消息（新闻联播）：位于福建省莆田市的木兰溪曾经水患严重，20多年前，习近平总书记在福建工作期间，指挥推动木兰溪流域治理，木兰溪也成为了全国第一条全流域系统治理的河流。
</h3>
<p>
2.党的十八大以来，福建广大干部群众牢记总书记嘱托，坚持不懈、久久为功，木兰溪再次迎来绿色之变，昔日水患之河如今已成为造福人民的生态之河、发展之河。
</p>
</body>
<script>
const name = "why";
function abc() {
console.log("终端");
}
</script>
</html>
认识元素
- 我们会发现HTML本质上是由一列系列元素构成的
什么是元素
- 元素是网页的一部分
- 一个元素可以包含一个数据项，或是一个块文本，或是一张照片，亦或是什么也不包含
HTML有哪些元素呢
- MDN看文档
元素的组成
剖析一个HTML元素的组成
- 元素的组成
- 开始标签
- 内容
- 结束标签
- 元素分类
- 单标签元素
- 双标签元素
编写第一个元素
<!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>
<p>
<span></span>
</p>
<p>我是段落</p>
</body>
</html>
元素 单双标签
<!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>
<!-- 1.注释 双标签 -->
<p>
<span></span>
</p>
<p>我是段落</p>
<!-- 2.注释 单标签 -->
<img src="" alt="" />
<input type="text" />
</body>
</html>
注意事项
- HTML元素不区分大小写，但是推荐小写
元素的属性
- 元素也可以拥有属性
- 属性包含元素的额外信息，这些信息不会出现在实际的内容中
- 一个属性必须包含如下内容
- 一个空格
- 属性名称
- 一个属性值
<!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>
<style>
.title {
color: red;
}
</style>
</head>
<body>
<!-- <h1 属性名="属性值">我是标题</h1> -->
<h1 title="我是标题" class="title">我是标题</h1>
<h1>我是标题</h1>
<!-- 超链接 -->
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
元素属性的分类
- 有些属性是公共的
- class
- id
- title
- 有些属性是特有的
- meta属性的charset属性
- img元素的alt属性
元素的结构总结
元素的结构回顾
- 开始标签
- 属性
- 属性名
- 属性值
- 属性
- 内容
- 结束标签
元素的嵌套关系
<!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>
<div>
<span>aaa</span>
<span>bbb</span>
</div>
<div></div>
</li>
<li></li>
</ul>
</body>
</html>
- 元素之间的关系
- 父子关系
- 兄弟关系
为什么需要注释
程序员才懂的冷笑话
- 在我写这段代码的时候，只有我和上帝知道这段代码是什么意思
- 一段时间之后，只有上帝知道是什么意思了
为什么会出现这样的情况呢
- 随着学习的深入，你的一个程序不再是几行代码就可以搞定的了
- 可能我们需要写出有上千行，甚至上万行的程序
- 某些代码完成某个功能后，你写的时候思路很细清晰，但是过段时间会出现为什么这样写 的情况，这很正常
和同事协同开发
- 在实际开发工作中，一个项目通常是多人写作完成的，可能是几个或者十几个等等
- 这个时候，你可能需要使用别人写出的代码功能，别人也可能使用你的代码功能
- 如果你的代码自己都看不懂了，更何况你的同事呢
HTML的注释
什么是注释
- 简单来说，注释就是一段代码注释
- \
- 注释是只给开发者看的，浏览器并不会把注释显示给用户看
注释的意义
- 帮助我们自己理清代码的思路，方便以后进行查阅
- 与别人合作开发时，添加注释，可以减少沟通成本
- 开发自己的框架时，加入适当的注释，方便别人使用和学习
- 可以临时注释掉一段代码，方便调试
快捷键
- ctrl + /
回顾 0326
一、浏览器和浏览器内核
常见的浏览器
- 核心部分浏览器内核 ： 渲染引擎
二、开发自己的第一个网页
2.1.记事本开发网页
2.2.对网页进行补充
- 增加标记 -> 元素 -> 浏览器 -> 渲染对应的浏览器
- 增强网页的结构
- html
- head
- title
- body
- h1
- p
- div
- span
- a
- head
- html
2.3.HTML语言
- 超文本标记语言
- 为什么叫标记语言
- 超文本
- 图片 音频 视频 超链接
- 超文本
- 为什么叫标记语言
2.4.开发工具
- 安装
- 安装插件
- 配置
2.5.剖析元素结构
- 开始标签
- 结束标签
- 内容
- 属性
- 元素的嵌套
2.6.HTML注释
- 理解注释的作用
- HTML注释的编写方法
- ctrl + /
课后作业
一、说出软件和应用程序的区别(自己整理)
二、说出一个完善的应用系统包含哪些环节
三、整理出网页从编写到浏览器显示的整个过程(重要)
- 用户角度
- 用户在浏览器输入一个网址
- 浏览器会找到对应的服务器地址，请求静态资源
- 服务器返回静态资源给浏览器
- 浏览器对静态资源进行解析和展示
- 前端工程师
- 开发项目
- 打包、部署项目到服务器里面
四、服务器是什么? 说出你的理解
- 一台类似于个人电脑的主机
- 特点
- 24h运行
- 没有显示器
- 一般系统为linux
- 特点
五、网页的三大组成是哪些？分别说出他们的作用
- HTML
- 网页的内容结构
- CSS
- 网页的视觉体验
- JavaScript
- 网页的交互处理
六、浏览器内核是什么？有哪些常见的浏览器内核
- 渲染引擎
- 负责解析网页语法，并渲染(显示)网页
- 常用浏览器内核
- Trident
- Presto
- Gecko
- webkit
- blink
七、手动编写出HTML页面的结构(不利用开发者工具提示)
- html
- head
- title
- body
- p
- div
- h1
- a
- span
- head
八、元素的结构是什么？有哪些单标签元素、双标签元素
- 开始标签
- 属性
- 属性名
- 属性值
- 属性
- 内容
- 结束标签
- 双标签元素
- div
- p
- ul
- li
- h1
- i
- 单标签
- input
- img
- br
- 双标签元素
九、元素之间有哪些关系？写出一个例子，并且说明他们的关系
- 兄弟关系
- div
- div
- 父子关系
- div
- div
- div
十、注释的作用，HTML的注释如何编写
- 帮助我们理清代码的思路，方便以后进行查阅
- 与别人合作开发时，添加注释，可以减少沟通成本
- 开发自己的框架时，加入适当的注释，方便别人使用和学习
- 可以临时注释掉一段代码，方便调试
- 注释的写法
- \
- 快捷键
- ctrl + /
- 注释的写法
