THML
概念:超文本标记
作用:页面内容
<h><p><img><a>
表格格式:
<table>
<tr>
<td>
</tr>
</table>
内有border,colspan,rowspan连接列和行
表单form
<form action=”文件内容存储” method=”get或者post请求”>
<input type=”” name=”” value=””>
<form>
需要设置name值,这样数据才能传回后台不需要value
文本text
密码password
需要name也需要value的值才能把数据传入后台
单选radios
复选checkbox
需要value的值
文件file
隐藏hidden
重置reset
提交submit
下拉菜单
<select><option value=”属性值”>显示值</option></select>
<img src=”文件位置” alt=””>
<a href=”网站地址”>内容</a>
Textarea文本域中是由rows和cols两个属性
CSS
概念:层叠样式表
作用:修饰thml
三种方式:
内联:
行内联
类选择器
id选择器
外联:
<link rel=”stylesheet href=”css路劲””
做一个表单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> .c1{ text-align: right; } #d1{ align:center; } </style> </head> <body> <form> <table id="d1" border="1" cellspacing="0" cellpadding="0" style="width: 800px;height: 200px;" > <tr> <td colspan="3" style="font-size: 20px;font-size: b;"> 1.会员登陆名和密码</td> </tr> <tr> <td class="c1" style="width: 10%"> 用户名:</td> <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td> <td style="width: 60%"><input type="submit" value="检测用户姓名">请使用数字和英文字母</td> </tr> <tr> <td class="c1" style="width: 10%"> 密码:</td> <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td> <td style="width: 60%">密码为15个数子或者字母</td> </tr> <tr> <td class="c1" style="width: 10%"> 确认密码:</td> <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td> <td style="width: 60%">再次确认</td> </tr> <tr> <td colspan="3" style="font-size: 20px;font-size: b;"> 2.姓名和联系方式</td> </tr> <tr> <td class="c1" style="width: 10%"> 真是姓名:</td> <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td> <td style="width: 60%"><input type="radio" name="sex" name="nan">男<input type="radio" name="sex" name="nv">女</td> </tr> <tr> <td class="c1" style="width: 10%"> 电子邮箱:</td> <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td> <td style="width: 60%"><b><span style="color: red">非常重要!</span></b></br>这是客户首选的方式</td> </tr> <tr> <td class="c1" style="width: 10%"> 固定电话:</td> <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td> <td style="width: 60%">区号+电话号码</td> </tr> <tr> <td class="c1" style="width: 10%"> 公司所在地:</td> <td colspan="2" style="width: 90%"> <select style="width: 100px"> <option value="compeny">北京 <option value="compeny">上海 <option value="compeny">成都 </select> <select style="width: 50px"> <option value="local">东城 <option value="local">西城 <option value="local">北城 </select> </td> </tr> <tr> <td class="c1" style="width: 10%"> 街道地址:</td> <td colspan="2" style="width: 30%"> <input name="username" style="text-align: right: 5px;width: 300px"><span style="color: red">*</span> 填写县(区)、街道 </td> </tr> <tr> <td class="c1" style="width: 10%"> 传真号:</td> <td colspan="2" style="width: 30%"> <input name="username" style="text-align: right: 5px;"> </td> </tr> <tr> <td class="c1" style="width: 10%"> 手机号:</td> <td colspan="2" style="width: 30%"> <input name="username" style="text-align: right: 5px;"> </td> </tr> <tr> <td class="c1" style="width: 10%"> 传真号:</td> <td colspan="2" style="width: 30%"> <input name="username" style="text-align: right: 5px;"> </td> </tr> <tr> <td class="c1" style="width: 10%"> 邮政号:</td> <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td> <td style="width: 60%"></td> </tr> <tr> <td colspan="3" style="font-size: 20px;font-size: b;">3.公司主营业务</td> </tr> <tr> <td class="c1" style="width: 10%"> 公司名称:</td> <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td> <td style="width: 60%">填写注册号,公司全称<br>无商号的个体填写营业执照号如:张三</td> </tr> <tr> <td class="c1" style="width: 10%"> 你的职位:</td> <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td> <td style="width: 60%"></td> </tr> <tr> <td class="c1" style="width: 10%"> 主营行业:</td> <td style="width: 30%"> <select> <option value="work">电子电工 <option value="work">装修 <option value="work">祭祀 </select> </td> <td style="width: 60%">请选择正确</td> </tr> <tr> <td class="c1" style="width: 10%"> 主营产品/服务:</td> <td colspan="2" style="width: 30%"> <input name="username" style="text-align: right: 5px;width: 300px"> <span style="color: red">*</span> 3个主要的产品,至少需要填写一个 </td> </tr> <tr> <td class="c1" style="width: 10%"> 公司网站:</td> <td colspan="2" style="width: 30%"> <input name="username" style="text-align: right: 5px;width: 300px;" placeholder="http://"> </td> </tr> <tr> <td class="c1" style="width: 10%"> </td> <td colspan="2" style="width: 30%"> <input type="submit" style="width: 200px;height: 60px;border-radius: 10px;background: green;" > </td> </tr> </table> </form> </body> </html>
BS和CS
Bs浏览器服务器模式:不用客户跟新,不安全,只要右浏览器就可以访问,
Cs客户服务器模式;需要下载APP,安全,服务器速度块,需要跟新软件,