table的布局
布局：是一个页面的整体结构。
结构特点：从上到下，从左到右。一般每一行的高度相同
<table width="100%">
<tr>
<td colspan="3"style="height: 120px;background-color: red"></td>
</tr>
<tr>
<td style="width: 150px; height: 400px;background-color: green"></td>
<td style="width: 700px;background-color: blue"></td>
<td style="width: 150px;background-color: purple"></td>
</tr>
<tr>
<td colspan="3"style="height: 100px;background-color: yellow"></td>
</tr>
</table>
页面的布局可以通过table来实现，一个单元格就是一个布局区域单位。该区域的大小可以通过height和width属性来设置，位置通过单元格的相对位置来提现的。同时可以结合rowspan和colspan两个属性来完成单元格的合并。
当布局比较复杂时，可以使用table的且套来实现，即在某个单元格中再嵌入一个table进行划分。
5.3div（division）
<div>标签定义一个分块
写法：
<div style="border: dashed;width: 100px;height: 100px"></div>
显示特点：在新的一行进行显示。有此特点的称为：块标签（块级标签）
块级元素和内联元素的区别：
块级元素占满行，而内联元素会按照顺序从左至右依次排列
6. 标签总结
块级标签：在新的一行进行显示。
<div>、<h1>-<h6>、<p>、<hr>、<table>、<ul>、<ol>、<dl>、<tr>、<option>、<caption>、<dd>、<dl>
内联标签：不会在新的一行进行显示。
<img>、<input>、<a>、<td>、<textarea>、<span>、<label>、<select>、<th>、<button>、1.CSS基础知识
1.1基本概念
CSS 指层叠样式表 (Cascading Style Sheets)
为什么需要用css
HTML描述了要呈现的内容，而css则定义了这些内容的呈现形式，比如字体、颜色等。使用css能够将页面内容和呈现的形式有效分离，有利于分工合作，也有利于快速更换不同的呈现形式。
css样式：内联样式和内部样式，其中内联样式的优先级高于内部样式
使用样式表可以有三种方式：
1）内联样式
<pstyle="font-size: 24px;color: green">内联样式的演示</p>
将样式定义在style属性中。
内容好呈现形式高度耦合，维护困难，不利于分工合作。
只能应用于当前标签。
2）内部样式
<style> p{ font-size: 36px; color: red; } </style> </head> <body> <p style="font-size: 24px;color: green">内联样式的演示</p> <p>内部样式的演示1</p> <p>内部样式的演示2</p> </body>
在<head>标签中通过<style>标签来定义
内容表现形式的耦合程度降低了，但都还是在html文件中，没有实现完全分离。
定义的样式只能在本页面中使用
3）外部样式表
首先需要定义一个样式表文件（.css），
/*定义了应用于段落的样式: 字体大小：36px 颜色：红色*/ p{ font-size: 36px; color: blue; }
css中也可以使用注释，形式为/*……*/
然后再需要使用这些样式的html文件中引入该样式表文件
<head>
<meta charset="UTF-8">
<title>外部样式表</title>
<link rel="stylesheet"type="text/css" href="css/E2-01-02.css">
</head>
外部样式表使得内容和表现形式彻底分离，有利于分工合作及维护，可在多个html中引用。
推荐尽量使用外部样式。
但后面的案例为了方便，还是会大量使用内部样式甚至内联样式
1.2颜色
所欲颜色都可以由红（red）、绿（green）、蓝（blue）三种颜色调配而成，这三种颜色俗称三原色。
css中用8位表示一个颜色，那么可以表示28种颜色，即256钟颜色，所以总共可以表示256*256*256种颜色
css中有多种颜色表示形式：
1） 十六进制形式：
<p style="color: #880000">十六进制颜色</p>
2） RGB颜色
<p style="color: RGB(255,0,0);">RGB颜色表示形式</p>
3） RGBA颜色
在RGB颜色基础上增加了透明度分量（Alpha），该分量的取值范围为0（完全透明）到1.0（完全不透明）
<p style="color: RGBA(255,0,0,0.5);">RGBA颜色表示形式</p>
4） HSL颜色
颜色可以由另外三个分量来表示，即色调、饱和度和明度。
<p style="color: HSL(120,50%,50%);">HSL颜色表示形式</p>
5） HSLA颜色
在HSl的基础上增加了透明度分量。
<p style="color: HSLA(120,50%,50%,0.4);">HSL颜色表示形式</p>
6） 预定义颜色
css提供了一些常用的预定义颜色
<p style="color: red">预定义颜色表示形式</p>
1.3尺寸单位
cm：厘米
mm：毫米
in（英寸：inch）：
px：像素（pixel）
%：百分比
em、vw、vh（自学）
1em=元素中文本的1个垂直高度
根据上面的规则：如果元素中文本的大小为16px，那么1em=16px;如果元素中文本大小为20px,那么1em=20px……
vh：vh就是当前屏幕可见高度的1%，也就是说
height:100vh == height:100%;
但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，
但是设置height:100vh，该元素会被撑开屏幕高度一致。
vw：vw就是当前屏幕宽度的1%
补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，
但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况
px：绝对单位，%：相对单位。
绝对单位：cm、mm、in、px
相对单位：%,em,vw,vh
哪些是绝对单位，哪些是相对单位，
2.基础属性
属性名：属性值
background-color：red
p{
background-color：red;
font-size：24px;
}
2.1字体相关属性
font-family：字体名称
font-size：字体大小
font-style：字体格式
font-variant：字体变化（大写字母）
font-weight：字体粗细
……
可以简写：书写顺序
font-style font-variant font-weight font-size font-family
p{
/*font-family: 楷体;*/
/*font-size: 36px;*/
/*font-style: italic;*/
/*font-variant: small-caps;*/
/*font-weight: 100;*/
font: 60px 楷体;
}
前面三个可以不写，默认设置，后边两个必须指定值
这种书写方式更加简洁
2.2文本相关属性
文本相关属性主要包括颜色、对齐方式、修饰效果等。
color：设置文本的颜色
text-decoration：
none：默认值，没有任何效果
underline：下划线
overline：文字上划线
line-through：文字删除线
text-shadow：增加阴影
text-shadow: -6px -5px red;
该代码的含义是定义一个红色的背影，其水平方向上左移6px
，垂直方向上上移5px。
direction：
ltr：自左至右；rtl：自右至左
text-align：文本对齐方式
left：左对齐
right：右对齐
center：居中对齐
justify：两端对齐
vertical-align：文本垂直对齐方式
top：靠上对齐
bottom：靠下对齐
middle：垂直居中对齐
text-indent：文本缩进
letter-spacing：字符之间的间距
word-spacing：字（单词）间距
line-height：设置行高，实际上是调整行间距
总结：第四天结束了对html基础的学习，主要学习了table网页的布局，table用于布局时，优点：页面工整，干净整洁，传统的方块布局，页面各种功能简洁明了；缺点：样式旧，每个table中的标签都很多，并且不利于维护，页面样式没有新意。在使用table布局时，要先将一个大的页面按照表格的形式分为各个小表格，在通过嵌套、合并表格（rowspan、colspan）等方式来达到预期效果。一些政府、机关等老一代网站大部分都是table布局。
在新一天的学习中初步认识了css，在对字体、文本的属性学习中发现css中的样式和word、Excel中对字体、文本等设置异曲同工。比如对齐方式：左对齐、右对齐、居中对齐等，字体的大小、形状、颜色等等。都可以在css中实现。css中的样式有三种表现形式：内联样式、内部样式、外部样式。其中内联样式只作用于当前标签，内部样式只作用于当前页面，而外部样式，需要建立.css文件，并且在该文件中设置好各个标签的样式，然后在页面设置时引用该文件中的设计样式。对颜色有了更加深刻的认识，比如三原色在电脑中组成的颜色有256*256*256种。css可以通过三原色、饱和度、亮度、色调来设计颜色，从而运用。css中的尺寸单位，分为绝对单位：cm、mm、in、px；相对单位：em，vh，vw
257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
