发表于： 2019-04-17 18:45:57
1 669
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
一、查看学习资料--《标签——HTML标签图解》
web标准
- web标准：制作网页要遵循的规范。
- web标准规范的分类：结构标准、表现标准、行为标准。
- 结构：html。表现：css。行为：JavaScript。
web标准总结：
- 结构标准：相当于人的身体。html就是用来制作网页的。
- 表现标准： 相当于人的衣服。css就是对网页进行美化的。
- 行为标准： 相当于人的动作。JS就是让网页动起来，具有生命力的。
HTML结构详解
备注：
- 所有的浏览器默认情况下都会忽略空格和空行
- 每个标签都有私有属性。也都有公有属性。
- html中表示长度的单位都是像素。HTML只有一种单位就是像素。 px
- <!DOCTYPE html><html lang="en"><head>
- <meta charset="UTF-8">
- <title>Document</title></head>
- <body>
- </body>
- </html>
1、文档声明头
任何一个标准的HTML页面，第一行一定是一个以
<!DOCTYPE ……开头的语句。
这一行，就是文档声明头，
头标签
头标签都放在头部分之间。包括：<title>、<base>、<meta>、<link>
<title>：指定整个网页的标题，在浏览器最上方显示。<base>：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。<meta>：提供有关页面的基本信息<body>：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。<link>：定义文档与外部资源的关系。
<!DOCTYPE html>
<!--文档的声明-->
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 字符集用meta标签中的charset定义，meta表示“元”。“元”配置，就是表示基本的配置项目。--><!-- charset就是charactor set（即“字符集”）。用来防止页面出现乱码-->
meta 还有name 属性，<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
可以告诉诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率，这个就跟seo有关，可以提供网站的排名。
<title>Title</title>
网页的标题 title也是有助于SEO搜索引擎优化的。
</head>
<body>
</body>
</html>
3、<body>标签的属性
其属性有：
bgcolor：设置整个网页的背景颜色。background：设置整个网页的背景图片。text：设置网页中的文本颜色。leftmargin：网页的左边距。IE浏览器默认是8个像素。topmargin：网页的上边距。rightmargin：网页的右边距。bottommargin：网页的下边距。
HTML标签是分等级的，HTML将所有的标签分为两种：
文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。
1、p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。
块级标签 <div>和<span>
div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”
div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。
div标签的属性：
align="属性值"：设置块儿的位置。属性值可选择：left、right、 center。
<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。
如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。
所以，我们亲切的称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式
三、超链接
超链接有三种形式：
1、外部链接：链接到外部文件。举例：
<a href="http://www.baidu.com">百度一下 你就知道</a>
2、锚链接：
指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。
3、邮件链接：
代码举例：
<a href="mailto:smyhvae@163.com">点击进入我的邮箱</a>四、图片标签
能插入的图片类型：
能够插入的图片类型是：jpg(jpeg)、gif、png、bmp
不能往网页中插入的图片格式是：psd、ai
HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。
img标签的其他属性
width：宽度height：高度Align：指图片的水平对齐方式，属性值可以是：left、center、righttitle：提示性文本。公有属性。也就是鼠标悬停时出现的文本。border：给图片加边框（描边），单位是像素，边框的颜色是黑色Hspace：指图片左右的边距Vspace：指图片上下的边距Alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）
8.（知识学习）查看学习资料--《CSS概念——CSS是什么》（0.5小时）
什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
CSS 实例
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS 实例
CSS声明总是以分号(;)结束，声明组以大括号({})括起来:
CSS Id 和 Class
id 和 class 选择器
如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
CSS 创建
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。
如何插入样式表
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
多重样式优先级
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
多重样式优先级深入概念
优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。
优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
优先级顺序
下列是一份优先级逐级增加的选择器列表：
- 通用选择器（*）
- 元素(类型)选择器
- 类选择器
- 属性选择器
- 伪类
- ID 选择器
- 内联样式
（编码实战）为html添加几个标签，并尝试为其添加css样式（0.5小时）
<!DOCTYPE html>
<!--文档的声明-->
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<meta charset="UTF-8">
<!-- 字符集用meta标签中的charset定义，meta表示“元”。“元”配置，就是表示基本的配置项目。-->
<!-- charset就是charactor set（即“字符集”）。用来防止页面出现乱码-->
<title>Title</title>
</head>
<body>
<h1>
这是一个测试
</h1>
<p>
简介简介简介简介简介简介简介简介
<span>
<a href="">详细信息</a>
<a href="">购买</a>
</span>
</p>
</body>
</html>
引入外部的css 样式
10.（知识学习）查看学习资料--《盒子模型概念——盒子模型》（1小时）
CSS盒子模型
盒子模型是样式表（css）控制页面的很重要的概念。
盒子模型，英文即box model。
就是页面上每一个元素 都可以看作一个盒子
但是，图片、表单元素一律看作是文本，它们并不是盒子。因为他们属于盒子中的内容
盒子中的区域
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
- width和height：内容的宽度、高度（不是盒子的宽度、高度）。
- padding：内边距。
- border：边框。
- margin：外边距。
F12
<head>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<style type="text/css">
div{
/*宽度*/
width:200px;
/*高度*/
height: 200px;
/*边框*/
border: 1px red;
/*内边距*/
padding: 20px ;
}
</style>
<meta charset="UTF-8">
<!-- 字符集用meta标签中的charset定义，meta表示“元”。“元”配置，就是表示基本的配置项目。-->
<!-- charset就是charactor set（即“字符集”）。用来防止页面出现乱码-->
<title>Title</title>
</head>
<body>
<h1>
这是一个测试
</h1>
<p>
简介简介简介简介简介简介简介简介
<span>
<a href="">详细信息</a>
<a href="">购买</a>
</span>
</p>
<div>
<p>反反复复烦烦烦烦烦烦烦烦烦烦烦烦烦烦烦法撒旦水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水</p>
</div>
</body>
</html>
上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是221*221。 这是因为还要加上padding、border。宽度和真实占有宽度，不是一个概念！
标准盒子模型
CSS盒模型和IE盒模型的区别：
在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
<body>标签也有margin
<body>标签有必要强调一下。很多人以为<body>标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是<document>，即浏览器。而<body>是<document>的儿子。浏览器给<body>默认的margin大小是8个像素，此时<body>占据了整个页面的一大部分区域，而不是全部区域。
<style type="text/css">
div{
/*宽度*/
width:200px;
/*高度*/
height: 200px;
/*边框*/
border: 10px solid red;
/*内边距*/
padding: 20px ;
/*外边距*/
margin: 10px;
}
</style>
实际盒子的真实宽为：(width +border+padding)*2=460
如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width。
padding区域也有颜色
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有border以内的区域。
background-color: pink;
padding有四个方向
padding是4个方向的，所以我们能够分别描述4个方向的padding。
方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。
小属性的写法：
padding-top: 30px; padding-right: 20px; padding-bottom: 40px; padding-left: 100px;综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
padding:30px 20px 40px 100px;如果只写了两个值，比如说：
padding: 30px 40px;则顺序等价于：30px 40px 30px 40px;
要懂得，用小属性层叠大属性。比如：
padding: 20px;padding-left: 30px;
padding-left: 30px;padding: 20px;第一行的小属性无效，因为被第二行的大属性层叠掉了。
来了解下border
认识border
border就是边框。边框有三个要素：像素（粗细）、线型、颜色。
颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。
border-style
比较稳定的border-style就几个：solid、dashed、dotted。
border属性是能够被拆开的，有两大种拆开的方式：
（1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）
（2）按方向拆开：border-top 上、border-right 右、border-bottom 下、border-left 左。
查看学习资料--《浮动——float详解》
CSS样式----浮动（图文详解）
宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。
标准文档流的特性
（1）空白折叠现象：
无论多少个空格、换行、tab，都会折叠为一个空格。
（2）高矮不齐，底边对齐：
（3）自动换行，一行写不满，换行写。
块级元素和行内元素
学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：
- 行内元素
- 块级元素
行内元素和块级元素的区别：（非常重要）
行内元素：
- 与其他行内元素并排； span
- 不能设置宽、高。默认的宽度，就是文字的宽度。
块级元素：
- 霸占一行，不能与其他任何元素并列； h1
- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
块级元素和行内元素的分类：
在之前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。
从HTML的角度来讲，标签分为：
- 文本级标签：p、span、a、b、i、u、em。
- 容器级标签：div、h系列、li、dt、dd。
从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
块级元素：所有的容器级标签都是块级元素，还有p标签。
块级元素和行内元素的相互转换
我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。
块级元素可以转换为行内元素：
一旦，给一个块级元素（比如div）设置：
display: inline;那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
- 此时这个div不能设置宽度、高度；
- 此时这个div可以和别人并排了。
行内元素转换为块级元素：
同样的道理，一旦给一个行内元素（比如span）设置：
display: block;那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
- 此时这个span能够设置宽度、高度
- 此时这个span必须霸占一行了，别人无法和他并排
- 如果不设置宽度，将撑满父亲
标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！
css中一共有三种手段，使一个元素脱离标准文档流：
- （1）浮动
- （2）绝对定位
- （3）固定定位
浮动
浮动是css里面布局用的最多的属性。
<!--文档的声明-->
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<style type="text/css">.box1{
float:left
width: 300px;
height: 450px;
background-color: blue;
}.box2{
float:left
width: 250px;
height: 350px;
background-color: green;
}
</style>
<meta charset="UTF-8">
<!-- 字符集用meta标签中的charset定义，meta表示“元”。“元”配置，就是表示基本的配置项目。-->
<!-- charset就是charactor set（即“字符集”）。用来防止页面出现乱码-->
<title>Title</title>
</head>
<body>
<h1>
这是一个测试
</h1>
<div class="box1"> </div>
<div class="box2"> </div>
</body>
</html>
性质1：浮动的元素脱标
脱标即脱离标准流
在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个<div>标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个<div>还在自己的层面上遵从标准流进行排列。
性质2：浮动的元素互相贴靠
性质3：浮动的元素有“字围”效果
性质4：收缩
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度
返回列表
评论