[北京|结业弟子]JS-张新|2018年08月11日的日报-技能树.IT修真院

发表于： 2018-08-11 21:01:55

1 700

来修真院的第一天

今天完成的事情：

1.对任务一中的html和CSS有了大致的理解，html是用来描述网页的一种语言，指的是是超文本标记语言；css层叠样式表是一种用来表现html或者xml等文件样式的计算机语言；

2.学习了html标签的使用方法，<html>与</html>之间的文本描述网页，<body>与</body>之间的文本是可见的网页内容，<h1>与</h1>之间法人文本被显示为标题，<p>与</p>之间的文本被显示为段落；

3.学习了CSS的特点包括丰富的样式定义，易于使用和修改，多页面应用，层叠，页面压缩。语言基础包括属性和属性值。语言标准中识别符只能包括A~Z，a~z，0~9等字符，加上连字符"——"和下划线“-”。识别符不能以数字开头，以连字符和下划线开头是不允许的。只有属性，属性值，单位，伪类，伪元素和@规则可以用连字符开头。同时其他元素名称，类和ID标识符也是不允许连字符开头的。：

4.学会了如何使用css样式，包含（1）外部样式表是当样式应用到很多页面的时候，外部样式表将是理想的选择，使用外部样式表，就可以通过更改一个文件来改变整个站点的外观。

<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

（2）内部样式表当单个文件需要特别多的样式时，就可以使用内部样式表。可以再head部分通过<style>标签定义内部样式表。

<head><style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style></head>

（3）内联样式当特殊的样式需要用到个别元素时，就可以使用内联样式。使用内联样式的方法是相关的标签中使用样式属性。样式时行可以包含任何css属性。一下实例显示出如何改变段落的颜色和左外边框。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

5.使用编码器为html添加了标签并添加了css样式

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
</style>
</head>
<body>
<P>
<span>T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</P>
<p>在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 "Algerian"
</p>
</body>

</html>

：

6.对盒子模型有了大概的了解，网页设计中常听到的属性名：内容content，内边距padding，边框border，外边距margin，css盒子模式都具备这些属性。每个盒子都有边界，边框，填充，内容四个属性。

7.学习了css浮动中的几个应用：

（1）.float属性的简单应用

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img 
{
float:right
}
</style>
</head>

<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="/i/eg_cute.gif" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

</html>

；

（2）.将带边框和边界的图像浮动于段落的右侧

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img 
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
</head>

<body>
<p>在下面的段落中，图像会浮动到右侧，并且添加了点状的边框。我们还为图像添加了边距，这样就可以把文本推离图像：上和右外边距是 0px，下外边距是 15px，而图像左侧的外边距是 20px。</p>
<p>
<img src="/i/eg_cute.gif" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

</html>

；

（3）.带标题的图像浮动与右侧

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
</head>

<body>
<div>
<img src="/i/eg_cute.gif" /><br />
CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>
在上面的段落中，div 元素的宽度是 120 像素，它其中包含图像。div 元素浮动到右侧。我们向 div 元素添加了外边距，这样就可以把 div 推离文本。同时，我们还向 div 添加了边框和内边距。
</p>
</body>

</html>

；

（4）.是段落的首字母浮动与左侧

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>

<body>
<p>
<span>T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>
在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 "Algerian"
</p>

</body>
</html>