涉及知识点：
一、表格：table
实例
一个简单的 HTML 表格，包含两行两列：
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
table属性：
width、height 宽高（单位是像素或百分比）
align 对齐
border 外边框
bgcolor 背景色
background 背景图片
Cellspacing 单元格间距 ( 单元格和单元格的距离，以像素为单位) 默认为1（未设置） 一般情况写0
Cellpadding 单元格边距（表格边框与内容的距离，以像素为单位）默认为1 （未设置） 一般情况写0
tr属性：
align 水平对齐：
left/center/ right
valign 垂直对齐：
top（上）/middle（中）/bottom（下）
bgcolor 背景色
td的基本属性：
width、height 宽高（单位是像素或%）
align valign 水平对齐、垂直对齐
bgcolor 背景色
background 指定背景图片
Colspan 水平合并 合并多列 ，“自生单元格” “以一当二”
rowspan 垂直合并 合并多行
表头th标签：
是特殊的单元格，文字会自动加粗、居中。它的用法是取代的td的位置即可
二、定位
position值描述
1、absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
2、fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
进一步区分：
fixed:固定定位
absolute:绝对定位
区别：
1、没有滚动条的情况下没有差异
2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动
可以这么理解，fixed：固定在当前window不动， absolute：会随参照对象元素的高度和宽度变化而变化
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>两种定位的区别</title>
<style>
body {
height:1000px;/*让窗体出现滚动条*/
}
.fixed {
position: fixed;
left: 100px;
right: 100px;
top: 100px;
bottom: 100px;
width: auto;
height: auto;
border: 1px solid blue;
}
.absolute {
position: absolute;
left: 100px;
right: 100px;
top: 100px;
bottom: 100px;
width: auto;
height: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="fixed">fixed定位</div>
<div class="absolute">absolute定位</div>
</body>
</html>
3、relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。inherit规定应该从父元素继承 position 属性的值。
三、CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
margin or padding 属性设置
方向：
上—右—下—左
上下—左右
上—左右—下
常用的实体
空格 ：  
<： <
>： >
版权符号： © 样式： ©
四、< form > 标签
<form action="form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
< form > 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单用于向服务器传输数据。
form method属性：
post & get
参考网址：https://www.w3school.com.cn/tags/att_form_method.asp
五、< ul > 标签
无序 HTML 列表：
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ul属性值：
| list-style-type | 设置列表项标记的类型。 |
|---|---|
| list-style-position | 设置在何处放置列表项标记。 |
| list-style-image | 使用图像来替换列表项的标记。 |
| initial | 将这个属性设置为默认值。 |
| inherit | 规定应该从父元素继承 list-style 属性的值。 |
也可以：
list-style 简写属性在一个声明中设置所有的列表属性。
可以设置的属性（按顺序）： list-style-type , list-style-position , list-style-image.
可以不设置其中的某个值，比如 "list-style : circle inside ; " 也是允许的。未设置的属性会使用其默认值。
list-style-type的值：设置列表项标记的类型：
参考网址：https://www.runoob.com/cssref/pr-list-style-type.html
| none | 无标记。 |
|---|---|
| disc | 默认。标记是实心圆。 |
| circle | 标记是空心圆。 |
| square | 标记是实心方块。 |
| decimal | 标记是数字。 |
| decimal-leading-zero | 0开头的数字标记。(01, 02, 03, 等。) |
| lower-roman | 小写罗马数字(i, ii, iii, iv, v, 等。) |
| upper-roman | 大写罗马数字(I, II, III, IV, V, 等。) |
| lower-alpha | 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |
| upper-alpha | 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |
| lower-greek | 小写希腊字母(alpha, beta, gamma, 等。) |
| lower-latin | 小写拉丁字母(a, b, c, d, e, 等。) |
| upper-latin | 大写拉丁字母(A, B, C, D, E, 等。) |
| hebrew | 传统的希伯来编号方式 |
六、input的属性：
参考网址： https://www.w3school.com.cn/html/html_form_attributes.asp
1、value 属性：
value 属性规定输入字段的初始值：
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
2、readonly 属性：
readonly 属性规定输入字段为只读（不能修改）：
<input type="text" name="firstname" value="John" readonly>
readonly 属性不需要值。它等同于 readonly=“readonly”。
3、disabled 属性：
disabled 属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交。
4、size 属性：
size 属性规定输入字段的尺寸（以字符计）
5、maxlength 属性：
maxlength 属性规定输入字段允许的最大长度
6、 < input > 标签的 type 属性:
属性值：
| button | 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。 |
|---|---|
| checkbox | 定义复选框。 |
| file | 定义输入字段和 "浏览"按钮，供文件上传。 |
| hidden | 定义隐藏的输入字段。 |
| image | 定义图像形式的提交按钮。 |
| password | 定义密码字段。该字段中的字符被掩码。 |
| radio | 定义单选按钮。 |
| reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
| submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
| text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。 |
参考网址： https://www.w3school.com.cn/tags/att_input_type.asp
七、background-color：
常用的表示方法：
1、rgb()
红：255 0 0
绿：0 255 0
蓝：0 0 255
白：255 255 255
黑：0 0 0
2、rgba()
rgba()函数使用红( R )、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。
透明度（A）取值 0~1 之间， 代表透明度。
八、display 属性：
display 属性规定元素应该生成的框的类型。
| none | 此元素不会被显示。 |
|---|---|
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| table | 此元素会作为块级表格来显示（类似 ），表格前后带有换行符。
|
| inline-table | 此元素会作为内联表格来显示（类似 ），表格前后没有换行符。
|
| inherit | 规定应该从父元素继承 display 属性的值。 |
行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容，而块级元素适合做布局。
块级元素（block）：
独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即100%宽。
行内元素（inline）：
可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。
行内块元素（inline-block）：
结合行内和块级的优点，既可以设置长宽，可以使padding和margin生效，又可以和其他的行内元素并排。
行内元素与块状元素之间的转换:
1.float: 当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。
2. position: 当为行内元素进行定位时，position : absolute 与 position : fixed 都会使得原先的行内元素变为块级元素。
3 .display:
① 块级标签转换为行内标签：display:inline;
② 行内标签转换为块级标签：display:block;
③ 转换为行内块标签：display：inline-block;
注意：
1、text-align属性对块级元素起作用，对行内元素不起作用
2、块级元素独自占一行且宽度会占满父元素宽度，行内元素不会独占一行，相邻行内元素可以排在同一行。
参考链接： https://segmentfault.com/a/1190000015202771
行内元素列表:
< a > 可定义锚
< abbr > 表示一个缩写形式
< acronym > 定义只取首字母缩写
< b > 字体加粗
< bdo > 可覆盖默认的文本方向
< big > 大号字体加粗
< br > 换行
< cite > 引用进行定义
< code > 定义计算机代码文本
< dfn > 定义一个定义项目
< em > 定义为强调的内容
< i > 斜体文本效果
< img > 向网页中嵌入一幅图像
< input > 输入框
< kbd > 定义键盘文本
< label > 标签为
< input > 元素定义标注（标记）
< q > 定义短的引用
< samp > 定义样本文本
< select > 创建单选或多选菜单
< small > 呈现小号字体效果
< span > 组合文档中的行内元素
< strong > 语气更强的强调的内容
< sub > 定义下标文本
< sup > 定义上标文本
< textarea > 多行的文本输入控件
< tt > 打字机或者等宽的文本效果
< var > 定义变量
块级元素列表:
< address > 定义地址
< caption > 定义表格标题
< dd > 定义列表中定义条目
< div > 定义文档中的分区或节
< dl > 定义列表
< dt > 定义列表中的项目
< fieldset > 定义一个框架集
< form > 创建 HTML 表单
< h1 > 定义最大的标题
< h2 > 定义副标题
< h3 > 定义标题
< h4 > 定义标题
< h5 > 定义标题
< h6 > 定义最小的标题
< hr > 创建一条水平线
< legend > 元素为
< fieldset > 元素定义标题
< li > 标签定义列表项目
< noframes > 为那些不支持框架的浏览器显示文本，于 frameset 元素内部
< noscript > 定义在脚本未被执行时的替代内容
< ol > 定义有序列表
< ul > 定义无序列表
< p > 标签定义段落
< pre > 定义预格式化的文本
< table > 标签定义 HTML 表格
< tbody > 标签表格主体（正文）
< td > 表格中的标准单元格
< tfoot > 定义表格的页脚（脚注或表注）
< th > 定义表头单元格
< thead > 标签定义表格的表头
< tr >定义表格中的行
个人简历分块 源代码示例（html + css）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Personal Introduction</title>
<link rel="stylesheet" type="text/css" href="../css/个人简历2.css"/>
</head>
<body>
<div id="resume">
<div class="head">
<img src="../../img/02.jpg" class="img">
<div class="top-center">
<h1>小图包</h1>
<p class="white_bck">求职意向：1234567891011</p>
<p class="own_character">一句话介绍自己，你不是我xxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="top-right">
<p class="trt ">年龄 ： 24岁 <img src="../images/age.png" class="fgh"></p>
<p>地址 ： 上海 <img src="../images/address.png" ></p>
<p>手机 ： 135xxxxxxxx <img src="../images/arrow.png" ></p>
<p>邮箱 ： 1235@xx.com <img src="../images/e-mail.png" ></p>
</div>
</div>
<div class="container">
<div class="left">
<p>教育背景</p>
<span> XX大学</span><br>
<span>20xx——20xx</span>
<P>工作经验</P>
<span>20xx——20xx</span> <br>
<span>12674657687</span>
<p>社会实践</p>
<span>3647637856478</span>
<br>
<span>7547697</span>
<br>
<span>u823453867548</span>
</div>
<div class="right">
<p>DHFUERUGHTRUGIOEJHORJGIOTRHUTRH</p>
<div>jnfjerngutrhgnjnjbnjbnjgnbjgbjjbhjbghj
<br><br> bffndfjnjdfnjnfjgjfbjfjfgbfbjbdfjbjfdbjdfbjbjbjfgjbjngjtrhyuhrifejfe</div>
</div>
</div>
</div>
<p class="end">©2020</p>
</body>
</html>
body{
padding: 0px;
margin: 0px;
}
#resume{
width: 900px;
height: 1000px;
margin: auto;
}
.head{
height: 150px;
width: 900px;
background-color: darkcyan;
margin: 0px;
padding: 20px;
}
.img{
position: absolute;
height: 130px;
width: 120px;
border: #FAEBD7 6px solid;
}
.top-center{
position: absolute;
top: 10px;
left: 620px;
color: white;
}
.white_bck{
font-weight: 800;
/* 设置p标签背景与文字同长度 */
display: inline-block;
margin: 0px;
color: darkcyan;
background-color: white;
}
.top-right{
position: absolute;
top: 10px;
left: 1060px;
}
.top-right img{
height: 25px;
width: 25px;
float: right;
}
.top-right p{
color: white;
font-size: 15px;
}
.container{
margin: 0px;
padding: 0px;
}
.left{
padding: 20px;
height: 900px;
width: 300px;
background-color: darkgrey;
opacity: 0.5;
}
.left p{
border: 4px dotted darkcyan;
margin: 50px auto;
width: 200px;
height: 50px;
text-align: center;
/* vertical-align: middle; */ /* 对块级元素失效 */
line-height: 50px; /* 设置行高 与div同高度*/
}
.left span{
position: absolute;
right: 1000px;
margin-bottom: 60px;
}
.right{
position: absolute;
top: 200px;
left: 750px;
height: 900px;
width: 600px;
padding: 30px;
}
.end{
position: absolute;
left: 450px;
}
2561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
