Blogger Information
Blog 17
fans 0
comment 0
visits 10679
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
前端开发知识 html文档_css基础练习_2018-08-11 15:50
斯达融的博客
Original
566 people have browsed it

一:主要知识点:html文档结构知识;css相关基础知识。

二、练习代码:

   <!DOCTYPE html>  <!-- html声明 -->

<html>

<!-- 定义网页头部  -->

<head>

  <!-- 网页字符编码格式 -->

  <meta charset="UTF-8">

  <!-- 定义视窗 -->

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <!-- 定义网页标题 -->

  <title>斯达融_108749_0810</title>

  <!-- 标题头部图片指定 -->

  <link rel="shortcut icon" href="imgages/footlogo.png" type="imgage/x-icon">

  <!-- 引入外部样式表文件  当前static目录下-->

  <link rel="stylesheet" href="static/style.css" type='text/css'>

  <!-- 内部样式表 -->

  <style type="text/css">

  body{

    background: blue;  /* 标签选择器 */

  }

  #box{

     text-align: center;   /* ID选择器 */

     width: 100px;

     height: 100px;

     margin: 10px;

     background: pink;

  }

  .main{

     color: red;     /* 类选择器 */

     margin: 10px;

     width: 100px;

     height: 100px;

     background: yellow;

     text-align: center;

  }

  a[href="https://www.baidu.com"]{  /* 属性选择器 */

    color: green;

  }

  div a{           /* 派生选择器 */

    margin: 10px;

    width: 100px;

    height: 100px;

    background: white;

    text-align: center;

  }

  </style>

</head>

<body style="background:blue;">

<!-- 样式优先级:内联样式>内部样式>外部样式 -->

<!-- 选择器优先级:ID选择器最高 -->

<div id="box">aaaa</div>

<div>bbbb</div>

<div > <a href="#"></a></div>

<div><a href="https://www.baidu.com">百度</a></div>

 

</body>

</html>

三、预览图:

企业微信截图_bcea4666-b610-427b-993e-8ca88e72b150.png


总结:

1、html文档 由<html></html>双标签界定,由<head></head> <body></body>两大部分构成;

2、<head>部分可指明 语言、标题、外部文件引入等,<body>部分为显示主体部分。

3、标签有单标签和双标签之分;双标签如:<a></a><html<</html> 单标签如: <img><ht><br><input>;

4、css是为了指定标签内容呈现的外观、颜色、字体、位置等信息的。即css 样式表(包括三种:外部样式、内部样式、内联样式);

5、 css选择器有:(id选择器、标签选择器、类选择器、属性选择器、派生选择器等),其中 id选择器具有唯一性;

6、样式表的优先级为:内联样式>内部样式>外部样式 。

Correction status:unqualified

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