中国加油!武汉加油!
假期闲来无事,学了一些前端的知识,是有关于网页的制作。例如html、css、js、等。下面是我用html学到的东西做的一个网页。(初学者0.0,做的不好,如果代码有错误请指出0.0)
中国加油!武汉加油!
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>疫情防控科协在行动</title>
<style type="text/css">
.img1{ /*图片2在网页上的坐标*/
position:absolute;
left:115px;
top:190px;
}
.img2{ /*图片3在网页上的坐标*/
position:absolute;
right:115px;
top:190px;
}
.img3{ /*图片10在网页上的坐标*/
position:absolute;
left:50px;
top:2500px;
}
.img4{ /*图片7在网页上的坐标*/
position:absolute;
right:50px;
top:2500px;
}
.img5{ /*图片6在网页上的坐标*/
position:absolute;
left:100px;
top:3600px;
}
.img6{ /*图片11在网页上的坐标*/
position:absolute;
left:450px;
top:3600px;
}
.img8{ /*图片12在网页上的坐标*/
position:absolute;
right:450px;
top:3600px;
}
.img9{ /*图片8在网页上的坐标*/
position:absolute;
right:100px;
top:3600px;
}
.img10{ /*图片1在网页上的坐标*/
position:absolute;
right:760px;
top:3500px;
}
body{text-align:center}
.txt01{ /*诗第一部分在网页中的位置*/
background:url(图片.jpg) no-repeat;
width:400px;
height:2500px;
overflow:hidden;
margin:50px 0 0 200px;
}
</style>
</head>
<body>
<!--网页背景图-->
<body background="15.jpg">
<h1 style="background-color:red;font-size:50px">中国加油!武汉加油!</h1>
<!--视频元素-->
<video width="1200" height="400" controls autoplay>
<source src="4.mp4" type="video/mp4">
<source src="4.ogg" type="video/ogg">
<source src="4.webm" type="video/webm">
</video>
<hr> <!--折线(下划线)-->
<!--图片2的长宽-->
<div class="img1">
<img src="2.jpg" width="340" height="230"/>
</div>
<hr>
<!--图片3的长宽-->
<div class="img2">
<img src="3.jpg" width="340" height="230"/>
</div>
<hr>
<!--图片7的长宽-->
<div class="img4">
<img src="7.jpg" width="350" height="1000"/>
<hr>
</div>
<!--图片10的长宽-->
<div class="img3">
<img src="10.jpg" width="350" height="1000"/>
<hr>
</div>
<!--图片6的长宽-->
<div class="img5">
<img src="6.jpg" width="200" height="200"/>
<hr>
</div>
<!--图片11的长宽-->
<div class="img6">
<img src="11.jpg" width="200" height="200"/>
<hr>
</div>
<!--图片8的长宽-->
<div class="img9">
<img src="8.jpg" width="200" height="200"/>
<hr>
</div>
<!--图片12的长宽-->
<div class="img8">
<img src="12.jpg" width="200" height="200"/>
<hr>
</div>
<!--图片2的长宽-->
<div class="img10">
<img src="1.jpg" width="340" height="230"/>
<hr>
</div>
<!--诗第一部分-->
<div class="txt01">
<h1 style="font-size:50px">希望</h1>
<h1 style="font-size:50px">——武汉加油</h1>
<p style="font-size:30px">这是一个特殊的新岁</p>
<p style="font-size:30px">在新春的梦里</p>
<p style="font-size:30px">在花开之前</p>
<p style="font-size:30px">天空消沉</p>
<p style="font-size:30px">万门闭户</p>
<p style="font-size:30px">没有什么重要</p>
<p style="font-size:30px">都在家里</p>
<p style="font-size:30px">我们并不脆弱</p>
<p style="font-size:30px">可欢乐已被摧毁</p>
<p style="font-size:30px">平静已被打破</p>
<p style="font-size:30px">虽然内心仓惶</p>
<p style="font-size:30px">但面对命运我们不再逃避</p>
<p style="font-size:30px">前路虽坎坷 但人间有情</p>
<p style="font-size:30px">病毒虽无情 但人人有爱</p>
<p style="font-size:30px">在蔚蓝的天空</p>
<p style="font-size:30px">有只鸟儿在自由飞翔</p>
<p style="font-size:30px">它的名字叫希望</p>
<p style="font-size:30px">它飞呀飞</p>
<p style="font-size:30px">飞过长江</p>
<p style="font-size:30px">飞到武汉</p>
<p style="font-size:30px">在山野上</p>
<p style="font-size:30px">在清风里</p>
<p style="font-size:30px">我们望向它飞翔的方向</p>
<hr>
<!--诗第二部分-->
<div style="left: 800px; position: absolute; top: 610px;">
<p style="font-size:30px">望向远方的长路</p>
<p style="font-size:30px">在水塘边</p>
<p style="font-size:30px">在稻田里</p>
<p style="font-size:30px">我们望向它飞翔的方向</p>
<p style="font-size:30px">望向春天的向往</p>
<p style="font-size:30px">在白云边</p>
<p style="font-size:30px">在高山里</p>
<p style="font-size:30px">我们望向它飞翔的方向</p>
<p style="font-size:30px">望向平安的祝福</p>
<p style="font-size:30px">在父母边</p>
<p style="font-size:30px">在兄妹旁</p>
<p style="font-size:30px">我们望向它飞翔的方向</p>
<p style="font-size:30px">望向真爱的人间</p>
<p style="font-size:30px">此时此刻</p>
<p style="font-size:30px">我们不分彼此</p>
<p style="font-size:30px">此时此刻</p>
<p style="font-size:30px">我们命运相连</p>
<p style="font-size:30px">在党的号召下</p>
<p style="font-size:30px">万众一心</p>
<p style="font-size:30px">每个人都满怀信心</p>
<p style="font-size:30px">每个人都满怀希望</p>
<p style="font-size:30px">每个人都发出耀眼的光芒</p>
<p style="font-size:30px">每个人都是大地上的星辰</p>
<p style="font-size:30px">让我们一起来</p>
<p style="font-size:30px">汇聚成江河</p>
<hr>
</div>
<!--诗第三部分-->
<div style="left: 1300px; position: absolute; top: 610px;">
<p style="font-size:30px">让我们一起来</p>
<p style="font-size:30px">让天空蔚蓝</p>
<p style="font-size:30px">武汉不输 我们会坚持下去</p>
<p style="font-size:30px">武汉不哭 我们会一直陪你</p>
<p style="font-size:30px">武汉不累 我们会奋勇前行</p>
<p style="font-size:30px">武汉加油 我们会静待花开</p>
<p style="font-size:30px">武汉必胜 我们会一往无前</p>
<p style="font-size:30px">这是一个病毒肆虐的新春</p>
<p style="font-size:30px">这也是一个满怀希望的新春</p>
<p style="font-size:30px">春天花会开</p>
<p style="font-size:30px">可我们都不曾在意</p>
<p style="font-size:30px">我们会珍惜</p>
<p style="font-size:30px">我们会珍惜这一季花开</p>
<p style="font-size:30px">因为我们都在以生命的意义怒放</p>
<p style="font-size:30px">这个春天 让我们一起走过</p>
<p style="font-size:30px">这个春天 让我们共同携手</p>
<p style="font-size:30px">生活还要继续</p>
<p style="font-size:30px">民族还要崛起</p>
<p style="font-size:30px">经历了这么多</p>
<p style="font-size:30px">我们已经不可阻挡</p>
<hr>
</div>
<!--宣传语-->
<div style="left: 600px; position: absolute; top: 2500px;">
<h1 style="font-size:50px">疫情防控宣传语</h1>
<p style="font-size:30px">1.科学应对、群防群控、战胜疫情!</p><hr>
<p style="font-size:30px">2.重科学、听官宣、不信谣、不传谣!</p><hr>
<p style="font-size:30px">3.早发现、早报告、早诊断、早隔离、早治疗!</p><hr>
<p style="font-size:30px">4.疫点返乡回到家、居家观察14天、出现症状要报!</p><hr>
<p style="font-size:30px">5.少出门、多居家、网络拜年乐大家!</p><hr>
<p style="font-size:30px">6.不要吃野味、蒸煮要到位!</p><hr>
<p style="font-size:30px">7.接触家畜和家禽、个人防护要到位!</p><hr>
<p style="font-size:30px">8.个人防护三要素:戴口罩、勤洗手、多通风!</p><hr>
</div>
<!--二维码-->
<div style="right: 810px; position: absolute; top: 3750px;">
<h2>陇院科技创新协会宣</h2>
</div>
</body>
</html>
总结
html是一种超文本标记语言,上手简单,它不像C语言(C语言是名副其实的编程语言)那样学起来复杂。html(html5)、css(css3)、js(js是web的编程语言)分别代表着网页的内容、样式与布局、动作。
其实做网页(网站)还有许多其他的语言,例如Python,Python是一个强大的语言,可以做网页还可以做人工智能等等。