这两天心血来潮学习了前端，自己也做了个小小的网页，不好看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练习代码的更多相关文章

  1. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  2. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

  3. [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...

  4. html css javascript 加载的顺序

    html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...

  5. Umbraco（3） - CSS & Javascript（翻译文档）

    原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/umbraco3css-javascript/ CSS & Jav ...

  6. 原创的基于HTML/CSS/JavaScript的层级目录树

    之前参加过一些基于HTML/CSS/JavaScript的项目,当在页面中需要生成一颗目录树时,总是首先想着网上有没有现成的生成树的源代码,比如dtree.zthee,或者使用一些javascript ...

  7. javascript常用代码大全

    http://caibaojian.com/288.html    原文链接 jquery选中radio //如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_ca ...

  8. javascript实现代码高亮

    javascript实现代码高亮-wangHighLighter.js 1. 引言 (先贴出wangHighLighter.js的github地址:https://github.com/wangfup ...

  9. 记录下项目中常用到的JavaScript/JQuery代码二（大量实例）

    记录下项目中常用到的JavaScript/JQuery代码一(大量实例) 1.input输入框监听变化 <input type="text" style="widt ...

随机推荐

  1. 哪个地图API 好用

    之前我们能用的地图软件还寥寥无几,而且一个地图包动辄就上百M,还不支持GPS,没有实时路况,没有卫星图,一年也未必更新一次.现如今的地图功能已经极大丰富了,开发者的项目选择性也很大,地图哪个受众比较多 ...

  2. python3.5实现购物车

    一.购物车实现: 购物车功能: 用户登录:密码错误三次锁定账户. 商品列表分页显示:输入页码查看指定页数商品信息. 已购买商品列表:显示已购买的物品列表:可以模糊查询已购买的商品并在终端打印. 充值: ...

  3. centos7下配置iptables实现外网访问内网服务器

    说明:Centos 7 默认的防火墙是 firewall,安装iptables之前需关闭Firewall 外网机器:外网ip:120.25.71.183内网ip:10.1.1.23 内网机器:内网ip ...

  4. $python日期和时间的处理

    总结一下python中对日期和时间的常用处理方法. 准备 import time,datetime 常用操作 输出当前的日期时间 方式一: now = time.localtime() print ' ...

  5. JMeter的安装和目录解析

    Ubuntu系统中jmeter的安装和目录解析 作为一个Linux新手,在使用jdk时,或许会安装配置多次仍然导致无法使用情况(如无法登录系统等),请按如下步骤一步一步安装并配置 相关软件下载地址 J ...

  6. java多态 以及静态绑定 动态绑定积累

    重载,英文名是overload,是指在一个类中定义了一个以上具有相同名称的方法,这些方法的参数个数.参数类型和顺序不能相同.返回类型可以相同,也可以不同. 重写,英文名是overrid,是指在继承情况 ...

  7. Android事件处理下（按键、触摸屏和滚动球的一些实现细节)

    http://www.cnblogs.com/andtt/articles/2145563.html 对于按键事件,调用mDevices[i]->layoutMap->map进行映射.映射 ...

  8. HCNP学习笔记之PXE原理详解及实践

    一.PXE简介 PXE(preboot execute environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持工作站通过网络从远端服 ...

  9. 20145335郝昊《java程序设计》第6周学习总结

    20145335郝昊 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 串流(Stream): 数据有来源及目的地,衔接两者的是串流对象.如果要将数据从来源取出,可以使用输入串 ...

  10. Spring事务管理之几种方式实现事务

    1.事务认识 大家所了解的事务Transaction,它是一些列严密操作动作,要么都操作完成,要么都回滚撤销.Spring事务管理基于底层数据库本身的事务处理机制.数据库事务的基础,是掌握Spring ...