Blogger Information
Blog 11
fans 0
comment 0
visits 6528
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML及CSS初步基础-2018年08月13日22 :34
碎笺的博客
Original
539 people have browsed it
<!DOCTYPE HTML>
<html>
   <head>
      <title>
         第一个html代码
      </title>
      <meta charset="utf-8">
      <!--设置为utf-8的编码-->
      <link rel="stylesheet" type="text/css" href="./style/style.css">
      <!-- link定义文档外部资源的关系 链接外部文件,此处链接的是style文件夹下的style.css的外部样式-->
      <link rel="shortcut icon" type="image/x-icon" href="./img/1.png">
      <!-- 将title文字前加入小图片-->
      <style type="text/css">
         /*tag标签名、id名(加“#”)class名(加“.”)*/
         #box{width:100px;height: 100px;background: pink}
         /*id选择器*/
         .cend{width: 100px;height: 100px;background: blue}
         a{color:red;}
         /*属性选择器*/
         /*属性选择器*/
	a[href="http://www.php.cn/"]{color:blue;}
        a[href="demo2.html"]{color:pink; }
        /*派生选择器 根据文档上下文关系来定义样式*/
        div a{color: #000;}
      </style>
      <!-- 针对当前页添加的内部样式-->
   </head>
   <body>
      <a href="https://www.baidu.com">百度</a><!-- 链接到百度 -->
      <a href="http://www.php.cn/">php中文网</a>
      <a href="demo2.html">demo2</a><a href="#">外部链接</a><!-- 链接到外部文件 -->
      <div id="box">
         id选择器
      </div>
      <div class="cend">
         class选择器
      </div>
   </body>
</html>

总结:初步认识了html及css的基础,了解了如何在html文件中引用外部文件(图片及样式)。在不使用只能联想编程的情况下,部分字节容易记混及错误,所以对于关键字还需要多加记忆,代码需要多加练习!

以下为程序执行截图:

(关于执行结果:差强人意,通过定义内部样式实现添加背景色及给链接字符添加颜色。)

TIM图片20180813033216.png

Correction status:qualified

Teacher's comments:缺少手写代码!
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post