html标签的总结-重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<meta charset="UTF-8">
<!--设定编码方式--> <title>Title</title>
<!--置html文档的标题，在浏览器上显示的名字，这里的html文件的名称就是title--> <meta name="keywords" content="我这个网站的关键词">
<!--定义我这个html的关键词，通过爬虫爬网站就根据这个来的--> <meta name="description" content="定义我这个网站的描述"> <meta http-equiv="Refresh" content="2;http://www.baidu.com">
<!--做刷新用的，2秒钟后网页跳转到百度这个网站--> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--，主要为了兼容ie浏览器，因为ie浏览器有完全遵守w3，所有ie对html的渲染支持的不够友好。对于别的浏览器--> <meta name="viewport" content="width=device-width,inital-scale=1.0">
<!--这个主要是为了兼容其他的页面，比如手机，这里的意思html文件的大小和设备大小一致，且不进行缩放--> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!--rel指定图片的路径，可以是网上的图片，也可以是本地的图片，引入一个小图标，在浏览器的窗口上显示一个小的图标，这个图标必须是icon的格式-->
<!--6、div标签，div标签就是没有任何作用，主要是匹配css做处理,需要大量对标签做渲染，这里就会用到div标签，div标签还是一个快级标签-->
hello div<div>这是一个div标签</div> <!--7、span标签，span标签和div标签的作用是一样的，唯一的区别就是span标签是内联标签，div标签是块级标签-->
hello span<span>这是一个span标签</span> <!--8、a标签，超链接标签,a标签是内联标签--> <div><a href="http://www.163.com" title="xxxxx">网易一下</a></div>
<!--在当前的页面打开网易这个页面-->
<!--title的效果是鼠标放上去的悬浮显示的内容--> <div><a href="http://www.baidu.com" target="_blank">百度一下</a></div>
<!--target="_blank"的作用是在新的tab页面打开百度这个网页--> <!--a标签不仅仅可以实现跳转到其他网页，还可以实现跳转到指定id的标签-->
<div>
<a href="#id">跳转到id为id的标签</a>
</div> <!--9、b标签,给字体加粗的功能-->
<div><b>给字体加粗的标签</b></div> <!--10、斜体的标签-->
<div><em>给字体变为斜体的标签</em></div> <!--11、给字体花中线的标签-->
<div><del>划线标签</del></div> <!--12、sub是下角标，sup是上角表-->
2<sub>3</sub>
2<sup>3</sup> <!--13、 代表一个空格的意思,<代表小于的意思, >代表大于的意思-->
xxxxx yyyy
<div>2<3</div>
<div>5>4</div> <!--14、img标签，引入图片的标签，还可以设置各种属性width，height，alt，title-->
<img src="D:\test.png" width="50px" height="80px" alt="图片加载失败，上面就会显示的名称" title="悬浮显示的名称"> <!--还可以实现点击图标实现超连接的跳转-->
<div>
<a href="http://www.baidu.com">
<img src="D:\test.png">
</a>
</div> <!--15、ul和ol标签，是列表标签,产生一个列表的效果，ul前无序号，ol前有序号--> <ul>
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
<li>第四列</li>
<li>第五列</li>
</ul> <ol>
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
<li>第四列</li>
<li>第五列</li>
</ol> <dl>
<dt>第一章</dt>
<dd>第一章：第一节</dd>
<dd>第一章：第二节</dd>
<dd>第一章：第三节</dd>
<dt>第二章</dt>
<dd>第二章：第一节</dd>
<dd>第二章：第二节</dd>
<dd>第二章：第三节</dd>
<dt>第三章</dt>
<dd>第三章：第一节</dd>
<dd>第三章：第二节</dd>
<dd>第三章：第三节</dd>
</dl> <!--16、table标签--> <!--border="1"的作用是给表格加一个边框-->
<table border="1">
<caption>测试的表格</caption>
<thead>
<tr>
<th>
表头第一列
</th>
<th>
表头第二列
</th>
<th>
表头第三列
</th>
</tr>
</thead>
<tbody>
<tr>
<td>表身体第一行：第一列</td>
<td>表身体第一行：第二列</td>
<td>表身体第一行：第三列</td>
</tr>
<tr>
<td>表身体第二行：第一列</td>
<td>表身体第二行：第二列</td>
<td>表身体第二行：第三列</td>
</tr>
<tr>
<td>表身体第三行：第一列</td>
<td>表身体第三行：第二列</td>
<td>表身体第三行：第三列</td>
</tr>
</tbody>
</table> <table border="1">
<caption>测试合并单元格横向合并</caption>
<thead>
<tr>
<th>
表头第一列
</th>
<th>
表头第二列
</th>
<th>
表头第三列
</th>
</tr>
</thead>
<tbody>
<tr> <!--colspan="3"作用是横向合并-->
<td colspan="3">表身体第一行：第一列</td>
<!--<td>表身体第一行：第二列</td>-->
<!--<td>表身体第一行：第三列</td>-->
</tr>
<tr>
<td>表身体第二行：第一列</td>
<td>表身体第二行：第二列</td>
<td>表身体第二行：第三列</td>
</tr>
<tr>
<td>表身体第三行：第一列</td>
<td>表身体第三行：第二列</td>
<td>表身体第三行：第三列</td>
</tr>
</tbody>
</table>
<table border="1">
<caption>测试合并单元格纵向合并</caption>
<thead>
<tr>
<th>
表头第一列
</th>
<th>
表头第二列
</th>
<th>
表头第三列
</th>
</tr>
</thead>
<tbody>
<tr> rowspan="3">：作用是纵向合并单元格
<td rowspan="3">表身体第一行：第一列</td>
<td>表身体第一行：第二列</td>
<td>表身体第一行：第三列</td>
</tr>
<tr>
<!--<td>表身体第二行：第一列</td>-->
<td>表身体第二行：第二列</td>
<td>表身体第二行：第三列</td>
</tr>
<tr>
<!--<td>表身体第三行：第一列</td>-->
<td>表身体第三行：第二列</td>
<td>表身体第三行：第三列</td>
</tr>
</tbody>
</table> <!--17、form标签，最重要的标签,可以实现和服务端进行交互,传输数据用的--> <!--input标签的属性-->
<!--text：就是一个文本输入框--> <!--submit:可以将数据提交到后台的框--> <!--password:是一个密码的输入框--> <!--checkbox:是一个复选框，可以实现多选--> <!--radio:是一个单选框，需要借助一个name的属性，把只能单选的radio的标签的name的值设置为相同的--> <!--button:也是一个触发框，但是不给后台提交数据，主要是用和js结合使用，比如点击颜色变为红色之类的--> <!--file:是一个上传文件的标签--> <!--reset:清空输入框的输入的内容--> <!--form标签的属性-->
<!--method:向后台提交数据的方式，get，post两种方式提交-->
<!--action:提交数据的后台的路径,url，server的网址-->
<!--enctype="multipart/form-data":上传文件的时候加上这个选项，是把文件一段一段的上传，--> <form method="post" action="http://www.baidu.com" enctype="multipart/form-data">
<div>姓名:<input type="text" name="name"></div>
<div>性别:<input type="text" name="mail"></div>
<!--这里提交到后台的数据格式为-->
<!--name:输入的姓名-->
<!--mail:输入的性别--> <div>密码:<input type="password" name="password"></div> <div>爱好:篮球<input type="checkbox" name="hobby" value="100"></div>
<div>爱好:足球<input type="checkbox" name="hobby" value="101"></div>
<div>爱好:排球<input type="checkbox" name="hobby" value="102"></div>
<!--复选框如果选择多个，怎么形成一个键值对到后台呢？这里需要借助2个属性，name和value-->
<!--如果选择一个，则为name:100-->
<!--如果选择2个，则为name;[100,101]-->
<!--如果选择3个，则为name:[100,101,102]--> <div>性别:男:<input type="radio" name="abc"></div>
<div>性别:女:<input type="radio" name="abc"></div> <div>
<input type="file">
</div>
<div>
重置:<input type="reset">
</div> <div>提交:<input type="submit" value="press"></div>
<div>触发:<input type="button" value="press"></div>
</form> <!--select:实现一个下拉框的标签-->
<!--默认只显示第一个内容，且只能单选，无默认选中项--> <!--提交数据的格式为k为choice,values的值为choice1或者choice2，这个就看你选择哪个了-->
<select name="choice">
<option value="choice1">选项1</option>
<option value="choice2">选项2</option>
<option value="choice3">选项3</option>
<option value="choice4">选项4</option>
</select> <!--默认只显示第2个内容，且只能单选，无默认选中项-->
<select size="2" name="choice">
<option value="choice1">选项1</option>
<option value="choice2">选项2</option>
<option value="choice3">选项3</option>
<option value="choice4">选项4</option>
</select> <!--默认只显示2个内容，且可以多选，无默认选中项-->
选项:<select size="2" multiple="multiple">
<option value="choice1">选项1</option>
<option value="choice2">选项2</option>
<option value="choice3">选项3</option>
<option value="choice4">选项4</option>
</select> <!--默认只显示第一个内容，且可以多选，有默认选中项-->
<select size="2" multiple="multiple">
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
<option selected="selected">选项4</option>
</select> <!--实现的效果就是实现一个下拉框，按照选项进行了分类--> <!--那下面这种select该如何提交数据呢？-->
<div>
<select name="bf">
<optgroup label="第一集团军">
<option value="bf1">北伐军1</option>
<option value="bf2">北伐军2</option>
</optgroup>
<optgroup label="第二集团军">
<option value="bf3">北伐军3</option>
<option value="bf4">北伐军4</option>
</optgroup>
</select>
</div> <!--textarea:一个输入框-->
<!--控制行数rows-->
<!--控制列数cols-->
<div>
<textarea rows="10" cols="20">
自我简介
</textarea>
</div> <!--label：标签，实现一个联动的小效果，点击用户名，鼠标的光标就会到for指向的id的标签的输入框中-->
<label for="ttt">用户名</label> <input id="ttt" type="text">
</body>
</html>
1、标题标签
h标签 2、段落标签
p 3、换行
br 4、空格
5、大于号，小于号
>
< 6、双引号
" 7、版权符号
© 8、注册符
® ---------------------------------------------------------------------------------------------------
1、无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul> 2、无序列表 <ol>
<li></li>
<li></li>
<li></li>
</ol> 3、自定义列表
<dl>
<dt>深圳</dt>
<dd>深圳1</dd>
<dd>深圳2</dd>
<dd>深圳3</dd>
<dt>广州</dt>
<dd>广州1</dd>
<dd>广州2</dd>
<dd>广州3</dd>
</dl> 3、超链接标签
<a href="www.baidu.com" target="_blank" title="xxxxx">百度一下</a>
超连接到的地址就是href属性的值"www.baidu.com"
你的鼠标放在百度一下的文字上浮动框显示的内容title属性的值"xxxxx"
target的属性的值的意思就是点击百度一下会重新打开一个tab页面,如果没有设置target属性
则默认会在当前窗口打开这个页面，也就是属性的值是“self” 4、表格标签,tr表示行，td表示列
4_1、table的属性
width设置宽度，height设置高度，align设置表格左右对齐
bgcolor设置背景颜色,cellspacing设置单元格和单元格之间的间距,cellpading设置单元格边框和文字之间的距离 4_2、tr的属性
align属性：设置文字在单元格中的位置，比如靠左，靠右，中间
bgcolor属性：背景属性 4_3、td的属性
align:水平对齐
valign:垂直对齐 <!--border="1"的作用是给表格加一个边框-->
<table border="1" width="100px" height="100px" align="left" bgcolor="red" cellspacing="2px" cellpadding="2px">
<caption>测试的表格</caption>
<thead>
<tr>
<th>
表头第一列
</th>
<th>
表头第二列
</th>
<th>
表头第三列
</th>
</tr>
</thead>
<tbody>
<tr>
<td>表身体第一行：第一列</td>
<td>表身体第一行：第二列</td>
<td>表身体第一行：第三列</td>
</tr>
<tr>
<td>表身体第二行：第一列</td>
<td>表身体第二行：第二列</td>
<td>表身体第二行：第三列</td>
</tr>
<tr>
<td>表身体第三行：第一列</td>
<td>表身体第三行：第二列</td>
<td>表身体第三行：第三列</td>
</tr>
</tbody>
</table> 表格还可以做合并单元格的处理 <table border="1">
<caption>测试合并单元格横向合并</caption>
<thead>
<tr>
<th>
表头第一列
</th>
<th>
表头第二列
</th>
<th>
表头第三列
</th>
</tr>
</thead>
<tbody>
<tr> <!--colspan="3"作用是横向合并-->
<td colspan="3">表身体第一行：第一列</td>
<!--<td>表身体第一行：第二列</td>-->
<!--<td>表身体第一行：第三列</td>-->
</tr>
<tr>
<td>表身体第二行：第一列</td>
<td>表身体第二行：第二列</td>
<td>表身体第二行：第三列</td>
</tr>
<tr>
<td>表身体第三行：第一列</td>
<td>表身体第三行：第二列</td>
<td>表身体第三行：第三列</td>
</tr>
</tbody>
</table> <table border="1">
<caption>测试合并单元格纵向合并</caption>
<thead>
<tr>
<th>
表头第一列
</th>
<th>
表头第二列
</th>
<th>
表头第三列
</th>
</tr>
</thead>
<tbody>
<tr> rowspan="3">：作用是纵向合并单元格
<td rowspan="3">表身体第一行：第一列</td>
<td>表身体第一行：第二列</td>
<td>表身体第一行：第三列</td>
</tr>
<tr>
<!--<td>表身体第二行：第一列</td>-->
<td>表身体第二行：第二列</td>
<td>表身体第二行：第三列</td>
</tr>
<tr>
<!--<td>表身体第三行：第一列</td>-->
<td>表身体第三行：第二列</td>
<td>表身体第三行：第三列</td>
</tr>
</tbody>
</table> 5、表单标签
5_1:form的属性
name:表单的名称
action:提交数据到哪里
method:提交的方式，有post和get两种方式
target:_bank:和a标签的target属性一致 <form name="表单的名称" action="url" method="post/get">
1、form标签中可以使用的标签
1_1、input标签，文本框
<input type="text" value="你好" placeholder="hello"> 1_2、input标签，密码框
<input type="password"> 1_3、input标签，单选框,checked="true"的意思默认被选中,如果是单选框，则同样的name属性的标签只能选中一个，才会互斥
<input name="sex" type="radio" checked="true">男
<input name="sex" type="radio" checked="true">女 1_4、input标签，复选框
<input type="checked" name="hob" value="100" checked="true">足球
<input type="checked" name="hob" value="100">篮球
<input type="checked" name="hob" value="100">学习 1_5、文件
<input type="file"><input type="button" value="浏览"> 1_6、input标签的属性值
<!--text：就是一个文本输入框--> <!--submit:可以将数据提交到后台的框--> <!--password:是一个密码的输入框--> <!--checkbox:是一个复选框，可以实现多选--> <!--radio:是一个单选框，需要借助一个name的属性，把只能单选的radio的标签的name的值设置为相同的--> <!--button:也是一个触发框，但是不给后台提交数据，主要是用和js结合使用，比如点击颜色变为红色之类的--> <!--file:是一个上传文件的标签--> <!--reset:清空输入框的输入的内容--> 2、select标签，下拉菜单 <!--select:实现一个下拉框的标签-->
<!--默认只显示第一个内容，且只能单选，无默认选中项--> <!--提交数据的格式为k为choice,values的值为choice1或者choice2，这个就看你选择哪个了-->
<select name="choice">
<option value="choice1">选项1</option>
<option value="choice2">选项2</option>
<option value="choice3">选项3</option>
<option value="choice4">选项4</option>
</select> <!--默认只显示第2个内容，且只能单选，无默认选中项-->
<select size="2" name="choice">
<option value="choice1">选项1</option>
<option value="choice2">选项2</option>
<option value="choice3">选项3</option>
<option value="choice4">选项4</option>
</select> <!--默认只显示2个内容，且可以多选，无默认选中项-->
选项:<select size="2" multiple="multiple">
<option value="choice1">选项1</option>
<option value="choice2">选项2</option>
<option value="choice3">选项3</option>
<option value="choice4">选项4</option>
</select> <!--默认只显示第一个内容，且可以多选，有默认选中项-->
<select size="2" multiple="multiple">
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
<option selected="selected">选项4</option>
</select> <!--实现的效果就是实现一个下拉框，按照选项进行了分类--> <!--那下面这种select该如何提交数据呢？-->
<div>
<select name="bf">
<optgroup label="第一集团军">
<option value="bf1">北伐军1</option>
<option value="bf2">北伐军2</option>
</optgroup>
<optgroup label="第二集团军">
<option value="bf3">北伐军3</option>
<option value="bf4">北伐军4</option>
</optgroup>
</select>
</div> 3、文本域
<!--textarea:一个输入框-->
<!--控制行数rows-->
<!--控制列数cols-->
<div>
<textarea rows="10" cols="20">
自我简介
</textarea>
</div> 4、图像域,图像就一个标签
<input type="image" src="图片地址">
</form>
html标签的总结-重复的更多相关文章
- 利用struts2<s:token>标签防止用户重复提交
当用户填写完表单后,在提交过一次后,若用户做如下操作比如再次点击提交.刷新页面.提交页面呈现后点击后退按钮,都会导致表单重复提交.如果信息需要存储到后台数据库中,重复提交就会再次向数据库中插入用户信息 ...
- A标签/按钮防止重复提交&页面Loading制作
[实现原理] 防止重复提交与页面的提交时的Loading设置,均是在提交,但是尚未处理完成进行的操作,且提交为异步提交(同步提交不需要考虑).因此,其实现原理是在点击按钮或A标签时,将按钮/A标签置为 ...
- Servlet------>jsp自定义标签4（重复标签体）
4.控制标签体内容执行五次(tld中的配置,和jsp我就省略了,详细请看jsp自定义标签1)这里这个方法是继承了tag接口的实现类,这个实现类里不只实现了tag接口,还有tag接口的子接口,也就是It ...
- 12、Struts2表单重复提交
什么是表单重复提交 表单的重复提交: 若刷新表单页面, 再提交表单不算重复提交. 在不刷新表单页面的前提下: 多次点击提交按钮 已经提交成功, 按 "回退" 之后, 再点击 &qu ...
- javaweb学习总结(二十六)——jsp简单标签标签库开发(二)
一.JspFragment类介绍 javax.servlet.jsp.tagext.JspFragment类是在JSP2.0中定义的,它的实例对象代表JSP页面中的一段符合JSP语法规范的JSP片段, ...
- [原创]java WEB学习笔记73：Struts2 学习之路-- strut2中防止表单重复提交
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- struts2 文件的上传下载 表单的重复提交 自定义拦截器
文件上传中表单的准备 要想使用 HTML 表单上传一个或多个文件 须把 HTML 表单的 enctype 属性设置为 multipart/form-data 须把 HTML 表单的method 属性设 ...
- JavaWeb学习记录（十九）——jstl自定义标签之简单标签
一.简单标签共定义了5个方法: setJspContext方法 setParent和getParent方法 setJspBody方法 doTag方法 二.方法介绍 osetJspContext方法 用 ...
- 删除重复&海量数据
08. 删除重复&海量数据 重复数据,通常有两种:一是完全重复的记录,也就是所有字段的值都一样:二是部分字段值重复的记录. 一. 删除完全重复的记录完全重复的数据,通常是由于没有设置主键/ ...
随机推荐
- BOM及改变this指向
bom ( borwser object model 浏览器对象模型) 定义js操作浏览器的属性和方法 window.open(url way()) 中有两个参数 url代表打开的网页地址 wa ...
- 关于Linux DNS部分处理
如果不能ping 通外网地址进行解析的话进行如下处理
- [UE4]移动设备贴图消失
pc版本是支持直接使用psd文件作为贴图文件,但移动设备就不支持了.
- Spark分析之SparkContext启动过程分析
SparkContext作为整个Spark的入口,不管是spark.sparkstreaming.spark sql都需要首先创建一个SparkContext对象,然后基于这个SparkContext ...
- django的用户认证组件
DataSource:https://www.cnblogs.com/yuanchenqi/articles/9064397.html 代码总结: 用户认证组件: 功能:用session记录登录验证状 ...
- ElasticSearch 搜索原理
运行结果:返回5条数据 参考代码ESTestDocumentAPI.java package com.dajiangtai.djt_spider.elasticsearch; import java. ...
- 学大伟业Day1解题报告
学大伟业Day1解题报告 张炳琪 一. 时间分配 T1:30分钟 T2: 60分钟 T3:100分钟 二．答题情况及错因 T1:100 T2:55 T3 ...
- dos批处理文件中的变量小结
很多情况下我们需要用到一些批处理文件中的变量,方便我们执行一些操作,这里简单整理下,方便需要的朋友 批处理中的变量,我把他分为两类,分别为"系统变量"和"自定义变量& ...
- servlet里的过滤器filter
过滤器的主要作用 1,任何系统或网站都要判断用户是否登录. 2,网络聊天系统或论坛,功能是过滤非法文字. 3,统一解决编码 怎么创建一个过滤器: 1,生成一个普通的class类,实现Filter接口( ...
- HP服务器安装配置教程
使用iLO远程管理HP系列服务器 http://blog.51cto.com/wangchunhai/837529