html标签详解
http标签详解及讲解
1.基础标签
1 <!DOCTYPE html> <!--表示文本类型--> 2 <html> <!--<html></html>表示创建一个html文档--> 3 <head> <!--<head></head>设置文档标题和其它在网页中不显示的信息--> 4 <title>标题</title> <!--<title></title>设置文档的标题，就是最上方的名字--> 5 </head> 6 <body> <!--<body></body>设置文档的内容--> 7 <p>原创作者：雨点的名字</p> 8 </body> 9 </html>
2.body内常用标签
<!----> 注释标签快捷键：Ctrl+Shift+/, 我用的是myeclipse
<br> 换行标签
<hr/> 横线标签
<p></p> 表示段落
<h1></h1> 表示标题，分为h1到h6字体依次递减
<strong> </strong>和<b> </b> 将文本加粗
<em> </em>和<i> </i> 将文本倾斜
<del> </del>和<s> </s> 将文本设置删除线
<ins> </ins>和<u> </u> 将文本设置下划线
<pre></pre> 预编译格式很有用的标签
1 <!DOCTYPE html> 2 <head> 3 <title>来吧</title> 4 </head> 5 <body> 6 <!--这是一个注释标签，页面上你看不到--> 7 <h4>我是标题哦</h4> 8 <hr/> 9 <p>我是p标签<b>我自动加粗的</b></p><br/> 10 <s>我是删除线</s> 11 <u>我是下划线</u><br/> 12 <pre> 我是预编译， 13 我怎么输它就怎么显示</pre> 14 </body> 15 </html>
运行结果如下：
![]()
3.图片标签
<img></img>
1 <!DOCTYPE html> 2 <head> 3 <title>美女图片</title> 4 </head> 5 <body> 6 <img src="first.jpg" title="就问你美不美" alt="这里显示第一张图" width="200" height="300"> 7 <img src="second .jpg" title="身材太好了" alt="这里显示第二张图" width="200" height="300"> 8 </body> 9 </html>
注解：在该<img> </img>标签中常用src属性表示图片的来源和名称；用title属性设置鼠标放到图片上时显示的文字；用alt属性设置当图盘无法正常显示时对图片的描述；用width和height属性设置图片的宽和高
效果如下：
4：链接标签
（1）基本链接介绍
注解：在利用<a> </a>实现超链接时使用href属性指明跳转的地址；使用title属性设置当鼠标放到超链接上时显示的文字；用target属性指明超链接的跳转方式，其中_self表示不开启新窗口且在当前窗口打开跳转后的页面（默认）而_blank表示开启新窗口打开跳转后的页面。
注解：当点击返回顶部的时候，页面会定位在id=“top”标签的位置，而且是最上面，这就是通过id属性定位，这里网页中放的东西很少，没有啥效果，你要测试可以在这两者之间添加许多其他标签，这样效果就很明显
<a> </a> 标签实现超链接
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>我是a标签</title> 5 </head> 6 <body> 7 <!-- 版权声明--> 8 <a href="http://www.baidu.com/" 9 title="百度一下，你就知道" target="_self">百度</a> 10 <a href="http://www.163.com" 11 title="网易新闻" target="_blank">网易</a> 12 </body> 13 </html
细节：如果在一个页面中所有的超链接跳转方式均一致，那么可以在<head> </head>标签中进行统一的配置。在<head></head>标签中添加
<base target="_self"></base> 表示该页面的所有超链接均在原窗口显示
<base target="_blank"></base> 表示该页面的所有超链接均在新窗口显示
（2）通过a标签实现页面定位
案例：点击回到页面顶部
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>网页定位</title> 5 </head> 6 <body> 7 <p id="top">这里是顶部</p> 8 <p>原创作者：蜗牛</p> 9 <p>原创作者：蜗牛</p> 10 <a href="#top">返回顶部</a> 11 </body> 12 </html>
（3）通过a标签实现下载
注解：可以实现点击链接自动下载文档，和压缩文件，当不能直接下载图片，当点击图片后页面会打开图片而不是下载1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>下载</title> 5 </head> 6 <body> 7 <a href="6用户注册项目.docx">点击下载文档</a> 8 <a href="2017-1-4Jquery.rar">点击下载压缩文件</a> 9 <a href="second .jpg">点击图片</a> 10 </body> 11 </html>
想要实现图片的下载需要在添加一步;
1 <body> 2 <a href="first.jpg" download="first.jpg">点击图片</a> <!--download实现图片下载功能--> 3 </body>
5：html框架
1 <!DOCTYPE html> 2 <head> 3 <title>Html框架</title> <!--注意;搭建框架是不能出现<body></body>标签的，所以要先删除<body>标签--> 4 </head> 5 <frameset rows="25%,75%"> <!--frameset用来定义一个框架集 ，row代表有上下两个界面，占比为25%和75%--> 6 <frame src="head.html" name="heand"/> <!--frame代表一个界面，界面内容为head.html中内容--> 7 <frameset cols="25%,75%"> <!--在下面在定义一个框架级，再分为左右两部分 cols代表列--> 8 <frame src="left.html" name="left"/> 9 <frame src="center.html" name="body"/> <!--定义name="body"是有意义的，方便调用--> 10 </frameset> 11 </frameset><noframes></noframes> <!--noframes还未知意义，删了照样运行所以知道的朋友可以给我留言--> 12 </html>
下面是3个框架中的html
1：head.html
1 <!DOCTYPE html> 2 <head> 3 <title>head.html</title> 4 </head> 5 <body> 6 <h1 align="center" style="color:#FF0000; font-size:50 ">欢迎进入本管理系统</h1> 7 </body> 8 </html>
1 <!DOCTYPE html> 2 <head> 3 <title>无标题文档</title> 4 </head> 5 <body> 6 <a href="https://www.baidu.com" target="body">百度</a> <!--这里target="body"，代表当点击百度时，内容会在name="body"的界面中出现--> 7 <a href="http://www.163.com" target="body">网易</a> 8 </body> 9 </html>
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>center.html</title> 5 </head> 6 <body> 7 </body> 8 </html>
http标签详解
声明 1:这里的文字都是我从我自己csdn账号拷贝过来，是本人学习总结的结晶，所以请尊重本作品。2：如要要转载本文章，则要说明文字的出处。3：如有哪里不对欢迎指出。
在上一篇文章中主要讲了，http的一些基础标签，比方说链接标签，图片标签，html框架等，那接下来主要针对表格标签，列表标签，表单标签做一个详细的讲解
1：表格标签
<table></table> 表格的标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!-- 原创作者：蜗牛 --> 5 <title>table标签</title> 6 </head> 7 <body> 8 <table border="1" width="360" height="240" 9 cellspacing="1" cellpadding="1" 10 align="center" bgcolor="red"> <!--这里的center表示该表格在页面的中间位置--> 11 <!--这里的背景色标签是bgcolor--> 12 <caption><h2>我的好朋友</caption> 13 14 <tr> 15 <th>姓名</th> 16 <th>性别</th> 17 <th>年龄</th> 18 <th>爱好</th> 19 </tr> 20 21 <tr align="center"> <!--这里的center表示的是表格里面的字体居中--> 22 <td>小红</td> 23 <td>女</td> 24 <td>20</td> 25 <td>跳舞</td> 26 </tr> 27 28 <tr align="center"> 29 <td>小舵</td> 30 <td>女</td> 31 <td>24</td> 32 <td>唱歌</td> 33 </tr> 34 35 </table> 36 </body> 37 </html>
注解：
<tr> </tr> 标签用于表示行
<td> </td> 标签用于表示列
<th> </th> 标签用于表示表格的标题，用法和 <td> </td>一样只是里面的内容会自动加大加粗
border 设置表格边框的宽度，单位为pixel
width 设置表格宽度，单位为pixel
height 设置表格高度，单位为pixel
cellspacing 设置单元格之间的距离,就指表格表格边框的间距
cellpadding 设置文字距离单元格边框的距离
bgcolor 设置表格的背景颜色
align 用于设置对齐方式，比如center，left，right
<caption> 表头名</caption>用于表示表头
（2）关于合并单元格
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>table中合并单元格</title> 5 </head> 6 <body> 7 <table border="1" width="300" height="200" 8 align="center" background="first.jpg" > <!--background代表的是背景图片，bgcolor代表背景色完全不一样--> 9 10 <tr align="center" width="100" > 11 <td>1</td> 12 <td colspan="2">占两列</td> <!--当colspan="2"表示在同一行中，两列并一列，那么在它下面少写一个<td></td>标签--> 13 <!-- 删除掉此<td></td> --> 14 <td>2</td> 15 </tr> 16 17 <tr align="center" width="100"> 18 <td rowspan="2">占两行</td> <!--当 rowspan="2"表示在同一列中 两行并一行，那么在同一列中删掉一个<td></td>标签--> 19 <td>3</td> 20 <td>4</td> 21 <td>5</td> 22 </tr> 23 24 <tr align="center" width="100" > 25 <!-- 删除掉此<td></td> --> 26 <td>6</td> 27 <td>7</td> 28 <td>8</td> 29 </tr> 30 </table> 31 </body> 32 </html>
运行结果如下：
2：列表标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>列表标签</title> 5 </head> 6 <body bgcolor="#FFFF00"> 7 <!-- 无序列表 --> 8 2017年心愿 9 <ul type="circle"> <!--无序序列<ul> ，无序有circle：圆点，square：小方块--> 10 <li>父母身体健康</li> 11 <li>宝宝健康成长</li> 12 <li>媳妇健健康康</li> 13 </ul> 14 15 <!-- 有序列表 --> 16 2017年大事件 17 <ol type="1" start="2"> <!--有序的标签是<ol>,有序有五种：1,A,a ,i,I，start代表从什么时候开始等于2代表从2开始--> 18 <li>老婆要生小孩了</li> 19 <li>自己换工作了</li> 20 <li>要卖掉一套房</li> 21 </ol> 22 23 <!-- 自定义列表 --> 24 <dl> <!--在自定义列表<dl> </dl>中使用<dt> </dt>表示小标题，使用<dd> </dd>表示列表项--> 25 <dt>时刻告诉自己</dt> 26 <dd>不抱怨</dd> 27 <dd>零负能量</dd> 28 <dd>该与不该</dd> 29 </dl> 30 </body> 31 </html>
运行结果如下：
3：表单
<form></form> 表单标签
1 <!DOCTYPE html> 2 <head> 3 <title>form表单</title> 4 </head> 5 <body> 6 <!--form 指的是表单标签 当前标签的内容在提交的时候都会被自动提交 action=""是指把当前表单提交的位置--> 7 <form action="Myservlet" method="post" onSubmit="return submitFun();"> <!--onSubmit只有当返回为true是才能提交表单--> 8 <fieldset> <!--主要会在相关表单元素周围绘制边框--> 9 <legend>用户注册</legend> <!--在上面绘制的边框绘制的位置写上“用户注册”--> 10 <!--input 一个输入框里 type 的当前输入框的类型 text 是指当前的类型是文本框name是用来区分不同的文本框--> 11 <!--的也是在表单提交后用来获取表单的内容 --> 12 用户名:<input type="text" name="username" /><br/><br/> 13 密码 :<input type="password" name="password"/><br/><br/> <!--password代表输入的文字显示为黑点--> 14 <!--value是指当前表单提交后 获取的值 checked设置默认选中的情况--> 15 性别:男性<input type="radio" name="sex" value="male" checked="checked"> <!--radio代表单选按钮--> 16 女性<input type="radio" name="sex" value="female"> <br/><br/> 17 学历: <select name="education"> <!--select代表下来列表--> 18 <option value="gz">博士</option> <!--option代表每一个值，取名gz为了后台获取--> 19 <option value="yjs">研究生</option> 20 <option value="bk" selected="selected">本科</option> <!--select代表默认选中，本科会显示到界面--> 21 <option value="zk">专科</option> 22 </select> <br/><br/> 23 兴趣爱好:<input type="checkbox" name="likes" value="bike" />骑车 <!--checkbox复选框--> 24 <input type="checkbox" name="likes" value="sleep" checked="checked" />睡觉 <!--checked代表默认选中--> 25 <input type="checkbox" name="likes" value="eat" />吃饭 26 <input type="checkbox" name="likes" value="daima" />敲代码 <br/> 27 备注:<textarea cols="40" rows="5" name="bz"></textarea> <br/><br/> <!--textarea文本域设置行和列--> 28 个人头像:<input type="file"><br> <!--代表可以在电脑上宣文件--> 29 <!--disabled代表不可编辑，我在测试中发现不可编辑状态后台是无法取到这个value值的，想要获得就要在提交时改变为可编辑--> 30 个人网站:<input type="url" value="www.baidu.com" disabled="disabled"> <br> 31 32 个人邮箱:<input type="email"><br> <!--邮箱格式--> 33 34 身体体重:<input type="number"><br> <!--代表只能输入数字--> 35 36 出生日期:<input type="date"><br> <!--可选年月日--> 37 38 详细时间:<input type="time"><br> <!--time--代表显示时分--> 39 40 隐藏项： <input type="hidden" value="你们看不到我"><br> <!--这个隐藏标签有很大的作用，可以不显示在界面，但后台可以获取值--> 41 42 <input type="button" value="填写完毕"> <!--普通的button按钮--> 43 <input type="reset" value="重置信息"> <!--reset代表一按重置所以信息清空--> 44 <input type="submit" value="完成注册"> <!--submi代表所以信息提交到后台,如果上面调用了onSubmit方法，那么返回为true才提交--> 45 <input type="image" src="first.jpg" height="20" width="40"> <!--image也可以进行表单的提交--> 46 47 </fieldset> 48 </form> 49 </body> 50 </html>
效果图如下：
ECharts.js学习（一）
在项目开发的时候，在前端的数据需要用图表的形式展示。网上搜索了一下，发现有几种统计图库。具体有哪几种可以看：
一、ECharts.js的特点
这也是一款基于HTML5的图形库。图形的创建也比较简单，直接引用Javascript即可。使用这个库的原因主要有三点，一个是因为这个库是百度的项目，而且一直有更新，目前最新的是EChart 3；第二个是这个库的项目文档比较详细，每个点都说明的比较清楚，而且是中文的，理解比较容易；第三点是这个库支持的图形很丰富，并且可以直接切换图形，使用起来很方便。
先用个小案例
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["苹果","三星","小米","华为","oppo","酷派"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[100, 120, 150, 160, 220, 80]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
显示效果：
这个是我在CEharts官方文档的小案例：
官方文档：ECharts官方文档
二、CEharts进行步骤讲解
第一步，引用Js文件
<script type="text/javascript" src="js/echarts.js"></script>
js文件有几个版本，可以根据实际需要引用需要的版本。echarts.js下载链接
第一步，准备一个放图表的容器
<div id="main" style="width:600px; height: 400px;"></div>
第三步，设置参数，初始化图表
<script type="text/javascript">
//指定图标的配置和数据
var option = {
title:{
text:'数据统计'
},
tooltip:{},
legend:{
data:['手机销量']
},
xAxis:{
data:["苹果","小米","华为","三星"]
},
yAxis:{
},
series:[{
name:'销量',
type:'line',
data:[800,1000,1300,400]
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
效果图：不清楚是因为我缩小网页了
饼图和折线图、柱状图有一点区别。主要是在参数和数据绑定上。饼图没有X轴和Y轴的坐标，数据绑定上也是采用value 和name对应的形式。
var option = {
title:{
text:'ECharts 数据统计'
},
series:[{
name:'访问量',
type:'pie',
radius:'60%',
data:[
{value:1000,name:'苹果'},
{value:1200,name:'小米'},
{value:1800,name:'华为'},
{value:400,name:'三星'}
]
}]
};
效果截图
有关最基础的就讲到这里，下篇，我将如何通过后台数据完成图表。
浙公网安备 33010602011771号