初识web
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介绍
HaperText Markup Language
超文本 标记 语言
2.超文本:
具有特殊功能的文本
et:
普通文本 a
超文本 a 表示超链接
普通文本 b
超文本 b 表示加粗
3.标记
也叫标签 或 元素
主要用来标记网页中的内容
可以实现网页的布局及js交互
3.HTML在计算机中的表现形式
网页文件在计算机中都是以.html / .htm后缀表示
开发工具:
1.记事本
2.EditPlus Sublime WebStorm VSCode
运行工具:浏览器 以CHrome 浏览器为准
调试工具:浏览器开发者工具 F12
4.HTML 基础语法
1.标签 /标记
1.html 中的标签都以<> 来标签
2.标签分类:
1.双标签:成对出现,有开始标签,有结束标签
et:
2.单标签:只有开始标签,没有结束标签,
可以手动添加/表示闭合
et:
水平线
3.标签的嵌套
1.在成对的标签中出现其他的标签
标签内容
--------------------
2.在标签嵌套中,外层标签称为"父元素",内层元素称为'子元素',多层嵌套时,
内部元素称为后代 元素
4.文档结构
文档开始
网页头部信息:编码方式,网页名称
网页选项卡的小图标,网页信息显示
引入外部资源文件
网页的主体信息:所有需要呈现给用户的,需要显示在窗口中的内容,都应在body中书写
文档结束
5.标签属性
标签属性主要是用来修饰当前标签的显示效果
对当前的标签或者网页的补充设置
语法:
1.书写位置
标签属性书写在开始位置中,与标签名之间使用空格隔开
2.属性是由属性名和属性值组成的
属性名 = '属性值'
属性值必须使用引号引起来,单双引号都可以
3.如果有多个属性时,属性之间使用空格隔开
6.HTML 语法规范
1.HTML不区分大小写,html HTML html
推荐使用大小写
2.保持适当距离,保证代码的可读性
3.保持适当的注释
7.HTML注释
注意:
1.HTML注释不能嵌套
2.不能书写在标签内部的
> 错误注释
8.HTML中的换行与空格
html 会忽略多余的空格,只显示为一个空格
代码中的换行在浏览器中也显示一个空格
5.HTML文档组成
1.文档类型说明
申明当前为HTML文档
这种是H5的申明方式
作用:
1.告诉浏览器文档为HTML文档
2.按照H5的渲染方式解析网页
书写位置:
文档的开头,标签之前
2.文档内容
网页主体
说明:
设置网页的字符编码方式
设置网页的标题
6.常用标签介绍
1.标题标签
1.作用:以标题的形式显示文本(加粗,子号不同)
2.语法:
一级标题
...
六级标题
注意:标题文本大小,从h1-h6是逐级减小
2.段落标签
1.语法:
2.可以铜通过标签属性algin= ''设置水平对其方式
取值left/center/right
默认左对齐
3.其他的文本标签
1.文本加粗:
2.文本斜体:
3.添加下划线:(underline)
4.添加删除线:
说明:以上4种标签涉及到样式都可以使用css添加效果
5.添加上标:
6.添加下标:
7. 行内的分区标签,一般嵌套在其他的标签中,用来为特殊文本添加样式
8.
7.列表标签
1.列表:从上到下排列数据的结构
列表中的数据都带有项目符号
2.语法:
1.列表的分类
1.无序列表
2.有序列表
3.定义列表
2.列表组成
1.无序列表 由列表标签于列表项标签组成
(unordered list)
注意:ul中嵌套li元素,每一个li元素表示一条数据
2.有序列表 由列表标签和列表项组成
(orderlist)
3.定义列表
3.列表属性
只针对有序列表和无序列表
1.有序列表 -ol
1.type: 设置项目符号类型
取值:
1 表示按照数字排序 ,默认的项目符号
a 表示按照小写字母排序
A 使用大写字母作为项目符号
i 使用小写的罗马数字 i ii iii iv v vi...
I 使用大写的罗马数字
2.start: 设置项目编号从第几个开始
取值:数字,表示从第几个开始
2.无序列表 -ul
1.type:设置项目符号
取值:
disc:默认的实心圆点
circle:空心圆点
square:实心正方形
4.列表嵌套
1.射手
1.伽罗
2.虞姬
3.鲁班
2.法师
1.甄姬
2.王昭君
3.大乔
射手
法师
8.图片与超链接
1.url
完整的url http://www.baidu.com
2.本地路径:
相对路径:从当前所在的文件夹位置开始查找
绝对路径:从计算机的更目录开始查找