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 :"> 这世间本是没有什么神仙的，但自太古以来，人类眼见周遭世界，诸般奇异之事，电闪雷鸣，狂风暴雨，又有天灾**，伤亡无数，哀鸿遍野，决非人力所能为，所能抵挡。遂以为九天之上，有诸般神灵，九幽之下，亦是阴魂归处，阎罗殿堂。于是神仙之说，流传于世。无数人类子民，诚心叩拜，向着自己臆想创造出的各种神明顶礼膜拜，祈福诉苦，香火鼎盛…… 方今之世，正道大昌，邪魔退避。中原大地山灵水秀，人气鼎盛，物产丰富，为正派诸家牢牢占据。其中尤以“青云门”、“天音寺”、和“焚香谷”为三大支柱，是为领袖。 这个故事，便是从“青云门”开始的。</b></p>
<p ><img src=" images/1.j pg" width=" 400 " class=" a ">啊啊啊啊啊</p>
<p ><img src=" images/1.j pg" width=" 400 " class=" b ">哦哦哦哦哦</p>
<p><img src=" images/1.j pg" 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: 1 px solid blue;} */
/*标签选择器 h1{} ID选择器
不冲突时样式都会叠加
类选择器中：样式冲突，就近原则
而在有ID选择器时，ID优先于类选择器（具体性原则）
如果在属性中加上!important，则优先级最高（重要性原则）*/
.foo {
color: red !important; /*reba(255 ,0 ,0 ,0.5 )*/
background-color: lightgray;
/*font:斜体，字体变体，粗细，字体大小/行高，字体格式先英文后中文;*/
font: italic small-caps bold 72 px/200 px SimHei,'幼圆' ;
/*font-family: 'Courier New' ,Arial, 幼圆，隶书，宋体;
font-size: 200 %;
font-weight: bold;
font-style: italic;*/}
.bar {letter-spacing:30 px;
word-spacing:100 px;
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: 36 px;
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: 1 px solid blue;
}
body {
width: 80 %;
margin: 10 px auto;
}
p {
font: 18 px/20 px "微软雅黑"
}
p:first-letter{
font-size: 36 px;
}
.foo {
position:relative ; /*relative 相对定位；相对于初始位置
left:往右偏移（-则往左） top:往下偏移（-则往上）*/
/*absolute 绝对定位：相对于整个文档
top left 左上角*/
/*fixed 固定定位：相对于浏览器窗口（鼠标滚动仍然会在那儿，
* 例如：页面广告）*/
top: 0 ;
left: 0 ;
white-space: nowrap; /*强制不换行*/
overflow: hidden; /*超出部分隐藏*/
text-overflow: ellipsis; /*超出部分以‘...’省略号代替*/
}
width:200 px;
height: 200 px;
position: fixed;
right: 50 px;
top: 120 px;
background-color: orange;
color: beige;
}
width: 300 px;
height: 200 px;
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 = 1
var b = 2
var 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 = true
Window.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 = name
this.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>&
<td>这是一个段落</td>
<td>&
</tr>
<tr>
<td>&
<td>这是一个链接</td>
<td>&
</tr>
<tr>
<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 = 850 kg <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: 960 px;
margin: 10 px 10 px;
background-image: url(hsq.jpg);
background-size: cover;
margin: 100 px 450 px;
}
p {
font-size: 2 cm;
color: dodgerblue;
}
</style>
</head>
<body>
<p>别做梦了！</p>
<p>孩子！</p>
<p>多读书，多看报，少吃零食，多睡觉！</p>
<p>洗洗睡吧！</p>
</body>
</html>
效果图：
扫一扫
1242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
