B/S架构介绍
在开始介绍HTML之前,我们得先知道一个Browser/Server端架构,也就是B/S
架构,B/S
架构是一种特殊的C/S
架构,对于B/S
架构来说,它的Client端其实就变成了Browser端,也就是浏览器。
我们整个上网的过程其实就是一个不断下载的过程,输入网址意味着就是输入Server端的IP地址,而Browser会自动为你添加80port(端口号),这些其实都是一种叫HTTP协议的应用层协议规定好了的,在Server端接收到请求后就会返回一些文件数据,此时通过Browser端的渲染,那么久会呈现出我们十分熟悉的网页。
通过点击某一链接又会重复上一次的步骤,所以整个上网的过程就是浏览器与服务器在不断的进行数据交互的一个过程,而浏览器本身其实就是一个解释器,它会将服务器返回的文件数据进行解释并渲染一遍。
我们这里也可以通过socket
来搭建出一个非常简单的服务器,来与浏览器进行交互。
from socket import * def run(): server = socket(AF_INET,SOCK_STREAM) # 传输层基于TCP协议 server.bind(("127.0.0.1",8080)) server.listen(5) while 1: conn,addr = server.accept() data = conn.recv(1024) print(data) # 浏览器中传来的信息 # 必须HTTP协议发送内容才能被Browser所识别 conn.sendall(bytes("HTTP/1.1 201 OK \r\n\r\n","utf8")) # 返回的内容 conn.sendall(bytes("Hello,World!
","utf8")) conn.close() if __name__ == '__main__': run()
可以看到,上图我们的Server端返回了2条数据,一条是HTTP协议的返回头信息,一条是返回体信息。在返回体中我们写了一条HTML代码,最终这条HTML代码就被Browser端渲染了出来。
那么这样做其实是有问题的,我们应该是将HTML代码书写进一个文本中,当Browser端需要的时候再通过文件读取的方式读出字节,最后Server端通过TCP协议流式的将代码发送给Browser端,再由Browser端进行渲染。
HTML历史
htyper text markup language
即超文本标记语言
超文本: 就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
标记语言: 标记(标签)构成的语言.
HTML最早诞生于1990年,由物理学家蒂姆·伯纳斯-李所创建,在1989年的时候蒂姆·伯纳斯-李就曾在一份备忘录中提出一个基于互联网的超文本系统这样的概念,并且在1990年规定出了HTML并在同年写出了浏览器与软件。
版本 | 年份 |
---|---|
HTML | 1991 |
HTML+ | 1993 |
HTML 2.0 | 1995 |
HTML 3.2 | 1997 |
HTML 4.01 | 1999 |
XHTML 1.0 | 2000 |
HTML5 | 2012 |
XHTML5 | 2013 |
HTML文档树
我们拿一段最简单的HTML代码举例,先不管写的是什么,先来看看它的结构。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div>
<h1>hello,world!h1>
div>
body>
html>
HTML中注释为 ,你可以使用
CTRL+/
来实现。
通过观察上面的这一小段代码,可以看出一个标准的HTML文档内容至少包含三部分。分别是最外层的标签
,还有标签
与标签
。而我们最主要的内容就是在
标签中进行编辑。
他其实就是一个树状结构,如下:
标签相关介绍
我们来看一下上面的这一小段HTML代码,里面有着各种各样的标签,标签具有以下特征:
1.由一对儿尖括号包裹的单词构成。例如:
。所有的标签都不能以数字开头。
2.标签不区分大小写,如:
或
均可,但是为了可读性更推荐使用小写。
3.标签分为闭合标签与自闭合标签,闭合标签必须有开始标签与结束标签,如:
与
就是属于闭合标签,而
就是属于自闭和标签。
除了标签本体外,我们还可以看见上图HTML代码中的标签还包含了一些属性,如,学习HTML就是学习标签,学习标签一定要贯穿着整个属性来学习。
1.属性通常是以键值对形式出现的. 例如
gender="male"
2.属性只能出现在开始标签 或 自闭和标签中.
3.属性名字全部小写. 属性值必须使用双引号或单引号包裹 例如
gender="male"
。4.如果属性值和属性名完全一样.直接写属性名即可. 例如
readonly
。
另外,如果我们是使用自闭和标签,比如,我们在设置完属性后一般会给它添加上一条正斜杠,如
。
!DOCTYPE HTML 文档声明
早期时候W3C标准没有出台时,各个浏览器对页面的渲染均采用不同的方法,这样会产生差异化。后来W3C标准出现后浏览器都开始采纳了这套标准,所以此标签的作用便是使用标准模式,如果不添加此标签代表使用浏览器自带的模式,也被称为怪异模式,因此后面的学习中一定要将它加上。
怪异模式:BackCompat,浏览器使用自己的解析标准进行页面渲染
标准模式:CSS1Comapt,浏览器采用W3C的解析标准进行页面渲染
head 头部标签
该标签的作用是专门提供一下网页的配置信息,如网页的标题,检索内容,解码格式等等,它里面包含了如下常用标签:
<head>标签中所包含的常用标签 | |
---|---|
标签名称 | 功能描述 |
<title> | 指定整个网页的标题,在浏览器最上方显示。 |
<meta> | 提供有关页面的基本信息 |
<link> | 定义文档与外部资源的关系。 |
<style> | 定义内部样式表与网页的关系 |
好了,那么接下来我们看看每个标签的详细使用与属性。
meta 标签
该元素可提供有关页面的原信息(mata-information),针对搜索引擎和更新频度的描述和关键词。
提供的信息是用户不可见的。 标签的组成:
标签共有两个属性,它们分别是
http-equiv
属性和name
属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
http-equiv属性
它用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容,与之对应的属性值为content
,content
中的内容其实就是各个参数的变量值。
<meta http-equiv="refresh" content="2;URL=http://www.google.com"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-EmulateIE7">
,代表两秒后该页面刷新跳转到谷歌,常见于色情网站 = = 如果不指定则不跳转页面。
,请求头信息,可简写为
。
,兼容IE7的标准,改成几兼容几,前提是在IE浏览器上用。由历史原因造成,告诉IE浏览器以最高级模式进行渲染。
name属性
主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个用 ,
号隔开,与之对应的属性值为content
,content
中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="..."> <meta name="Description" content="..."> <meta name="viewport" content="width=device-width,initial-scale=1">
title 标签
标签可以设置网页的标题名称。
link 标签
标签一般都是用于引入一些资源。如网页的缩略图,网页所需要的css文件,js文件等等。它有两个重要的属性,
ref
与href
。
ref属性
一般用于表示资源的类型,如图标文件icon
,css文件stylesheet
等等。
href属性
表示需要链接的资源地址。
script 标签
标签是用于引入js文件,这个一般不会将它放在
标签中,但是也会有人这么做。它有一个属性
src
,即引入的js文件链接地址。
body 主体标签
该标签的作用是提供给用户预览的内容区域,你可以在标签中写上如下的常用标签以及特殊符号来构建你的网页:
<body>标签中所包含的常用标签 | ||
---|---|---|
标签名称 | 功能描述 | display |
字体相关 | ||
<font> | 规定文本的字体、字体尺寸、字体颜色。不建议使用 | inline |
<hn> | n 的取值范围是1~6; 从大到小. 用来表示标题.h 系列独占一行 |
block |
<b> | 文字加粗 | inline |
<strong> | 文字加粗 | inline |
<i> | 文字变斜体 | inline |
<em> | 文字变斜体 | inline |
<u> | 文字加入下划线 | inline |
<s> | 文字加入删除线 | inline |
<del> | 文字加入删除线 | inline |
<strike> | 文字加入删除线,H5不建议使用 | inline |
<sup> | 上角标 | inline |
<sub> | 下角标 | inline |
排版相关 | ||
<div> | 分割标签,布局使用 | block |
<span> | 用来组合文档中的行内元素,与
|
inline |
<br> | 换行 | inline |
<p> | 换行 | block |
<hr> | 水平线,一条很细的横线 | inline |
<center> | 居中,H5不建议使用 | block |
<pre> | 预格式化,H5不建议使用 | block |
列表相关 | ||
<ul>系列 | 用于定义无序列表。 | block |
<ol>系列 | 用于定义有序列表。 | block |
<dl>系列 | 用于定义自定义列表。 | block |
表单相关 | ||
<form>系列 | 用于创建供用户输入的 HTML 表单。 | block |
表格相关 | ||
<table>系列 | 定义 HTML 表格 | block |
超链接 | ||
<a> | 定义超链接,用于从一个页面链接到另一个页面。 | inline |
图像资源 | ||
<img> | 定义 HTML 页面中的图像。 | inline-block |
内联框架 | ||
<iframe> | 规定一个内联框架。 | inline |
<body>标签中所包含的常用特殊字符 | |
---|---|
特殊字符 | 含义 |
| 空格 |
< | 小于号 < |
> | 大于号 > |
" | 双引号 '' |
© | 圆圈c © |
® | 圆圈r ® |
™ | 商标™ |
& | 符号& |
内联标签与块级标签
上面表格中,有个display列,其中block
为块级标签,inline
为内联标签。
内联标签的特点:
1.和其他元素都在一行上
2.不可设置宽高
3.宽度就是它的文字或图片的宽度,不可改变
4.内联元素只能容纳文本或者其他内联元素
特殊的2个内联标签:
,
可设置宽高,这是2个特殊的内联标签,所以被标为
inline-block
,是指能设置宽高的内联标签,也被称为内联块级标签。
块级标签的特点:
1.总是在新行上开始;
2.可设置宽高
3.宽度缺省是它的容器的100%,除非设定一个宽度。
4.它可以容纳内联元素和其他块元素
块级元素的嵌套规则:
1.块级元素可以包含内联元素或者某些块级元素但内联元素不可以包含块级元素,它们只能包含内联元素
2.有几个特殊的块级元素只能包含内联元素,不能包含块级元素如
,
,
3.
内可以包含
4.块级元素与块级元素并列,内联元素与内联元素并列
两个重要的通用属性
所有标签都可以设置两个非常重要的通用属性,他们分别是
id
与class
。
id
是HTML4.0后加入的,此前都是name
,id
在 当前HTML 文档中必须是唯一的。
class
的作用为规定元素的一个或多个类名(引用样式表中的类)。class
并不具有唯一性。
建议:
class
的命名用-
来链接,而id
的命名用_
来链接。
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <div class="header-menu"> 头部菜单 div> <div class="left-menu"> 左侧菜单 div> <div id="nav_right"> 右导航栏 div> body> html>
字体相关标签
font 文字
作用:规定文本的字体、字体尺寸、字体颜色。不建议使用
属性 值 描述 rgb(x,x,x),#xxxxxx,colorname 不赞成使用。请使用样式取代它。规定文本的颜色。设置方式:单词 #ff00cc
,或者rgb(0,0,255)
。font_family 不赞成使用。请使用样式取代它。规定文本的字体。设置字体。 number 不赞成使用。请使用样式取代它。规定文本的大小,范围为1-7
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <font color="red" size="6" face="微软雅黑">你好啊!font> <br /> 你好啊! body> html>
hn 标题
作用:
n
的取值范围是1~6; 从大到小. 用来表示标题.h
系列独占一行
属性 值 描述 left,center,right,justify 不推荐使用。请使用样式替代它。规定标题中文本的排列。
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <h1>这是标题 1h1> <h2>这是标题 2h2> <h3>这是标题 3h3> <h4>这是标题 4h4> <h5>这是标题 5h5> <h6>这是标题 6h6> body> html>
b 加粗
作用:文字加粗
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <p>这是普通文本 - <b>这是粗体文本b>。p> body> html>
strong 加粗
作用:文字加粗
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <p>这是普通文本 - <strong>这是粗体文本strong>。p> body> html>
i 斜体
作用:文字变斜体
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <p>这是普通文本 - <em>这是斜体文本em>。p> body> html>
em 斜体
作用:文字变斜体
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <p>这是普通文本 - <em>这是斜体文本em>。p> body> html>
u 下划线
作用:文字加入下划线
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <p>这是普通文本 - <u>这是有下划线的文本u>。p> body> html>
s 删除线
作用:文字加入删除线
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <p>这是普通文本 - <del>这是有删除线的文本del>。p> body> html>
del 删除线
作用:文字加入删除线
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <p>这是普通文本 - <del>这是有删除线的文本del>。p> body> html>
strike 删除线
作用:文字加入删除线,H5不建议使用
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <p>这是普通文本 - <strike>这是有删除线的文本strike>。p> body> html>
sup与sub 角标
作用:上角标和下角标
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <p>上角标<sup>3sup>下角标<sub>2sub>p> body> html>
排版相关标签
div与span 布局
作用:分割标签,布局使用。如果只会单纯的HTML,那么它的作用性很小,所以这里不太好举例。
作用:用来组合文档中的行内元素,与
标签类似,如果只会HTML,那么它的作用性也很小,不太好举例。
和
唯一的区别在于:是不换行的,而
是换行的。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说,DIV+CSS来实现各种样式。
在浏览器中,默认是不会增加任何的效果的,但是语义变了,
中的所有元素是一个小区域。
标签是一个容器级标签,里面什么都能放,甚至可以放div自己。
也是表达“小区域、小跨度”的标签,但是是一个文本级的标签。
就是说,
里面只能放置文字、图片、表单元素
那么这里,我用一张图片举例。
红色的都可以用
标签来设置宽高进行布局,而蓝色的部分由于可以用来组合文档中的行内元素,那么蓝色部分里的每个小选项是都可以用
标签与其他标签进行组合完成的。
br与p 换行
作用:换行。它是一个内联标签,注意与
的区别。
作用:换行。它是一个块级标签,注意与
的区别。
注意:
是一个文本级的标签,里面只能放文字,图片,表单元素,其他的一律不放。
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> 哈哈哈哈 <p>p标签p> 哈哈哈哈 <br />br标签 body> html>
hr 水平线
作用:水平线,一条很细的横线。
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <p>hr的上面p> <hr /> <p>hr的下面p> body> html>
center 居中
作用:居中,H5不建议使用
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <h1>未居中h1> <center><h1>居中h1>center> body> html>
pre 预格式化
作用:预格式化,H5不建议使用
含义:将保留其中的所有的空白字符(空格、换行符),原封不动的输出结果(告诉浏览器不要忽略空格和空行) 说明:真正排网页过程中,
标签几乎用不着。但在PHP中用于打印一个数组时可能会使用到。
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> 我 想 怎 么 写 就 怎 么 写 <pre> 我 想 怎 么 写 就 怎 么 写 pre> body> html>
列表相关标签
ul与li 无序列表
作用:用于定义无序列表。注意:无序列表中必须有
标签来书写具体内容。
属性 值 描述 compact 不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。 disc,square,circle 不赞成使用。请使用样式取代它。规定列表的项目符号的类型。
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <ul> <li>香蕉li> <li>牛奶li> <li>菠萝li> ul> body> html>
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <h4>Disc 项目符号列表:h4> <ul type="disc"> <li>苹果li> <li>香蕉li> <li>柠檬li> <li>桔子li> ul> <h4>Circle 项目符号列表:h4> <ul type="circle"> <li>苹果li> <li>香蕉li> <li>柠檬li> <li>桔子li> ul> <h4>Square 项目符号列表:h4> <ul type="square"> <li>苹果li> <li>香蕉li> <li>柠檬li> <li>桔子li> ul> body> html>
ol与li 有序列表
作用:用于定义有序列表。注意:有序列表中必须有
标签来书写具体内容。
属性 值 描述 compact HTML5 中不支持。HTML 4.01 中不赞成使用。规定列表呈现的效果比正常情况更小巧。 reversed 规定列表顺序为降序。(9,8,7...) number 规定有序列表的起始值。 1,A,a,I,i 规定在列表中使用的标记类型。
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <ol> <li>咖啡li> <li>牛奶li> <li>茶li> ol> <ol start="50"> <li>咖啡li> <li>牛奶li> <li>茶li> ol> body> html>
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <h4>数字列表:h4> <ol> <li>苹果li> <li>香蕉li> ol> <h4>字母列表:h4> <ol type="A"> <li>苹果li> <li>香蕉li> ol> <h4>小写字母列表:h4> <ol type="a"> <li>苹果li> <li>香蕉li> ol> <h4>罗马字母列表:h4> <ol type="I"> <li>苹果li> <li>香蕉li> ol> <h4>小写罗马字母列表:h4> <ol type="i"> <li>苹果li> <li>香蕉li> ol> body> html>
dl与dt以及dd 自定义列表
作用:用于定义自定义列表。
为最外部,
为标题,
为段落。他们的使用场景也蛮多的,因为非常灵活。
<html> <body> <h2>一个定义列表:h2> <dl> <dt>计算机dt> <dd>用来计算的仪器 ... ...dd> <dt>显示器dt> <dd>以视觉方式显示信息的装置 ... ...dd> dl> body> html>
表单相关form系列
表单用于向服务器传递数据
表单能够包含
元素,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含
、
、
和
元素。
它会将位于表单标签内的子标签数据提取出来并发送给特定的路径,该路径会有相应的后台操作来处理这些数据。
属性 值 描述 accept MIME_type HTML 5 中不支持。 charset_list 规定服务器可处理的表单数据字符集。 URL 规定当提交表单时向何处发送表单数据。 onoff 规定是否启用表单的自动完成功能。 下方有 规定在发送表单数据之前如何对其进行编码。 getpost 规定用于发送 form-data 的 HTTP 方法。 form_name 规定表单的名称。 novalidate 如果使用该属性,则提交表单时不进行验证。 _blank,_self,_parent,_top,framename 规定在何处打开 action URL。
enctype
属性可能的值:application/x-www-form-urlencoded
multipart/form-data
text/plain
其中
action
是提交时候的路径,method
是提交方式常用的有两种get
或者post
,如果想上传文件enctype
必须设置为multipart/form-data并且action
必须为post
方式才能进行文件的上传。
在
系列标签中,共有以下几种常用的标签。
<form>标签中所包含的常用标签 标签名称 功能描述 display <input> 输入框 inline-block <lable>· 为 元素定义标注(标记)
inline <select> 选择框 block <textarea> 文本域 inline <fieldset> 美化相关 未知 <legend> 美化相关 未知
注意:这里又出现了一个
inline-block
,说明它是一个可以设置宽高的内联块级标签。
input 输入框
可以有多种形态,只需要设置属性
type
即可,如下表:
type属性值 表现形式 对应代码 text 单行输入文本 password 密码输入框 <input type="password" /> date 日期输入框 <input type="date" /> checkbox 复选框 <input type="checkbox" checked="checked" /> radio 单选框 <input type="radio" /> submit 提交按钮 <input type="submit" value="提交" /> reset 重置按钮 <input type="reset" value="重置" /> button 普通按钮 <input type="button" value="普通按钮" /> hidden 隐藏输入框 <input type="hidden" /> file 文本选择框 <input type="file" /> number 数字输入框 <input type="number" />
在
标签中,绝大部分标签都需要设置键值对的方式,因为它们最后的信息都是提交给整个
表单标签的。但是也有少部分不用,比如
button
,reset
,sumbit
等等。
<input>其他常用属性 属性 值 描述 name field_name 表单提交时的“键”,注意和id的区别 value value 表单提交时对应项的值 checked checked radio和checkbox默认被选中的项 readonly readonly text和password设置只读 disabled disabled 所有input均适用,变灰了,点不动了 placeholder text 规定帮助用户填写输入字段的提示。 required required 指示输入字段的值是必需的。 size number_of_char 定义输入字段的宽度。 min number date 定输入字段的最小值。 max number date 规定输入字段的最大值。
value:表单提交时对应项的值
type="button", "reset", "submit"时,为按钮上显示的文本年内容
type="text","password","hidden"时,为输入框的初始值
type="checkbox", "radio", "file",为输入相关联的值
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <form action="#" method="post" enctype="multipart/form-data"> <p>头像: <input type="file" name="avatar" />p> <p>用户名: <input type="text" name="username" placeholder="请输入用户名" />p> <p>密码: <input type="text" name="pwd" placeholder="请输入密码" />p> <p>性别: 男<input type="radio" name="gender" value="male" />女<input type="radio" name="gender" value="female" />p> <p>爱好: 篮球<input type="checkbox" name="hobby" value="basketball" checked />足球<input type="checkbox" name="hobby" value="football" />p> <p><input type="reset" value="重新填写信息" /> <input type="submit" value="提交注册信息"> <input type="butoon" value="联系客服" disabled>p> form> body> html>
lable 标注
标签为
元素定义标注(标记)。
元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在
元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的
for
属性应当与相关元素的id
属性相同。
属性 值 描述 id 规定 label 绑定到哪个表单元素。 formid 规定 label 字段所属的一个或多个表单。
男 女
对于上面这样的单选框,我们只有点击那个单选框(小圆圈)才可以选中,点击“男”、“女”这两个文字时是无法选中的;于是,
标签派上了用场。
本质上来讲,“男”、“女”这两个文字和
标签时没有关系的,而label就是解决这个问题的。我们可以通过
把
和汉字包裹起来作为整体。
解决方法如下:
上方代码中,
元素要有一个
id
,然后标签有一个
属性,和
相同,那么这个
和
就有绑定关系了。
当然了,复选框也有
:(任何表单元素都有
)
select与optgroup以及option 选择框
这三组标签可做选择框:
其中
标签应该具有一个
name
,它相当于字典的key
。
不是必须的一个标签,主要对
标签做分组管理,必须要属性
lable
为组名
标签应该设置
value
,并且标签可以设置
selected
作为默认选择。的选择项相当于字典的
value
。
<select>标签属性 属性 值 描述 autofocus 规定在页面加载后文本区域自动获得焦点。 disabled 规定禁用该下拉列表。 form_id 规定文本区域所属的一个或多个表单。 multiple 规定可选择多个选项。布尔属性, True
或者False
。name 规定下拉列表的名称。 required 规定文本区域是必填的。 number 规定下拉列表中可见选项的数目。
<optgroup>标签属性 属性 值 描述 label text 为选项组规定描述。 disabled disabled 规定禁用该选项组。
<option>标签属性 属性 值 描述 disabled 规定此选项应在首次加载时被禁用。 text 定义当使用 时所使用的标注。
selected 规定选项(在首次显示在列表中时)表现为选中状态。 text 定义送往服务器的选项值。
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <form action="#" method="post" enctype="multipart/form-data"> <p>头像: <input type="file" name="avatar" />p> <p>用户名: <input type="text" name="username" placeholder="请输入用户名" />p> <p>密码: <input type="text" name="pwd" placeholder="请输入密码" />p> <p>性别: 男<input type="radio" name="gender" value="male" />女<input type="radio" name="gender" value="female" />p> <p>爱好: 篮球<input type="checkbox" name="hobby" value="basketball" checked />足球<input type="checkbox" name="hobby" value="football" />p> <p><input type="reset" value="重新填写信息" /> <input type="submit" value="提交注册信息"> <input type="butoon" value="联系客服" disabled>p> 居住地 <select name="addr"> <optgroup label="中国"> <option value="bejing" selected>北京option> <option value="shanghai">上海option> <option value="guangzhou">广州option> <option value="shenzhen">深圳option> <option value="other">其他option> optgroup> <optgroup label="海外"> <option value="America">美国option> <option value="Japanese">日本option> <option value="England">英国option> <option value="Germany">德国option> <option value="Canada">加拿大option> optgroup> select> form> body> html>
textarea 文本域
文本标签,和
标签类似。可使用
placeholder
定义默认显示值。
属性 值 描述 autofocus 规定在页面加载后文本区域自动获得焦点。 number 规定文本区内的可见宽度。 disabled 规定禁用该文本区。 form_id 规定文本区域所属的一个或多个表单。 number 规定文本区域的最大字符数。 name_of_textarea 规定文本区的名称。 text 规定描述文本区域预期值的简短提示。 readonly 规定文本区为只读。 required 规定文本区域是必填的。 number 规定文本区内的可见行数。 hardsoft 规定当在表单中提交时,文本区域中的文本如何换行。。
其中
clos
和rows
分别可以设置列数和行数,但是不经常使用。更推荐CSS
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <form action="#" method="post" enctype="multipart/form-data"> <p>头像: <input type="file" name="avatar" />p> <p>用户名: <input type="text" name="username" placeholder="请输入用户名" />p> <p>密码: <input type="text" name="pwd" placeholder="请输入密码" />p> <p>性别: 男<input type="radio" name="gender" value="male" />女<input type="radio" name="gender" value="female" />p> <p>爱好: 篮球<input type="checkbox" name="hobby" value="basketball" checked />足球<input type="checkbox" name="hobby" value="football" />p> <p><input type="reset" value="重新填写信息" /> <input type="submit" value="提交注册信息"> <input type="butoon" value="联系客服" disabled>p> 居住地 <select name="addr"> <optgroup label="中国"> <option value="bejing" selected>北京option> <option value="shanghai">上海option> <option value="guangzhou">广州option> <option value="shenzhen">深圳option> <option value="other">其他option> optgroup> <optgroup label="海外"> <option value="America">美国option> <option value="Japanese">日本option> <option value="England">英国option> <option value="Germany">德国option> <option value="Canada">加拿大option> optgroup> select> <p><textarea name="register_reason" cols="30" rows="10" placeholder="请填写充分理由">textarea>p> form> body> html>
fieldset与legend 美化
美化标签,可以在
标签中的某个元素周边做一个特效。没啥用...
结果展示
那么我们将上面代码整理一下,得到了一个比较简约的注册页面。
doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> head> <body> <form action="#" method="post" enctype="multipart/form-data"> <fieldset > <legend><h1>欢迎注册h1>legend> <p>头像: <input type="file" name="avatar" />p> <p>用户名: <input type="text" name="username" placeholder="请输入用户名" />p> <p>密码: <input type="text" name="pwd" placeholder="请输入密码" />p> <p>性别: 男<input type="radio" name="gender" value="male" />女<input type="radio" name="gender" value="female" />p> <p>爱好: 篮球<input type="checkbox" name="hobby" value="basketball" checked />足球<input type="checkbox" name="hobby" value="football" />p> 居住地 <select name="addr"> <optgroup label="中国"> <option value="bejing" selected>北京option> <option value="shanghai">上海option> <option value="guangzhou">广州option> <option value="shenzhen">深圳option> <option value="other">其他option> optgroup> <optgroup label="海外"> <option value="America">美国option> <option value="Japanese">日本option> <option value="England">英国option> <option value="Germany">德国option> <option value="Canada">加拿大option> optgroup> select> fieldset> <fieldset> <legend>请填写注册理由legend> <p><textarea name="register_reason" cols="30" rows="10" placeholder="请填写充分理由">textarea>p> fieldset> <p><input type="reset" value="重新填写信息" /> <input type="submit" value="提交注册信息"> <input type="butoon" value="联系客服" disabled>p> form> body> html>
表格相关table系列
在