第一次前端作业总结

最新推荐文章于 2023-11-17 15:56:55 发布

呀比喵喵喵

最新推荐文章于 2023-11-17 15:56:55 发布

阅读量296

点赞数

分类专栏：实验室文章标签： HTML

本文链接：https://blog.csdn.net/qq_43381691/article/details/89608153

版权

实验室专栏收录该内容

2 篇文章 0 订阅

订阅专栏

心路历程：

由于之前有做过网页的经历，所以给网页打个框架对我来说还是很容易的，难点在于如何利用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

实体<：&lt>：&gt

用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()函数来随机生成一个由0_9、AZ中的6个字符组成的验证码，也是常规验证码长度，另外我还看到一种可以选择生成验证码长度的方法，但是在本次实现中，此功能显得冗余，故而没有将其应用到本次功能实现中。而刷新验证码的方式则较为简易，设置点击一次“注册”按钮就调用一次createCode()函数。
检查输入是否为空以及显示“信息提交成功”弹框
运用了check函数检查输入是否为空，但是没能更细致的单独设置输入的合法性，没有对账号等属性的长度要求设限，使数据更整齐，更具可读性。
两次密码输入是否一致的判断功能有待添加和改善
在注册按钮上使用了οnclick=”addJS()”,写了一个function函数来实现在信息填写完整点击注册按钮之后会弹出“信息提交成功”的弹窗
Css
对于css的使用还有很大提升空间
Css: font-family—设置字
Css的进一步学习十分具有必要性和重要性，我认为学习css的方法主要是看一些视频还有别人的效果图（搭配代码学习）。

呀比喵喵喵

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第一次前端作业总结

心路历程：由于之前有做过网页的经历，所以给网页打个框架对我来说还是很容易的，难点在于如何利用css将页面设计的更好看，布局更合理；如何具体实现判断输入的合法性；如何成功向后端提交数据；最重要的一点是，如何在大量的信息中提取到自己想要的信息，并且将自己的所学有效应用到作业当中去。第一次作业收获：温习了HTML的基础知识==基本标签对==<!DOCTYPEhtml>...
复制链接

扫一扫