1. Web
1. 什么是WEB
Web就是网页,网页其实是基于B/S模式的应用程序
B/S : Browser / Server
C/S : Client / Server
2. Web 的组成
浏览器 :代替用户向服务器发送请求
服务器 :接收用户请求并响应
通信协议 :规范数据传输及打包方式
3. 服务器
1. 作用 :
接收用户请求并响应
存储数据
具有安全性功能
2. 产品 :
1. Tomcat
2. Apache
3. Nginx
4. IIS - Internet Information Service
...
3. 技术 :
1. Python-Web (Django , Flask...)
2. PHP
3. JAVA
4. ASP.net
5. JSP... JAVA Serverlet Page
4. 浏览器 :
1. 作用 :
代替用户向服务器发送请求
作为响应数据的解释引擎,呈现图形化界面
2. 主流的浏览器产品 :
1. Chrome - Google公司
2. IE - Microsoft
3. Safari - Apple
4. Firefox - Mozilla
5. Opera - Opera
3. 浏览器引擎(内核)
1. 渲染引擎 - 解析HTML、CSS,控制页面渲染效果
2. JS引擎 - 解析JS脚本
4. 前端技术
1. HTML 书写页面结构和内容
2. CSS 设置网页中元素的样式
3. JS 实现网页的交互
-----------
4. 工具库,框架
2. HTML 概述
1. HTML介绍
1. HyperText Markup Language
超文本 标记 语言
作用 :书写页面结构
2. 超文本 :
具有特殊功能的文本
et :
普通文本 a
超文本 a 表示超链接
普通文本 b
超文本 b 表示加粗
3. 标记
也叫标签、元素
主要用来标记网页中的内容
可以实现网页布局及JS交互
2. HTML在计算机中的表现形式
网页文件在计算机中都是以.html / .htm 后缀表示
开发工具 :
1. 记事本
2. EditPlus Sublime WebStorm VSCode
运行工具 :浏览器 以Chrome浏览器为准
调试工具 :浏览器开发者工具 F12
3. HTML基础语法
1. 标签 / 标记
1. HTML中的标签都以<>为标志
2. 标签分类 :
1. 双标签 :成对出现,有开始标签,有结束标签
et :
<html> </html>
2. 单标签 : 只有开始标签,没有结束标签,
可以手动添加/表示闭合
et :
<hr> 水平线
<hr/>
3. 标签嵌套
1. 在成对的标签中出现其他的标签
<html>
标签内容
</html>
--------------
<html>
<head>
网页的头部信息
</head>
<body>
网页的主体信息
</body>
</html>
2. 在嵌套结构中,外层标签称为 “父元素”,内层
元素称为“子元素”,多层嵌套时,
内部元素称为后代元素
4. 文档结构
<html> 文档开始
<head>
网页头部信息 :编码方式,网页名称
网页选项卡的小图标,网页信息介绍
引入外部资源文件
</head>
<body>
网页的主体信息 :所有需要呈现给用户的
,需要显示在窗口中的内容,都应在body
中书写
</body>
</html> 文档结束
5. 标签属性
标签属性主要是用来修饰当前标签的显示效果,
对当前标签或者网页的补充设置
语法 :
1. 书写位置 :
标签属性都书写在开始标签中,与标签名之间
使用空格隔开
2. 属性是由属性名和属性值组成的
属性名="属性值"
属性值必须使用引号引起来,单双引号都可以
3. 多个属性时,属性之间使用空格隔开
6. HTML 语法规范
1. HTML 不区分大小写,html HTML htML
推荐使用小写字母
2. 保持适当缩进,保证代码可读性
3. 保持适当注释,保证代码可读性
7. HTML注释
<!--
注释内容
-->
注意 :
1. HTML 注释不能嵌套
2. 不能书写在标签内部的
<body <!-- -->> 错误
</body>
8. HTML中的换行与空格
HTML 会忽略多余的空格,只显示为一个空格
代码中的换行,在浏览器中也表现为一个空格
4. HTML文档组成
1. 文档类型声明
<!DOCTYPE html> 声明当前为HTML文档
这种是 H5 的声明方式
作用 :
1. 告诉浏览器文档为HTML文档
2. 按照H5的渲染方式解析网页
书写位置 :
文档开头,<html>标签之前
2. 文档内容
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
网页主体
</body>
</html>
说明 :
<meta charset="utf-8">
设置网页的字符编码方式
------------------------
<title>百度一下,你就知道</title>
设置网页标题
想要看更多的课程请微信关注SkrEric的编程课堂