1.web概述
1)web是什么?
www(World Wide Web)基于全球互联网的一个多媒体信息服务。该服务应用广发,提到网络就应该想到web。
2)web的特性(BS架构)
是一种基于浏览器(Browser)/服务器(Server)的系统架构
3)web的原理
当访问某个网站的网页时,访问的网页存放在服务器上。
浏览器通过通讯协议发送请求,以获取服务器发送回来的响应,达到浏览网页的目的。
4)web的三要素和web开发三要素
web三要素:HTML\CSS\JavaScript
web开发三要素:
浏览器:向服务器发送请求,下载服务器中的网页文件,解释执行文件,实现页面内容的显示。
服务器:接受浏览器请求,发送相应页面文件给浏览器,网页文件保存在服务器上。
通讯协议:https协议用于规范通讯
5)web浏览器
浏览器就是将源代码解释成图形化界面,也就是网页
主流浏览器:(Chrome、Firefox常用)
IE(Edge)、Chrome、Firefox、Safari…
2.HTML概述
标记语言:
XML:可扩展标记语言(配置文件)
html:固定标记语言(网页文件)
xhtml:可扩展标记+固定标记
1)HTML简介
HTML(Hyper Text Markup Language)
超 文本 标记 语言
1.一个纯文本类型的语言,用来设计网页
2.用此语言编写文件,后缀以.html或.htm为后缀
3.由浏览器解释执行,html页面还可以嵌套脚本语言(JS–JavaScript)编写的程序段
标记(标签):
标签是由尖括号包围的关键字组成,标签通常是成对出现的,
第一个标签是开始标签,第二个标签是结束,比如
标签分类:
a.双标签:<标签名 属性=“属性值”></标签名>
b.单标签:<标签名 属性=“属性值”/>
html注释:
2)HTML版本
html有很多版本,需要明确使用哪种html版本,浏览器才能完成正确的显示html内容。
H1-H3:政府机构,大型商业组织等等
H4:有过渡性版本、严格型版本、框架型版本
H5:
3)HTML结构
网页的配置信息 网页的内容部分 包含: 元数据(消息头) 引入样式文件(外部) 脚本语言 样式声明(内部)3.常用的固定标签
文本标签:
文本是网页的重要组成部分,直接书写的文本会用浏览器默认的样式显示。
1)标题标签:常用语标题显示,以达到醒目的效果
<h#>标题内容</h#>:#表示1-6的数字,标题1最大,6最小
特点:独占一行,文本上下有间距
2)段落标签:提供结构化文本显示方式,文本会用单独的段落显示
段落内容
特点:独占一行,文本上下有间距3)分批标签:用于元素分组,常用语页面的布局
:行内分区标签
特点:没有特点
换行
水平线
斜体
粗体
删除线
下划线
实体类引用:
空格
> 大于号>
< 小于号<
& 表示&符号
图像和超链接标签
1)图像
使用标签将图片添加到页面
注意:
a.src属性必须添加
b.路径问题
相对路径:相对于当前连接的路径
绝对路径:从磁盘最高目录开始找完整的路径
2)超链接
使用标签创建超链接效果
文本
target取值两个:
_self:在当前窗口打开新链接(默认)
_blank:在当前窗口旁新开另外一个窗口,打开链接
锚点:
文档中某行的一个记号,用于连接到文档的某个位置
定义锚点:
链接锚点:
注意:#告诉浏览器链接不是页面而是位置
列表标签:
列表将具有相识特征或者具有先后顺序是几行文字进行对齐排列
列表由列表类型列表项组成:
- 列表项
无序列表:默认实心圆
type=“disc实心圆|circle空心圆|square实心矩形|none无”有序列表:
type=“1数字|a小写字母|A大写字母|i小写罗马字母|I大写罗马字母”表格标签:
表格标签常用于组织结构化信息,常用于页面布局1)组成:
表格
行
列2)常用属性
<tr bgcolor="背景色"> <td valign="垂直对齐方式"> left-左,right-右,center-中,top-上,bottom-下
3)不规则表格
属性:
colspan=“列合并”
rowspan=“行合并”4)表格划分(严格)
表头 表体,可以多次出现 表尾
三部分:5)表格的嵌套
6)表单标签(重要)
表单用于显示信息,收集信息,提交信息到服务器表单:form表单标签和表单控件
定义表单:
表示将此标签中涵盖的控件中的数据传输到服务器 主要属性: action:表单提交的url地址 method:表单数据提交给服务器的方式(get和post) enctype:表单数据的编码方式表单控件:表单中可以包含很多不同的表单控件,表单控件是一种html元素的信息输入项
包含:
input元素:文本框、密码框、单选框、复选框、按钮、隐藏域、文本选择框
非input元素:标签、文本域、下拉框1)input元素中文本框:
type:规定input元素的类型,默认是文本框类型
name:规定input元素的名字(重要:后面会根据name取数据)
value:规定input元素的值
readonly:true输入框只读
placeholder:输入框提示信息
maxlength:规定输入框字符长度2)密码框
3)单选框
name:用于实现分组,同一组名称必须相同
value:提交的数据库
checked:选中4)标签
for:设置文本所关联的控件的id,关联后点击该文本等于点击该控件5)复选框(多选)
6)文件选择框
7)隐藏域
表单中包含不希望用户看见的信息
重要:很多时候借助此控件向后台提供重要数据8)文本域:相当于一个多行的文本框
文本内容
cols/rows:指定文本框的行数和列数9)下拉框
文本
10)按钮
提交按钮:
传送表单数据给服务器或其他程序处理重置按钮:
清空表单内容,将全部表单控件设置为最初的默认值普通按钮:
用于执行客户端脚本代码(结合js)value:指定按钮的名字
补充:
11)引入外部html文件12)分组标签
请选择 普通管理员 超级管理员13)H5新增特性