《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

相关文章
|
16天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0
|
7天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
11天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
11天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
18天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
19天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
13 0
|
23天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
前端开发 容器 内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫,通过HTML结构和CSS样式逐步构建叮当猫的各个部位,如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外,还添加了眼珠的动画效果,让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习,以提升动态图形创作技能。
16 0
使用CSS3画出一个叮当猫HTML源码
|
1月前
使用html+css制作一个发光立方体特效
使用html+css制作一个发光立方体特效
23 2
使用html+css制作一个发光立方体特效