心路历程:
由于之前有做过网页的经历,所以给网页打个框架对我来说还是很容易的,难点在于如何利用css将页面设计的更好看,布局更合理;如何具体实现判断输入的合法性;如何成功向后端提交数据;最重要的一点是,如何在大量的信息中提取到自己想要的信息,并且将自己的所学有效应用到作业当中去。
第一次作业收获:
- 温习了HTML的基础知识
==基本标签对==
<!DOCTYPE
html>
<html>
<head>*可以通过<head
lang="en/zh">来设置中文或者英文*
<meta
charset="UTF-8">
<title>标题</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落</p>*<br/>换行间距比<p>小*
<a
href="http://www.baidu.com">链接文本</a>
<img src="图片地址">
</body>
</html>
==HTML属性==
常用标签属性:
<h1>:align对齐方式
例:<h1
align="right">标题</h1>
<body>:bgcolor背景颜色
<body bgcolor”选择颜色或者直接输入英文”>
<a>:target规定在何处打开链接
<a href=http://www.baidu.com target=”_blank在一个新的页面上打开/_self自带的/_parent/_top”>链接文本</a>
通用属性:
class:规定元素的类名
<h2
class=”h2id”>标题</h2>之后可以通过用css引用id来设置相关属性
id:规定元素的唯一id
<h2
id=”hid”>
style:规定元素的唯一样式
<head><style
type=”text/css”></style></head>
title:规定元素的额外信息
==HTML样式==
<b>粗体</b>
<big>大号字</big>
<em>着重文字</em>
<i>斜体字</i>
<small>小号字</small>
<strong>加重语气</strong>
<sub>下标字</sub>
<sup>上标字</sup>
<ins>插入字</ins>
<del>删除字</del>
==HTML链接==
1. 链接数据
文本链接
<a
href="http://www.baidu.com">链接文本</a>
图片链接
<a
href="http://www.baidu.com">
<img
src=”html.png” width=”100px” height=”100px” alt=”html5logo”> 注意:在项目当中创建html.png文件
</a>
2. 属性
Href属性:指向另一个文档的链接
Name属性:创建文档内的链接
<a name=”tips”>hello</a>
</br>
<a href =”#tips”>跳转到hello</a>
3. img标签属性:
alt:替换文本属性
width:宽
height:高
==HTML表格==
<table>定义表格
<caption>定义表格标题
<th>定义表格的表头
<tr>定义表格的行
<td>定义表格的单元
<thead>定义表格的页眉
<tfoot>定义表格的页脚
<col>定义表格的列属性
在body当中定义table
<p>表格的标题</p>#在最外层添加p标签
<table border=”1”>#去掉border就是没有边框的表格
<caption>重要表格</caption
>#带有标题的表格
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>
</td>#空单元格就是不填写内容
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
表格内的标签
<table>
<tr>
<td>表格1</td>
<td>表格2</td>
</tr>
<tr>
<td>
<ul>
<li>苹果</li>
<li>菠萝</li>
<li>梨子</li>
</ul>
</td>
<td>我想吃了
</td>
</tr>
</table>
#放大表格<table border=”1” cellpadding=”10”>
#单元格之间的间距 <table border=”1” cellspacing=”10”>
#加背景颜色加背景图片则同理background=”背景图片”<table border=”1”
bgcolor=”颜色”>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
==HTML列表==
<ol> 有序列表
<ul>无序列表
<li>列表项
<dl>列表
<dt>列表项
<dd>描述
无序列表:
使用标签:<ul><li>
属性:disc circle square
例<body>
<ul type=”circle”>
<li></li>
<ul>
</body>
有序列表:
使用标签:<ol><li>
属性:A a I i start(<ol start=”10”></ol>)
嵌套列表:
使用标签:<ul><<ol><li>
自定义列表:
使用标签:<dl><dt><dd>
例:<dl>
<dt>helloworld</dt>
<dd>每一门语言都从这里开始</dd>
</dl>
==HTML块==
1. HTML块元素
块元素在显示时,通常会以新行开始
<h1><p><ul>
2. HTML内联元素
块元素通常不会以新行开始
<b><a><img>
3. HTML<div>元素
<div>元素也被称为块元素,其主要是组合HTML元素的容器
<head>
<link
rel=”stylesheet” type=”text/css” href=”mycss”>
</head>
<body>
<div
id=”divid”>
<p>hello
world</p>
</div>
</body>
.css文件:
#divid
<p>{ //添加p标签可以指定该标签内的元素样式
Color:black;
}
4. HTML<span>元素
<span>元素是内联元素,可作为文本的容器
<head>
<style
type=”text/css”>
Span{
Color: ;
}
</style>
<head>
<body>
<div
id=”dispan”>
<p><span>文字</span>内容</p>
</div>
</body>
==HTML布局==
1. 使用<div>元素布局
<style
type=”text/css”>
Body{
Margin:0px;
}
Div#container{
Width: ;
Height: ;
Background-color:
;
}
Div#heading{
Width: ;
Height: ;
Background-color:
;
}
Div#content_menu{
Width: ;
Height: ;
Background-color:
;
Float:left;
}
Div#content_body{
Width: ;
Height: ;
Background-color:
;
Float:left;
}
Div#footing{
Width: ;
Height: ;
Background-color:
;
Clear:both;
}
</style>
<body>
<div
id=”container”>
<div id=”heading”>头部</div>
<div id=”content_menu”>内容菜单</div>
<div id=”content_body”>内容主体</div>
<div id=”footing”>底部</div>
</div>
</body>
注:上面所有的<div>标签都能删除
2. 使用<table>元素布局
<body
marginheight=”0px” marginwidth=”0px”>
<table
width=”100% height=”950px” style=”background-color: ”>
<tr>
<td colspan=”2”
width=”100%”height=”10%”style=”background-color:”></td>
</tr>
</table>
</body>
==HTML表单==
1. 复选框
2. 单选按钮
3. 下拉列表
4. 文本域
5. 创建按钮
<form>
用户名:
<input type=”text”>
<br/>
用户名:
<input type=”password”>
<br/>
苹果<input type=”checkbox”>
西红柿< input type=”checkbox”>
<br/>
请选择性别:
男<input type=”radio” name=”sex”>
女<input type=”radio” name=”sex”>
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
<input type=”button” value=”按钮”>
<input type=”submit” value=”确定”>
</form>
<textarea cols=”30” rows=”30”>请在此填写个人信息</textarea>
==HTML框架、背景、颜色、实体==
内联代码:iframe
实体<:<>:>
用placeholder实现文本框中显示出默认文字
css:
class是设置标签的类,至于指定元素属于何种样式的类
id是设置标签的标识
linear-gradient:层叠样式
- Sublime和IDEA的学习使用
IDEA在html代码页面可以直接选择浏览器打开,可以建立文件夹分类放置文件使得工程更加有条理,功能更为复杂强大。
Sublime需要保存再右击选择浏览器打开,不过更改默认浏览器确实很麻烦,但是它的显示比IDEA来说更为清晰,更加轻便,现阶段比较适合用它来敲代码。
- Css和JS的文件引用方法
引用css文件的方法
<link href=”” style=”stylesheet” type=”text/css”>
引用js文件的方法
<script src=”” type=”text/javascript”>
其他:
Onload事件
定义和用法:
onload 属性在对象已加载时触发。
onload 常用在
中,一旦完全加载所有内容(包括图像、脚本文件、CSS 文件等),就执行一段脚本。语法:οnlοad=“SomeJavaScriptCode”
支持的标签对:
Html:body,frame, frameset, iframe, img, link,script
Js:image, layer, window
Onsubmit事件
定义:
Onsubmit事件会在表单中的确认按钮被点击时发生
语法:οnsubmit=“SomeJavaScriptCode”
支持的标签对:
Html:form
Js:form
- 用form表单向提交数据以及post和get方法之比较
在form标签里设置action属性来向后端提交表单里的数据,设置method属性来确定用”post”或”get”提交,综合考虑之下,在此次功能实现中用“post”方法提交显然更为合适。
“post”“get”提交方法比较
与post相比,get更简单也更快,在大部分情况下都可使用,但在以下情况中不建议使用:
-
无法使用缓存文件(更新服务器上的文件或数据库)
-
向服务器发送大量数据(post没有数据量限制)
-
发送包含未知字符的用户输入时,post比get更稳定也更可靠
在选择性别功能按钮设置中,值得注意的是,加上checked属性使得该按钮只能单选,不能多选,提高按钮的可操作性。
<tr>
<td ALIGN=RIGHT><font size="3"
face="楷体">性别</font></td>
<td>男<input
type="radio" name="sex"
value="man" checked><br/>
女<input type="radio"
name="sex" value="woman">
</td>
</tr>
-
Name、class、id异同
-
name :指定标签的名称。可以包含多个控件。
-
id :指定标签的唯一标识。Css里加前缀“#”,一个页面只可以使用一次,大小写敏感,table tr td div p span h1 li等元素一般用id,最好不要包含下划线。
-
class :指定标签的类名。Css里加前缀“.”,一个页面可以引用多次。
4.优先级: id>name>class
5.getElementById()返回固定id的对象,HTML文档中id对象一般是唯一的;getElementsByName()和getElementsByClassName()返回的是一个数组,HTML文档中name属性和class属性不是唯一的。
-
验证码功能实现
在实现验证码功能的过程中,先是构思如何生成一个随机的验证码,并且可以刷新,接着又考虑如何实现验证码输入的一致性。此次作业中我具体使用了createCode()函数来随机生成一个由09、AZ中的6个字符组成的验证码,也是常规验证码长度,另外我还看到一种可以选择生成验证码长度的方法,但是在本次实现中,此功能显得冗余,故而没有将其应用到本次功能实现中。而刷新验证码的方式则较为简易,设置点击一次“注册”按钮就调用一次createCode()函数。 -
检查输入是否为空以及显示“信息提交成功”弹框
运用了check函数检查输入是否为空,但是没能更细致的单独设置输入的合法性,没有对账号等属性的长度要求设限,使数据更整齐,更具可读性。
两次密码输入是否一致的判断功能有待添加和改善
在注册按钮上使用了οnclick=”addJS()”,写了一个function函数来实现在信息填写完整点击注册按钮之后会弹出“信息提交成功”的弹窗 -
Css
对于css的使用还有很大提升空间
Css: font-family—设置字
Css的进一步学习十分具有必要性和重要性,我认为学习css的方法主要是看一些视频还有别人的效果图(搭配代码学习)。