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:
<html>
</html>
2.单标签:只有开始标签,没有结束标签,
可以手动添加/表示闭合
et:
<hr>水平线
<hr/>
3.标签的嵌套
1.在成对的标签中出现其他的标签
<html>
标签内容
</html>
--------------------
<html>
<head>
<body>
</body>
</head>
</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 会忽略多余的空格,只显示为一个空格
代码中的换行在浏览器中也显示一个空格
5.HTML文档组成
1.文档类型说明
<!DOCTYPE html>申明当前为HTML文档
这种是H5的申明方式
作用:
1.告诉浏览器文档为HTML文档
2.按照H5的渲染方式解析网页
书写位置:
文档的开头,<html>标签之前
2.文档内容
<!doctype html>
<html>
<head>
<meta charset = 'utf-8' type = 'text/html'>
<title>网页标题</title>
</head>
<body>
网页主体
</body>
</html>
说明:
<meta charset = 'utf-8'>
设置网页的字符编码方式
<title>百度一下,你就知道</title>
设置网页的标题
6.常用标签介绍
1.标题标签
1.作用:以标题的形式显示文本(加粗,子号不同)
2.语法:
<h1></h1> 一级标题
...
<h6></h6> 六级标题
注意:标题文本大小,从h1-h6是逐级减小
2.段落标签
1.语法:<p></p>
2.可以铜通过标签属性algin= ''设置水平对其方式
取值left/center/right
默认左对齐
3.其他的文本标签
1.文本加粗:<b></b> <strong></strong>
2.文本斜体:<i></i>
3.添加下划线:<u></u>(underline)
4.添加删除线:<s></s>
说明:以上4种标签涉及到样式都可以使用css添加效果
5.添加上标:<sup></sup>
6.添加下标:<sub></sub>
7.<span></span> 行内的分区标签,一般嵌套在其他的标签中,用来为特殊文本添加样式
8.<label></lable>普通文本标签
4.格式标签
1.换行标签
</br> 等价于<br/>
2.水平线
<hr>等价于 <hr/>
5.字符实体
对特殊符号的解释
1.< 表示< lt = less than
2.> 表示> ge = greater than
3. 表示空格
4.© 表示版权符号©
5.¥ 表示人民币¥
6.块级分区标签
语法:<div></div>
作用:容器标签,常用于页面的模块划分大的分区
7.标签嵌套的规范
1.标签类型划分
1.块级元素:
独占一行,不于其他元素共行
h1-h6 p div
2.行内元素:
可以与其他元素共行显示
b strong i u s span label sup sub
2.嵌套规范
1.块元素中可以嵌套任意类型的元素
2.行内元素中尽量只嵌套行内元素
3.特殊情况:
段落标签中不可以嵌套其他块元素的
7.列表标签
1.列表:从上到下排列数据的结构
列表中的数据都带有项目符号
2.语法:
1.列表的分类
1.无序列表
2.有序列表
3.定义列表
2.列表组成
1.无序列表 由列表标签于列表项标签组成
<ul>(unordered list)
<li></li> <list item>
</ul>
注意:ul中嵌套li元素,每一个li元素表示一条数据
2.有序列表 由列表标签和列表项组成
<ol> (orderlist)
<li></li>
</ol>
3.定义列表
<dl>
<dt>订单跟踪</dt>
<dd>查询订单</dd>
<dd>联系售后</dd>
<dt>加入我们</dt>
<dd>分店加盟</dd>
<dd>技术支持</dd>
</dl>
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.大乔
<ol>
<li>
射手
<ol>
<li>虞姬</li>
<li>伽罗</li>
<li>鲁班7号</li>
</ol>
</li>
<li>
法师
<ol>
<li>甄姬</li>
<li>不知火舞</li>
<li>诸葛亮</li>
</ol>
</li>
</ol
8.图片与超链接
1.url
完整的url http://www.baidu.com
2.本地路径:
相对路径:从当前所在的文件夹位置开始查找
绝对路径:从计算机的更目录开始查找
354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
