是我们电脑用来标志或者区分文件类型的一种方法,后缀代表的是一个文件格式名不同的文件后缀名不同,文件扩展名是操作系统用来标志文件格式的一种机制。通常来说,一个扩展名是跟在文件名后面的,由一个分隔符分隔.在一个像“readme.txt”的文件名中,readme是文件名,txt为扩展名,表示这个文件是一个纯文本文件。
除此之外,我们用计算机的时候经常看到的后缀名有:abc.doc-----word文档的名字,abc.jpg-----图片的名字,abc.txt-----记事本的名字,abc.html-----静态页面的名字。
我们在电脑桌面上可以新建,点击右键,这里有个新建文本文档,那我们这个文本文档呢它就会产生一个文件为txt的后缀名,也就是我们上面所说的是一个纯文本文件。
还有我们图片经常使用的图片后缀名如:jpg、jpeg、gif、png(不同的图片后缀名也代表打开方式不同,压缩程度不同,像素大小显示清晰度也不进相同比如如gif就是一个动态图片。
那我们看一下举例的说明一下我们打开这样一个文件夹。这里面有很多不同的地方,我们可以看到。
前面的图标是不一样的,它是不同的一些文件。
但是我们这几单并没有显示这些文件的后缀名,这是由于很多电脑呢,它默认是隐藏了文件的后缀名的。所以我们这里需要把它的设置显示出来。
那么如何设置显示文件后缀名?
很多建网站新手的电脑上不显示文件后缀名,这就需要我们去设置一下。方法如下:
1、
2、
3、
#后缀名#
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
一、学习html学的是什么?
1.1学标签
我要什么内容,就用什么标签 在去思考使用标签的什么属性
比方说:文字就用文字标签,HelloWorld 6号字 颜色变成红色
<html>
<head>
<title></title>
</head>
<body>
<font size="6" color="red" >HelloWorld </font> //这个就是文字标签 属性尺寸是6,颜色是红色
</body>
</html>
二、编写格式
1、每个网页页面都是一个单独的文件,页面的后缀是XXXX.html 或者 XXXX.htm
2、编译器/解释器就是浏览器,浏览器会一行行编译,不会像C 或者PLC等还需要再次编译。
3、用记事本做演示,需要把后缀名改成.html ,如果后缀名被隐藏了,需要在文件菜单-查看-选项-查看-把隐藏已知文件类型的拓展名去掉
<html> //html开始
<head> //头标签开始
<title></title>
</head> //头标签结束
<body> //身体标签开始
HelloWorld //主体内容
</body> //身体标签结束
</html> //html结束
三、常用标签及其属性:
3.1 文本修饰
font 行内标签 (没有换行效果)
size 字体的大小,最大值是7
color 颜色值
颜色的第一种表示形式:颜色单词 red green blue
颜色的第二种表示形式: 颜色的RGB 如:rgb(0,0,255) 第一个0表示R红色的份数,第二个表示G绿色的份数 ,第三个0表示B蓝色的份数
颜色的第三种表示形式:十六进制表示,把颜色这个写成#0000ff ,就是第一个红绿蓝十六进制,
face 字体族 黑体 楷体 宋体 华文彩云等 但必须是浏览器支持的字体
、系统结构:
① B/S架构:Browser/Server(浏览器/服务器的交互形式。)
- Browser支持的语言:HTML、CSS、JavaScript;S是服务器端Server支持的语言有:C、C++、Java等
- B/S架构系统有什么优点和缺点? 优点:升级方便,只升级服务器代码即可,维护成本低。缺点:速度慢、体验不好、界面不炫酷
- 企业大部分使用B/S架构
- B/S架构的系统代表有:京东、百度、天猫等
② C/S架构:Client/Server(客户端/服务器的交互形式。)
- C/S架构的优点和缺点?
- 优点:速度快、体验好、界面炫酷(娱乐性多数是C/S架构)
- 缺点:升级麻烦、维护成本较高。
- C/S架构的系统代表有:QQ、微信、支付宝等
2、 HTML概述
① 什么是HTML?② 怎么开发HTML?③ 怎么运行HTML?
- ① HTML:Hyper Text Markup Language(超文本标记语言)
•由大量的标签组成,每一个标签都有开始标签和结束标签。
•超文本:图片、声音、视频等
- ② HTML开发使用普通的文本编辑器就行,创建扩展名是.html或.htm
•编辑器有:HBuilder、vscode等
③ 直接采用浏览器打开HTML文件就能运行
④ HTML是谁制定的?
•W3C制定了HTML的规范:每个浏览器生产厂家都会遵守规范。HTML也会按照规范去写代码
•HTML规范目前最高的版本是:HTML5.0,简称H5
•我们现在主要学的HTML4.0(基本用法)
- 为了方便中国Web前端程序员开发,提供了大量帮助文档。为开发提供方便。
•w3school:先出现的,和W3C无关
•w3cschool:后出现的,和W3C无关
•W3C制定了很多规范:HTML/XML/http协议/https协议……
3、 第一个HTML
4、基本标签
- p:段落标记
- h1~h6:标题字,与word的标题字相同
- br:换行标记(独目标记)
- hr:横线(独目标记)
- color:横线颜色
- width:横线宽度(可以px和%)
- pre:预留格式
- del:删除字
- ins:插入字(有下划线)
- b:粗体字
- i:斜体字
- sup:上标
- sub:下标
- font:字体标签
- color:字体颜色
- size:字体大小(1~7)
页面效果图:
5、实体符号:为了避免和标签冲突,所以需要使用实体符号
- <:<
- >:>
- 空格:
- 注:html中按多个空格键,在网页中只显示一个空格。
6、HTML表格
- table:表格
- tr:行
- td:列
- th:列(比td加粗居中)
- 合并行:rowspan(一个格占两个位置)
- 注:row合并的时候,删除下面的单元格
- 合并列:colspan(一个格占两个位置)
- 注:col合并的时候,删除哪个没有要求
7、thead、tbody、tfoot标签
- thead、tbody、tfoot不是必须的,便于后期JS编写。
8、body的背景颜色和背景图片
- bgcolor:背景色
- background:背景图片
- 背景图片在背景色的上面
9、img标签
- src:图片的路径
- 只设置width,height会等比例缩放
- 只设置height,不起作用
- title:鼠标悬停时显示的信息
- alt:设置图片加载失败时显示的提示信息
10、 超链接或热链接
- href:hot references 热引用;
- 后面一定是一个资源的地址。
- 后面的路径可以是绝对路径也可以是相对路径,可以是网络某个资源的路径。
- target:
- _blank:新窗口
- _self:当前窗口(默认)
- _top:顶级窗口
- _parent:父级窗口
超链接的作用:
通过超链接可以从浏览器向服务器发送请求。
11、request与response的概念
- request:浏览器向服务器发送数据(请求)
- B --》S
- response:服务器向浏览器发送数据(响应)
- S--》B
12、列表
- 有序列表:ol
- type:1、A、a、I、i
- 无序列表:ul
- type:circle(○)、square(□)、disc(●)
13、表单(重点)
- action:写提交的URL地址
- method:默认get;还有post
- 表单有什么用?
- 答:收集用户的信息。表单展现之后,用户填写表单,点击提交。 (submit)
- 怎么画一个表单?
- 答:用form标签
- 一个网页可以有多个表单form
- 表单最终是需要提交数据给服务器的,form标签有一个action属性,这个属性用来指定服务器地址。
- action属性用来指定数据提交给哪个服务器
- action属性和超链接中的href属性一样。都可以向服务器发送请求(request)
- http://192.168.111.3:8080/oa/save 这是请求路径,
- 表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件。
- input中的type取值:
- radio:单选控件
- checkbox:多选控件
- submit:提交控件
- reset:重置控件
- button:普通控件
- text:文本控件
- password:密码控
- file:文件控件
- 上传文件专用
- hidden:隐藏域
- 网页上看不到,但是表单提交的时候数据会自动提交给服务器。
- input中的value属性用来指定按钮上显示的文本信息。
- 超链接a与表单form的区别?
- 答:表达form可以收集信息,而超链接a无法收集信息。
- 表单提交里面的按钮input中属性必须定义name,不然提交不了。
- 表单是以什么格式提交数据给服务器的?
- 格式:action?name=value&name=value&name=value..
- HTTP协议规定的,必须以这种格式提交给服务器
- java中String split('&');
- 重点强调:表单项写了name属性的,一律会提交给服务器。不想提交就不要写name属性。
- 文本框和密码框的value不需要程序员指定,用户输入什么value就是什么。
- 当name没有写的时候,该项不会提交给服务器
- 但是当value没有写的时候,value的默认值是空字符串"",将空字符串提交给服务器。java代码得到的是:String s = "";
效果图:
地址栏提交的信息:
?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我没有value属性;&position=ln&myFile=&myHidden=
14、表单的说明:
- ① 用户手动输入的文本框,都不需要给value赋值
- ② textarea没有value属性
- ③ radio、checkbox默认选项需要使用,checked="checked"(简写:checked)
- ④ select中的option属性:• selected="selected" 为默认选中 •size:显示条目数量
- multiple="multiple" 支持多选(select的属性)
- ⑤ input的属性
- readonly和disabled:
- 都是只读不能修改
- 数据不会提交
- maxlength:设置文本框中输入的字符数量。
15、HTML中的结点
- 在HTML文档中,任何元素(结点)都有id属性,id属性是该节点的唯一标识。所以在同一个HTML文档中id值不能重复。
- 注意:表单提交数据的时候,只和name有关系,和id无关
- id有什么作用?
- javascript语言:可以对HTML文档中的任何节点进行增删改操作。
- 获取节点时,通常通过id来获取节点
- HTML文档是一棵树,树上有很多节点,每一个节点都有唯一的id(DOM树)
16、div和span
- div和span有什么用?
- div和span都可以称为图层。
- 有什么用?
- 图层的作用为了保证页面可以灵活的布局。
- div和span是可以定位的,只要定下div的左上角的x轴和y轴坐标即可。
- div和span的区别?
- di独占一行
- span不会独占一行