前端笔记
前端课堂笔记
（用例：新生注册表单）
//html5标准网页声明 < title>****< /title> //网页的标题 < meta charset="utf-8"> //设置页面编码。其默认值为：ISO-8859-1 （拉丁语系）<form action="process.html" method="post">
//form标签包含的内容为一个表单。action的值表示from表单提交的位置/路径，method表示提交的方式 (提交方式共两种：get和post，默认值是get)
<h3>新生注册</h3> //（heading）标题格式：h1-h6 (标题大小h1->h6递减)
<input type="hidden" name="secode" value="1214"> //定义一个隐藏域：在页面中对于用户不可见，在表单中插入隐藏域的目的在于收集或发送信息
<div>
注册码：<input type="text" name="regcode" value="s4oriord" readonly>
//定义一个文本框，readonly表示只读，用户无法修改该文本框value的属性值
</div>
<div>
<span>学生学号:</span>
<input type="text" name="stuno">
</div>
<div>
<span>学生姓名:</span>
<input type="text" name="stuname" placeholder="请填写真实姓名">
//placeholder：其属性值为用户提供需要输入内容的提示信息
</div>
<div>
<span>学生密码:</span>
<input type="password" name="stupwd" maxlength="6" size="6">
//type="password"表示输入的数字会显示为小黑点；maxlength属性表示文本框最多只能输入6个可见的字符；size属性规定输入字段的宽度，如上述文本框只显示6个字符大小的宽度
</div>
<div>
<span>学生照片:</span>
<input type="file" name="photo"> //用于上传文件
</div>
<div>
<span>出生日期:</span>
<input type="date" name="stubirth"> //日期选择器
</div>
<div>
<span>学生性别:</span>
<input type="radio" name="stusex" value="m">男
<input type="radio" name="stusex" value="f" checked>女
<input type="radio" name="stusex" value="s">保密
//radio标签的name的属性值如果设置一样，将形成一个互斥组件数组 ，否则属性值不同的可以多选
</div>
<div>
<span>学生爱好:</span>
<input type="checkbox" name="stuhobby" value="cm">爬山
<input type="checkbox" name="stuhobby" value="sw">游泳
<input type="checkbox" name="stuhobby" value="rd" checked>阅读
<input type="checkbox" name="stuhobby" value="bk">篮球
//checkbox为复选框，可多选。checked或checked='checked'表示为默认选中
</div>
<div> //div标签用来定义文档中的分区或节
<span>学生籍贯:</span> //span标签被用来组合文档中的行内元素
<select name="origin"> //select标签可创建单选或多选菜单
<option value="">-请选择-</option> //option标签定义下拉列表中的一个选项
<option value="fz">福州</option>
<option value="xm" selected>厦门</option> //selected表示默认初始值为“厦门”
<option value="qz">泉州</option>
<option value="ly">龙岩</option>
</select>
</div>
<div>
<span>备注说明:</span>
<textarea name="stumemo" rows="5" cols="60">这家伙很懒，啥都没写!</textarea>
//textarea为文本域，rows属性用来定义该文本域最多的行数，cols属性用来定义每行最大的字符数
</div>
<div>
<!-- 当我点击这个按钮的时候，就会提交表单，发送所有的表单中的输入控件的数据到服务器 -->
<input type="submit" value="提交学生信息"> //定义一个提交触发按键
<input type="reset" value="重置表单"> //定义一个重置触发按键
//扩展：submit是专门用于提交表单的Button，与Button不同的是：
(1)type=button就单纯是按钮功能，而type=submit是发送表单
(2)submit将表单提交(form.submit())作为其onclick后的默认事件，Button并非如此
(3)表单提交时，所有具有name属性的html输入元素(包括input标签、button标签、select标签等)都将作为键值对提交，除了Submit对象。Submit对象只有在自己被单击后的提交中才会作为键值对被提交
</div>
1.get提交：
（数据以键值队串的形式传给服务器，这样的提交方式叫做get提交）
http://site/app/process.html?key1=value1&key2=value2....&keyn=valuen
- 缺点：
（1）. 安全度低
（2）. 传输数据量有限，因为URL的长度只有256个字符
（3）. 中文传输受控 - 优点：成本低，速度快！
2.post提交
（数据保存在内存的一个容器中，偷偷传到服务器，界面上什么都看不到，URL也很干净）
- 优点：
（1）.安全度高
（2）.传输数据数量不受控制
（3）.中文没问题 - 缺点：成本高
3.id和name主要是为了元素的内存定位，为JS铺路的。 在一个网页中，id必须是唯一的，而name可以有好多个。在表单元素定位中，我们一般使用name。
4.input标签不需要收口，这种标签叫做单标签，这种情况说明html5的规范还是比较宽松的。
5.浏览器URL地址上能显示的字符是受控的，所以中文不能直接显示，必须转码。
前端作业讲评
（题目：编写一个求某范围数字和的例子 ）
< !DOCTYPE html>
< html>
< head>
< title>前端作业</title>
< meta charset="utf-8">
< style type="text/css">
div{
margin: 5px; //下列用div标签包含的各个内容之间，间距设置为5像素
}
< /style>
< script type="text/javascript"> //声明script标签包含的内容需由JS解释执行
function $(id){ //声明一个函数
return document.getElementById(id); //getElementById()方法用于返回对拥有指定ID的第一个对象的引用
}
//该函数没有参数，但允许返回一个值
function calc(){
//取值操作
var begin = parseInt($('beginVal').value); //parseInt()函数用于解析一个字符串，并返回一个整数
var end = parseInt($('endVal').value);
// console.log("begin:"+begin+",end="+end); //console.log()方法用于在控制台输出信息
//计算数字和
var sum = 0;
for(var i=begin;i<=end;i++){
sum +=i;
}
//把结算结果渲染到界面上
$("result").innerHTML = sum； //innerHTML在JS是双向功能：可以获取对象的内容，也可以往对象插入内容
}
< /script>
< /head>
< body>
< h3>数字和计算< /h3>
< div>
< span>开始范围:</span>
< input type="number" id="beginVal">
< /div>
< div>
< span>结束范围:</span>
< input type="number" id="endVal">
< /div>
< div>
< button onclick="calc()">计算</button> //定义一个按钮，onclick 事件会在对象被点击时被触发
< /div>
< hr> //创建一条水平分隔线
< span id="result"></span>
< /body>
< /html>
