整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
们在设计网站的时候，有时候为了体现出别具一格的风格，往往会设计出一些特殊的风格。这里就举一个比较常见的例子 —— 倾斜的背景颜色。
在CSS中，没有某一个属性能够直接实现倾斜的背景颜色，而是需要通过一些“手段”来实现。最常想到的方案就是在内容的底部放置一个div，给这个div设定一个背景颜色，然后让这个div倾斜一个角度，从而实现倾斜的背景颜色。比如像下图所示的案例：
那么下面就来用一个基本的实例来解释并实现倾斜背景的效果：
首先要说明一下，页面导航条是固定在页面顶部的，导航条不会随着页面的滚动而移动。这个效果的实现非常简单，就是利用了 position 这个属性的 fixed 值来实现的。
我下面的代码实例中，HTML用来给页面上添加元素，而在 CSS 部分需要精细化的设定属性的参数值，而且需要若干个HTML标签的CSS来配合，从而实现倾斜背景的效果。所以我在CSS代码部分用了比较多的注释来描述这些属性的效果和目的，大家在阅读的时候可以将 CSS 结合着 HTML 一起来理解。或者可以直接拿我的这个实例作为一个模板来使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="navbar-bg">
<ul class="navbar">
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item sign">
<a href="https://www.baidu.com">Sign</a>
</li>
</ul>
</div>
<div class="box-bg">
<div class="box">
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
</div>
</div>
<div class="content">
<h1>This is content</h1>
</div>
<div class="footer">
<div class="footer-bg">
<ul class="list">
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
</ul>
</div>
</div>
</body>
</html>为了让导航条和其他元素都能够与页面的两边留出距离，我在实际内容标签的外围又包裹了一层div，主要在这个包裹的div里设定左右内间距，从而实现两边留白的效果。这些外围包裹的 div 的 class 名称一般都会有一个后缀 "-bg"。
在实际内容的排列时，我采用了更加方便灵活的弹性布局，这样会相对的减少HTML和CSS的代码量。
另外，如果想要实现倾斜的背景颜色，那么这些带有 bg 后缀的 div 就是需要倾斜的标签。倾斜这些 div 其实很简单，只需要设定一个 transform: skew(0deg, -9deg) 这样的CSS代码即可，但是我们可以想象一下，原本是长方形的 div 按照 Y 轴逆时针旋转了一个弧度（-9deg）后，它会变成一个平行四边形，这个平行四边形是左边低右边高。这样就会露出它后面的白色的 body 的部分。所以这种玩法麻烦的地方就是如何通过多个 CSS 属性的配合来遮住露出的白色的body部分。下面就来看一下这个HTML对应的 CSS 代码部分。
在大家阅读 CSS 的代码之前，我给出一个原理图来解释一下其中的原理：
当外围的 div 倾斜了之后，就需要把内容部分的div的上部的内间距增大，以此来遮住平行四边形的左侧露出的白色区域。这是页面上部区域的原理。
那么页面底部也同样需要实现这样倾斜背景颜色的设计，这样才能将风格一致，产生美感。原理还是这个原理图所示的逻辑，不同的地方在于，底部最外围的 div 不倾斜，而是需要两个属性，height 和 overflow-y，并且这个 div 不能带有背景颜色。它们的作用是当它里面的内容超出这个 div 的区域时就不显示，这样就会让上图中蓝色的平行西变形的左下角区域被红色的框线裁剪掉，从而让这个div 乖乖的呆在页面的底部。而这个 div 里面一层的 div 需要让它倾斜，而且还带有一个背景颜色。这样组合出来的效果就是一个看似是左右两边是竖线，下部是横线，只有上部是斜线的带有背景颜色的四边形，这个四边形里面是实际的页面内容。
最终的样子在这篇 CSS 代码的最后展示出来了。
局一张图
上图是京东的登录页面，这和我们接下来要学习的东西有关系。
form表单就是专门用来实现用户登录、用户注册、信息收集之类的页面的。
日常网购一般都要求我们先登录，输入用户名和密码，点击登录后才可以进行物品的购买，那我们就用form表单来实现一下登录。
form表单中包含了input标签，input标签属于单标签。单标签是相对于双标签来讲的。以前的a标签、p标签、span标签等，都属于双标签，它们的特点是一对一对的，比如a标签，要写成<a></a>。比如p标签，要写成<p></p>，它们都是有一个开始，有一个结束。都是成双入对的。
单标签则没有结束标签，比如上面的input标签，它就没有</input>这样的结束。单标签还有我们之前学的img图片标签，br换行标签等。
input标签只能包含在form标签中，也就是说只要有input出现的地方，必定会有一个form标签包围着它。
而上一篇中的tr和td标签只能包含在table表格标签中，它们是组合。不能分开单独使用。
同样的情况还有li标签，只能包含在ul无序列表标签，ol有序列表标签中，dt标签和dd标签只能包含在dl标签中。
上面代码在浏览器中的效果：
这样一个简易的登录页面就做出来了，是不是很简单啊，我们试着填写用户名和密码来尝试一下登录。
你会发现，你输入的密码并不是明文的，也就是说你输入的密码会以黑点的形式呈现，这是为了安全，如果不这样，你输密码的时候很可能会被你背后的人看到。
那这个是怎么实现的呢？其实你应该已经发现了，input标签里面有个type属性，type设置为password就是以密码形式呈现。type设置为text就是以明文显示，type设置为submit就是一个按钮。
提交按钮的input里面我们还设置了一个value属性，这个属性用来设置，按钮的文字，我们这里设置的是登录，为了加深理解，我们给它改为登入。
浏览器中就会相应地显示为登入：
form表单中除了可以写input外，还可以有select下拉选择标签、textarea文本域标签、button按钮标签（这个按钮和<input type="submit">都是按钮，用的时候看你自己喜好）。
下面通过一个例子来了解上面的各种标签的使用。
案例：添加一篇文章，要求填写文章标题、文章分类、发表频道、文章内容。
浏览器中的效果：
上述代码中form标签中有select标签，这个的作用是产生一个下拉框，供用户选择。
select里面包含option标签，这个就是具体可以选择项。我们这里设置了三个：财经、教育、历史。 同我们前面讲的一样，option必须包含在select里面，而select必须包含在form表单标签中，它们是组合，不能打单独使用。
在这个例子中，我们还是用到了单选。
红框框住的就是我们设置的单选，具体对应代码中的：
单选也是用的input标签，只不过它的type是radio，还有一个要注意的地方就是name属性，我们这里可以选择的项是：新视觉、猎奇、杂说，它们三个的name属性都设置为了：channel。只有设置name都一样，才能单选，否则就成了多选了。
文章内容我们使用到了textarea文本域标签，它和<iniput type="text">的区别是，textarea可以放更多的文字。
textarea标签有两个属性需要说一下，cols代表的是列，rows代表的是行，cols设置的值越大，textarea的框越宽，rows的值设置的越大，textarea的框越高。我们来尝试一下：
先把cols设置成60，textarea就会变宽。
rows设置为30，textarea就会变高 :
form表单中还可以设置多选，我们也来尝试一下：
浏览器中的效果：
红框框住的部分就是我们实现的多选，多选用的也是input标签，type为checkbox
你可以自己动手尝试一下
我们整体的需求都实现了，但是整个页面看起来很不美观，所以我们需要调整一下，我决定采用table表格来调整，把文章标题、请选择分类、内容这些文字性的东西放到一列，input、select等标签放在另一列里面，使整个页面看起来更加整齐。
浏览器中的效果：
经过调整以后，看起来已经不那么丑了，在《做网站需要学习哪些知识》中，我们介绍过美化页面需要用Css和JavaScript，光用html是不可能做到很美观的。
在讲完html后，我们就会讲Css和JavaScript。
们在浏览网页的时候，可以看到页面上有导航栏，逛商城的时候会看到商品的详情页里有商品的简介，以及在注册或者申请一个网站会员的时候会让我们填写各种各样的信息，这些分别由列表、表格、表单来完成的，今天我学习了这些知识，下面我把我学到的知识梳理一下，以及在学习中遇到的坑总结一下，希望能给其他初学者一些帮助，同时，如有不足之处，也请各位大神指出来，我也好学习学习，提升自我。
网站导航栏
HTML列表在网站页面中使用的是相当广泛。如上图的网站导航栏，就是使用了列表实现的，再比如说，一个栏目的文章列表等等，都是使用了列表功能，根据我今天学到的内容，我总结了一下，总共三大知识点：
1.无序列表：
可以在<ul>标签中使用type属性来控制每一项前面的圆点的样式:
<h3>商品列表</h3>
<ul start="2">
<li>iPhone 12</li>
<li>MacBook Air</li>
<li>AirPods Pro</li>
</ul>2.有序列表：
<h3>商品列表</h3>
<ol>
<li>iPhone 12</li>
<li>MacBook Air</li>
<li>AirPods Pro</li>
</ol>有序列表
可以在<ol>标签中使用start属性来控制第一项数字起始值：
<h3>商品列表</h3>
<ol start="2">
<li>iPhone 12</li>
<li>MacBook Air</li>
<li>AirPods Pro</li>
</ol>效果如图：
start=2
可以使用type规定在列表中使用的标记类型，type值有五种：
不过我个人感觉，这个type属性的作用貌似不多大，基本上都是以默认值，就是数字来作为每一项的标记了吧。
3.自定义列表：
<dl>
<dt>名称：</dt>
<dd>小白学编程</dd>
<dt>地址：</dt>
<dd>河南省郑州市二七区</dd>
<dt>联系</dt>
<dd>电话：<a href="tel:189****1122">189****1122</a></dd>
<dd>邮箱：<a href="mailto:admin@admin.com">admin@admin.com</a></dd>
</dl>自定义列表
备注：根据本小白查的文档，a标签的href属性，不仅可以填写链接，还可以用：
【tel:电话号码】的格式点击进行拨号，只不过是在电脑上需要有能拨号的软件；
拨号
【mailto:邮箱地址】的格式可以快速拉起发送邮件的软件。
发送邮件
不过我不知道这个的兼容性怎么样，如果有知道的大佬，可以在评论区指导一下，跪谢！
一个表格的基本结构：
<table class="table">
<!-- caption：表格标题 -->
<caption>
商品信息表
</caption>
<!-- 表头 -->
<thead>
<!-- 添加表格数据的时候必须先添加一行 -->
<tr>
<td>ID</td>
<td>商品名称</td>
<td>单价</td>
<td>单位</td>
<td>数量</td>
<td>金额</td>
</tr>
</thead>
<!-- 一个表格可以有多个tbody，但是只能有一个thead -->
<tbody>
<tr>
<td>1</td>
<td>iPhone 12 mini</td>
<td>5499</td>
<td>部</td>
<td>100</td>
<td>549900</td>
</tr>
</tbody>
</table>Excel里的表格可以进行行与列的合并，单元格直接也能合并，那么HTML表格也是可以的，可以使用colspan进行列合并，rowspan进行行的合并。利用这两个属性，我们可以使用<table>标签写一个课程表。
HTML表单是用于搜集用户输入的不同类型数据的，它包含了不同类型的<input>元素，如:文本框、单选框、复选框、提交按钮等等。因此可以看出，<input>元素是表单中最重要的元素。
表单的基本格式：
<form action="" method="POST" class="register">
<!-- 这里面可以放input元素 -->
</form>根据我学习的成果，我总结出了input元素的七种type类型并一一做了记录：
1.type="text" 单行文本框
<label for="username">账号：</label>
<input type="text" name="username" id="username" value="admin" required>单行文本框
2.type="email" 邮箱型文本框
<label for="email">邮箱：</label>
<input type="email" name="email" id="email" value="html@html.cn" required>邮箱型文本框还会对输入的内容进行校验，如果不符合邮件地址的格式会弹出如上图提示。
3.type="password" 密码型文本框/非明文
<label for="password">密码：</label>
<input type="password" name="password" id="password" value="" placeholder="密码不少于6位" required>密码型文本框
输入内容
值得注意的是，密码型文本框在输入密码的时候都是以小黑点进行替换的，并不会显示我们输入的内容。
4.type="radio" 单选框
<label for="">性别：</label>
<div>
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>
<input type="radio" name="gender" value="male" id="male">
<label for="female">女</label>
<input type="radio" name="gender" value="male" id="male" checked>
<label for="secret">保密</label>
</div>单选框
单选框（radio）的name值必须都相同才能保证值的唯一性，默认选中使用checked属性。
5.type="checkbox" 复选框
<label for="#">兴趣：</label>
<div>
<input type="checkbox" name="hobby[]" value="basketball" id="basketball">
<label for="basketball">篮球</label>
<input type="checkbox" name="hobby[]" value="game" id="game">
<label for="game">游戏</label>
<input type="checkbox" name="hobby[]" value="travel" id="travel">
<label for="travel">旅游</label>
<input type="checkbox" name="hobby[]" value="program" id="program">
<label for="program">编程</label>
</div>复选框
复选框的name值一定要用数组表示，否则，服务器在接收数据的时候不能获取所有选中的值。
6.type="file" 文件域
<label for="user-pic">头像：</label>
<input type="file" name="user_pic" id="user-pic" />上传文件
7.type="hidden" 隐藏域
<input type="hidden" name="MAX_FILE_ZIE" value="80000" />隐藏域在页面是看不到的，是服务器端进行处理的一项数据。
通过上述的七种<input>元素类型，我得出一个结论就是一个<input>元素至少包含有三个属性：
除了上述的<input>元素的7种标签类型，还有下拉列表、文本域这些常用的控件。
<label for="">学历：</label>
<select name="edu" id="eud">
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3" selected>本科</option>
<option value="4">研究生</option>
<option value="5" label="老司机">博士</option>
</select下拉列表/下拉框
<label for="">学历：</label>
<select name="edu" id="eud">
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3" selected>本科</option>
<option value="4">研究生</option>
<option value="5" label="老司机">博士</option>
</select>multiple、size用法
<label for="comment">备注：</label>
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>上传文件需要注意两点：
<form action="" method="POST" class="register" enctype="multipart/form-data">
<label for="user-pic">头像：</label>
<!-- 隐藏域在页面是看不到的，是服务器端进行处理的一项数据。 -->
<input type="hidden" name="MAX_FILE_ZIE" value="80000" />
<input type="file" name="user_pic" id="user-pic" />
<div class="user-pic" style="grid-column: 2;"></div>
<button>提交</button>
</form>enctype有3个值：
<form action="check.php" method="get" id="register">
<div class="box">
<label for="email">邮箱:</label>
<input type="email" form="register" name="email" id="email" placeholder="demo@email.com" />
<label for="password">密码:</label>
<input type="password" form="register" name="password" id="password" placeholder="至少8位" />
<button form="register">提交</button>
</div>
</form>
<label for="username">帐号:</label>
<input type="text" name="username" id="username" placeholder="不能为空" />注册表单
例如：以下情况就是没有在空间中写form属性的情况，我们可以看到，在浏览器里没有获取到密码password的值，只获取到了username和email的值：
没有获取到password的值
我个人的理解是：如果不把表单控件写到form内部，这样会方便js获取表单元素的值，但是这样写会容易影响布局，造成布局混乱，建议还是按照标准的写法，把所有的控件都写到form表单内部。
至于什么时候使用GET方法，什么时候使用POST方法呢？通过今天的学习，我做了如下总结：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/table.css">
<title>表格：行与列的合并</title>
</head>
<body>
<table class="lesson">
<caption>
xxxx小学课程表
</caption>
<thead>
<tr>
<th colspan="2"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">上午</td>
<td>1</td>
<td>语文</td>
<td>数学</td>
<td>音乐</td>
<td>社会</td>
<td>科学</td>
</tr>
<tr>
<td>2</td>
<td>数学</td>
<td>语文</td>
<td>音乐</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>3</td>
<td>美术</td>
<td>音乐</td>
<td>音乐</td>
<td>数学</td>
<td>音乐</td>
</tr>
<tr>
<td>4</td>
<td>社会</td>
<td>体育</td>
<td>音乐</td>
<td>体育</td>
<td>语文</td>
</tr>
<tr class="rest">
<td colspan="7">中午休息</td>
</tr>
<tr>
<td rowspan="4">下午</td>
<td>5</td>
<td>语文</td>
<td>数学</td>
<td>音乐</td>
<td>社会</td>
<td>科学</td>
</tr>
<tr>
<td>6</td>
<td>数学</td>
<td>语文</td>
<td>音乐</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>7</td>
<td>课外活动：</td>
<td colspan="4">各班自行组织，自愿参加</td>
<td>数学</td>
<td>音乐</td> -->
</tr>
</tbody>
</table>
</body>
</html>效果：
用HTML表格写一个课程表
个人总结：为了学习这些表单知识，真真的是看了一天，头都懵了，还有不少内容没有记住，还是需要多写多练，其中我认为比较坑的几个地方是：
在看视频教程的过程中，我看到好多大佬在用VS Code的时候都是使用了快捷键，后来网上搜了一下，原来官方给的就有一个PDF文档，从VS里就可以进去，在工具的顶部导航栏帮助里，如下图：
快捷键
为了方便大家快速找到，我把官方地址贴出来吧，VS Code快捷键PDF文档：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
VS Code快捷键
*请认真填写需求信息，我们会在24小时内与您取得联系。
