WEB前端教学 - WEB前端教学-html基础知识

Community Learn Tools Library Leisure

English

Home > List of blog posts > WEB前端教学

Blogger Information

Blog 3

fans 0

comment 0

visits 2554

Special Recommendation

More>

Related recommendations

首先感谢老师们的辛苦付出！

每天两小时的课程讲下来确实不容易，个人感觉每堂课的知识

量都很大，也学到了很多知识，一定会努力学习，跟上老师的

节奏。恳请老师给予多多指正与帮助，谢谢！

好久不写字了，有点乱，请多谅解，通过两节课的学习，学会

了WEB前端开发的一些基本知识，课堂上的知识量很多，本人

基础不好，课后要付出更多的努力才行，很多单词、语法要记

住，真正理解掌握了才能学好编程！

作业提交：

html 基础知识

重点表单

1.表单元素类型

序号	元素	名称	描述
1	from	表单元素	表单应该放在该标签内提交
2	input	输入控件	由type属性指定控件类型
3	label	控件标签	用于控件功能描述与内容关联
4	select	下拉列表	用于选择预置的输入内容
5	datalist	预置列表	用于展示预置的输入内容
6	option	预置选项	与select或datalist配合
7	textarea	文本域	多行文本框，常与富文本编辑器配合
8	button	按钮	用于提交表单

2、表单元素属性

序号	元素	属性
1	from	“action”, method
2	input	“type”,”name””value”,”placeholder”
3	label	“for”
4	select	“name”
5	datalist	“id”,与`intput lsit="">`关联
6	option	`value`,`label`,selected
7	textarea	cols,rows,name
8	button	type ,name

表单元素的公共属性（并非所用元素都具备）

序号	属性	描述
1	name	元素/控件名称，用做服务器端脚本的变量名称
2	value	提交到服务器端的数据
3	placeholder	输入框的提示信息
4	form	所属的表单，与`form name="">`对应
5	autofocus	页面加载时，自动获取焦点
6	required	必填/必选项
7	readonly	该控件内容只读
8	disabled	是否禁用

3. `<input>`的`type`类型

3.1 常用的`type`类型

序号	属性	名称	描述
1	`type="text"`	文本框	默认值
2	type=”password”	密码框	输入内容显示为“*”，不显示明文
3	type=”radio”	单选按钮	多个选项中仅允许提交一个（应提供默认选项）
4	type=”checkbox”	复选框	允许提交一个或多个选项（应提供默认选项）
5	type=”hidden”	隐藏框	页面不提交，但数据会被提交
6	type=”file”	文件上传	本地文件上传，有 accept, multiple属性
7	type=”submit”	提交按钮	点击后会重置输入控件中的内容为默认值
8	type=”reset”	重置按钮	点击后会重置输入控件中的内容为默认值
9	type=”button”	自定义按钮	使用JS脚本按钮点击后的行为

3.2 其他`type`类型（部分）

序号	属性	名称	描述
1	`type="email"`	邮箱	输入必须是邮箱格式
2	type=”number”	整数	输入必须是整数，可设置范围 min, max
3	type=”url”	URL地址	输入内容必须是有效的URL格式文本
4	type=”search”	搜索框	通常与 autocomplete配合
5	type=”hidden”	隐藏域	页面不显示，但数据仍会被提交
6	type=”date”	日期控件	不同浏览器显示会略有不同，但功能一致
7	type=”color”	调色板	可直接选择颜色，不同平台略有不同
8	type=”tel”	电话号码	手机端会弹出数字小键盘

4.注意事项

添加disabled禁用属性的字段数据不会被提交，但是readonly只读属性的字段允许提交
隐藏域的内容不会在HTML页面中显示，但是value属性的数据会被提交。

学习重点内联框架 <iframe>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--HTML内联框架元素 (<iframe>)-->
<!--将另一个HTML页面嵌入到当前页面中,而不是窗口中打开另一个网页, 类似画中画-->
<!--在当前页面加载一张地图,以百度地图为例, 工具->分享, 把URL值赋值给src-->
<iframe src="https://j.map.baidu.com/eb/uVs" frameborder="0" width="500" height="400"></iframe>
<!--实例-->
<hr>
<ul style="float: left;margin-right: 15px;">
    <li><a href="demo6.html" target="content">商品列表</a></li>
    <li><a href="demo7.html" target="content">添加用户</a></li>
    <li><a href="demo1.html" target="content">系统设置</a></li>
</ul>
<!--srcdoc代替src, 可以在属性值中直接写html代码, 实现后台首页的功能-->
<!--name属性非常重要, 它是链接到该框架页面的入口-->
<iframe srcdoc="<h2>欢迎使用管理后台</h2>" frameborder="1" name="content" width="530" height="450"></iframe>
</body>
</html>

运行效果：

手写作业：

手写作业

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：其实这种课程的强度, 远远没有达到魔鬼训练的强度, 我曾过上过连续48小时的课程 , 也希望大家能尽快知识这种学习节奏, 毕竟时间是宝贵和无价的

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

WEB前端教学

2019-12-29 00:31:03