如何自建网站（2）

最新推荐文章于 2024-09-18 09:46:23 发布

lhr218

最新推荐文章于 2024-09-18 09:46:23 发布

阅读量925

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/lhr218/article/details/77879839

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

就上一点html 的基础代码，制作你的网页。

随意新建一个文本，记事本都可以，然后开始敲代码

首先，你需要一个头

<!doctype html>
<html lang="en">
    <title>Haoran's website</title>    <!--这里放你的标签，显示在网页的 -->
    
  </head>

</html>

然后是body

 <body>
  <body background="123.jpg">           <!--引入背景图片-->
  <img src="12345.jpg" width="200px"; height="300px"; style="position:absolute; right:300px; top:20px; ">     <!-->插入图片并定义图片绝对位置<-->
 <img src="1234.jpg" width="200px"; height="300px"; style="position:absolute; right:80px; top:20px; "> <h1> Welcome to Haoran's zone<h1>     <a href="http://lhr218.cn3v.net/airplane">Play the sky plane game</a> <!--将这段话引用到下面这个链接--> <h3><font
 color="red">          Enter to begin, 'J' shoot,'K' bomb</font><h3> <!--h1,h3 这些代表了你使用的文字标签大小--> <h3> Name: Haoran Liu<h3> <h3> Major: Computer engineering<h3> <h3> Year: 08/2017<h3> <h3> Birth: 02/18/1995<h3> <h3> Facebook: <a href="https://www.facebook.com/profile.php?id=100021634962992">Haoran's
 facebook</a> 
 <h3> Blog: <a href="http://blog.csdn.net/lhr218">CSDN</a> <body>



有了这个那你的个人简单的网页就编写好了，保存成html格式。 好可以试试用浏览器打开。

<!--...-->这个东西是html的注释语句。感觉很萌。 然后还有一些用法，比如导入视频
<div style="position:absolute; right:100px;top:300px; "><video width="400" height="300" controls>  <source src="Haoran's Vedio.mp4" type="video/mp4">  <source src="movie.ogg" type="video/ogg">  <source src="movie.webm" type="video/webm">  <object data="Haoran's Vedio.mp4" width="400" height="300">    <embed src="movie.swf" width="400" height="300">  </object> </video></div>
要记得这些内容的位置都是可以用style 编辑的。
然后比如用什么API，我这里有一个完整的用高德地图API做的网页代码，定位到我的学校




<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html,#container{
        width: 100%;
        height: 100%;
        margin: 0px
      }
    </style>
    <title>GaodedituAPI</title>
    
  </head>
  <body>
   <div id="container" tabindex="0"></div>
   <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ÄúÉêÇëµÄkeyÖµ"></script>
   <script type="text/javascript">
    var map = new AMap.Map('container',{
            resizeEnable: true,
            zoom: 14,
            center: [125.336971,43.85908]
    });
    AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],function(){
            map.addControl(new AMap.ToolBar());
            map.addControl(new AMap.Scale());
            map.addControl(new AMap.OverView({isOpen:true}));
    })
   </script>
  </body>
</html>


That ‘s all