元素进行文档布局不是表格的正确用法。
<span> 元素
HTML 元素是内联元素，可用作文本的容器
元素也没有特定的含义。当与 CSS 一同使用时， 元素可用于为部分文本设置样式属性。
3.8 CSS样式初识
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部 区域使用 元素 来包含CSS
- 外部引用 - 使用外部 CSS 文件
3.8.1 内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
设置背景颜色
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
设置字体, 字体颜色 ，字体大小
我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
3.8.2 内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 部分通过 标签定义内部样式表:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是你希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开
3.8.3 外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
3.9 网页布局
网页布局主要使用div
<body>
<div id="header" style="background: darkorange; height: 100px;text-align: center ">
Menu
</div>
<div id="content" style="background: aliceblue; height: 600px">
<div id="left-menu" style="height: 100%; width: 15%; background: deepskyblue; float: left">
菜单
<ol>
<li>HMTL</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
</div>
<div id="content-panel" style="background: aqua; height: 95%; width: 85%;float: left">
<p>这里是真正写内容的地方。。。</p>
</div>
</div>
<div style="background: greenyellow; height: 50px">
footer
</div>
</body>
效果
3.10 Html 表单
当你想收集用户数据，提交到后台服务器时，你就可以用html 表单元素
表单元素分为 文本框、下拉列表、单选、复选 、按钮
用户注册示例
<form action="baidu_url">
姓名: <input type="text" name="name"> <br>
电话: <input type="number" name="phone"> <br>
<button>注册</button>
</form>
一点击按钮，<form>.....</form> 表单里的数据都会被提交到action="baidu_url" 这个地址
其它常用输入类型
<body>
<form action="baidu_url">
姓名: <input type="text" name="name"> <br>
电话: <input type="number" name="phone"> <br>
姓别: <input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女 <br>
爱好: <input type="checkbox" name="hobbie" value="girl">姑娘
<input type="checkbox" name="hobbie" value="潜水">潜水
<input type="checkbox" name="hobbie" value="Python">Python <br>
喜欢的姑娘类型：<br>
<select name="gilr_type">
<option value="1">胸大貌美大长腿</option>
<option value="2">气质小可爱</option>
<option value="3">妖娆性感</option>
<optgroup label="按区域">
<option value="4">欧美</option>
<option value="5">日韩</option>
<option value="6">河南开封</option>
</optgroup>
</select> <br>
个人简介: <br>
<textarea name="intro" placeholder="输入不省于50字的个人介绍" rows="3" cols="50" ></textarea> <br>
输入密码：<input type="password" name="password"> <br>
<button>注册</button>
</form>
</body>
输出效果
Fieldset 表单集合
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
效果
四、CSS样式基础
4.1 CSS id \ class 选择器
id选择器
id就像一个元素的身份证地址，可以在网页里，唯一代表某个元素，我们也可以通过这个id快速找到它对应的元素对象
输出
class 类选择器
当你想给多个元素批量设置同样的一个样式的话，就可以使用类选择器
输出
4.2 直接通过元素名设置样式
若你想给页面所有的
或标签加上同样的样式，可以直接通过元素名批量设置
注意：id & class 选择器的样式优先级大于 元素名选择器
4.3 组合选择器
为了测试效果，先准备好3层div
<div id="layer1">
<p>第1层</p>
<div id="layer2">
<p>layer 2</p>
<h2>layer 2 h2</h2>
<div id="layer3">
<p>第3层</p>
<h3>layer 3 h3</h3>
</div>
</div>
</div>
<p>我不在任何的div里</p>
设置好样式
<head>
<style type="text/css">
#layer1 {
height: 500px;
padding: 30px;
border: 1px dashed blue;
}
#layer2 {
height: 400px;
padding: 30px;
border: 1px dashed red;
}
#layer3 {
height: 300px;
padding: 30px;
border: 1px dashed black;
}
</style>
</head>
效果
4.3.1 后代选择器
给指定元素的所有指定后代，设置样式
比如 ，我给上图第一层div下面所有的
标签设置颜色
#layer1 p {
color: red;
background: yellow;
}
效果
4.3.2 子元素选择器
又可称为儿子选择器，是指可给指定元素的下一层儿子元素设置格式 ，注意，只是儿子，孙子不管
给layer1的div的儿子设置样式
#layer1 > p {
color: red;
background: yellow;
}
4.3.3 相邻兄弟选择器
可选择紧接在另一元素后的元素，且二者有相同父元素。
#layer2 > p+h2 {
color: red;
background: yellow;
}
效果
4.3.4 多个元素组合
可同时给不相干的多个元素设置同一个样式
比如 把整 个页面所有的
和
标签同时设置样式
p,h3 {
color: red;
background: yellow;
}
效果
4.4 盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
-
Margin(外边距) - 清除边框外的区域，外边距是透明的。
-
Border(边框) - 围绕在内边距和内容外的边框。
-
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
-
Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。
元素的宽度和高度
重要: 当指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。
下面的例子中的元素的总宽度为300px：
div {
width: 300px;
border: 25px dashed yellow;
padding: 25px;
margin: 25px;
}
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、5px 黄色边框。</div>
</body>
效果
4.5 常用CSS属性
css有很多属性，我们先只讲几个基本的
更多的看这里：https://www.runoob.com/cssref/css-reference.html#box
4.5.1 background背景属性
4.5.2 边框Border 和轮廓Outline属性
4.5.3 内边距Padding属性
4.5.4 外边距(Margin) 属性
4.5.5 position 定位属性
属性值
| 值 |
描述 |
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static |
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| sticky |
粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。 |
| inherit |
规定应该从父元素继承 position 属性的值。 |
|
|
4.5.6 字体（Font） 属性
4.5.7 文本（Text） 属性
五、练习题
5.1 开发登录注册页面
请参考下面的注册页面，模仿开发一个一样的注册页面， 只写好静态页面样式就行，不需要能真的获取验证码等。
Ps：部分内容来自博主线上课程的教程的文件内容