[散修弟子]CSS-9635|2020年01月01日的日报-技能树.IT修真院

发表于： 2020-01-01 23:07:12

2 1130

今天完成的事情：师兄好，在下工作党一枚，准备转行做页面仔，以前没有接触过编程，希望师兄多多指导，最近三天零零散散凑了点时间做到步骤15了，开始学习了<！DOCTYPE html>标签，该标签表示类html5声明引用文档类型DocType Declaration),其中程序员开发的html经历了HTML 2.0,HTML 3.2,HTML 4.01,XHTML 1.0,XHTML 1.1,XHTML 2.0,HTML 5,

XHTML:Extensible Hypertext Mark Language,简称符合XML语法标准的HTML。

HTML 4.01 有三种：Strict-严格的，Transitional-普通的，Frameset-带有框架的。

XHTML 1.0同上。

html含有<title>,<base>,<meta>,<link>.

<title>是整个网页的标题，也就是网页在电脑上显示的时候任务栏的名字。

<base>为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。

<body>：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。

还学习了html的排版标签：

大致分为两类：

文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）

容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

字体标签：包括标题标签(h1~h6),字体标签(front),特殊字符标签( ：空格（non-breaking spacing，不断打空格）,<：小于号（less than）,>：大于号（greater than）,&：符号&,"：双引号,'：单引号,©：版权©,™：商标™,绐：文字绐。其实，#32464是汉字绐的unicode编码。)

还有超链接：主要需要了解外部链接和锚链接，外部链接主要用来链接到外部文件，锚链接：指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。

以及一些图片标签：img和src,需要注意相对路径和绝对路径

相对路径：相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和父路径。

绝对路径：

以盘符开始的绝对路径。或网络路径。

了解了CSS:

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一

使用时要注意：

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置

外部样式表

内部样式表（位于 <head> 标签内部）

内联样式（在 HTML 元素内部）

根据提示写路两个类选择器

.box
{
    width: 80px;
    height: 80px;
    float: left;
}
.yellow
{
    background-color: yellow;
    margin-left: 10px;
}

盒子模型指的是每一个元素都具有四个部分：内容区（content）、填充(padding)、边框(border)和空白边(margin)。

css浮动就参开w3c的介绍，然后尝试写九宫格：

.box
{
    width: 80px;
    height: 80px;
    float: left;
}
.box1
{
    width: 80px;
    height: 80px;
    float: left;
}
.yellow
{
    background-color: yellow;
    margin-left: 10px;
}
.yellow1
{
    background-color: yellow;
    margin-left: 10px;
}

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="./fist.css">
<head>
    <meta charset="UTF-8">
    <title>first</title>
</head>
<body>
    <div class="box yellow"></div>
    <div class="box yellow"></div>
    <div class="box yellow"></div>
    <div class="box1 yellow1"></div>
</body>
</html>