HTML标签
HTML标签
代码实例:
1 块级标签和内敛标签
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <meta http-equiv="refresh" content="2;URL=http://www.baidu.com" charset="UTF-8">-->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>安河桥</title>
<link rel="stylesheet" href="">
<style></style>
</head>
<body>
<span><font size="33" color="yellow" >yfjs</font></span>
<div>
<div><font size="20" color="red">rsx</font></div>
<span><font size="30" color="orange" >大家都好</font></span>
</div>
<h2><font size="19" color="purple">rsx >yf <xy </font></h2>
<p><font size="19" color="blue">rsx&" '</font></p>
<p><font size="12" color="#ff4500">rsx©™</font></p>
<p><font size="40" color="#adff2f"><p></font></p>
2 img标签和a标签
<!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>RNG never give up</title>
<style>
.c1{
height: 1000px;
width: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div>RNG never give up</div>
<a name="top">RNG who is you winner</a><p></p>
<img src="1.jpg" alt="RNG" title="永不言弃" width="" height="">
<a href="https://image.baidu.com/search/index?tn=baiduima
ge&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=
1568021205974_R&pv=&ic=&nc=1&z=&hd=&latest=©right=&se=1&showtab=0&fb=0&width=&height=&face=0&i
stype=2&ie=utf-8&sid=&word=rng%E5%A3%81%E7%BA%B8&f=3&oq=rng&rsp=0" target="_blank">RNG图片</a>
<div class="c1"></div>
<a href="#top">回到顶部</a>
</body>
</html>
target:
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
3 列表标签
1.无序列表
type属性:
- disc(实心圆点,默认值)
- circle(空心圆圈)
- square(实心方块)
- none(无样式)
2.有序列表
type属性: start是从数字几开始
- 1 数字列表,默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul type="square">
<li>rsx</li>
<li>yf</li>
<li>xy</li>
</ul>
<ol type="I" start="10">
<li>rsx</li>
<li>yf</li>
<li>xy</li>
</ol>
</body>
</html>
4 table标签
属性:
- border: 表格边框.
- cellpadding: 内边距 (内边框和内容的距离)
- cellspacing: 外边距.(内外边框的距离)
- width: 像素 百分比.(最好通过css来设置长宽)
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列(即合并单元格)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="51" cellpadding="10" cellspacing="10">
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>rsx</td>
<td>13</td>
<td>Python</td>
</tr>
<tr>
<td>yf</td>
<td>12</td>
<td>--</td>
</tr>
<tr>
<td>xy</td>
<td>14</td>
<td>GO</td>
</tr>
</tbody>
</table>
5 input标签
type属性:
text:普通文本输入框
password:密文
date:日期选择框
radio:单选框
checkbox:复选框
submit:提交按钮
button:普通按钮
reset:重置
file:文件上传
hidden:隐藏input框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="hidden">
用户名:<input type="text">
密码:<input type="password">
<input type="radio" name="sex" value="1" >男
<input type="radio" name="sex" value="2" checked>女
<input type="checkbox" name="hobby" value="1">1
<input type="checkbox" name="hobby" value="2">2
<input type="checkbox" name="hobby" value="3">3
<input type="checkbox" name="hobby" value="4" checked>4
<div>
<input type="date">
</div>
<div>
<input type="file">
</div>
</body>
</html>
6 form表单
功能:
表单用于向服务器传输数据,从而实现用户与Web服务器的交互
表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
表单属性
属性 | 描述 |
---|---|
accept-charset | 规定在被提交表单中使用的字符集(默认:页面字符集)。 |
action | 规定向何处提交表单的地址(URL)(提交页面)。 |
autocomplete | 规定浏览器应该自动完成表单(默认:开启)。 |
enctype | 规定被提交数据的编码(默认:url-encoded)。 |
method | 规定在提交表单时所用的 HTTP 方法(默认:GET)。 |
name | 规定识别表单的名称(对于 DOM 使用:document.forms.name)。 |
novalidate | 规定浏览器不验证表单。 |
target | 规定 action 属性中地址的目标(默认:_self)。 |
表单元素
基本概念:
HTML表单是HTML元素中较为复杂的部分,表单往往和脚本、动态页面、数据处理等功能相结合,因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理:
访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误。当数据完整无误后,服务器反馈一个输入完成的信息。
点击提交按钮,input中type=submit的那个按钮,然后就会将form表单中所有用户输入的内容或者选择的内容({name属性:值,})都发给服务端(以我们自己写的那个socket举例,打印一下接收的内容),但是所有的输入标签必须有一个叫做name的属性。
发现跳到这个页面了:看url的内容,有了我们输入的内容,并且是给你组合起来的,name属性值和你输入的值组合到一起了,通过&符号分隔,并且在路径那里加了个问号
打印一下socket接收的消息,你就发现已经接受到这些数据了
让用户选择的,必须指定一个value值,要不然后端接收不到内容,用户自己填写的标签,不需要指定value值
然后再点击提交,后端打印一下接收的数据:
但是这样并不好,因为url中显示了你的信息,并且如果内容很多的话,你的地址栏不能够输入那么长的内容,为什么会默认拼接到url里面呢,因为form表单默认是get请求提交内容,我们可以改为post,来看看:post会把所有你提交的信息封装到一个消息体里面,在浏览器上就看不到了,对于小白来说,看着安全一些。
点击提交就跳到这个网址了:
在看后端打印的内容:
你会发现一个post请求:
把内容往后拉,就能看到咱们提交的数据了
那么你看,你的浏览器再你点击提交的时候,获取了你所输入的内容,然后通过网络提交给你的服务端代码程序了。
然后我们后端通过提交过来的数据,来做某些事情,该验证的验证,该保存的保存
所以记住form表单里面有两个属性:action控制往哪里提交数据、method控制用什么方式提交。
注意:
form表单提交数据的时候,必须有个submit按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="hidden">
用户名:<input type="text">
密码:<input type="password">
<input type="radio" name="sex" value="1" >男
<input type="radio" name="sex" value="2" checked>女
<input type="checkbox" name="hobby" value="1">1
<input type="checkbox" name="hobby" value="2">2
<input type="checkbox" name="hobby" value="3">3
<input type="checkbox" name="hobby" value="4" checked>4
<div>
<input type="date">
</div>
<div>
<input type="file">
</div>
</body>
</html>