浅析Html及Javascript
2024-06-30 04:41:19
HTML(含CSS) 和JAVASCRIPT
HTML
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
例1：转义字符&:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><!-- Cascading Style Sheet --><link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body><h1 class="foo bar">Hello,世界！</h1><h1 class="foo">What a Fuck!</h1><p class="d"><b style="color: gray;"> 这世间本是没有什么神仙的，但自太古以来，人类眼见周遭世界，诸般奇异之事，电闪雷鸣，狂风暴雨，又有天灾**，伤亡无数，哀鸿遍野，决非人力所能为，所能抵挡。遂以为九天之上，有诸般神灵，九幽之下，亦是阴魂归处，阎罗殿堂。于是神仙之说，流传于世。无数人类子民，诚心叩拜，向着自己臆想创造出的各种神明顶礼膜拜，祈福诉苦，香火鼎盛…… 方今之世，正道大昌，邪魔退避。中原大地山灵水秀，人气鼎盛，物产丰富，为正派诸家牢牢占据。其中尤以“青云门”、“天音寺”、和“焚香谷”为三大支柱，是为领袖。 这个故事，便是从“青云门”开始的。</b></p><p ><img src="images/1.jpg" width="400" class="a ">啊啊啊啊啊</p><p ><img src="images/1.jpg" width="400" class="b ">哦哦哦哦哦</p><p><img src="images/1.jpg" width="400" class="c ">嗯嗯嗯嗯嗯</p><iframe src="test.html" width="800" height="800" scrolling="0" frameborder="0"></iframe><!--块级元素--><div>可以把行级元素改成块级元素</div><!--  转义字符/实体替换符/字符实体--><h1>呵呵 哟 啊</h1><!--<代表小于符号 >代表大于符号--><p><hello>,<world>!</p><h2>Yooxi©®™¥&×÷</h2><!--行级元素--><a href=""></a><img src="">
</body>
</html>例2：类选择器，ID选择器的优先级:
<style type="text/css">@font-face{font-family: ''src:url();}/* *{border: 1px solid blue;} *//*标签选择器 h1{} ID选择器 #foo 类选择器如下：.foo不冲突时样式都会叠加类选择器中：样式冲突，就近原则而在有ID选择器时，ID优先于类选择器（具体性原则）如果在属性中加上!important，则优先级最高（重要性原则）*/.foo {color: red !important; /*reba(255,0,0,0.5)*/background-color: lightgray;/*font:斜体，字体变体，粗细，字体大小/行高，字体格式先英文后中文;*/font: italic small-caps bold 72px/200px SimHei,'幼圆';/*font-family: 'Courier New',Arial, 幼圆，隶书，宋体;font-size: 200%;font-weight: bold;font-style: italic;*/}.bar {letter-spacing:30px;word-spacing:100px;text-align: center;text-decoration: line-through;overflow: scroll;}.a {vertical-align: text-top;}.b {vertical-align: middle;}.c {vertical-align: text-bottom;}.d:first-letter{font-size: 36px;font-weight: bolder;transform: lowercase;transform: capitalize;}</style>例3：相对定位；绝对定位；固定定位；
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style type="text/css">* {border: 1px solid blue;}body {width: 80%;margin: 10px auto;}p {font: 18px/20px "微软雅黑"}p:first-letter{font-size: 36px;}.foo {position:relative ; /*relative 相对定位；相对于初始位置 left:往右偏移（-则往左） top:往下偏移（-则往上）*//*absolute 绝对定位：相对于整个文档 top left 左上角*//*fixed 固定定位：相对于浏览器窗口（鼠标滚动仍然会在那儿，* 例如：页面广告）*/top: 0;left: 0; white-space: nowrap; /*强制不换行*/overflow: hidden; /*超出部分隐藏*/text-overflow: ellipsis; /*超出部分以‘...’省略号代替*/}#adv {width:200px;height: 200px;position: fixed;right: 50px;top: 120px;background-color: orange;color: beige;}#bar {width: 300px;height: 200px;background-color: red;visibility: hidden; /*虽然隐藏，但是仍然占据位置，留下空白*//*display: none; */ /*隐藏 不会占据位置*/}</style>
</head>
<body><div id="adv">广告位招租！！</div><p>这世间本是没有什么神仙的，但自太古以来，人类眼见周遭世界，诸般奇异之事，电闪雷鸣，狂风暴雨，又有天灾**，伤亡无数，哀鸿遍野，决非人力所能为，所能抵挡。遂以为九天之上，有诸般神灵，九幽之下，亦是阴魂归处，阎罗殿堂。于是神仙之说，流传于世。无数人类子民，诚心叩拜，向着自己臆想创造出的各种神明顶礼膜拜，祈福诉苦，香火鼎盛…… 方今之世，正道大昌，邪魔退避。中原大地山灵水秀，人气鼎盛，物产丰富，为正派诸家牢牢占据。其中尤以“青云门”、“天音寺”、和“焚香谷”为三大支柱，是为领袖。 这个故事，便是从“青云门”开始的。</p><p class="foo">这世间本是没有什么神仙的，但自太古以来，人类眼见周遭世界，诸般奇异之事，电闪雷鸣，狂风暴雨，又有天灾**，伤亡无数，哀鸿遍野，决非人力所能为，所能抵挡。遂以为九天之上，有诸般神灵，九幽之下，亦是阴魂归处，阎罗殿堂。于是神仙之说，流传于世。无数人类子民，诚心叩拜，向着自己臆想创造出的各种神明顶礼膜拜，祈福诉苦，香火鼎盛…… 方今之世，正道大昌，邪魔退避。中原大地山灵水秀，人气鼎盛，物产丰富，为正派诸家牢牢占据。其中尤以“青云门”、“天音寺”、和“焚香谷”为三大支柱，是为领袖。 这个故事，便是从“青云门”开始的。</p><div id="bar"></div><p>这世间本是没有什么神仙的，但自太古以来，人类眼见周遭世界，诸般奇异之事，电闪雷鸣，狂风暴雨，又有天灾**，伤亡无数，哀鸿遍野，决非人力所能为，所能抵挡。遂以为九天之上，有诸般神灵，九幽之下，亦是阴魂归处，阎罗殿堂。于是神仙之说，流传于世。无数人类子民，诚心叩拜，向着自己臆想创造出的各种神明顶礼膜拜，祈福诉苦，香火鼎盛…… 方今之世，正道大昌，邪魔退避。中原大地山灵水秀，人气鼎盛，物产丰富，为正派诸家牢牢占据。其中尤以“青云门”、“天音寺”、和“焚香谷”为三大支柱，是为领袖。 这个故事，便是从“青云门”开始的。</p>
</body>
</html>小结：此外，还有浮动(float),表格(table)，标准的头（head），身体（body），脚（foot）页面构成格式。HTML内容多而繁杂，需要的东西用到再去查也可以。也可以多用多记。以上内容还包括css的内容，对页面进行装饰美化。
JAVASCRIPT
JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。
例1：javascript 类型介绍及运用
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">// Js 里面六种类型// - number// - strig// - boorlean// - null// - undefind// - Object/*var a = 10.23 ;var b = 'wow';var c = tru; // 逻辑与e;var e = null;var f = [1, 2, 3];var g = new Date();var h = new Object();function foo() {}console.log(typeof(a));console.log(typeof(b));console.log(typeof(c));console.log(typeof(d));console.log(typeof(e));console.log(typeof(f));console.log(typeof(g));console.log(typeof(h));console.log(typeof(foo));*//*var a = 1var b = 2var c = '1'window.alert(a == c) // True js内含隐士类型转换Window.alert(a === c) // Flase 严格相等，不带类型转换Window.alert(a > 5 && a < 10 ) // 短路与运算Window.alert(a > b || a > c) // 短路或运算var flag = trueWindow.alert(!flag) // 逻辑变反*//*var a = 100;var fl = !!a;window.alert(fl);*/var a = 5;var b = 10;var c = 20;window.alert(a > b & b > c); // 逻辑与
// switch case : 严格等于 不带类型转换
// if else : 自带类型转换</script></body>
</html>
例2：JavaScript中的函数及构造方法-面向对象
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><p id="stu">ssad </p><script type="text/javascript">// 在js 中函数是一等公民// 构造器方法
// function students(name,age) {
// this.name = name
// this.age = age
// this.study = study
// function study(){
// document.getElementById('stu').innerHTML = this.name + '正在学习'
// }
// }
// var s = new students('yqx',26)
// s.study()//自变量方法var stu1 = {name : 'yqx',age : 26,studying: function(courseName) {window.alert(this.name + '正在学习' + courseName)},watchTv: function() {if (this.age >= 18) {window.alert(this.name + '正在飞机')}else {window.alert('太小了')}}};stu1.studying('python');stu1.watchTv()//变种构造器方法
/* function Students(name,age) {this.name = namethis.age = age }Students.prototype.study = function () {document.getElementById('stu').innerHTML = this.name + '正在学习'}var s = new Students('yqx',26)s.study()*/</script></body>
</html>
下面随意写了几个网页，就当巩固吧
首页：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>哇哦</title><link rel="stylesheet" type="text/css" href="css/sty.css"/></head><body><p id="header">HTML & Javascript</p><div id="a"><a href="n01/register.html">在线注册</a></div><div id="b"><a href="n02/n02.html">Html简介</a></div><div id="c"><a href="n03/n03.html">Javascript简介</a></div><div id="d"><a href="n04/n04.html">视频欣赏</a></div></body>
</html>
效果图：
1.在线注册
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="n01.css"/></head><body><a href="../Home.html" id="header">返回主页</a><div id="main"><form action="" method="post"><fieldset><legend>必填信息</legend><p>用户名：<input type="text" name="username" placeholder="请输入您的用户名" required id="h"> </p><p>密码：<input type="password" name="password" placeholder="请输入您的密码" required id="h"> </p><p>性别：<input type="radio" name="sex" checked>男<input type="radio" name="sex">女</p><p>兴趣：<input type="checkbox" name="fav" checked="">吃<input type="checkbox" name="fav">喝<input type="checkbox" name="fav">嫖<input type="checkbox" name="fav">赌<input type="checkbox" name="fav">抽<input type="checkbox" name="fav">坑<input type="checkbox" name="fav">蒙<input type="checkbox" name="fav">拐<input type="checkbox" name="fav">骗<input type="checkbox" name="fav">偷</p><p>出生日期：<input type="date" name="birthday" id="h"></p><p>邮箱：<input type="email" name="mail" placeholder="请输入您的邮箱" required id="h"></p></fieldset><fieldset> <legend>可选信息</legend><p>住址：<select name="prov" id="h"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="成都" selected>成都</option></select></p><p><h5>自我介绍：</h5><textarea rows="5" cols="30" name="intro" id="h"></textarea></p><p>文件上传：<input type="file" name="file" id="h"></p></fieldset><p><input type="submit" value="立即注册" id="re"><input type="reset" name="重新填写" id="re"></p></form></div></body>
</html>
效果图：
2.Html简介
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="n02.css"/></head><body><a href="../Home.html">返回主页</a><audio src="wl.mp3" autoplay loop></audio><div id="t"><a href="http://www.runoob.com/html/html-tutorial.html" id="header">HTML5</a><p>超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。</p><br /><a href="http://www.runoob.com/html/html-intro.html" id="header">什么是HTML</a><p>HTML 是用来描述网页的一种语言。</p><p><ul><li>HTML 指的是超文本标记语言: HyperText Markup Language</li><li>HTML 不是一种编程语言，而是一种标记语言</li><li>标记语言是一套标记标签 (markup tag)</li><li>HTML 使用标记标签来描述网页</li><li>HTML 文档包含了HTML 标签及文本内容</li><li>HTML文档也叫做 web 页面</li></ul></p><br /><a href="http://www.runoob.com/html/html-elements.html">HTML元素</a><p><table><tr><td>开始标签</td><td>元素内容</td><td>结束标签</td></tr><tr><td>‹p›</td><td>这是一个段落</td><td>‹/p›</td></tr><tr><td>‹a href="default.htm"›</td><td>这是一个链接</td><td>‹/a›</td></tr><tr><td>‹br›</td><td></td><td></td></tr></table></p><br /><a href="http://www.runoob.com/html/html-elements.html">HTML 元素语法</a><p><ul><li>HTML 元素以开始标签起始</li><li>HTML 元素以结束标签终止</li><li>元素的内容是开始标签与结束标签之间的内容</li><li>某些 HTML 元素具有空内容（empty content）</li><li>空元素在开始标签中进行关闭（以开始标签的结束而结束）</li><li>大多数 HTML 元素可拥有属性</li></ul></p><br /><a href="http://www.runoob.com/html/">关于HTML更详细信息请点这里</a></div><div id="sm"><p>扫描二维码，到达人生巅峰</p><img src="sm02.jpg"/></div></body>
</html>
效果图：
3.Javascript简介
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="n03.css"/><script src="../js/javas.js" type="text/javascript" charset="utf-8"></script></head><body><a href="../Home.html">返回主页</a><audio src="bh.mp3" autoplay loop></audio><div id="t"><a href="http://www.runoob.com/js/js-tutorial.html">Javascript</a><p>JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。JavaScript 非常容易学。本教程将教你学习从初级到高级JavaScript知识。</p><br /><a href="http://www.runoob.com/js/js-intro.html">什么是Javascript</a><p>JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备</p><p><ul><li>JavaScript 是一种轻量级的编程语言。</li><li>JavaScript 是可插入 HTML 页面的编程代码。</li><li>JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。</li><li>JavaScript 很容易学习。</li></ul></p><br /><a href="http://www.runoob.com/js/js-obj-intro.html">Javascript 对象</a><p>JavaScript 对象是拥有属性和方法的数据。</p><p>真实生活中，一辆汽车是一个对象。</p><p>对象有它的属性，如重量和颜色等，方法有启动停止等:</p><p><table><tr><td>对象</td><td>属性</td><td>方法</td></tr><tr><td><img src="car01.jpg" id="im"/></td><td>car.name = Fiat <br />car.model = 500 <br />car.weight = 850kg <br />car.color = white</td><td>car.start()<br />car.drive()<br />car.brake()<br />car.stop()</td></tr></table></p><br /><a href="http://www.runoob.com/js/js-output.html">JavaScript 输出</a><p>JavaScript 没有任何打印或者输出的函数。</p><p>JavaScript 可以通过不同的方式来输出数据：</p><p><ul><li>使用 window.alert() 弹出警告框。</li><li>使用 document.write() 方法将内容写到 HTML 文档中。</li><li>使用 innerHTML 写入到 HTML 元素。</li><li>使用 console.log() 写入到浏览器的控制台。</li></ul></p><br /><a href="http://www.runoob.com/js/">关于Javascript更详细信息请点这里</a></div><div id="sm"><p>扫描二维码，到达人生巅峰</p><img src="../n02/sm02.jpg"/></div></body>
</html>
效果图：
4.视频欣赏
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="n04.css"/></head><body><a href="../Home.html" id="header">返回主页</a><video id="vi" controls autoplay loop><source src="gcd.mp4" type="video/mp4"></source></video><a href="n04-1.html" id="py">你想多看一集吗？<br />你想一夜成名吗？<br />你想走向人生巅峰吗？<br />快点我吧，走进渣渣辉的世界！<br /></a></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;font-family: arial,"楷体";
}body {width: 960px;margin: 10px 10px;background-image: url(hsq.jpg);background-size: cover;margin: 100px 450px;
}p {font-size: 2cm;color: dodgerblue;}</style></head><body><p>别做梦了！</p><p>孩子！</p><p>多读书，多看报，少吃零食，多睡觉！</p><p>洗洗睡吧！</p></body>
</html>
效果图：
浅析Html及Javascript相关推荐
- 浅谈JavaScript中的apply、call和bind
摘要 三种方法均可改变函数this关键字的指向. apply()接受一参数数组,返回函数执行的结果. call()接受一组参数,返回函数执行的结果. bind()接受一组参数,返回函数体.需在bind ...
- 透彻理解并掌握JavaScript的this
英文原文 学习前提:需要懂一些JS知识 学习耗时:约40分钟 前言 无论是JavaScript新手还是老手,JavaScript中的this关键词可能都会令你困惑.本文旨在透彻地阐述this.读完本文 ...
- 这一个月的可能用到的便签
Bookmarks 书签栏 linux 鳥哥的 Linux 私房菜 -- 鳥哥的 Linux 私房菜 首頁 ubuntu 下安装unity3d游戏开发平台_百度经验 在 Ubuntu 16.04上,安 ...
- 浅析 JavaScript 中的 函数 uncurrying 反柯里化
柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...
- javascript date php date,JavaScript Date 知识浅析
Date函数 new Date() Date 对象会自动把当前日期和时间保存为其初始值. date.getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31). date.getDa ...
- java scri p t_深入浅析JavaScript中数据共享和数据传递_javascri
数据共享和数据传递是相辅相成的,我们一起来讨论这个问题.首先要说的是共享和传递都是有作用域的.作用域就是起作用的区域,在同一个作用域数据可以共享,超过这个作用域就是跨作用域,就得用到数据传递了. 作用 ...
- JavaScript中deferred对象浅析
JavaScript中deferred对象浅析 一.deferred对象 1.1deferred对象 1.1.1基本概念 deferred对象是JQuery的回调函数解决方案,解决了如何处理耗时操作的 ...
- JavaScript设计模式浅析
JavaScript设计模式浅析 JavaScript设计模式浅析 一.工厂模式 1.简单的工程模式 2.工程模式实例 二.建造者模式 1.建造者模式例子 三.单体模式 1.普通创建对象方式 2.单体 ...
- Javascript中的Callback方法浅析
什么是callback? 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函 ...
最新文章
- java throw 什么意思_[转载]java中throw和throws的区别
- Enterprise Library——企业库配置管理应用程序块
- List类集接口-ArrayList
- 函数式接口作为方法的返回值
- Hbuilder常用快捷键功能.html
- mongodb replicaset shard 集群性能测试
- 画面风格写实的飞鸽传书
- 3D游戏引擎中常见的三维场景管理方法
- [Ext JS]5.9 嵌套Grid的实现及注意事项
- 生命中的七堂课（转）
- 【优化调度】基于matlab粒子群算法求解水火电经济调度优化问题【含Matlab源码 500期】
- 生信必备技巧之R语言基础教程03——逻辑数据用途及字符串处理
- linux环境libudev安装,树莓派 3B 上安装 libnfc 配合 acr122u 读取 nfc
- 计算机电气工程论文,计算机在电气工程自动化控制的作用
- JN5169 NXP ZigBee PRO 无线网络应用所需的常见操作（二）
- 北京邮电大学计算机科学与技术专业研究生,北京邮电大学计算机科学与技术专业...
- 视频技术系列 - 谈谈毫米波
- 《三桃演义》第二回：返航，火星人柯里昂
- excel运行时出现正在等待其他应用程序的OKE操作完了
- postman使用教程1