1. WEB.
1. 什么是WEB
Web就是网页，是一种基于B/S的应用程序
B : Browser 浏览器
S ：Server 服务器
---------
C ：Client 客户端
S ：Server 服务器
2. Web 组成
浏览器 ：代替用户向服务器发送请求
服务器 ：接收用户请求并响应
通信协议 ：规范数据在网络中是如何打包即传递的
http : HyperText transfer protocal
超文本传输协议
3. Web 服务器
1. 作用 ：
接收用户请求并响应
存储Web信息
具备安全性功能
2. 产品 ：
1. Apache
2. Tomcat
3. IIS - Internet Information Service
4. Nginx
...
3. 技术
1. JSP - Java Sever Page
2. PHP
3. ASP.net
4. Python Web (Django Flask...)
4. Web 浏览器
1. 作用
代替用户向服务器发送请求
作为响应数据的解释引擎，向用户呈现界面
2. 主流浏览器产品
根据浏览器的内核/引擎进行划分
1. Microsoft IE
2. Google Chrome
3. Mozilla FireFox
4. Apple Safari
5. Opera Opera
浏览器引擎
1. 渲染引擎 -解析HTML,CSS,控制页面的渲染效果
2. JS引擎 - 解释网页脚本文件
3. 前端开发技术
HTML CSS JavaScript
2. HTML概述
1. HTML介绍
1. 什么是HTML
HyperText Markup language
超文本 标记 语言
作用 : 书写网页结构
2. 超文本
具备特殊功能的文本就是超文本
et :
普通文本 a : 普通字符
超级文本 a : 表示超链接功能
普通文本 b : 普通字符
超级文本 b : 表示加粗功能
3. 标记
也叫标签，主要是用来标记网页中的内容，以实现网页的布局和JS操作
2. HTML 在计算机中的表现
所有的网页文件在计算机中都是以.html /.htm文件存储的
开发工具 ：
1. 记事本
2. Editplus , Dreamweaver
3. sublime , Webstorm ,Hbuilder ,VSCode, Atom...
运行工具 ：
Chrome 浏览器
调试工具 ：
开发者工具，F12 打开
3. HTML 基础语法
1. 标签/标记
在网页中具有特殊功能的符号
1. HTML 中所有的标签都以<>为标志，区分普通文本
2. 标签分类
1. 双标签 ：成对出现，有开始有结束
<开始标签> 标签内容 </结束标签>
et :
<h1>一级标题</h1>
2. 单标签 ：只有开始标签，没有结束标签，可以手动添加/表示结束
<标签名>
<标签名/>
et :
<br> 换行标签--等同于 <br/>
<hr> 水平线 -- 等同于<hr/>
3. 标签嵌套
1. 在成对的标签中出现其他标签
超链接标签 ：<a>首页</a>
文本加粗标签 ：<b>首页</b>
---加粗的超链接文本---
<a>
<b>首页</b>
</a>
<b>
<a>首页</a>
</b>
2. 嵌套结构中，外层元素称为父元素，内层元素称为子元素
4. 文档结构
1. 新建文件，保存为.htm /.html格式
2. 书写一对html标签 <html></html>
3. 在html标签中嵌套一对 head 标签
4. 在html标签中嵌套一对 body 标签
5. 为body标签添加文本内容，内容不限
5. 书写规范
1. HTML不区分大小写 <HTML></Html>
推荐使用小写
2. 保持适当缩进，增强代码可读性
2. 标签属性
标签属性主要用来修饰标签的显示效果
语法 ：
1. 属性由属性名和属性值组成
属性名="属性值"
2. 属性的声明必须写在开始标签中
<开始标签 属性名='属性值'>..</结束标签>
3. 每个标签都可以设置多个属性，属性之间使用空格隔开
<开始标签 属性名='属性值' 属性名='属性值' 属性名='属性值'>..</结束标签>
4. 练习
在body标签中添加一对p标签，内容不限；
为p标签增加属性algin,取值 center
为p标签增加属性id,取值 p1
3. HTML 注释
<!--
注释内容
-->
注意 ：
1. 注释不能写在标签里的
错误 ：
<p <!-- -->></p>
2. 注释不能嵌套
4. HTML 中的换行于空格
HTML文档会忽略掉多余的空格，只显示为一个空格，如果需要显示多个空格或者 < > ，都需要使用特殊符号代替
4. HTML结构组成
1. 文档的类型声明
<!doctype html> h5的声明方式
作用 ： 告诉浏览器当前使用的HTML版本，以便浏览器能正确解析HTML标签和渲染样式
书写位置 ： 文档最开始位置
2. 文档的开始和结束
1. 在文档类型声明之后，使用一对<html></html>标签标示文档的开始和结束
2. 在HTML标签中，包含两对子元素
<html>
<head></head>
<body></body>
</html>
<head>标签标示网页的头部信息，包含网页的标题，选项卡的图标，网页的关键字，作者，描述等信息，还可以引入外部的资源文件
<body>标签表示网页的主体信息，网页所呈现的内容都要写在body里
3. <head>标签中包含的子元素
1. 设置网页的标题
<title>我的第一个网页</title>
2. 设置网页的字符编码
<meta charset="utf-8">
浏览器按照utf-8的编码方式解析网页
5. 文本相关的标签
1. 字符实体（具有特殊意义的符号）
1. 表示一个空格
2. < 表示小于号 <
3. > 表示大于号 >
4. © 表示版权符号
5. ¥ 表示人民币符号¥
2. 文本样式标记
1. 斜体显示文本 ：<i></i>
2. 文本添加下划线 ： <u></u>
3. 文本加粗效果 ：<b></b>
4. 文本添加删除线 ：<s></s>
5. 上标显示文本 ： <sup></sup>
6. 下标显示文本 ： <sub></sub>
练习 ：
这是一段有加粗，斜体，删除线，下划线，上标和下标的文本
特点 ：这些标签可以与其他的标签或文本共行显示
3. 标题标签
1. 作用
以不同的文字大小和加粗方式显示文本
2. 语法
<hn></hn> n取值 1- 6，字体大小是逐级递减的
<h1></h1> ：一级标题
...
<h6></h6> : 六级标题
练习 ：
咏鹅
骆宾王
鹅 ，鹅，鹅，
曲项向天歌，
白毛浮绿水，
红掌拨清波。
特点 ：
1. 会改变文字的大小并且具有加粗效果
2. 每个标题都会具备垂直的空白距离
3. 每个标题都独占一行，不与其他元素共行显示
4. 每个标题都可以添加属性 align
取值 ：left / center / right
设置文本的水平对齐方式，默认居左对齐
4. 段落标签
1. 作用
突出显示一段文本，每段文本都独占一行或一块，不予其他元素共行显示，并且也具备垂直的空白距离
2. 语法
<p></p>
属性 align 设置文本的水平对齐方式
取值 left / center / right
5. 格式标签
换行标签 <br> 等同于 <br/>
水平线标签 <hr> 等同于 <hr/>
6. 分区标签
1. 块分区
标签 ：<div></div>
作用 ：划分页面结构，配合CSS实现网页布局
特点 ：独占一行显示（独占一块）
2. 行内分区元素
标签 ：<span></span>
作用 ：设置同一行文本的不同样式（结合CSS）
特点 ：可以与其他元素或文本共行显示，允许在一行文本中使用多个span元素
7. 标签分类
1. 块级元素
只要在网页中是独占一行，不予其他元素共行显示的元素都是块级元素，简称块元素。例如 ：h1 h2 h3 h4 h5 h6,p,div...
作用 ：都可以做布局
特点 ：都可以添加algin属性，设置内容的水平对齐方式
2. 行内元素 / 内联元素
可以与其他元素共行显示的元素
例如 ：i b u s sub sup span
6. 列表标签
1. 作用
按照从上到下的方式来排列数据
并且能够显示项目符号在数据的前面
2. 列表的组成
1. 列表的类型
1. 有序列表 <ol></ol> (ordered list)
默认是按照数字排列
2. 无序列表 <ul></ul> (unordered list)
默认以实心原点作为标识
2. 列表项
列表中的每一条数据都是一个列表项
语法 ：<li></li>
注意 ：列表项要嵌套在列表标签中使用
et :
<ol>
<li>Java</li>
<li>PHP</li>
<li>Python</li>
</ol>
练习 ：
1. 创建新的HTML文件
2. 搭建网页结构
3. 在body中创建有序列表，分别展示四大名著
4. 再创建一个无序列表，展示四大天王
3. 列表属性
1. 有序列表 --ol
1. type属性 ：设置项目符号
取值 ：
1. 1 ：按照数字排列显示，默认值
2. a : 按照小写字母顺序排列
3. A ：按照大写字母排列
4. i : 按照罗马数字排列
5. I : 按照罗马数字排列
罗马数字 ：i ii iii iv v vi..
2. start属性 ：设置从第几个字符开始排列
取值 ：数字
2. 无序列表 -ul
1. type属性 ：设置项目符号
取值 ：
1. disc 实心圆点（默认）
2. circle 空心圆点
3. square 实心方块
4. none 不显示项目符号
4. 列表嵌套
在一个列表中又出现了其他的列表
<ul>
<li>
列表属性
<ol>
<li>type属性</li>
<li>start属性</li>
</ol>
</li>
</ul>
每一部名著中都列出三个主要人物
1. 水浒传
1. 武松
2. 西门庆
3. 潘金莲
2. 西游记
1. 大师兄
2. 二师兄
3. 沙师弟
7. 图像与超链接标签
1. URL
Uniform Resource Locator
统一资源定位符 ：用来标识网络中资源的位置，俗称路径
URL 组成 ：协议 域名 文件目录及文件名
URL分类 ：
1. 绝对路径
从根目录开始查找
常用于网络文件路径
et :
访问网络资源
http://www.baidu.com
http://www.baidu.com/img/logo.png
2. 相对路径
从当前文件所在的文件夹开始查找
3. 根相对路径 （了解）
从Web程序所在的根目录开始查找资源文件
注意 ：
1. 网络URL中不能出现中文
2. URL是严格区分大小写的
2. 图像标签
1. 在网页中插入一张图片
2. 语法 ：<img>
3. 属性 ：
1. src :指定要显示的图片路径
2. width ：设置图片的宽度，以像素px为单位，也可以省略单位
3. height ：设置图片的高度
注意 : src 为必填属性，宽高可以省略，省略宽高的话，图片将以原始尺寸显示在网页中
4. title ：用来设置图片的标题，当鼠标悬停在图片上方时出现
5. alt : 用来设置图片加载失败之后的提示文本
复习：
1. 文档基本结构
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
网页主体
</body>
</html>
2. 常用标签
1. 标题标签 h1 - h6
2. 段落标签 p
3. 加粗 b 斜体 i 下划线 u 删除线 s 上标 sup 下标 sub
4. 换行 br 水平线 hr
5. 块分区 div 行内分区 span
6. 有序列表 ol 无序列表 ul 列表项 li
<ol>
<li>
<ul>
<li></li>
</ul>
</li>
</ol>
7. 图片 <img src="">
8. 标签分类
1. 块元素 h1 - h6 p div ul ol li
特点 独占一行，不予其他元素共行显示
2. 行内元素 span i b u s sub sup
特点 可以与其他元素共行显示
-------------------------------------------------
1. 超链接标签
1. 什么是超链接标签
能够实现从当前文件跳转到其他文件的标签
2. 语法
<a>超链接文本</a>
标签属性 ：
1. href :必填属性，指定链接地址，以路径形式给出,#表示当前页，不会发生页面刷新操作，如果属性为"",也表示当前页，但是包含了网络请求，相当于刷新页面。
2. target :可选属性，设置目标文件的打开方式
属性值 ：
1. _self :默认值，表示在当前窗口打开
2. _blank :表示新建
最低0.47元/天 解锁文章
1434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
