基本结构
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8" />
<title>标题</title>
</head>
<body>
<div>内容</div>
</body>
</html>
网站代码结构
<!doctype html>#文档类型
<html>
<head>
<meta charset="utf-8">#设置浏览器的阅读编码
<title>……</title>#设置网站首页的标题
<meta name="keywords" content="……"/(斜线表示自我闭合,可不加 )>
<meta name="description" content="……">#网站描述
</head>
<body>
<h1>……</h1>#可见的网站骨架或实体内容
</body>
</html>
html文档注释
<!-- 内容 -->
< <
> >
<< «
>> »
× ×；
颜色65535种 颜色：
#ff00ff 紫色 1.十进制 rgb(255,0,0) 红；rgb(0,255,0) 绿；rgb(0,0,255) 蓝
#ff0000 红色
#00ff00 绿色 2.十六进制 #ff0000 红色;#00ff00 绿色;#0000ff 蓝色
#0000ff 蓝色
#cccccc 灰色 3.带有透明度 rgba(255,0,0,0.5) 50%透明度的红色
#ffff00 黄色
#00ffff 青色 4.英文（不建议使用） red 红；green 绿色；blue 蓝
#000000 黑色
#ffffff 白色
格式标签：
br //换行，单标签
nobr //不换行，双标签
p //段落，align属性（对齐属性）：left/center/right(左对齐/居中/右对齐)
center //居中（不常用），大面积居中
pre //按源代码显示（以代码的格式输出）
ul //无序列表（圆点排序）
ol //有序列表（数字排序）
dl //自定义列表 |<dl>
dt //自定义标题 |<dt></dt>(可作出选择题应用效果)
dd //自定义列表内容 |<dd></dd>
hr //导航线 |</dl>
标签分类：
块标签
<p></p>,<h1></h1>……独占一行、自动换行
2.行标签 <span></span>……自己有多宽占多宽
文本标签
h1~h6 字体大小（由大到小，默认加粗）
b 加粗
i 斜体
u 下划线
图片标签
<img src="" width="" "height"="" alt="" title="" usemap="" />
src //图片地址 alt //图片加载失败
width //图片宽 title //所有标签都有该属性、标题
height //图片高 usermap //热点地图（不常用），可以在图片上打开新的网址
附：坐标系的原点在左上角（0,0）坐标
超链接——a标签属性
1.title <a href="网址" target=''>……</a>
2.href <style>
3.img a{text-decoration: none;} 用映式去掉超链接的下划线
4.target </style>
1)_blank //新窗口
2)_self //本窗口
3)_parent//父窗口 |不
4)_top //顶窗口 |常
5)窗口名称//窗口名称 |用
url网址：
http://www.baidu.com/index.php?id=10
http http协议
www.baidu.com 域名
index.php 脚本文件
id=10 脚本参数
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h1>用户表</h1>
<table border='1px' cellspacing='0px' width='100%'>
#border设置表格，cellspacing设置表格与边框的空隙，width设置表格宽度
<tr>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
</tr>
<tr>
<td colspan='3'>123</td>
</tr>
#tr是行的意思，td是格的意思，th是表头（即表格第一行）
</table>
</body>
</html>
td标签属性
width宽
height高
#在标签中设置宽高导致表格及其不协调，一般不用
colspan合并列
rowspan合并行
align left|center|right
valign top|middle|bottom
表格
<table border='1px' cellspacing='0px' width='100%'>
<tr>
<th>asdf</th>
<th>asdf</th>
<th>asdf</th>
</tr>
<tr>
<td>aa</td>
<td>aa</td>
<td>aa</td>
</tr>
</table>
表单基本实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
</style>
</head>
<body>
<h1>请注册:</h1>
<form action="reg.php"><!--此处php代码自行更改-->
<p>
<span>用户名:</span>
<input type="text">
</p>
<p>
<span>密 码:</span>
<input type="password" name='username'>
</p>
<p>
<span>确认密码:</span>
<input type="password" name='password'>
</p>
<p>
<span>邮箱:</span>
<input type="text" name='mail'>
</p>
<p>
<span>手机:</span>
<input type="text" name='phone'>
</p>
<p>
<input type="submit" value='注册'>
<input type="reset" value='取消'>
</p>
</form>
</body>
</html>
表单实例2 | 利用表格对齐
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
td{
text-align:left;
height:40px;
}
</style>
</head>
<body>
<h1>请注册:</h1>
<form action="reg.php">
<table border='0px' cellspacing='0px' width='400px'>
<tr>
<td>
<span>用户名:</span>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<span>密码:</span>
</td>
<td>
<input type="password" name='username'>
</td>
</tr>
<tr>
<td>
<span>确认密码:</span>
</td>
<td>
<input type="password" name='password'>
</td>
</tr>
<tr>
<td>
<span>邮箱:</span>
</td>
<td>
<input type="text" name='mail'>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value='注册'>
<input type="reset" value='取消'>
</td>
</tr>
</table>
</form>
</body>
</html>
action：上面的表单拥有输入字段以及一个提交按钮，当提交表单时，表单数据会提交到名为 "reg.php" 的页面
method：规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）。
表单数据可以作为 URL 变量（method="get"）或者 HTTP post （method="post"）的方式来发送。
上传文件
<!DOCTYPE html>
<html>
<head>
<title>
...
</title>
</head>
<body>
<form action="reg.php" method="post" enctype='multipart/form-data'>
<p>文件上传</p>
<p><input type="file" name="upload"></p>
</body>
</form>
</html>当表单中有文件上传时，必须包含enctype='multipart/form-data'，否则识别不了
表单元素
表单元素:
1.文本元素
<input type="text" name='username'>
2.密码元素
<input type="password" name='password'>
3.文件元素
<input type="file" name="img">
4.确认元素
<input type="submit" value="确认">
5.重置元素
<input type="reset" value="重置">
6.下拉菜单
<select name="city">
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
7.单选
<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
<input type="radio" name="sex"> 中
8.多选
<input type="checkbox" name="love[]"> 打篮球
<input type="checkbox" name="love[]"> 踢足球
<input type="checkbox" name="love[]"> 开大车
9.文本域
<textarea name="mess" cols="30" rows="10"></textarea>表单完整实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
td{
text-align:left;
height:40px;
}
textarea{
resize:none;
}
</style>
</head>
<body>
<h1>请注册:</h1>
<form action="reg.php" method='post' enctype='multipart/form-data'>
<p>用户名:</p>
<p><input type="text" name='username'></p>
<p>密码:</p>
<p><input type="text" name='password'></p>
<p>文件上传:</p>
<p><input type="file" name='repassword'></p>
<p>邮箱:</p>
<p><input type="text" name='mail'></p>
<p>选择收货地址:</p>
<p>
<select name="city">
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
</p>
<p>性别:</p>
<p>
<label><input type="radio" name="sex"> 男</label>
<label><input type="radio" name="sex"> 女</label>
<label><input type="radio" name="sex"> 中</label>
</p>
<p>爱好:</p>
<p>
<label><input type="checkbox" name="love"> 打篮球</label>
<label><input type="checkbox" name="love"> 踢足球</label>
<label><input type="checkbox" name="love"> 开大车</label>
<label><input type="checkbox" name="love"> 理发</label>
</p>
//label标签可以把勾选框与文字结合起来，点击文字也有勾选效果
<p>请留言:</p>
<textarea name="mess" cols="100" rows="5"></textarea>
<p>
<input type="submit" value='Ok'>
<input type="reset" value='Cancel'>
</p>
</form>
</body>
</html>
表单属性
readonly 可以带值
disabled 不能带值
maxlength 最大长度
扫一扫
1258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
