IFE_part1(task1-3)

以百度前端学院IFE2015为教程：

IFE百度前端学院

创建一个HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>IFE_part1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="IFE_CSS1.css">
</head>
<body>
    <!-- 创建一个一级标题 -->
    <h1>https://github.com/SGtee</h1>

    <!-- 创建一个无序列表 -->
    <ul>
        <li><a href="IFE_part1.html">Home Page</a></li>
        <li><a href="https://github.com/SGtee">My github</a></li>
    </ul>

    <!-- 创建一个二级标题 -->
    <h2>二级标题</h2>

    <!-- 创建一个段落 -->
    <p>这是我HTML中的一个段落</p>

    <!-- 插入一张图片，并用CSS给图片添加border并设定border大小和颜色 -->
    <img src="Wayne-02.jpg" alt="">
</body>
</html>

 

 通过外联CSS添加样式（<link rel="stylesheet" href="IFE_CSS1.css">）：

 

/* 设定一级标题的颜色 */
h1 {
    color: blue;
}

/* 设定二级标题的颜色 */
h2 {
    font-size: 12px;
}

/* 设定段落的字体大小和颜色、背景颜色 */
p {
    font-size: 12px;
    color: yellow;
    background-color: black;
}

/* 设定图片的border大小及样式、颜色 */
img {
    border:2px;    
    border-style: solid;
    border-color: red;
}

通过教程学会：

  • 了解什么是Web
  • 了解什么是HTML
  • 了解一些基本的HTML语法及标签
  • 能够写出自己的第一个HTML
  • 了解什么是CSS
  • 了解HTML与CSS是如何一起工作的
  • 了解基本的CSS语法
  • 尝试使用几个简单的CSS属性
  • 对于HTML及CSS的发展史有一个大概的了解
  • 明白HTML5和之前的版本大概有什么区别

关于HTML以及CSS的基础知识可在MDN查阅文档

 

posted @ 2018-04-19 01:16  小粒旬  阅读(205)  评论(0)    收藏  举报