目录
参考源码:https://github.com/hilqiqi0/AI/tree/master/3.Web/html
一、WEB
1、什么是WEB
2、WEB的组成 & 运行流程
3、WEB服务器
4、WEB浏览器
二、HTML概述
1、HTML介绍 和 基本语法
三、HTML 基础语法(重点)
1、标记的语法
2、标记的嵌套
3、标记的属性 和 值
4、HTML中的注释
5、HTML中不区分大小写
四、HTML 文档结构
1、文档类型声明
2、HTML页面
3、
标记五、文本相关标记
1、HTML中特殊字符处理
2、文本样式标记
3、标题标记
4、段落元素
5、换行元素
6、分区元素
7、行内元素 与 块元素
六、列表标记
1、作用
2、列表的组成
3、列表的属性
4、列表的嵌套
七、图像 和 超链接
1、URL
2、图像
3、超链接
八、表格
1、表格的语法
2、不规则表格
3、行分组
九、表单
1、作用
2、form 元素
3、表单控件(重难点)
十、附录:目录
web就是互联网上的一种应用程序 - 网页
典型的应用:
1、C / S
Client : 客户端
Server : 服务器
2、B / S
B :Browser 浏览器
S :Server 服务器
由服务器,浏览器 和 通信协议组成
服务器:处理用户的请求(request)和响应(response)
浏览器:代替用户向服务器发送请求(User Agent)
通信协议:规范了数据是如何打包以及传递的 - http
http : Hyper Text Transfer Protocal
超级 文本 传输 协议
1、作用
接受用户的请求并给出响应
存储WEB信息
具备安全性功能
2、产品
1、APACHE
2、TOMCAT
3、IIS - Internet Information Service
4、Nginx
3、技术
1、JSP - Java Servre Page
2、Php
3、ASP.NET
4、Python Web (Django,Flask,... ...)
1、作用
1、代替用户向服务器发送请求
2、作为响应数据的解释引擎
2、主流浏览器产品
1、Micosoft Internet Explorer (IE)
2、Google Chrome
3、Mozilla Firefox
4、Apple Safari
5、Opera Opera
浏览器靠内核处理数据,内核包含两部分:
1、内容排版引擎(静态页面) - HTML,CSS
2、脚本解释引擎(动态交互) - JS
3、浏览器技术
也称为 "前端技术"
HTML,CSS,JavaScript
1、什么是HTML
HTML :Hyper Text Markup Language
超级 文本 标记 语言
编写网页的一款语言
超文本:具备特殊功能的文本就是超文本
普通文本 a :普通字符a
超文本 a :表示的是超链接功能
普通文本 b :普通字符b
超文本 b :表示文字加粗功能
标记:超文本的组成形式
普通文本 a : a
超文本 a :
语言:语言有自己的语法规范
W3C:World Wide Web Consortium
万维网联盟
2、HTML在计算机中的表现
所有的网页在计算机中都是以 .html 或 .htm 作为结尾的文件来进行表示的
开发工具:所有的文本编辑类软件都可以作为开发工具
1、记事本
2、Editplus,Sublime
3、Dreamweaver,WebStorm,... ...
运行工具:浏览器
推荐使用:Google Chrome
1、什么是标记
在网页中,用于表示功能的符号称为 "标记/标签/元素"
2、语法
所有的标记,在使用时必须用<>括起来
标记分为 双标记 和 单标记
1、双标记
由开始标记 和 结束标记组成
<标记>...
ex:
1、...
2、...
3、div 标记
....
2、单标记
只有一个标记,既能表示开始,又能表示结束。
单标记自己就是个独立的功能,没有文本或其他内容可以控制
<标记> 或 <标记/>
ex:
1、
或
: 换行
2、
在一对标记中,再出现另外一对标记,目的是为了实现功能的嵌套
超链接 :
加粗 :
加粗的超链接:
1、....
2、....
为了良好的可读性,被嵌套的内容尽量独占一行,并添加缩进
... ...
练习:
1、编写一对 html 标记
2、在html标记中嵌套一对 head 标记
3、在html标记中嵌套一对 body 标记
-- 父元素/父标记
1、什么是属性
在标记中,用来修饰标记显示效果的东西就是属性
2、语法
1、属性的声明必须在开始标记中
<标记 属性的声明位置处>
2、属性名 和 标记名 之间要用空格隔开
<标记 属性名称>
3、属性名 和 属性值之间用=连接,属性值要用" " 或 ' ' 引起来
<标记 属性名="值">
4、一个元素允许设置多个属性,多属性之间排名不分先后,但多属性之间要用空格隔开
<标记 属性1="值1" 属性2="值2">
练习:
1、创建一对p标记,内容随意
2、增加一个属性,名称为 align 取值为 center
3、增加一个属性,名称为 id 取值为 p1
xxx
注意:
1、注释不能出现在<>中
>... ...
出现在网页最顶端的第一个标记
作用:告诉浏览器使用HTML的哪个版本
在文档类型声明之下,使用一对 html 标记来表示网页的开始和结束
在 html 中,包含两对子元素
1、
作用:描述网页的头部信息,对于网页起到控制的作用
子元素:
1、
1、 表示一个空格
2、< 表示一个 <
3、> 表示一个 >
4、© 表示一个 ©
5、¥ 表示 ¥
1、作用
修改文本在网页中的表现形式
2、标记
1、 : 斜体显示文本
2、 : 下划线显示文本
3、 : 删除线显示文本
4、 : 加粗显示文本
5、 : 上标方式显示文本
6、 : 下标方式显示文本
练习:
这是一段有加粗,斜体,删除线,下划线,上标 和 下标的文本
特点:
该组标记能够与其他的标记或文本在一行内显示
1、作用
以不同的文字大小以及加粗方式显示文本
2、语法
# : 1-6
练习:(02-page.html)
静夜思
李白
床前明月光
疑是地上霜
举头望明月
低头思故乡
特点:
1、会改变文字的大小以及加粗效果
2、每个标题都会具备垂直的空白距离
3、每个标题独占一行
4、每个标题都会具备一个属性
属性:align
取值:
1、left :左对齐
2、center :居中对齐
3、right :右对齐
1、作用
突出显示一段文本,每段文本独占一行/块,并且每个段落都会具备一小段的垂直空白距离
2、语法
练习:
天长地久有时尽
此恨绵绵无绝期
或
1、块分区元素
标记:
1、块元素
只要在网页中能独占一行/一块的元素都称为块级元素,简称为块元素
p,h1,h2,h3,h4,h5,h6,div
作用:都可以做布局
所有的块元素都会具备align属性
2、行内元素
多个元素能够在一行内显示的,就是行内元素
span,i,b,s,u,sub,sup
作用:处理文本的样式
按照从上到下的方式来进行数据排列
并能够显示列表的标识在内容的前面
1、列表的类型
1、有序列表 -
ex:
1、有序列表 - ol
1、type
取值:
1、1:按数字方式排列显示,默认值
2、A:按大写英文字符显示
3、a:按小写英文字符显示
4、I:按大写罗马数字显示
5、i:按小写罗马数字显示
2、start
指定有序的字符是从 几 开始显示
2、无序列表 - ul
1、type
取值:
1、disc : 实心圆点,默认值
2、circle : 空心圆点
3、square : 实心方块
4、none : 不显示任何标识
在一个列表项中,又出现一个列表
Uniform Resource Locator
统一资源定位器,用于标识网络中资源的位置,俗称路径
URL分类:
1、绝对路径
访问网络资源时,使用绝对路径
ex:
http://www.baidu.com
http://www.baidu.com/img/bd_logo1.png
2、相对路径
从当前文件所在的位置处去开始查找资源文件所经过的路径
3、根相对路径
从WEB程序所在的根目录处开始查找资源文件
注意:
1、url中不能出现中文
2、url是严格区分大小写
1、标记
2、属性
1、src
指定要显示的图片的路径
2、width
宽度,以px为单位的数值(允许省略px)
px : pixel,像素
3、height
高度,以px为单位的数值(允许省略px)
注意:
如果宽度 和 高度只设定一个值的话,那么另外一个值也跟着等比缩放
1、什么是超链接
用户可以通过点击的操作来完成页面的跳转的行为的
2、语法
标记:内容
属性:
1、href
表示是链接地址
2、target
指定要打开的新网页的方式
取值:
1、_self
默认值,在自身标签页中打开新网页
2、_blank
在新标签页中打开新网页
1、标记
表格:
ex: 创建一个 4(行)*4(列)的表格
2、属性
1、table属性
1、width
指定表格的宽度,以px为单位数值(px可以省略)
2、height
指定表格的高度,以px为单位数值(px可以省略)
3、border
指定边框宽度,以px为单位数值(px可以省略)
4、align
指定表格在其父元素中的水平对齐方式
取值:left / center / right
5、cellpadding
指定单元格内边距
指定单元格边框与内容之间的距离
6、cellspacing
指定单元格外边距
指定单元格之间的距离(单元格与表格之间的距离)
2、tr属性
1、align
控制当前行内容的水平对齐方式
取值:left / center / right
2、valign
控制当前行内容的垂直对齐方式
取值:top / middle / bottom
3、bgcolor
控制当前行内容的背景颜色
取值:表示颜色的英文单词
3、td属性
1、width
2、height
3、align
4、valign
5、bgcolor
6、colspan :跨列 / 合并列
7、rowspan :跨行 / 合并行
1、单元格的跨列
从指定单元格的位置处开始,横向向右合并几个单元格(包含自己),被合并掉的单元格要删除出去
语法:colspan="n"
2、单元格的跨行
从指定单元格的位置处开始,纵向向下合并几个单元格(包含自己),被合并掉的单元格要删除出去
语法:rowspan="n"
1、什么是行分组
允许将表格中的若干行划分到一组中,方便管理
2、语法
1、表头行分组
允许将表格中最上方的若干行划分到一组中
2、表尾行分组
允许将表格中最下方的若干行划分到一组中
用于接收用户的数据并提交给服务器
表单二要素:
1、form元素
表单,用于收集用户信息并提交给服务器
2、表单控件
提供了能够与用户交互的可视化组件
1、作用
用于收集用户信息并提交给服务器
form元素在网页中是不可见的,但功能不能忽略
2、语法
1、标记
1、作用 & 注意
作用:提供了能够与用户交互的可视化组件
注意:
只有放在表单中的表单控件才允许被提交
表单控件都是"行内块"元素
2、表单控件详解(难点)
1、文本框 & 密码框
文本框:
密码框:
属性:
1、name :定义控件名称
提交给服务器使用,如果没有name的话则无法提交
2、value :值
要提交给服务器的值,同时也是默认能够显示在控件上的值
3、maxlength
限制输入的最大字符数
4、placeholder
占位符
用户在未输入任何数据时所显示的内容
2、按钮
1、提交按钮:
将表单数据提交给服务器
2、重置按钮:
将表单内容恢复到初始化的状态
3、普通按钮:
允许通过JS自定义功能
属性:
value :按钮上显示的文本
4、
属性:type
取值:submit / reset / button
3、单选按钮 和 复选框
单选按钮:
复选框:
属性:
1、name
定义控件名称,除了定义名称之外,还起到分组的作用
一组中的单选按钮 或 复选框 名称必须一致
2、value
值,尽量提前声明
3、checked
设置预选中,该属性无值
4、隐藏域 和 文件选择框
1、隐藏域
作用:想提交给服务器但不想给用户看的数据可以放在隐藏域中
语法:
属性:
name:定义控件的名称
value:定义控件的值
2、文件选择框
作用:文件上传时使用
标记:
属性:
name :定义控件的名称
5、多行文本域
标记:
属性:
1、name :控件名称
2、cols :指定文本域默认显示的列数
一行能够显示的英文字符量,中文减半
3、rows :指定文本域默认显示的行数
6、下拉选择框 (下拉列表)
注意:
p标记是不能嵌套块级元素的
补充:
1. label for ID
使用label标签显示文本,将label的标签属性 for 的属性值设置为将要绑定的表单控件的id值,实现点击文本跟点击控件一样的效果
补充 :
maxlength 属性 用来设置输入框可输入的最大字符数
2. 取色板
人工智能(PythonWeb)—— 目录汇总