开发者社区> 华章计算机> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《HTML 5+CSS 3入门经典》——2.4 上机实践

简介: 本节书摘来自华章计算机《HTML 5+CSS 3入门经典》一书中的第2章,第2.4节,作者:管媛辉 潘凯华著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
+关注继续查看

2.4 上机实践

2.4.1 使用hidden属性对用户评论内容进行隐藏

题目描述当我们在浏览新闻的时候,通常会发现新闻的下面有一个用户评论区域,在用户的评论区域,浏览者可以针对新闻的内容发表自己的看法,这样页面中就会存在很多用户评论的内容,这些评论内容使得页面看起来比较拥挤。这个时候我们就可以使用hidden属性来对评论的内容进行隐藏操作,效果如图2.3所示。image
技术指导
首先,在页面中放置一对元素,在该元素内放置用户的评论内容,并设置该元素的id为“art”;同时在页面中放置两个单选按钮,并设置其中一个单选按钮的checked属性为“true”,即显示,另外一个单选按钮不设置checked属性,即为隐藏。然后使用JavaScript脚本将该属性取消,取消后该元素变为可见状态,同时元素中的内容也即时显示出来。其实现的主要代码如下所示。image

2.4.2 使用spellcheck属性检查单词的拼写情况
题目描述
在本例中使用spellcheck属性对输入的英文语句进行检查,当所输入的英文语句中出现错误的单词时,会使用红线将错误的单词圈出,以便读者快速查找出错误的单词,运行效果如图2.4所示。image
技术指导
将spellcheck属性设置成true,以此完成单词拼写的检查。其实现的主要代码如下所示。image
2.4.3 对页面输出的文字进行编辑
题目描述
对页面中输出的内容进行编辑,运行结果如图2.5所示。
技术指导将article元素加上contentEditable属性后,该元素内的文字就变成可编辑的了,编辑完成后单击“保存”按钮,这时将把元素的innerHTML发送到服务器端进行保存。其实现的主要代码如下所示。
image
image

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
html+css实战155-位移-居中
html+css实战155-位移-居中
24 0
web前端技能方法总结(css、js、jquery、html)(7)
web前端技能方法总结(css、js、jquery、html)
68 0
web前端技能方法总结(css、js、jquery、html)(5)
web前端技能方法总结(css、js、jquery、html)
42 0
Html和Css学习笔记-html进阶-div与span
Html和Css学习笔记-html进阶-div与span 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签,元素,属性的具体意义。
1436 0
前端面试题目汇总摘录(HTML 和 CSS篇)
温故而知新,保持空杯心态 HTML 和 CSS 你做的页面在哪些浏览器测试过?这些浏览器的内核分别是什么 浏览器名称 内核 IE trident Firefox(火狐) gecko Safari webkit Opera 以前是 presto ,现在已改用 Google Chr...
1765 0
前端——HTML,CSS
HTML HTML叫做超文本标记语言,是一种制作万维网页面标准语言。相当于定义一套规则,大家都来遵守它,这样浏览器就可以去解释它。 浏览器负责将标签翻译成用户看得懂的格式,呈现给用户。 作为开发者需要学习的:   1.学习HTML规则   2.从数据库获取数据,然后替换到HTML文件的指定位置(web框架) HTML文档 如果新建一个HTML文档,编译器会帮你自动写好基本格式: 我们一一来看,他们是怎么回事 1.Doctype Doctype告诉浏览器使用什么样的规范来解析文档。
1494 0
HTML 5 & CSS 3 的新交互特性
本文标题的这副图片,是用Phosotshop制作的。但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字。并且由 于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新。
923 0
分享45款高质量的免费(X)HTML/CSS模板
当你需要在短时间内设计出一个网站的时候,网站模板就非常有用了。这也就是为什么这些设计模板已成为设计领域的最新趋势的原因。在这篇文章中,收集了各式各样的网站模板,您可以免费下载使用,希望这些设计模板不仅带给您灵感,也让您回到创作轨迹。
756 0
xslt转换XML为HTML遇到JS,CSS等问题
一开始把所有的内容放到一个模板里面,结果
692 0
【转】网页html+css样式各类常用小结
如内容超出单元格,则隐藏style="TABLE-LAYOUT: fixed"让弹出窗口总是在最上面: 不要滚动条? 让竖条没有: 让横条没有: 两个都去掉?更简单了 怎样去掉图片链接点击后,图片周围的虚线? 电子邮件处理提交表单 在打开的子窗口刷新父窗口的代码里如何写? window.
1650 0
文章
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
《零基础HTML入门教程》
立即下载
Java开发手册-孤尽秘传版
立即下载