1. Web前端开发三要素

1. web前端开发三要素

什么是HTMl？

• Html是超文本标记语言，是用来描述网页的一种标记语言
• HTML是一种标签规则的形式将内容呈现在浏览器中
• 可以以任意编辑器创建，其文件扩展名为.html或.htm保存即可

什么是CSS？

• CSS的中文名称为层叠样式表
• 是一种用来表现HTML或XML等文件样式的计算机语言
• 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页元素进行格式化

什么是JavaScript？

• 简称JS，但其与java开发语言没有任何的关系
• 被广泛的应用于web应用程序的开发
• 因为有了JS的加入，使得web应用程序可以实现各种页面动态效果

2. 三者的关系

2. 常用浏览器及其内核

1. 一般我们看到的浏览器
   
2. 主流浏览器的内核
   

3. HTML标签及语法规范

1. HTML标签及语法规范
   html标签是有尖括号保卫的关键词，例如

2. HTML标签绝大多数的情况下是成对儿出现的

3. 如和,第一个标签是开始标签，第二个标签是结束标签

4. HTML标签极少情况下是单个儿出现的，我们称之为单标签

5. 常见单标签
0,代表着换行的意思

6. 标签与标签的关系：包含关系、并列函数

• 标签的包含关系（父子标签）

• 标签的并列关系（兄弟标签）
  

7. 打开开发者工具（F12）
   

• 可以切换模式
  
• 里面就是这样的
  

4. HTML基本结构与环境搭建

• HTML基本结构

为文档类型声明，表示该文件为 HTML5 文件。 声明必须是 HTML 文档的第一行，位于 标签之前。

标签包含有关 HTML 文档的信息，可以包含一些辅助性标签。如 ， ， ， 等，但是浏览器除了会在标题栏显示

它是 HTML 文档的主体部分，在这个标签中可以包含等众多标签， 标签出现在 标签之后，且必须在闭标签 之前闭合。

• 京东网站结构如下：
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EXFhlrFu-1679040056954)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca2f23e32109429f89fda2ac49924087~tplv-k3u1fbpfcp-watermark.image?)]

5. HTML常用标签以及HBuilder IDE的下载地址

1. HBuilder下载官网地址：

   https://www.dcloud.io

• 进入官网，免费下载最新版的HBuilder。
• HBuilder目前有两个版本，一个是windows版，一个是mac版。下载的时候根据自己的电脑选择适合自己的版本。

2. HTML标签参考手册：https://www.w3school.com.cn/tags/index.asp

• 这是我的第一个html页面

我只是一个盒子，空盒子
我只是一个盒子，空盒子
我只是标题1
我只是标题2
我只是标题3
我是段落标签我是段落标签我是段落标签我是段落标签签我是段落标签我是段落标签我是段落标签我是段落标签我是落标签我是段
标签我是段落标签我是段落标签我是段落标签
我是连接跳转，跳转百度
我是无序列表
第一项
第二项
第一项
第二项
标题1
标题2
第一行第一列
第一行的第二列
第二行第一列
第二行第二列
 name=""id="">选项1选项2选项3

• 以上添加
代表段落
• 打开浏览器如下：

6. HTML静态页面实战一

会员登录立即注册享积分换礼、返现等专属优惠
普通登录手机动态密码登录
获取手机动态验证码
30天内自动登录记住密码
登  录
您也可以用合作网站的帐号登录去i旅行网

7. CSS基础

1. CSS简介

• CSS的主要作用就是美化网页，进行页面布局
• 更具体的说，CSS可以做字体大小，颜色，对齐方式等；图片的外形；页面的布局以及外观显示样式等等

2. CSS基础

• CSS由两个部分组成：选择器和多条式式式明
  
• CSS的样式代码写在head标签中的子标签style中

3. CSS基础总结

• 通过选择器可以具体指定修改HTML中具体谁的样式
• 选择器后边的大括号内是具体要修改的样式声明
• 样式的声明是由键值对儿的形式出现的，如key：value
• 属性和属性值之间使用英文冒号(:)进行分隔
• 多个键值儿之间使用英文分号（:）进行分隔

8. CSS选择器

1. CSS选择器的作用：
   根据不同的需求把不同的标签选出来
2. CSS选择器有哪些：
   标签选择器、类选择器、id选择器

• 标签选择器
  

• id选择器
  
• 类选择器
  
• HTML+CSS的表现

我只是一个盒子，空盒子
我只是一个盒子，空盒子
我只是标题1
我只是标题2
我只是标题3
我是段落标签我是段落标签我是段落标签我是段落标签签我是段落标签我是段落标签我是段落标签我是段落标签我是落标签我是段
标签我是段落标签我是段落标签我是段落标签
我是连接跳转，跳转百度
我是无序列表
第一项
第二项
第一项
第二项
标题1
标题2
第一行第一列
第一行的第二列
第二行第一列
第二行第二列
 name=""id="">选项1选项2选项3

保存之后打开百度刷新：