目录
1，web
- 什么是web
web就是网页，是一种基于B/S的应用程序
B：Browser 浏览器
S ：Server 服务器
C：Client 客户端 - web 组成
浏览器：代替用户向服务器发送请求
服务器：接收用户请求并响应
通信协议：规范数据在网络中是如何打包即传递的
http:HyperText transfer protocal
超文本传输协议 - web服务器
- 作用：
接收用户请求并响应
存储web信息
具备安全性功能 - 产品：
1，Apache
2，Tomcat
3，IIS - Internet Information Service
4，Nginx
... - 技术
1，JSP - Java Sever Page
2，PHP
3，ASP.net
4，Python web（Django Flask...）
- 作用：
- web浏览器
- 作用：
代替用户向服务器发送请求
作为响应数据的解释引擎，向用户呈现界面 - 主流浏览器产品
根据浏览器的内核/引擎进行划分
1，Microsoft IE
2，Google Chrome
3，Mozilla FireFox
4，Apple Safari
5，Opera Opera
浏览器引擎- 渲染引擎 - 解析HTML,CSS,控制界面的渲染效果
- JS引擎 - 解释网页脚本文件
- 前端开发技术
HTML CSS JavaScript
- 作用：
2，HTML概述
- HTML介绍
- 什么是HTML
HyperText Markup language
超文本 标记 语言
作用：书写网页结构 - 超文本
具备特殊功能的文本就是超文本
et：
普通文本 a:普通字符
超级文本 a:表示超链接功能
普通文本 a:普通字符
超级文本 b:表示加粗功能 - 标记
也叫标签，主要是用来标记网页中的内容，以实现网页的布局和JS操作
- 什么是HTML
- HTML 在计算机中的表现
所有的网页文件在计算机中都是以.html/.htm文件存储的
开发工具：
1,记事本
2,Editplus，Dreamweaver
3,sublime，Webstorm，Hbuilder，VSCode，Atom...
运行工具：
Chrome浏览器
调试工具：
开发者工具，F12打开
3，HTML 基础语法
- 标签/标记
在网页中具有特殊功能的符号- HTML 中所有的标签都以<>为标志，区分普通文本
- 标签分类
- 双标签：成对出现，有开始有结束
<开始标签>标签内容</结束标签>
et：
<h1>一级标题</h1> - 单标签：只有开始标签，没有结束标签，可以手动添加/表示结束
<标签名>
<标签名/>
et:
<br>换行标签--等同于<br/>
<hr>水平线--等同于<hr/>
- 双标签：成对出现，有开始有结束
- 标签嵌套
- 在成对的标签中出现其他标签
超链接标签:<a>首页</a>
文本加粗标签:<a>首页</b>
---加粗的超链接文本--<a> <b>首页</b> </a> <b> <a>首页</a> </b> - 嵌套结构中，外层元素称为父元素，内层元素称为子元素
- 在成对的标签中出现其他标签
- 文档结构
- 新建文件，保存为.htm / .html格式
- 书写一对html标签<html></html>
- 在html标签中嵌套一对head标签
- 在html标签中嵌套一对body标签
- 为body标签添加文本内容，内容不限
<html> <head></head> <body> Hello </body> </html>
- 书写规范
- HTML不区分大小写<HTML></Html>
推荐使用小写 - 保持适当缩进，增强代码可读性
- HTML不区分大小写<HTML></Html>
- 标签属性
标签属性主要用来修饰标签的显示效果
语法：- 属性由属性名和属性值组成
属性名=‘属性值’ - 属性的声明必须写在开始标签中
<开始标签 属性名=‘属性值’>..</结束标签> - 每个标签都可以设置多个属性，属性之间使用空格隔开
<开始标签 属性名=‘属性值’ 属性名=‘属性值’ 属性名=‘属性值’>..</结束标签> - 练习
再body标签添加一对p标签，内容不限
为p标签增加属性align，取值 center
为p标签增加属性id，取值p1<html> <head></head> <body> Hello <p id='p1' align="center">延禧攻略</p> </body> </html>
- 属性由属性名和属性值组成
- HTML 注释
注意：<!-- 注释内容 -->- 注释不能写在标签里的
错误：
<p <!-- -->></p> - 注释不能嵌套
- 注释不能写在标签里的
- HTML中的换行与空格
HTML文档会忽略掉多余的空格，只显示为一个空格，如果需要显示多个空格或者 < > ,都需要使用特殊符号代替
4，HTML结构组成
- 文档的类型声明
<!doctype html> h5的声明方式
作用：告诉浏览器当前使用的HTML版本，以便浏览器能正确解析HTML标签和渲染样式
书写位置：文档最开始的位置 - 文档开始和结束
- 在文档类型声明之后，使用一对<html></html> 标签标示文档的开始和结束
- 在HTML标签中，包含了两对子元素
<html> <head></head> <body></body> </html> <head>标签标示网页的头部信息，包含网页的标题，选项卡的图标，网页的关键字，作者，描述等信息，还可以引入外部的资源文件 <body>标签表示网页的主体信息，网页所呈现的内容都要写body里 - <head>标签中包含的子元素
- 设置网页的标题
<title>我的第一个网页</title> - 设置网页的字符编码
<meta charset='utf-8'>
浏览器按照utf-8的编码方式解析网页
- 设置网页的标题
5，文本相关的标签
- 字符实体（具有特殊意义的符号）
-  ；表示一个空格
- &it；表示小于号 <
- >；表示大于号
- ©；表示版权符号 ©
- ¥；表示人民币符号 ￥
<!--文档类型声明 --> <!doctype html> <!--表名文档开始 --> <html> <head> <!-- 网页标题设置 --> <title>我的第一个网页</title> <!-- 字符编码方式 --> <meta charset='utf-8'> <!-- 设置选项卡小图标 --> <link rel='shortcut icon' href='web.ico' type='image/x-icon'> </head> <body> <!-- 网页的主体内容 --> <如 懿 传> <b> 版本所有©达内科技 价格：¥10000.00 </body> <!-- 表明文档结束 --> </html>
- 文本样式标记
- 斜体显示文本：<i></i>
- 文本添加下划线：<u></u>
- 文本加粗效果：<b></b>
- 文本添加删除线：<s></s>
- 上标显示文本：<sup></sup>
- 下标显示文本：<sub></sub>
练习：
这是一段有加粗，斜体，删除线，下划线，上标和下标的文本
特点：这些标签可以与其他标签或文本工行显示
- 标题标签
- 作用
以不同的文字大小和加粗方式显示文本 - 语法
<hn></hn> n取值 1-6，字体大小是逐级递减
<h1></h1> 一级标题
...
<h6></h6> 六级标题
练习：
咏鹅
骆宾王
鹅，鹅，鹅
曲项向天歌
白毛浮绿水
红掌拨清波
特点：- 会改变文字的大小并且具有加粗效果
- 每个标题都会具备垂直的空白距离
- 每个标题都独占一行，不与其他元素共行显示
- 每个标题都可以添加属性align
取值：left / center / right
设置文本的水平对齐方式，默认居左对齐
- 作用
- 段落标签
- 作用
突出显示一段文本，每段文本都独占一行或一块，不予其他元素共行显示，并且也具备垂直的空白距离 - 语法
<p></p>
属性 align 设置文本的水平对齐方式
取值 left / center / right
- 作用
- 格式标签
换行标签 <br> 等同于 <br/>
水平线标签 <hr> 等同于 <hr/>
作业1：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <h1 align="center">HTML <Day01></h1> <!-- 水平线 --> <hr> <h2>1. HTML 文档片段</h2> <h3>1.1 问题</h3> <p>创建如图-1所示的HTML页面</p> <h3>1.2 方案</h3> <p>使用HTML完成效果</p> <h3>1.3 实现</h3> <p>创建index.html,完成操作</p> </body> </html>
-
分区标签
-
块分区
标签：<div></div>
作用：划分页面结构，配合CSS实现网页布局
特点：独占一行显示（独占一块） -
行内分区元素
标签：<span></span>
作用：设置同一行文本的不同样式（结合CSS）
特点：可以与其他元素或文本共行显示
<!doctype html> <html> <head> <title>文本样式</title> <meta charset="utf-8"> </head> <body> 这是一段有<b>加粗</b>，<i>斜体</i>，<u>下滑线</u>，<s>删除线</s>，<sup>上</sup>标，<sub>下</sub>标 <!-- 标题标签 --> <h1 align="center">咏鹅</h1> <h2 align="right">骆宾王</h2> <h3 align="center">鹅鹅鹅</h3> <h4 align="center">曲项向天歌</h4> <h5 align="center">白毛浮绿水</h5> <h6 align="center">红掌拨清波</h6> <!-- 段落标签 --> <p align="center">我们一起学猫叫</p> <p align="right">一起喵喵喵</p> <!-- 换行标签 --> 西湖美景三月天，<br> 春雨无度柳如烟 <!-- 块分区标签 --> <div>块分区元素</div> <div>块分区元素</div> <!-- 行内分区元素 --> <h1><span>红色</span>文本</h1> <p>这是一段文本，包含<span>绿色</span>文本</p> <div><span>DIV</span>标签</div> </body> </html>
-
-
标签分类
-
块级元素
只要在网页中是独占一行，不予其他元素工行显示的元素都是块级元素，简称块元素，
例如：h1 h2 h3 h4 h5 h6,p,div...
作用：都可以做布局
特点：都可以添加algin属性，设置内容的水平对齐方式 -
行内元素 / 内联元素
可以与其他元素共行显示的元素
例如：i b u s sub sup span
-
6，列表标签
- 作用
按照从上到下的方式来排列数据，并且能够显示项目符号在数据的前面 - 列表的组成
- 列表的类型
- 有序列表<ol></ol>(ordered list)
默认是按照数字排列 - 无序列表<ul></ul>(unordered list)
默认以实心原点作为标识
- 有序列表<ol></ol>(ordered list)
- 列表项
列表中的每一条数据都是一个列表项
语法：<li></li>
注意：列表项要嵌套在列表标签中使用
et:<ol> <li>Java</li> <li>PHP<li> <li>Python</li> <ol>练习：
-
创建新的HTML文件
-
搭建网页结构
-
在body中创建有序列表，分别展示四大名著
-
再创建一个无序列表，展示四大天王
<!doctype html> <html> <head> <title>列表练习</title> <meta charset="utf-8"> </head> <body> <!-- 使用有序列表展示四大名著 1.xxx 2.xxx--> <ol> <li>红楼梦</li> <li>西游记</li> <li>水浒传</li> <li>三国演义</li> </ol> <ul> <li>刘德华</li> <li>黎明</li> <li>巨人网络</li> <li>盛大网络</li> </ul> </body> </html>
-
-
列表属性
-
有序列表 --ol
-
type属性：设置项目符号
取值：-
1：按照数字排列显示，默认值
-
a：按照小写字母顺序排列
-
A：按照大写字母排列
-
i：按照罗马数字排列
-
I：按照罗马数字排列
罗马数字：i ii iii iv v vi vii...
-
-
start属性：设置从第几个字符开始排列
取值：数字
-
- 无序列表 -ul
- type属性：设置项目符号
取值：- disc 实心原点（默认）
- circle 空心圆点
- square 实心方块
- none 不显示项目符号
- type属性：设置项目符号
-
- 列表嵌套
- 在一个列表中又出现了其它的列表
<ul> <li> 列表属性 <ol> <li>type属性</li> <li>type属性</li> </ol> <li> </ul>每一部名著中都列出三个主要任务
-
水浒传
-
武松
-
西门庆
-
潘金莲
-
-
西游记
-
大师兄
-
二师兄
-
沙师弟
<!doctype html> <html> <head> <title>列表练习</title> <meta charset="utf-8"> </head> <body> <!-- 使用有序列表展示四大名著 1.xxx 2.xxx--> <!-- type --> <ol type='a' start="3"> <li>红楼梦</li> <li>西游记</li> <li>水浒传</li> <li>三国演义</li> </ol> <ul type='square'> <li>刘德华</li> <li>黎明</li> <li>巨人网络</li> <li>盛大网络</li> </ul> <!-- 列表嵌套 --> <ol> <li> 西游记 <ol> <li>大师兄</li> <li>二师兄</li> <li>沙师弟</li> </ol> </li> <li> 红楼梦 <ol> <li>贾宝玉</li> <li>林黛玉</li> <li>薛宝钗</li> </ol> </li> </ol> <!-- 不推荐下面写法 --> <ul> <li> 西游记 <ol> <li>大师兄</li> <li>二师兄</li> <li>沙师弟</li> </ol> </li> </ul> </body> </html>
-
-
- 在一个列表中又出现了其它的列表
- 列表的类型
7，图像与超链接标签
- URL
Uniform Resource Locator
统一资源定位符：用来标识网络中资源的位置，俗称路径
URL组成：协议 域名 文件目录及文件名
URL分类：- 绝对路径
从根目录开始查找
常用于网络文件路径
et：访问网络资源
http://www.baidu.com
http://www.baidu.com/img/logo.png - 相对路径
从当前文件所在的文件夹开始查找 - 跟相对路径（了解）
从web程序所在的跟目录开始查找资源文件
注意：- URL中不能出现中文
- URL严格区分大小写的
- 绝对路径
- 图像标签
- 在网页中插入一张图片
- 语法：<img>
- 属性：
- src：指定要显示的图片路径
- width：设置图片的宽度，以像素px为单位，也可以省略单位
- height：设置图片的高度
注意：src为必填属性，宽高可以省略，省略宽高的话，图片将以原始尺寸显示在网页中 - title：用来设置图片的标题，当鼠标悬停在图片上方时出现
- alt：用来设置图片加载失败之后提示文本
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <!-- 图片标签 --> <!-- 绝对路径加载网络文件 --> <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1535620319&di=d01e46bb6b462c5ad9538a54c7989d55&src=http://img4q.duitang.com/uploads/item/201504/18/20150418H4122_zk8BM.jpeg"> <!-- 绝对路径加载本地文件 1. windows电脑上绝对路径都是以盘符开始的 2. 需要手动补全文件名 3. Windows电脑两种斜杠都可以识别，需要手动修改路径中的斜杠为/ \ 是转义字符的标志 --> <img src="C:/Users/Python/Desktop/day01/web.ico"> <!-- 相对路径 --> <img src="web.ico"> <img src="timg.jpg"> <!-- ../ 表示返回上一级目录文件夹 --> <!-- 图片属性 宽高属性，如果只设置一个值，另外一个会等比缩放--> <img src="img/cat.jpg" width="300px"> <img src="img/cat.jpg" width="300px" height="300"> <img src="img/cat.jpg" width="300px" title="猫" alt="猫咪消失了"> <img src="img/ca.jpg" width="300px" title="猫" alt="猫咪消失了"> </body> </html>