前端小白继续入门(*+﹏+*)
2017-06-14 本文已影响0人
conanskyforce
让我们接着昨天的教程继续，今天在继续深入HTML！
让我们以一个实例来开头
还是打开记事本，跟着我敲出下边的代码
<!doctype html>
<html>
<head>
<title>
我就是标题! 牛逼哄哄的标题
</title>
<script>
window.onload=function(){
console.log("现在的时间是: "+new Date());
};
</script>
<style>
*{
margin:0;
padding:0;
text-align: center;
}
#logo{
width: 270px;
height: 129px;
}
#search{
height: 35px;
width: 500px;
border:solid 1px lightblue;
text-align: left;
padding-left: 5px;
}
.search{
margin:3px auto;
}
#submit{
width: 100px;
height: 36px;
color:white;
font-weight: bold;
background-color: #3385ff;
background-clip: border-box;
border:1px;
margin-top: 1.5px;
margin-left: -5px;
cursor: pointer;
}
#submit:hover{
background-color:#317ef3;
}
#form{
margin-top: 22px;
}
.container{
margin-top: 150px;
}
</style>
<script>
window.onload=function(){
var submit = document.getElementById('submit');
var search = document.getElementById('search');
submit.onclick=function(e){
e.preventDefault();
var url = "https://www.baidu.com/s?wd="+search.value;
window.location.href=url;
}
}
</script>
</head>
<body>
<div class="container">
<div class="logo">
\<\img id="logo" src="https://www.baidu.com/img/bd_logo1.png" alt="logo" >;
</div>
<div class="search">
<form id="form" action="https://www.baidu.com/s">
<span>
<input id="search" type="text">
</span>
<span>
<input id="submit" type="submit" value="百度一下">
</span>
</form>
</div>
</div>
</body>
</html>
当然啦，敲出这些需要不少时间，那你就直接复制粘贴吧！///_
注意去掉
\<\img id="logo" src="https://www.baidu.com/img/bd_logo1.png" alt="logo" >;
里边的两个反斜杠
主要是看效果，
如果没有意外，你看到的应该是这个页面
your-baidu.png
可以试试输入关键字哦，会自己跳到结果页面的
<script>标签之间的就是JavaScript脚本，这可是控制网页行为、样式、动作、几乎无所不能的强大语言哦！里边的内容我们明天开讲！
<style>标签之间的就是CSS样式了,之后我们也会讲解
可以看到这次我们又多了<div>标签,<img>标签,<span>标签,<input>标签,<form>标签
div是division是缩写，顾名思义，分割的意思,你可以将它理解成一个容器，能够装其他的标签元素，然后集中写样式,或绑定事件等
img是image的缩写，顾名思义,就是图片的意思，如果要插入一个图片，就可以照着上边那样的格式来 写
span标签跟div类似，都是“容器”,但他们在样式表现上还是有比较大的区别的，
input标签表示的是表单元素,用type属性设置为不同的表单元素
form相当于是表单元素的容器，一般有表单，你肯定都会涉及到单选啊，多选啊，输入啊，然后提交之类的，而这个form上处理这些东西就比较方便。
你可以将
window.onload=function(){
console.log("现在的时间是: "+new Date());
};
里边的console.log改为alert然后在刷新网页，是不是每次刷新都会看到显示当前的时间呢！
这就是JavaScript的功能 明天才是重头戏啊,好好准备下JavaScript的教程,HTML,CSS是挺杂的不过不难.
