文档章节

html/css/javascript练习代码

o
 osc_4nmshwhm
发布于 2018/08/07 11:40
字数 649
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

这两天心血来潮学习了前端,自己也做了个小小的网页,不好看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>");
}

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
JavaScript入门篇练习代码笔记

摘要:通过学习快速认识JavaScript,熟悉JavaScript基本语法、窗口交互方法和通过DOM进行网页元素的操作,学会如何编写JS代码,如何运用JavaScript去操作HTML元素和CSS样式,JavaScript入门篇...

灰牛WEB
04/10
0
0
【JS学习笔记】10.JavaScript DOM操作

文章目录 什么是 DOM? DOM的作用: HTML 文档的树状结构 HTML的DOM树 Window对象 常用属性 常用方法 history对象 常用方法 location对象 练习 练习2:下拉列表直接跳转至该项网页 document...

jacksonCya
06/22
0
0
【译】前端练级攻略

译者:前端小智 原文:medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我记得我刚开始学习前端开发的时候。我看到了很多文章及资料,被学习的资料压得喘不过...

前端小智
2019/05/10
0
0
HTML+CSS+JS 传智 详细笔记

  HTML(1)- -毕向东老师对Html的简介 CSS- -毕老师对CSS的简介 Javascript- -毕老师对JS的简介 html&css等等练习表(W3Cscholl) js练习表回顾 HTML(2)- -传智前端课程系列笔记 HTML(3)- -...

osc_0q2mvgjv
2019/04/10
21
0
jquery 插件学习

练习jquery上的一个插件编写 1.标准的3个基本内容,根目录里面创建2个文件夹(存放css和js)和1个html页面文件; 2.测试的主html页面代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http......

osc_azsn5lm2
2018/09/05
2
0

没有更多内容

加载失败,请刷新页面

加载更多

我们一定会在人生的更高处相见的

2020.6.7 我知道没人会看到 2021.6.7 我再来写下 每天进步一点点 一年后我就是不一样的我 你也是。 高考加油!

osc_9oidllr2
11分钟前
0
0
esp8266物联网开发一:MicroPython初战江湖

用esp8266做的物联网开发,涉及到固件烧写,固件擦除,代码编写等方面,做一一记录。 1. 固件烧写 首先,下载固件烧写工具:https://www.espressif.com/sites/default/files/tools/flash_dow...

osc_s2b5kacl
12分钟前
14
0
获小黄衫有感

这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzu/2020SpringW/ 一、与软工的开始 在选课的时候咨询学长意见,听上届学长说这门课会有寒假作业,心里很忐忑,又抱有侥幸心理——可能...

osc_r5t7sskd
14分钟前
0
0
ppt 视频不显示控制条

1 正常解决方法 2 如果还不能显示可能是ppt是兼容模式,另存为非兼容模式就好了 后缀是.ppt 现存就好了

osc_hzf6peqc
15分钟前
15
0
五笔经常打不出来的字:温故而知新

遍 ynmp 凸凹 hgmm 凸 hgm 凹mmgd

osc_iy56i6w3
16分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部