【HTML5】元素<script>与<noscript>的使用
功能描述
在新建的页面中增加一个文本框“txtContent”和一个按钮“请点击我”；当单击按钮时。通过页面中加入的JavaScript脚本获取为文本框中的内容，并显示在页面上。
实现代码
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>脚本元素的使用</title>
<link href="css/css1.css" rel="stylesheet" type="text/css">
<script type="text/javascript" async="true">
function Btn_Click(){
var strTxt = document.getElementById("txtContent").value;
var strDiv = document.getElementById("divShow");
strDiv.style.display="block";
strDiv.innerHTML="您输入的字符是："+strTxt;
}
</script>
<noscript>您的浏览器不支持javascript</noscript>
</head>
<body>
<input type="text" id="txtContent" class="inputtxt"/>
<input type="button" value="请点击我" class="inputbtn" onclick="Btn_Click();"/>
<div id = "divShow" class="divShow"></div>
</body>
</html>
CSS
@charset "utf-8"
/*CSS Document*/
body{
font-size:14px;
}
.inputbtn {
border:solid 1px #ccc;
background-color:#eee;
line-height:18px;
font-size:12px;
}
.inputtxt{
border:solid 1px #ccc;
line-height:18px;
font-size:12px;
}
.divShow{
font-size:18px;
font-weight:blod;
line-height:28px;
background:green;
}
页面效果
在本实例的<script>元素中，设置async属性设置的值为true,即允许脚本在页面解析时异步执行，在很大程度上加速页面加载速度。
【HTML5】元素<script>与<noscript>的使用的更多相关文章
- HTML5元素标记释义
HTML5元素标记释义 标记 类型 意义 介绍 文件标记 <html> ● 根文件标记 让浏览器知道这是HTML 文件 META标记 <head> ● 开头 提供文件整体信息 ...
- HTML5元素背景知识
目录 HTML5元素背景知识 语义与呈现分离 元素选用原则 少亦可为多 别误用元素 具体为佳,一以贯之 对用户不要想当然 元素说明体例 ol元素 元素速览 文档和元数据元素 文档和元数据元素 文本元素 ...
- html5.js让IE（包括IE6）支持HTML5元素方法
引用Google的html5.js文件 <!--[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/htm ...
- HTML5中script的async属性异步加载JS
HTML5中script的async属性异步加载JS HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...
- html5.js让IE（包含IE6）支持HTML5元素方法
原文地址:http://blog.sina.com.cn/s/blog_62a36ec401018oqb.html html5.js让IE(包含IE6)支持HTML5元素方法 微软的最新浏览器IE8及 ...
- 添加shiv让所有现代浏览器都支持 HTML5 语义元素 html5.js让IE（包括IE6）支持HTML5元素方法
引用Google的html5.js文件 <!--[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/htm ...
- 让更多浏览器支持html5元素的简单方法
当我们试图使用web上的新技术的时候,旧式浏览器总是我们心中不可磨灭的痛!事实上,所有浏览器都有或多或少的问题,现在还没有浏览器能够完整的识别和支持最新的html5结构元素.但是不用担心,你依然可以在 ...
- 如何让旧版IE浏览器认识HTML5元素
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" ...
- 不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2515 如果我们不做什 ...
随机推荐
- 大（NOIP模拟赛Round #10）
题目描述: 小Z有个n个点的高清大图,每个点有且只有一条单向边的出边.现在你可以翻转其中的一些边,使他从任何一个点都不能通过一些道路走回这个点.为了方便,你只需输出方案数对取模即可.当在两个方案中有任 ...
- PDF工具
PDF打印工具 pdfcreator 可以将所有文件都打印为pdf PDF 阅读-编辑-打印工具 Adobe Acrobat DC 可以将所有文件都打印为pdf,并且支持编辑PDF与阅读,可以将PDF ...
- Optional int parameter 'rows' is not present but cannot be translated into a null value due to being declared as a primitive type.
我的spring mvc 代码: @Controller @RequestMapping("/product") public class Fancy { @RequestMapp ...
- 关于js拖拽功能，拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题
被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...
- Fiddler抓包11-HTTPS证书Actions无法导出问题【转载】
本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/fiddler/ 前言 在点Actions时候出现Export Failed:The r ...
- .apache.commons.io 源代码学习（一）
java的初学者,准备通读各种高水平源代码,提升能力. 为了避免自己的惰性,写博客. 版本:2.5 开发平台:netbeans. 今天是第一天,网上先看个例子:http://www.importnew ...
- 【原创】SQL SERVER 2008 R2安装(多图详解)
配置系统环境说明 操作系统:Windows 7 操作系统版本:旗舰版 SP1 操作系统位数:x64 注:其它系统配置也基本相似,只是可能菜单的名字或者所处位置不一样,具体的配置如有不同,请自行搜索 安 ...
- javascript 仿面向对象编程实例代码(私有，公共变量。。。)
//定义一个javascript类 function JsClass(privateParam,publicParam){//构造函数 var priMember = privateParam; // ...
- MySQL读写分离-架构
MySQL读写分离-架构 简介 对于很多大型网站(pv值百万.千万)来说,在所处理的业务中,其中有70%的业务是查询(select)相关的业务操作(新闻网站,插入一条新闻.查询操作),剩下的则是写(i ...
- Cookie和Session在Node.JS中的实践（一）
Cookie和Session在Node.JS中的实践(一) Cookie和Session是一个非常有趣的概念,也是一个老生常谈的话题.然而,作者看了许多文章,也翻看了几本书籍,它们对Cookie和Se ...