【task0001】HTML, CSS基础

任务目的：掌握HTML、CSS基础知识、能够较为熟练地使用HTML、CSS编写页面

任务前说明：本任务1-6小节的内容是面向零基础的同学，如果您已经有一定的基础，可以 跳过前面你觉得确认已经掌握的内容。 对于零基础的同学，1-5小节建议用一天时间，第6小节建议用两到三天时间。

1.建立你的第一个网页

这个页面中，需要有以下内容：

• 一个一级标题，内容是你的Github账号
• 一个无序列表，包括2个项目，里面每一个项目是一个链接，分别链接到task0001.html以及你的微博（或其他什么网站）
• 一个二级标题，内容随意（不能违法、反动、色情等）
• 一个段落，内容随意（不能违法、反动、色情等）
• 一个图片（不能违法、反动、色情等）。

预期效果：

任务解析：

1. 在h1标签中插入自己的Github账号。
2. 注意段落前圆点，说明是无序排列，应用ul, li标签。插入链接因用a标签。
3. 二级标题标签为h2。
4. 段落标签为p。
5. 图片标签为img，并在标签内的src中插入图片链接。

最终代码：

<h1>Uris863</h1>
<ul>
<li><a href="task0001.html">HomePage</a></li>
<li><a href="https://juejin.cn/user/369882145764535">Blog</a></li>
</ul>
<h2>这是一个二级标题</h2>
<p>这是我的第一个html页面，这里有一个文字段落</p>
<img src="./img/1.png" >

最终效果：

2.给你的网页加点样式

学习以下CSS是怎么运作的，然后创建一个task0001.css的文件，并在task0001.html中引入它，然后我们对task0001.html做一些让他变得花哨一点的事情：

• 让一级标题的文字颜色变成蓝色
• 二级标题的文字大小变成14px
• 段落的文字大小变成12px，文字颜色是黄色，带一个黑色的背景色
• 图片有一个红色的，2px粗的边框

预期效果：

任务解析：

1. 创建一个task001.css文件，用link标签在html文件的head区域引入。
2. 在css文件中在h1标签内添加 color并赋值。
3. 在h2标签内添加 font-size并赋值
4. 在p标签内添加 font-size, color 与 background-color并赋值。
5. 在img标签内添加 border并赋值。

最终代码：

h1 {
    color: blue;
}

h2 {
    font-size: 14px;
}

p {
   font-size: 12px;
   color: yellow;
   background-color: black;
}

img {
    border: 2px solid red;
}

最终效果：

3. 稍微放松一下

了解一下HTML及CSS的发展史，了解一下HTML4到5究竟变化了什么

就其核心而言， HTML 是一种相当简单的、由不同元素组成的标记语言，它可以应用于文本片段，使文本在文档中具有不同的含义（它是一个段落吗？它是一个项目列表吗？它是一个表格吗？），将文档结构化为逻辑块（文档是否有头部？有三列内容？有一个导航菜单？），并且可以将图片，影像等内容嵌入到页面中。

层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。

了解HTML4到HTML5的变化请点击此处。

4. CSS基础

请点击此处。

5. 让页面丰富起来

text-indent: 设置段前距，可用0，30%，-3em;
text-transform: 设置首字母大写，全文大写小写等，可用capitalize, uppercase, lowercase等；
text-decoration: 设置有无下划线以及下划线样式等，可用underline, dotted, red；
text-align: 定义行内内容的对齐，可用left, right, center, justify等；
word-spacing: 字间距设置；
white-space； 设置处理元素中的空白，可用normal, no-wrap等；
color: 字体颜色；
line-height: 行高；
font: 字体；
font-family: 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。
font-size: 字体大小。
font-weight: 字体粗细。
font-face: 定义了一个字体的外部属性。

6.盒模型及定位

• 用两种方法来实现一个背景色为红色、宽度为960px的<DIV>在浏览器中居中
• 有的圆角矩形是复杂图案，无法直接用border-radius，请在不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形
• 用两种不同的方式来实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化
• 实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化

任务解析：

1. 实现div元素浏览器居中的方式:

利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。
利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。
使用flex布局，通过align-items:center和justify-cotent:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。
2. 不适用border-radius的圆角矩形：链接。
3. 三列布局：

 .container{
        display: flex;
        height: 300px;
    }
    .left{
        width: 100px;
        background-color: red;
    }
    .middle{
        flex: 1;
        background-color: green;
    }
    .right{
       width: 100px;
        background-color: blue;
    }
   <div class="container">
    <div class="left">qqq</div>
    <div class="middle">qqq</div>
    <div class="right">wwww</div>
</div>

或者

.container{
display: flex;
height: 300px;
}
.left {
width: 100px;
flex: 0 0 100px
}
.middle {
flex: 1 1 auto;
}
.right {
width: 100px;
flex: 0 0 100px
}

4. 容器数量随着浏览器宽度变化而变化：

<div id="float-container">
         <div class="float-element"></div>
         <div class="float-element"></div>
         <div class="float-element"></div>
         <div class="float-element"></div>
         <div class="float-element"></div>
         <div class="float-element"></div>
         <div class="float-element"></div>
         <div class="float-element"></div>
         <div class="float-element"></div>
</div>

#float-container {
    background-color: red;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.float-element {
    float: left;
    width: 50px;
    height: 30px;
    background-color: blue;
    margin: 10px;
}