马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 不二如是 于 2019-3-9 11:17 编辑
万众瞩目的 零基础入门学习Web开发(H5&C3)开始更新了!!!
在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生,时间总是善待任何想拿它搞事情的存在体。
很幸运,一切就这样开始了,开局总会有些不足,但一切在慢慢变好,不是吗?
作为,吹水阁中最爱吹水(爱干无意义事情)的鱼油,整套教程的亮点(槽点)由我来承包~
关注本系列推送(最下方有订阅方式)的鱼油,会享受到一个福利:
会比正常推送,早一个时间节点,看到还未出炉的美味课程
哈哈,废话不多说了, #敲黑板时刻!
课程思维导图
1、output 元素
output 元素用来定义不同类型的输出,比如脚本的输出。
比较语义化的一个元素,当需要加载计算结果,又不想使用 JavaScript时,就可以用它。
代码:<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b" >100</output>
</form>
小甲鱼老师课程通过 XAMPP 来演示结果。上面代码中通过 form 元素的oninput 属性来代替(犯懒了)。
效果是一样的,通过 output 的 name 属性绑定,来实现计算结果的呈现。
2、textarea 元素
textarea 元素是定义多行文本输入的控件。
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
小甲鱼老师特意推荐了一下,建议大家将编译器的字体格式都设置为等宽字体。
代码:<textarea rows="3" cols="20">
鱼C工作室,让每个人都能自学会编程。
</textarea>
可以通过 cols 和 rows 属性来规定 textarea 的尺寸。
(不过更好的办法是使用 CSS 的 height 和 width 属性。)
cols,规定文本区内的可见宽度。
rows,规定文本区内的可见行数。
宽度和行数的单位都是:
1个中文字符=2个英文字母(英文符号)。
上面代码中 rows 设置为 3,纵向显示 3 个字符数(3行)。
cols 设置为 20 ,横向显示 20 个字符。
通过 textarea 元素的 wrap 属性设置在提交表单时文本输入区内的换行模式。
在文本输入区内的文本行间,用 "%OD%OA" (回车/换行)进行分隔。
wrap 属性有 3 个值,hard/soft/off,这三个值都不会对页面渲染效果有影响。
hard,自动换行,并在 url 中显示换行符(%OD%OA)。
soft,自动换行,不在 url 中显示换行符。
off,不自动换行。
我们演示下 hard,需要启动XAMPP:<form action="#" method="get">
<textarea rows="5" cols="30" wrap="hard">
左手一个小甲鱼,右手一把打火机,哪里不会点哪里,妈妈再也不用担心我的学习啦~
</textarea>
<br>
<input type="submit">
</form>
3、小综合-鱼C表单
最后小甲鱼老师带我们手把手综合复习一下,涉及课程017-022讲
表单在线演示:传送门
fieldset、select 元素参看:017
input 元素 type 属性参看:018、019、020、021、022
textarea 元素见本讲。
课后作业,完成了吗?
传送门
如果有收获,别忘了评分 :
这位鱼油,如果喜欢本系列学习笔记,请订阅 专辑☞( 传送门)( 不喜欢更要订阅 )
|