基本结构

<!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文档注释

<!-- 内容 -->     
<   &lt;                      
>   &gt;                      
    &nbsp;                    
<<  &laquo;                   
>>  &raquo;                   
×   &times；                  

颜色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>

html5 颜色控件 html5中颜色代码_表单

表单基本实例

<!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>

html5 颜色控件 html5中颜色代码_php_02

   表单实例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>

html5 颜色控件 html5中颜色代码_php_03

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 最大长度