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>