HTML部分基础展示：
排版标记
<html>
<head>
<title>排版标记</title>
<!-- 网页的属性: 改变页面的解析码表 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<!-- 在HTML中不支持传统的 空格 回车 制表符 -->
静夜思
<br/>
<p>
窗前明月光,
<br/> 疑是地上霜.
<br/> 举头望明月,
<br/> 低头思故乡.
<br/>
</p>
<hr>
</body>
</html>
字体标记
<html>
<head>
<title>字体标记</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<h1>静夜思</h1>
<p>
<font color="red" size="7" face="黑体">床</font>前明月光,
<br/> 疑是地上霜.
<br/> 举头望明月,
<br/> 低头思故乡.
<br/>
</p>
<hr>
<b>哈哈</b>
<br/> 2
<sup>3</sup>
<br/> 2
<sub>3</sub>
<br/>
</body>
</html>
转义字符
<html>
<head>
<title>转义字符</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
哈 哈
<br/> a<bc>d
<br/> 1
<23>2
</body>
</html>
清单标记
<html>
<head>
<title>清单标记</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
爱好:
<ul type="circle">
<li>抽烟</li>
<li>喝酒</li>
<li>打豆豆</li>
</ul>
<hr/> 爱好:
<ol type="I" start="10">
<li>抽烟</li>
<li>喝酒</li>
<li>打豆豆</li>
</ol>
<hr>
<dl>
<dt>RPG游戏</dt>
<dd>仙剑奇侠传</dd>
<dd>轩辕剑</dd>
<dd>剑侠情缘</dd>
<dt>棋牌游戏</dt>
<dd>斗地主</dd>
<dd>扎金花</dd>
<dd>飞行棋</dd>
</dl>
</body>
</html>
图形标记
<html>
<head>
<title>图形标记</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" />
</body>
</html>
链接标记
<html>
<head>
<title>链接标记</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<a href="02-排版标记.html" target="_blank">点我</a>
<br>
<a href="http://www.baidu.com" target="_blank">百度</a>
<br>
<a href="mailto:xxxx@itcast.cn" target="_blank">联系我们</a>
<br>
<a href="thunder://E3F2A7821" target="_blank">点击下载</a>
<br>
<!--
href属性构成
协议名+协议内容
-->
</body>
</html>
<html>
<head>
<title>链接标记</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<!-- A标签的锚点功能 -->
<a name="_abc"></a>
<img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" />
<br>
<img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" />
<br>
<img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" />
<br>
<img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" />
<br>
<img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" />
<br>
<a name="_middle"></a>
<img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" />
<br>
<img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" />
<br>
<img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" />
<br>
<img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" />
<br>
<img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" />
<br>
<a href="#_abc">回到顶部</a>
<a href="#_middle">回到中间</a>
</body>
</html>
菜单标记
<html>
<head>
<title>表格标记</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<!-- form用于标识表单的范围
action属性: 决定提交的位置
input
type属性:决定输入的类型
name属性(重点):提交的键
size属性:文本输入框的显示长度 text password
maxlength属性:显示文本框输入长度 text password
readonly:只读.不可修改文本内容.会提交 text password
disabled:禁用.被禁用的表单项不会被提交. 所有input都可以使用
select
multiple: 多选
size:一次可以选择的选项数量
disabled:禁用
textarea
disabled:禁用
readonly:只读
form
action:表单提交的地址
method:表单提交的方式.
get提交:
1.将参数键值对拼装在Url地址之后.
2.get提交安全性相对较差
3.get提交参数长度有限
post提交:
1.参数不在Url上
2.post提交安全性相对较好
3.post提交理论上参数长度没有限制
-->
<form action="#" method="post"> #表示本页面 用户名:
<input type="text" name="username" value="jerry" disabled="disabled" />
<br/> 密码:
<input type="password" name="password" size="1" />
<br/> 性别:男
<input type="radio" name="sex" value="male" disabled />女
<input type="radio" name="sex" value="female" disabled />
<br/> 爱好:抽烟
<input type="checkbox" name="habbit" value="smork" /> 喝酒
<input type="checkbox" name="habbit" value="drink" /> 烫头
<input type="checkbox" name="habbit" value="tangtou" />
<br/> 学历:
<select name="edu" multiple size="10" disabled>
<option value="zk">专科</option>
<option value="bk">本科科</option>
<option value="ss">硕士</option>
</select>
<br/> 个人说明:
<textarea rows="10" cols="35" name="desc">这家伙很懒!神马也没留下!</textarea>
<br/> 近照:
<input type="file" name="file" />
<br/>
<!--隐藏域-->
<input type="hidden" name="haha" value="heihei" /> 隐藏域
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
</body>
<html>
<head>
<title>meta标记</title>
<!-- 3秒后刷新到Baidu网站 -->
<meta http-equiv="Refresh" content="3;url=http://www.baidu.com"> 3秒后刷新页面并且跳转到百度
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 解决乱码
</head>
<body>
</body>
</html>