基础部分
表单：
HTML 表单用于搜集不同类型的用户输入。
<form>
.
form elements
.
</form>
HTML 表单包含表单元素。
即指是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
input 元素：
text 定义常规文本输入。
radio 定义单选按钮输入（选择多个选择之一）
submit 定义提交按钮（提交表单）
例子：
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
form元素的属性：
1.
Action 属性
action 属性定义提交表单时要执行的操作。
通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。
例子：
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Bill"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Gates"><br><br>
<input type="submit" value="Submit">
</form>
将数据提交给action_page.php文件
2.Target 属性
target 属性规定提交表单后在何处显示响应。
target 属性可设置以下值之一：
_blank 响应显示在新窗口或选项卡中。
_self 响应显示在当前窗口中。
_parent 响应显示在父框架中。
_top 响应显示在窗口的整个 body 中。
framename 响应显示在命名的 iframe 中。
3.Method 属性
method 属性指定提交表单数据时要使用的 HTTP 方法。
表单数据可以作为 URL 变量（使用 method=“get”）或作为 HTTP post 事务（使用 method=“post”）发送。
提交表单数据时，默认的 HTTP 方法是 GET。
关于 GET 的注意事项：
以名称/值对的形式将表单数据追加到 URL
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
URL 的长度受到限制（2048 个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET 适用于非安全数据，例如 Google 中的查询字符串
关于 POST 的注意事项：
将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
POST 没有大小限制，可用于发送大量数据。
带有 POST 的表单提交无法添加书签
5.Autocomplete 属性
autocomplete 属性规定表单是否应打开自动完成功能。
启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。
6.Novalidate 属性
novalidate 属性是一个布尔属性。
如果已设置，它规定提交时不应验证表单数据。
小汇总：
属性 描述
accept-charset 规定用于表单提交的字符编码。
action 规定提交表单时将表单数据发送到何处。
autocomplete 规定表单是否应打开自动完成（填写）功能。
enctype 规定将表单数据提交到服务器时应如何编码（仅供 method="post"）。
method 规定发送表单数据时要使用的 HTTP 方法。
name 规定表单名称。
novalidate 规定提交时不应验证表单。
rel 规定链接资源和当前文档之间的关系。
target 规定提交表单后在何处显示接收到的响应。
其他部分
阿里巴巴矢量库的使用
首先：
注册，进入网站，选择你想要的icon
接着点击购物车>>点击添加至项目：
选择后点击确定，接着点击 font class
然后点击查看在线链接，复制生成的链接
<link rel="stylesheet" href="生成的链接">
将以上代码导入到html文件中，然后按照如下方式引入icon
<span class="iconfont icon-xxxx"></span>
提一嘴，那个icon-xxxx可以在项目总中查看，比如我的就是 icon-sousou
仿制学校官网第二天
先看效果：
代码如下：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>zzuli</title>
<link rel="stylesheet" href="css/index.css">
<link rel="preload" href="//at.alicdn.com/t/font_3169479_0gi15pmz80cr.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="//at.alicdn.com/t/font_3169479_0gi15pmz80cr.css">
</head>
<body>
<div class="header">
<div class="top">
<div class ="w">
<ul>
<li><a href="#">教工</a></li>
<li><a href="#">学生</a></li>
<li><a href="#">校友</a></li>
<li><a href="#">考生</a></li>
<li><a href="#">English</a></li>
</ul>
</div>
</div>
<div class="log">
<div class="left"></div>
</div>
<div class="menu">
<div class="menu_list">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">学院概况</a></li>
<li><a href="#">机构设置</a></li>
<li><a href="#">师资队伍</a></li>
<li><a href="#">人才培养</a></li>
<li><a href="#">学术研究</a></li>
<li><a href="#">招生与就业</a></li>
<li><a href="#">合作交流</a></li>
<li><a href="#">校园文化</a></li>
<form >
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="教工">
<option value="学生">
<option value="校友">
<option value="考生">
<option value="English">
</datalist>
<button type="button" class="mui-btn mui-btn-blue">
<span class="iconfont icon-sousuo"></span>
</button>
</form>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="content_img"></div>
</div>
</div>
<div class="footer">
<div class="footer_content">
<p>水印了属于是</p>
</div>
</div>
</body>
</html>
css代码：
*{
margin: 0;
padding: 0;
}
body{
font-family: 微软雅黑;
}
.w {
width: 1200px;
margin: 0 auto;
}
.clear{
clear: both;
}
.header{
width: 100%;
height: 171px;
}
.header .top{
width: 100%;
height: 33px;
background-color: #164481;
line-height: 33px;
}
.top ul li{
list-style: none;
float: right;
padding: 10px;
}
.top ul li a{
text-decoration: none;
color: white;
font-size: 14px;
float: right;
}
.header .log{
width: 100%;
height: 116px;
margin: 0 auto;
background: #164481;
}
.log .left{
float: left;
width: 330px;
height:60px ;
background-color: #164481;
background: url("../img/xylogonew.png");
margin-top: 15px;
}
.header .menu{
width: 100%;
height: 50px;
background: #164481;
}
.menu .menu_list{
width: 1600px;
margin: 1 auto;
}
.menu .menu_list ul li{
line-height: 40px;
padding:0px 24.5px;
list-style: none;
float: left;
}
.menu .menu_list ul li:hover{
background: #164481;
}
.menu .menu_list ul li a{
text-decoration: none;
color: white;
font-size: 20px;
}
.menu .menu_list form{
float: right;
line-height: 40px;
}
.content{
width: 996px;
height: 1175px;
margin: 0 auto;
}
.content .content_img{
width: 996px;
height: 365px;
background: url("../img/jifang203.jpg") no-repeat 0 0;
background-size: 996px 365px;
margin-top: 28px;
margin-bottom: 10px;
}
.footer{
width: 100%;
height: 92px;
background: #164481;
}
.footer .footer_content p{
color: white;
text-align: center;
line-height: 92px;
font-size: 13px;
}
1589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
