常见的input元素
<ol>
<li>单行输入框<input type="text">允许用户输入一行内容。如果使用input标签,但是没有type则默认type=text</li>
<li>密码输入框<input type="password">允许用户输入一行数据,但是不会直接回显输入内容,不能直接看到用户输入的内容</li>
<li>隐藏域<input type="hidden">不能接收用户直接输入数据,甚至不会在浏览器窗口中显示,一般用于额外提交请求参数,其中具体提交的数据就是标签中value设置的值</li>
<li>单选框<input type="radio">用于通过选择多个选项中一个选项提交数据,不使用认为录入的数据据,选项中value值就是选中后提交的数据</li>
<li>复选狂<input type="checkbox">用于通过选择m个选项中的n个选项提交数据[m>=n],每个选项中value值就是该选项选中后提交的数据,如果不设value则on就是提交值</li>
<li>图像域<input type="image">可以生成图像按钮,可以指定width和height设置宽高,使用src属性指定显示的图片地址。提交数据时会提交x和y值标识点击位置</li>
<li>提交按钮<input type="submit">点击这个按钮后会向服务器提交form表单,其中的value就是按钮上显示的文字信息</li>
<li>重置按钮<input type="reset">点击后会将form表单中的所有输入域恢复为原始值</li>
<li>无动作按钮<input type="button">默认不会有任意动作,需要使用javascript编码响应点击事件</li>
</ol>
<a href="index.html">back</a>
<hr/>
<h3>input元素的常见属性</h3>
<ul>
<li>checked设置radio或者checkbox选项是否处于选中状态</li>
<li>disabled设置首次加载时禁用这个标签,无法获取输入焦点,这个输入框的数据也不会提交</li>
<li>maxlength设置允许输入的最大字符数</li>
<li>readonly不允许用户修改,但是可以通过javascript代码进行修改</li>
<li>size指定元素的显示宽度</li>
</ul>
<hr/>
<form action="001.html">
<!--这里的name属性用于定义提交数据的名称,用户输入的数据就是对应的值-->
<input type="text" name="username" value="yanjun" maxlength="20"/>
<input type="text" name="pwd1" disabled value="123456"/>
<input type="text" name="pwd2" value="zhangsan" readonly/>
<!-- 在有些浏览器中会有一个小图标,点击后则可以查看输入内容 -->
<input type="password" name="password"/>
<input type="hidden" name="age" value="18"/>
<!--多个选项是通过name属性一致达到互斥的目的-->
<input type="radio" name="sex" value="true" checked/>男
<input type="radio" name="sex" value="false"/>女
<!--多个选项不互斥,允许选中多个-->
<input type="checkbox" name="hobby" value="11">篮球
<input type="checkbox" name="hobby" value="22">足球
<input type="checkbox" name="hobby" value="33">排球
<input type="checkbox" name="hobby" checked>其它
<input type="submit" value="提交数据"/>
<input type="reset" value="重置数据"/>
<input type="button" value="点击按钮" onclick="ff()"/>
<input type="image" src="images/30.jpg" width="120"/>
</form>
<script>
function ff(){
alert('点击按钮!');
}
</script>
table
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
margin: 0 auto;
width: 60%;
}
#header {
background-color: aqua;
height: 40px;
}
#tb1 td {
border: 1px solid #888;
border-spacing: 0px;
}
#tb1 th {
border: 1px solid #666;
border-spacing: 0px;
}
#tb1{
border: 1px solid #666;
border-spacing: 0px;
}
.right{
text-align: right;
}
.center {
text-align: right;
}
img {
width: 100px;
height: 80px;
}
tr.first {
background-color: burlywood;
}
tr.second {
background-color: bisque;
}
input[type=text] {
width: 100px;
}
</style>
</head>
<body>
<table id="tb1">
<caption>
<h3>购物列表</h3>
</caption>
<thead>
<tr id="header">
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>图片</th>
<th>出版社</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr class="first">
<td>1</td>
<td>Java入门</td>
<td>12.34</td>
<td><img src="images/29.jpg"/></td>
<td>机械工业出版社</td>
<td><button>-</button><input type="text" name="num1" value="1"/><button>+</button></td>
<td>
<button>删除</button>
<button>修改</button>
</td>
</tr>
<tr class="second">
<td>2</td>
<td>Java从入门到放弃</td>
<td>99.78</td>
<td><img src="images/30.jpg"/></td>
<td>邮电出版社</td>
<td><button>-</button><input type="text" name="num1" value="1"/><button>+</button></td>
<td>
<button>删除</button>
<button>修改</button>
</td>
</tr>
<tr class="first">
<td rowspan="2">3</td>
<td rowspan="2">C语言入门</td>
<td rowspan="2">5.67</td>
<td><img src="images/mv02.jpg"/></td>
<td>电子工业出版社</td>
<td rowspan="2"><button>-</button><input type="text" name="num1" value="1"/><button>+</button></td>
<td rowspan="2">
<button>删除</button>
<button>修改</button>
</td>
</tr>
<tr class="first">
<td><img src="images/mv01.jpg"/></td>
<td>人民教育出版社</td>
</tr>
</tbody>
<tfoot>
<tr style="background-color:cadetblue;">
<td colspan="5">合计:</td>
<td colspan="2">100.23</td>
</tr>
</tfoot>
</table>
<table class="center">
<tr class="right">
<td><a href="">前一页</a>[<a href="">1</a>][<a href="">2</a>][<a href="">3</a>][<a href="">4</a>]<a href="">后一页</a></td>
</tr>
</table>
<a href="index.html">back</a>
</body>
html扩展和CSS
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h3.red{
color: red;
}
</style>
</head>
<body>
<h1>html扩展</h1>
html文档用于传输数据和相应结构,CSS用于设置数据的显示格式,javascript控制网页行为,实现与客户的交互
<h2>html代码构成</h2>
h5开发本质上就是生成一个html格式的文档,最终通过浏览器对文档进行渲染显示。在线验证validator.w3.org
<ul>
<li>标签不区分大小写</li>
<li>标签可以分为单标签和双标签,很多标签可以省略结束标签</li>
<li>元素的属性可以省略属性值,例如disabled和readonly</li>
<li>允许属性值不使用引号,html中不区分单双引号</li>
</ul>
<p>如何显示数据?<br/>
1、可以采用表格的方式显示统计性的数据<br/>
2、统计图的方式显示数据,echarts
</p>
<h2>CSS3入门</h2>
CSS3层叠样式表单,用于渲染html元素标签的样式
<h3>应用系统的发展</h3>
<ul>
<li>单机应用:所有的程序和数据都在同一个机器上,一般只能由一个人使用。特点:安装简单,由于在单一环境中运行所以相对稳定,没有网络通信。典型应用案例包括单机游戏、工具类型的软件</li>
<li>c/s结构应用,经常称为胖客户端应用,采用的是两层结构,服务器主要负责数据的管理,客户机负责完整与客户的交互任务。特点:一般需要在客户机上安装特定的软件,可以充分利用客户端的资源完成一些特定的任务,允许多人同时使用。典型应用只适用于局域网</li>
<li>b/s结构应用,经常称为瘦客户端应用,采用的是客户端的浏览器和服务器构成,具有分布性的特点,业务扩展简单方便,维护简单方便,共享性强。但是响应速度要受带宽的限制</li>
</ul>
<h3 class="red">c/s和b/s结构的区别</h3>
<ol>
<li>硬件环境不同</li>
<li>对安全的要求不同</li>
<li>程序的架构不同</li>
<li>软件的重用不同</li>
<li>系统维护不同</li>
<li>处理问题不同</li>
<li>用户接口不同</li>
<li>信息流不同</li>
</ol>
<h3>html的工作原理</h3>
<p>
在浏览器和服务器之间采用http/https协议进行通信,传送的数据格式为html文档。这里的超文本是指页面中可以包含图片、超链接、音乐、程序等非文本信息。
</p>
<h4>创建网页的基本步骤</h4>
<ol>
<li>了解要什么
<ul>
<li>计划网页的结构,可以先绘制草图,再绘制缩略图,最后写html文档</li>
<li>使用块元素划分网页结构,使用内联元素进行修饰</li>
</ul>
</li>
<li>然后使用html基本模块将他翻译为浏览器可以识别的略图</li>
<li>将略图翻译为最终的html文档
<ul>
<li>无论什么时候都应该依靠html标签告知浏览器数据和数据含义或者数据的结构,不要依赖html标签实现显示控制</li>
<li>通常推荐使用语义标签</li>
</ul>
</li>
<li>页面基本完成后,最后对页面进行一些优化</li>
</ol>
<h3>列表标签</h3>
<p>列表标签用于创建列表,其中包括无序列表ul和有序列表ol,列表项目使用<li>。
在<ul>中可以使用type属性指定列表样式
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul type="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
在有序列表<ol>中可以通过type属性指定样式,可以选值1数字、A或者a英文字符、I或者i拉丁文;可以通过start属性指定从那个数字开始进行计算
<ol start="50" type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</p>
<h3>图像img</h3>
当浏览器遇到一个img元素时,会自动先接受图片数据,然后在页面上进行显示。注意<img>是内联元素。
<ul>网页中常见的图像有3种格式:
<li>GIF一般是动画存储格式,常见的是256色,画质较差</li>
<li>JPG采用的是有损像素压缩格式,文件比较小,有利于数据传输</li>
<li>PNG可以保存透明背景的图片,会有画质损失</li>
</ul>
常用属性 : src用于指定图片的存储位置,可以使用相对路径也可以使用绝对路径;alt用于指定图片无法打开时自动显示的提示信息;width和height用于指定图片的宽和高,可以实现图片大小的调整
<h3>超链接a标签</h3>
当需要从一个页面跳转到另外一个页面时则需要使用超链接<a>元素。
<ul>
<li>href属性用于说明需要点击热点文字后自动跳转的新页面地址
<ul>
<li>可以使用相对路径,例如aaa.html或者./aaa.html表示相同目录的另外一个页面,../表示上一级目录</li>
<li>还可以使用绝对路径,跳转到其它网站。例如http://www.baidu.com</li>
</ul>
</li>
<li><a>和</a>之间卡住的文字就是热点文字,也可以是图片</li>
</ul>
<h2>Table表格</h2>
表格由行和列组成,单元格是最基本的单元,每个表包含多个行,行标签使用<tr>定义,每行可以分为若干个列,列使用<td>定义;如果表格的第一行是表格的表头定义部分,可以使用<th>代替<td>标签,<th>会自动加粗显示,并居中
<ul>
<li>单元格、行、列,使用的标签有<table>表格、<tr>行、<td>列、<th>表格的第一行头</li>
<li>html5中已经不建议使用border属性控制表格的线宽,改用css控制边框的宽度</li>
<li>跨列(横跨)<td colspan="跨的列数">显示内容</td></li>
<li>跨行(竖跨)<td rowspan="跨的行数">显示内容</td></li>
<li>表格的特点:同行的单元格高度一致,并且水平对齐,同列单元格的宽度一致,并且垂直对齐</li>
<li>另外还有语义标签<thead>表格的头部、<tbody>表格内容部分、<tfoot>表格的末尾部分</li>
<li><colgroup>用于配合<col>对表格中的列进行分组,并针对不同的组设置不同的显示样式</li>
</ul>
<hr/>
<ul>
<li><a href="table01.html">基本表格</a></li>
<li><a href="table02.html">表格的结构化</a></li>
<li><a href="table03.html">表格的分组</a></li>
<li><a href="table04.html">表格的推荐用法</a></li>
<li><a href="table05.html">面试题</a></li>
</ul>
<hr/>
<h2>html5表单控件</h2>
<p>表单控件form用于实现客户端向服务器端提交数据,根据提供的数据不同可以选择使用不同的子控件,例如<input>、<select>、<radio>等。<br/><strong>注意:form和from拼写的差异</strong></p>
<h3>form标签的使用</h3>
<p>form标签不能渲染显示出任何效果,用于生成输入提交的表单,其中包括一组属性</p>
<ul>
<li>action用于设置表单提交的地址。如果使用了disable属性则标识该表单控件不再生成请求</li>
<li>method用于设置发送到服务器端数据的提交请求方法
<ol>
<li>GET是最常见的提交数据的方法,是默认值,通常用于请求服务器发送某个资源。表单中用户填充的数据会以请求头的方式提交</li>
<li>POST是比较常见的提交数据的方法,通常用于创建某个资源。表单中用户填充的数据会以协议数据体的方式发送给服务器</li>
<li>PUT通常用于修改某个资源,表单中用户填充的数据会以协议数据体的方式发送给服务器</li>
<li>DELETE通常用于请求服务器删除某个资源</li>
<br/><br/>
<li>HEAD请求和GET类似,但是服务器生成的响应信息只有头部,不返回实体的主体部分</li>
<li>TRACE在目标服务器发起一个环回诊断,主要用于验证请求是否能够穿过请求、响应链</li>
<li>OPTIONS用于请求服务器响应告知允许访问资源的方法</li>
</ol>
</li>
<li>enctype用于指定表单内容所使用的编码方式
<ol>
<li>application/x-www-form-urlencoded是form的默认值,将表单控件中用户输入的数据处理成URL编码方式。服务器接收到的是一组键值对</li>
<li>multipart/form-data主要用于上传文件,将使用二进制流的方式处理提交数据。服务器端接收到的是一个输入流</li>
<li>text/plain适用于直接通过表单发送邮件的方式</li>
</ol>
</li>
<li>target用于设置打开新地址的方式,和<a>属性一致
<ol>
<li>_blank在新开浏览器窗口中打开</li>
<li>_self是默认值,在当前位置上打开</li>
<li>_parent是在父框架集中打开</li>
<li>_top在整个顶级窗口中打开</li>
<li>值为窗口framename名称,用于实现在指定对应名称的frame窗口中打开</li>
</ol>
</li>
</ul>
</ol>
<h3>基本使用</h3>
<ul>
<li><a href="form01.html">常见input元素</a></li>
<li><a href="form02.html">其它表单控件</a></li>
</ul>
</body>
get和post的区别
get和post之间的区别
- 要求至少回答以下三点
- get请求会将请求参数名称和提交的值转换为字符串,并附加再原始URL之后,可以在浏览器的地址栏中看到请求参数,get请求传送的数据量要受到协议的限制,比较小,一般不能大于2kB
例如地址格式为【请求地址?参数1=值1&参数2=值2】
- post请求采用协议体传递数据,传送的数据量比较大,通常认为请求参数没有大小限制,但实际上往往却决于浏览器的限制
- 语义的差别