html/css/javascript练习代码
这两天心血来潮学习了前端，自己也做了个小小的网页，不好看QAQ 不过网页上集结了很多零碎的知识，在这里先马克一下。图片地址：https://github.com/lesroad/html-css-js-1
html
<!DOCTYPE html>
<html> <head>
<title>my!</title> <script src = "3.js"></script> <link rel = "stylesheet" type = "text/css" href = "2.css"> <!--头部定义外部样式表--> <style> /*头部定义内部样式表*/ .cities { /*类选择器*/
background-color:black;
color:white;
margin:20px;
padding:20px;
text-align:center;
} #shuxing1 /*id选择器*/
{
color: red;
text-decoration:line-through;
} body
{
background: url('https://www.dreamwings.cn/wp-content/uploads/2016/08/background.png') no-repeat right top;
background-attachment:fixed;
} a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */ </style> </head> <body onload = "load()">
<h1 class = "cities" id = "shuxing1">lesroad</h1>
<!--一级标题-->
<h2>这是错误的！</h2>
<!--二级标题-->
<a href = "http://www.baidu.com" target = "_blank"><h2>打开百度</h2></a>
<hr/>
<h3>hello kitty</h3>
<p style = "font-size: 40px; color:#66ccff">23333</p> <!--内联样式表-->
<!--段落-->
<br/>
<p class = "shuxing2">hhhhhh</p>
<hr/> <div class = "cities">
<p id = "daan">123</p>
<script>
function Fun1()
{
document.getElementById("daan").innerHTML = "爱就像蓝天白云晴空万里忽然暴风雨";
}
</script>
<p><button onclick = "Fun1()">歌曲</button></p>
</div> <br/>
<!--图片-->
<a href = "https://www.cnblogs.com/lesroad">
<img border="0" src="2.png" alt="hjkhj" width = "128px" target = "_blank">
</a><br/>
<hr/>
<!--表格-->
<table border = "1">
<tr>
<th>Head</th>
<td>is</td>
<td></td>
</tr> <tr>
<td>(1,1)</td>
<td>(1,2)</td>
<td>(1,3)</td>
</tr>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
<td>(2,3)</td>
</tr>
</table>
<hr/> <div class="cities">
<h2>London</h2>
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div> <div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div> <div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div> <!--表单-->
<form>
用户名<br/>
<input type = "text" name = "123"> <br/>
密码<br/>
<input type = "password" name = "123"> <br/><br/>
<input type = "submit" value = "提交"><br/> 性别<br/>
<input type = "radio" name = "123" > Male<br/>
<input type = "radio" name = "123"checked> Female<br/> <select>
<option>苹果</option>
<option>香蕉</option>
</select> <input type = "date"> <input type = "color">
<br/><br/>
</form> <!--图片分区相应图-->
<a href = "http://www.w3school.com.cn/tags/tag_area.asp" target = "_blank">链接</a><br/>
<img src = "圆.png" width = "128" usemap = "#map1" alt = "圆"><br/><br/>
<form> <!--定位获取坐标-->
<input type = "image" src = "方.png">
</form>
<img src = "方.png" usemap = "#map2" alt = "方"><br/>
<map name = "map1">
<area href = "https://www.baidu.com/" shape = "circle" coords = "64, 64, 64" target = "_blank">
</map>
<map name = "map2">
<area href = "https://baike.baidu.com/item/%E6%A9%99/25420?fr=aladdin" shape = "rect" coords = "19, 30, 93, 106" target = "_blank">
<area href = "https://baike.baidu.com/item/%E9%9D%92/6923#viewPageContent" shape = "rect" coords = "122, 31, 197, 106" target = "_blank">
</map>
<br/> </body>
</html>
css
.shuxing2
{
color:purple;
} h3
{
text-align:center;
}
js
var p = prompt("password?", "");
while(p !== "5265")
{
p = prompt("password?", "");
}
if(p == "5265")
{
alert("Welcome!");
document.write("<h1>"+"Welcome!"+"</h1>");
}
html/css/javascript练习代码的更多相关文章
- html+css+javascript实现列表循环滚动示例代码
使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
- Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...
- [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)
http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...
- html css javascript 加载的顺序
html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...
- Umbraco（3） - CSS & Javascript（翻译文档）
原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco3css-javascript/ CSS & Jav ...
- 原创的基于HTML/CSS/JavaScript的层级目录树
之前参加过一些基于HTML/CSS/JavaScript的项目,当在页面中需要生成一颗目录树时,总是首先想着网上有没有现成的生成树的源代码,比如dtree.zthee,或者使用一些javascript ...
- javascript常用代码大全
http://caibaojian.com/288.html 原文链接 jquery选中radio //如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_ca ...
- javascript实现代码高亮
javascript实现代码高亮-wangHighLighter.js 1. 引言 (先贴出wangHighLighter.js的github地址:https://github.com/wangfup ...
- 记录下项目中常用到的JavaScript/JQuery代码二（大量实例）
记录下项目中常用到的JavaScript/JQuery代码一(大量实例) 1.input输入框监听变化 <input type="text" style="widt ...
随机推荐
- URAL - 1091 Tmutarakan Exams (简单容斥原理)
题意:K个不同数组成的集合,每个数都不超过S且它们的gcd>1.求这样的数的个数 分析:从2开始枚举gcd,但这样会发生重复.譬如,枚举gcd=2的集合个数和gcd=3的集合个数,枚举6的时候就 ...
- docker for spark
项目需求,有一个spark-streaming的程序,读kafka的数据,需要构建一个不使用hadoop的spark 以下建立的镜像参考网络,可以稍加修改就可以使用不同的版本. 可单独启动master ...
- click事件多次触发 jQuery
jQuery 中 click事件会累计绑定 例如下列代码: aNode.click(function(){ bNode.click(function(){ console.log('haha'); } ...
- 照着官网来安装openstack pike之environment设置
安装openstack前的准备环境: 两个centos7系统的环境:192.168.101.10 node1,192.168.101.11 node2 控制节点node1,计算节点node2 1.统一 ...
- 20145301《Java程序设计》实验二报告:Java面向对象程序设计
20145301<Java程序设计>实验二报告:Java面向对象程序设计 课程:Java程序设计 实验名称:Java面向对象程序设计 实验目的与要求: 初步掌握单元测试和TDD 理解并掌握 ...
- 20145329《Java程序设计》第四周学习总结
教材学习内容总结 封装.继承.多态 封装:封装类私有数据,让用户无法直接存取. 继承: 定义:避免多个类间重复定义共同行为,就是相同的代码提升为父类,java中只能继承一个父类.用继承的方式编写代码可 ...
- hello java ！
我对于计算机性编程性质的课程一直没有很好的悟性,但功夫不服有心,最近自己学习视频课程,随时关注娄老师的博客,慢慢的对于java编程有了新的认识,也用eclipse软件进行了简单java的编译. 了解的 ...
- linux内核第二周
chapter 1 知识点梳理 (一)计算机是如何工作的?(总结)——三个法宝 ①存储程序计算机工作模型,计算机系统最最基础性的逻辑结构: ②函数调用堆栈,高级语言得以运行的基础,只有机器语言和汇编语 ...
- SVN一直提示需要clean up
无论到那一级都提示clean up, 这是陷入clean up 死循环的结果. 解决办法: 使用任何一款可以连sqllit 的数据库管理软件例如(Navicat Premium),连入 项目跟目录/. ...
- HTTP-java访问https资源时,忽略证书信任问题，代码栗子
java程序在访问https资源时,出现报错 sun.security.validator.ValidatorException: PKIX path building failed: sun.sec ...