当前位置:   article > 正文

编程小白 学习Java的第一天_小白学习java第一天

小白学习java第一天

 开始是我用今天学的知识做的一个简单的静态网页,都是用html知识,涉及一点CSS的内容,本人小白,学习JAVA 的第一天,全端学习为期1周。

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--UTF-8 网页字符编码  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>
<body>
    <!-- &gt;是>符号 -->
    <!-- &lt;是<符号 -->
    <!--HTML 字符实体有很多,可以参考菜鸟教程  -->
    <a href="https://www.runoob.com/html/html-entities.html">菜鸟教程html字符实体的网址</a>
​
   <h2 align="center">
     <strong >
        黄鹤楼送孟浩然之广陵
     </strong> 
   </h2>
<p align="center">朝代:唐朝 作者:李白  &copy;</p>   
 <hr>
    <p style="color:red ;" align="center">
         <em><strong>故人西辞黄鹤楼,烟花三月下扬州。</strong> </em>
         <br>
         <br>
         <em>
             <strong>孤帆远影碧空尽,唯见长江天际流。</strong>
         </em>
    </p>
</body>
​
​
<!-- strong标签 加粗的意思  -->
          <!-- em标签 是斜体的意思 -->
          <!--br标签换行  -->
          <!-- hr标签水平线 -->
             <p style="text-align: center;">
              <img src="https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg" alt="雪山" width="250" >
             </p><br><br><br>
•          <!-- <img src="图片地址" alt="图片名字" width="250" align="center"> -->
•          
​
          <a href="C:\Users\燕盛昊\Desktop\myself\6.06\第一个HTML.html">第一个HTML</a>
         <!-- <a href="本地html的文件夹位置">链接名字</a> -->
</html>

标签

简单标签

  1. strong标签和b标签一样都是加粗字体

  2. i标签和em标签也一样都为斜体字体

  3. br标签为换行

  4. hr标签为水平线标签

  5. p标签的使用

重点标签

a超链接标签:

<a href="网页地址">链接名字</a> 

图片链接标签:

<img src="图片网页地址/图片本地网页地址" alt="图片替代名字"width="大小"

字符实体

对于字符实体,比如:>  为 <

字符实体可以去菜鸟教程去看看学习,非常方便

<a href="https://www.runoob.com/html/html-entities.html">菜鸟教程html字符实体的网址</a>

自学CSS的一些知识

比如:如何把一个图片放到中间,或者其他位置?

这个以居中为例:

首先把图片标签放在P标签内,然后再p标签内输入style="text-align: center;"如下:

<p style="text-align: center;">
<img src="https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg" alt="雪山" width="250" >
             </p>

如何在在段落开头空两行?如何控制行间距:输入一下代码

stytle ="text=indent: 2em;line-height:20px"

<p style="text-indent: 2em;line-height:20px">
    在皮克斯,每一部电影都是商业与艺术的双赢。不管这些电影是艺术作品,还是商品,细节都是至关重要的,是决定成败的关键。人们似乎也听过许多关于细节的胜利的故事,但是在皮克斯,设计师们一个个都是完美主义者,细节显然成了皮克斯的负担。节和企业应有的效率面前,艾德·卡特姆做出了明智的决策。皮克斯有一个现象,被我们的制片人叫作“看不见的完美硬币(the perfect coin)”,这个词指代的是皮克斯制作人员对细节的精益求精。
    有时候,被我们的制片人凯瑟琳?萨拉菲安称为“床头柜上一枚没人会注意到的硬币”这样的细节,也会引得我们的工作人员花上几天甚至数周的时间悉心打磨。
</p> 

 

 

 

 

 

 

总结

以上是今天学的关于html和css的知识点,本人编程小白,锻炼自己学习Java后端150天。今天是第一天发博客也是为了养成一个良好的习惯,是把博客当做总结来学习的。

今天老师布置了一个小作业也一同发布到博客;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业01</title>
</head>
<body>
    <h1 align="center" >看不完的完美硬币:细节的负担</h1>
    <h2 align="center">创新公司皮克斯的启示</h2>
    <hr>
    <div style="text-align: center;">
​
    
<p >
    <img src="https://topbester.com/images/ebook6/5513ca1aN34a67a48.jpg" alt="皮克斯的启示" width="200px">
</p>   
    <p> 
       <em>细节从来都是个好东西,完美的细节往往给我们赢得商业上的胜利。<br><br>
      但是,在皮克斯,这一家满是完美主义设计师的企业里,细节竟然成了负担。<br><br>
      怎么打造完美的细节?又怎么赢得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答。
       </em><br>
   </p>
    <h2>看不见的完美硬币:细节的负担</h2>
 <p style="text-indent: 2em;line-height:20px">
    在皮克斯,每一部电影都是商业与艺术的双赢。不管这些电影是艺术作品,还是商品,细节都是至关重要的,是决定成败的关键。人们似乎也听过许多关于细节的胜利的故事,但是在皮克斯,设计师们一个个都是完美主义者,细节显然成了皮克斯的负担。节和企业应有的效率面前,艾德·卡特姆做出了明智的决策。皮克斯有一个现象,被我们的制片人叫作“看不见的完美硬币(the perfect coin)”,这个词指代的是皮克斯制作人员对细节的精益求精。
    有时候,被我们的制片人凯瑟琳?萨拉菲安称为“床头柜上一枚没人会注意到的硬币”这样的细节,也会引得我们的工作人员花上几天甚至数周的时间悉心打磨。
</p> 
<p style="text-indent: 2em;line-height:20px"> 
        凯瑟琳是《怪兽电力公司》一片的制作人员,影片中有一幕戏可以形象地向我们阐释到底什么是“看不见的完美硬币”。在这幕戏中,好奇的小布第一次来到麦克和萨里的公寓,还在蹒跚学步的小婴儿四处探索起来。两个怪物想要制止她,而她还是一步步走到了两摞高高堆起的CD旁,“别乱动!”麦克大喊起来,可是小女孩还是从90多张CD盒摞成的“高塔”底部抽出一张, CD全部倒塌散落在了地板上。麦克抱怨道:“哎,那些CD都是按字母顺序排列好的!”小女孩摇摇摆摆地走开了。这幕场景前后不到3秒钟,观众们只能够看到几个CD盒而已,但皮克斯的制作人员不仅为每一个CD盒制作了封面,还使用了可计算物体在运动时渲染效果变化的着色器。 “你能看到所有CD盒吗?看不到。”萨拉菲安接着说,“把所有CD盒全部设计一遍,这工作有意思吗?其实挺有意思的。我们还真有几位工作人员觉得观众能在近镜头里把每张CD都看得一清二楚,所以就任劳任怨地把每张CD都雕琢了一番。也许,这其中的乐趣只有当事人才能体会吧。”
</p>
</div>
​
</body>
</html>

网页如下:

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/121264
推荐阅读
相关标签
  

闽ICP备14008679号