这是一个HTML5页面示例，包含了各种标签的使用，如字体、链接、表格、表单、视频、音频等。页面展示了个人简历，包括姓名、性别、爱好、学历、联系方式等信息，以及一首李清照的诗词。用户还可以填写并提交一份详细的个人信息表单。
<!DOCTYPE html>
<!--第一行叫 声明，默认就是html5-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<font color="blue"><strong>==========3.2号==========</strong></font><br />
<a id="腻古腻古"><font>欢迎来到<strong><em>琳琅天上</em></strong></font>
</a>
<!--
简单的说明，注释的内容在浏览器上不显示，给开发人员自己看的；
快捷键：ctrl + /
font 字体标签,
color修改字体的颜色，支持英文，十六进制
size=“7”设置字体的大小，1-7,7最大
strong 对字体进行加粗的处理
em 斜体
注意：浏览器上的内容换不换行和开发工具中的换行没有任何关系，由标签的属性决定的
行内标签：当内容撑满一行之后才会换行；font a img
块级标签：默认占一行的标签；div li p
br：换行标签
h：标题标签，一共有6个兄弟，h1——h6，写文章的标题的时候会用
p：段落标签
hr：水平线
-->
<h2 align="center">静夜思</h2><br />
<hr color="aquamarine"/><br />
床前明月光<br />疑是地上霜<br>举头望明月<br><font color="blue">低头思故乡</font>
<a id="卡莎"><font color="aqua"><h1>静夜思</h1></font></a>
<br>
<hr color="#E40F0F">
<br />
<p>床 疑 举 低<br />
前 是 头 头<br>
<em>明 地 望 思</em>
<br><strong>月 上 明 故</strong>
<br>光 霜 月 乡</p>
<!-- img 图片标签，引入一张图片
src：图片的地址
height：高度，单位：像素（px）
width：宽度
alt：图片描述：图片不展示的时候他就出来了，图片展示时候就隐藏
<!-- a:超链接，锚链接
作用：页面的跳转，页面的定位，发邮件
页面定位需要2个超链接配合使用
第一个a必须要有一个id，把第一个a链接叫锚点
第二个a可以回到指定的锚点位置，语法：href=“#id”
href：地址
target="_self":（默认）当前浏览器窗口打开，新窗口打开的话，需要使用_black
<-->
<a href="https://www.taobao.com/" target="_blank">
<img src="img/kasha.jpg" width="500px" height="500px" alt="卡莎"/>
</a>
<a href="http://www.2345.com" target="_blank">
<img alt="卡莎" src="img/kasha.jpg" height="200px" width="200px"
</a>
<img alt="火影" src="img/huoying.jpg" width="200px" height="100px" />
<a href="http://www.baidu.com" target="_blank">
<img alt="火影" src="img/huoying.jpg" width="100px" height="200px" />
</a>
<a href="http://2916807898@qq.com" target="_blank">请联系我
</a>
<hr />
<!--表格标签
table：表格
tr：行
td：单元格
border：边框
th：和td用法一样，一般用于表头
background：背景图片
colspan=“4”，表示当前单元格占4列
rowspan=“3”，表示当前单元格占3行
-->
<table border="1px" width="800px" height="900px" cellspacing="0px" align="center">
<tr align="center">
<td width="100px"><strong>姓 名</strong></td>
<td>卡莎</td>
<td><strong>性 别</strong></td>
<td>女</td>
<td><strong>民 族</strong></td>
<td>汉</td>
<td rowspan="4">
<a href="http://www.4399.com" target="_blank">
<img alt="卡莎" src="img/kasha.jpg" width="100px" height="100px" /></td>
</tr>
<tr align="center">
<td><strong>出生年月</strong></td>
<td>2000.1</td>
<td><strong>政治面貌</strong></td>
<td>团员</td>
<td><strong>籍 贯</strong></td>
<td>江苏</td>
<!--<td></td>-->
</tr>
<tr align="center">
<td><strong>身体状况</strong></td>
<td>健康</td>
<td><strong>身 高</strong></td>
<td>166cm</td>
<td><strong>招生类别</strong></td>
<td>并轨</td>
<!--<td></td>-->
</tr>
<tr align="center">
<td><strong>学 历</strong></td>
<td>本科</td>
<td><strong>学 制</strong></td>
<td>四年</td>
<td><strong>系 别</strong></td>
<td>电子信息系</td>
<!--<td></td>-->
</tr>
<tr align="center">
<td><strong>毕业学校</strong></td>
<td colspan="3">北京大学</td>
<!--<td></td>-->
<!--<td></td>-->
<td><strong>专 业</strong></td>
<td colspan="2">计算机网络技术</td>
<!--<td></td>-->
</tr>
<tr align="center">
<td><strong>电 话</strong></td>
<td colspan="2">12345678910</td>
<!--<td></td>-->
<td colspan="2"><strong>E-mail 地址</strong></td>
<!--<td></td>-->
<td colspan="2">12345678910@qq.com</td>
<!--<td></td>-->
</tr>
<tr>
<td align="center"><strong>联系地址</strong></td>
<td colspan="6">北京市北京大学 邮编：123456</td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td>-->
</tr>
<tr>
<td align="center"><strong>家庭地址</strong></td>
<td colspan="6">江苏省南京市</td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td>-->
</tr>
<tr>
<td align="center"><strong>爱 好</strong></td>
<td colspan="6">打羽毛球、篮球、排球；听音乐；看文学书籍、杂志</td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td>-->
</tr>
<tr>
<td align="center"><strong>个人<br />奖励</strong></td>
<td colspan="6">2008年6月份顺利通过英语四级考试
<br>2008年4月份通过国家计算机二级Java考试
<br>大一第一学期荣获三等奖学金
</td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td>-->
</tr>
<tr>
<td align="center"><strong>实<br />践<br />情<br />况</strong></td>
<td colspan="6">校内实践：
<br>C++语言编程实习，网站制作实训，计算机组装与维护实训，<br />
JAVA编程实训，汇编语言实训，WEB程序的开发，公益劳动活动。
<br>校外实训：
<br>2007年暑假期间，在思念食品有限公司兼职2个月；
<br>2007年暑假期间，在超市兼职1个月；
<br>2008年暑假期间，在移动公司兼职1个月。</td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td>-->
</tr>
<tr>
<td align="center"><strong>I<br />T<br />技<br />能</strong></td>
<td colspan="6">熟练掌握office2003办公软件，Fireworks MX、Photoshop图片处理软件的基本操作；<br />
熟悉SQL server2000、mySQL、access数据库操作和应用;<br />
一些常用专业软件的应用，如网页三剑客、Tomcat5.5、Jbuilder2006等；<br />
了解计算机的基础组成，计算机网络结构，和计算机的日常维护工作。</td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td>-->
</tr>
<tr>
<td align="center"><strong>自我<br />评价</strong></td>
<td colspan="6">性格外向、乐观开朗、活泼好动，做事认真负责，自律，自信，自强，勤奋，团结。</td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td>-->
</tr>
</table>
<h2>清平乐</h2>
<hr />
<p>
年年雪里，常插梅花醉，挼尽梅花无好意，赢得满衣清泪！<br />
今年海角天涯，萧萧两鬓生华。<br />
看取晚来风势，故应难看梅花。
</p>
<h2>人物简介</h2>
<p>
<strong>李清照</strong>(<em>1084年3月13日~1155年5月12日</em>),宋代女词人，号易安居士，婉约词派代<br />
表，有“千古第一才女”之称。早期生活优裕，金兵入据中原时，流寓南方，境遇孤苦。<br />
所作词，前期多写其悠闲生活，后期多悲叹身世，情调伤感。形式上善用白描手法，<br />
自辟途径，语言清丽。论词强调协律，崇尚典雅，提出词“别是一家”之说，反对以作诗<br />
文之法作词，留有诗集《易安居士文集》《易安词》等。
<hr />
©李清照版权所有
</p>
<br><br><br><br><br><br><br><br><br>
<font color="blue"><strong>==========3.3号==========</strong></font>
<!--<font></font>
<span></span> -->
<!--今天的核心：表单标签 form
是一组标签。作用：收集数据，
输入框，单选框，多选框，下拉框，密码框，
文本框，上传，提交按钮，重置按钮
input:用户输入一些文本信息,默认是type=“text”
type=“password”：密码框，输入的内容不可见
type="radio"：单选框，一定要给出name属性值，并且一定要一样
checked=“checked”：默认选中
type="checkbox"：多选框
select：下拉框，要配合option一起使用；selected=“selected”：默认选中
testarea：文本区域
button：简单的按钮
记住：千万不要高估用户智商，能简单点就简单点，能点的就不要手写
1：只要是用户手动输入的，都需要给一个属性值name
2：只要不是用户手动输入的，单选框、多选框、下拉框；就一定要给一个value的属性值
-->
<form>
<input type="hidden" value="你看不到我" />
用户名：<input type="text" id="username" name="username"/><br />
密码：<input type="password" id="password" name="password"/><br />
性别：<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女<br />
爱好：<input type="checkbox" name="hobby" value="飞天" />飞天
<input type="checkbox" name="hobby" value="遁地" />遁地
<input type="checkbox" name="hobby" value="自瞄" />自瞄
<input type="checkbox" name="hobby" value="锁血" />锁血
<input type="checkbox" name="hobby" value="炸飞机" />炸飞机
<input type="checkbox" name="hobby" value="JAVA" />JAVA<br />
籍贯：<select>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="南京" selected="selected">南京</option>
<option value="苏州">苏州</option>
</select><br />
自我介绍：
<textarea cols="20px" rows="10px"></textarea><br />
出生日期：<input type="date" /><br />
照片上传：<input type="file"><br />
<input type="submit" value="立即登录">
<input type="reset" />
</form>
<button>别点这个按钮</button>
<!--视频标签：播放视频
controls="controls":播放视频的展示(播放视频)
autoplay="autoplay":自动播放
loop="loop"：循环播放
-->
<br />
<br><br><br><br><br>
<video loop="loop" autoplay="autoplay" controls="controls">
<source src="video/bcd.webm" type="video/webm"/>
<source src="video/bcd.mp4" type="video/mp4"/>
</video>
<audio autoplay="controls" loop="loop" controls="controls">
<source src="audio/abc.ogg" type="audio/ogg">
<source src="audio/abc.mp3" type="audio/mp3">
</audio>
<br><br><br><br><br><br><br><br>
<table border="3px" align="center" bordercolor="#354F46" cellpadding="0px" cellspacing="0px" width="900px" height="1000px" bgcolor="#DDEDE7">
<tr align="center">
<td width="100px" height="40px"><strong>姓 名</strong></td>
<td><input type="text" id="username" name="username" size="6"></td>
<td width="100px"><strong>性 别</strong></td>
<td><input type="radio" name="sex" value="男" checked="checked">男
<input type="radio" name="sex" value="女">女
</td>
<td width="100px"><strong>民 族</strong></td>
<td>
<select>
<option value="汉族" selected="selected">汉族</option>
<option value="维吾尔族">维吾尔族</option>
<option value="藏族">藏族</option>
<option value="傣族">傣族</option>
<option value="回族">回族</option>
<option value="彝族">彝族</option>
<option value="高山族">高山族</option>
<option value="其他族">其他族</option>
</select>
</td>
<td width="150px" rowspan="4"><input type="file"></td>
</tr>
<tr align="center" height="40px">
<td><strong>出生年月</strong></td>
<td><input type="date"></td>
<td><strong>政治面貌</strong></td>
<td>
<select>
<option value="群众" selected="selected">群众</option>
<option value="团员">团员</option>
<option value="党员">党员</option>
</select>
</td>
<td><strong>籍 贯</strong></td>
<td>
<input type="text" name="nation" id="nation" size="6">
</td>
<!--<td></td>-->
</tr><tr align="center" height="40px">
<td><strong>身体状况</strong></td>
<td>
<select>
<option value="健康" selected="selected">健康</option>
<option value="良好">良好</option>
<option value="疾病">疾病</option>
</select>
</td>
<td><strong>身 高</strong></td>
<td>
<input type="text" size="2">cm
</td>
<td><strong>招生类别</strong></td>
<td>
<select>
<option value="统招本科" selected="selected">统招本科</option>
<option value="统招大专">统招大专</option>
<option value="自考">自考</option>
<option value="专转本">专转本</option>
<option value="专升本">专升本</option>
</select>
</td>
<!--<td></td>-->
</tr><tr align="center" height="40px">
<td><strong>学 历</strong></td>
<td>
<select>
<option value="本科" selected="selected">本科</option>
<option value="大专">大专</option>
<option value="高中">高中</option>
</select>
</td>
<td><strong>学 制</strong></td>
<td>
<select>
<option value="三年" selected="selected">三年</option>
<option value="四年">四年</option>
<option value="五年">五年</option>
</select>
</td>
<td><strong>系 别</strong></td>
<td><input type="text" size="7"></td>
<!--<td></td>-->
</tr><tr align="center" height="40px">
<td><strong>毕业学校</strong></td>
<td colspan="3"><input type="text" size="25"></td>
<!--<td></td>
<td></td>-->
<td><strong>专 业</strong></td>
<td colspan="2"><input type="text" size="25"></td>
<!--<td></td>-->
</tr><tr align="center" height="40px">
<td><strong>电 话</strong></td>
<td colspan="2"><input type="text" size="20"</td>
<!--<td></td>-->
<td colspan="2"><strong>E-mail地址</strong></td>
<!--<td></td>-->
<td colspan="2"><input type="text" size="25"></td>
<!--<td></td>-->
</tr><tr height="40px">
<td align="center"><strong>联系地址</strong></td>
<td colspan="6"><textarea cols="70px" rows="1px"></textarea></td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td>-->
</tr><tr height="40px">
<td align="center"><strong>家庭地址</strong></td>
<td colspan="6"><textarea cols="70px" rows="1px"></textarea></td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td>-->
</tr><tr>
<td align="center"><strong>爱 好</strong></td>
<td colspan="6"><textarea cols="70px" rows="4px"></textarea></td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td>-->
</tr><tr>
<td align="center"><strong>个人奖励</strong></td>
<td colspan="6"><textarea cols="70px" rows="4px"></textarea></td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td>-->
</tr><tr>
<td align="center"><strong>实<br>践<br>情<br>况</strong></td>
<td colspan="6"><textarea cols="70px" rows="9px"></textarea></td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td>-->
</tr>
<tr>
<td align="center"><strong>IT<br>技<br>能</strong></td>
<td colspan="6"><textarea cols="70px" rows="9px"></textarea></td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td>-->
</tr>
<tr>
<td align="center"><strong>自我<br>评价</strong></td>
<td colspan="6"><textarea cols="70px" rows="5px"></textarea></td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td>-->
</tr>
</table>
<table align="center">
<tr>
<td colspan="7" align="center">
<input type="submit" value="立即提交">
<input type="reset">
</td>
</tr>
</table>
<a href="http://www.taobao.com" target="_blank">
<img src="img/kasha.jpg" width="100" height="100" />
</a>
<table border="1px" cellspacing="0" width="400" height="200" align="center">
<tr align="center">
<td colspan="3">学员成绩表</td>
</tr>
<tr align="center">
<td rowspan="2">张三</td>
<td>java</td>
<td>80</td>
</tr>
<tr align="center">
<td>english</td>
<td>50</td>
</tr>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#腻古腻古">回到顶部</a>
<a href="#卡莎">回到卡莎</a>
</body>
</html>
20220304
于 2022-03-05 09:40:50 首次发布
扫一扫
706
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
