一. Web
1.什么是WEB？
Web就是网页，网页是一种基于B/S模式的应用程序
B/S : 浏览器与服务器交互模式（Browser / Server）
C/S : 客户端与服务器交互模式（Client / Server）
2.Web 的组成
1.浏览器 ：代替用户向服务器发送请求，解析数据并呈现请求
2.服务器 ：接收用户请求并响应
3.通信协议 ：http/https/ftp/file…
规范数据在网络中是如何打包和传递的
http:超文本传输协议
http：加密的超文本传输协议
3.web服务器
1作用
- 接受请求并响应
- 存储数据
- 具有安全性功能
2产品
- Apache
- Tomcat
- IIS - Internet Information Service
- Nginx
…
3技术
- JSP - JAVA Server Page(JAVA 服务器页面)
- PHP
- ASP.net
- Python Web(Flask, Django…)
4.浏览器：
1.作用：
代替用户向服务器发送请求，也叫用户代理user agent；
作为响应数据的解释引擎，向用户呈现图形化界面。
2.产品:
Google公司----chrome (webkit内核)
Opera公司-----Opera
Mozilla公司----Firefox
Apple公司-----Safari (webkit内核)
Microsoft公司–IE、 Edge
3.浏览器内核（引擎）
- 渲染引擎 - 解析HTML、CSS，控制页面渲染效果
- JS引擎 - 解析JS脚本
4.前端技术
- HTML 书写页面结构和内容
- CSS 设置网页中元素的样式
- JS 实现网页的交互
- 工具库，框架
二. HTML 概述
1.什么是HTML？
即：HyperText(超文本)–Markup(标记)–Language(语言)
超文本： 网页中一切的内容：文本，图片，音视频等都是超文本。
标记： 也叫标签、元素，主要用来标记网页中的内容，可以实现网页布局及JS交互。
2.HTML在计算机中的表现形式
网页文件在计算机中都是以.html / .htm 后缀表示。
开发工具
- 记事本
- EditPlus / Sublime / WebStorm / VSCode
运行工具
使用浏览器打开html文件，使用chrome作为默认浏览器
调试工具
浏览器开发者工具 “F12”.
三.HTML基础语法
HTML是标签语法，标签以< >为标志
1.标签的分类：
- 双标签: 有开始标签，有结束标签，成对出现
<标签名> 标签内容 </标签名>
- 单标签: 只有开始标签，没有结束标签；
1.<标签名>
2.</标签名>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body></body>
</html>
2.标签的嵌套
- 在双标签中嵌套使用其他标签，都是嵌套结构。
- 外层元素成为父元素，内层元素成为子元素。
- 多层嵌套结构中，外层元素成为祖先元素，内层元素成为后代元素。
3.文档的基本结构
- 最外层
<html></html>标签，表示文档的开始和结束，网页中所有的内容都必须写在html标签中。 <head></head>标签，表示网页的头部，可以设置网页的标题，字符集，引入外部文件等。<body></body>标签，表示网页的主体，所呈现在网页窗口中的内容，都应该写在body标签中。
4.标签的属性
标签属性用来修饰或补充当前的标签内容。
语法：
<标签名 属性名="属性值"></标签名>
每个标签中都可以添加一个或多个标签属性，多个属性之间使用空格隔开。
<标签名 属性1="属性值" 属性2="属性值">
5.HTML语法规范
- HTML标签不区分大小写，BODY,Body,body等写法均可，但是推荐使用纯小写。
- 在涉及标签嵌套时，保持内部标签适当缩进，增加代码的可读性。
- 添加适量注释。
6.HTML的注释
语法：
<!-- 注释内容 -->
注意事项：
- HTML的注释不能嵌套
- 标签名中不能嵌套使用注释
练习：
创建html文件
在head中设置网页标题和字符集
在body中添加网页内容
在不同的浏览器中查看运行效果
四.HTML常用标签
1.文档类型声明
使用<!doctype html>,对当前的文档类型及版本做出指定，这种声明方式是HTML5使用的声明方式。
关系到页面元素的渲染效果。 书写在之前，文档的开篇。
2.文档的基本结构
见 02-page.html
3.设置网页标题，字符集，选项卡图标
<link rel="shortcut icon" href="" type="image/x-icon">
4.标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
...
...
<h6>六级标题</h6>
5.常用文本标签
<p>段落标签</p><span>行内分区标签</span><label>文本标签</label><b>加粗标签</b> <strong>加粗标签<strong><s>删除线</s><i>斜体显示</i><u>下划线</u>上下标标签
上标：
x<sup>2</sup>“x的2次方”
下标：x<sub>2</sub>…
6.字符实体
- html文档中会忽略多余的空格和换行，只显示为一个空格。
- 针对html文档的特殊性，比如对空格，<>的处理，需要采用特殊的语法表示空格和<>等其他符号。
- 字符实体：
表示一个空格<less than 表示 >>greater than 表示 <©表示版权符号¥表示人民币符号“￥”
7.格式标签
- 换行标签
<br> - 水平线
<hr>
8.标签的分类
1.行内元素。可以与其他元素共行显示：
span b strong label i sup sub …
2.块级元素。独占一行，不与其他元素共行：
h1 ~ h6 p div
div:是容器标签，一般用于网页结构划分。
五.列表标签
列表：是一种结构，将数据从上到下进行排列显示。
列表的分类：
1.有序列表
按照数字或者字母依次标识每一条数据。
语法：
<ol>
<li>有序列表</li>
</ol>
列表项标签： <li></li>
每一组li元素都标识一条列表项。
标签属性：
有序列表默认使用数字标识列表项，从1开始，也可以在ol标签中添加属性进行设置。
type属性。
指定项目符号的类型。
可取的值：1 a A i I
希腊数字：i ii iii iV …
start属性。
指定从第几个项目符号开始标识数据。
2.无序列表
语法：
<ul>
<li><li>
<li><li>
</ul>
标签属性：
默认情况下，无序列表以实心原点标识列表项，可以通过属性修改。
type属性。
指定项目符号类型。
取值 : disc(默认) square(实心正方形) circle(空心圆) none(无)
3.自定义列表
语法：
<dl>
<dt>订单跟踪</dt>
<dd>物流查询</dd>
<dd>联系客服</dd>
<dt>加入我们</dt>
<dd>门店查询</dd>
<dd>联系客服</dd>
</dl>
4.列表的嵌套
列表标签ol / ul 中除了可以嵌套li元素，也可以嵌套其他元素。
下拉菜单:
结构：
<ul>
<li>c盘</li>
<li>桌面</li>
<ul>
<li>day01</li>
<li>day02</li>
</ul>
</ul>
<ul>
<li>我的淘宝</li>
<ul>
<li>订单查询</li>
<li>物流跟踪</li>
</ul>
</ul>
五.图像与超链接
1.URL
Uniform Resource Locator统一资源定位符。
俗称路径，有本地路径，有网路路径。
组成 ：完整的URL 由 协议 域名 文件目录 文件名组成
分类：绝对路径、相对路径。
绝对路径
从根目录开始逐级查找，直到找到文件名。通常用于网络资源文件。
C:/Users/Python/Desktop/前端/web_1.md
window操作系统上绝对路径以盘符开头；
mac os 操作系统上绝对路径以/开头。
相对路径
是从当前所在的目录文件夹开始查找。
2.图片标签
语法： <img src="url">
在网页中插入一张图片，默认按照原始尺寸显示。
使用相对路径时，一定要注意 ：
- 从当前所在目录文件夹开始查找
- 可以使用， “…/” 返回上一级目录
- 必要时，“…/” 可以多次使用
4756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
