星期一"/>
java培训记录Day01 2022/3/14星期一
今日任务：学完HTML
目录
li不可以嵌套，ul可以嵌套
列表
表格的跨行和跨列：
表单
下拉列表框
多行文本框
表单的高级用法
隐藏域
只读和禁用属性
今天的所有代码
li不可以嵌套，ul可以嵌套
<ul><li>数码</li><ul><li>笔记本</li><li>手机</li><li>家电</li></ul><li>美容</li><li>服装</li>
</ul>效果：
HTML：Hyper Text Markup Language 超文本标签语言
水平线标签：<hr/>
列表
有序列表：ol—li
无序列表：ul—li
定义列表：dl—dt、dd（dd会进行一定的缩进）
表格：
<table><tr> <!--tr表示行--><td></td> <!--td表示列--></tr></table>表格的跨行和跨列：
都是在td标签上设置属性
<td colspan=‘2’> <!--表示跨两行-->
<td rowspan="2"> <!--表示跨两列-->表单
<!--基本语法-->
<form action="表单提交地址" method="提交方法"></form><!--表单元素的基本格式 -->
<input name="表单元素名称" type="类型" value="值" size="显示宽度"
maxlength=“最大长度" checked="是否选中" />
各类表单元素
| type | 功能 | 例子 |
| text | 单行文本输入 | <input type="text" name="username" /> |
| password | 密码 | <input type="password" name="password" /> |
| radio | 单选 | <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 |
| checkbox | 多选 | <input type="checkbox" name="hobby" value="书" />书 <input type="checkbox" name="hobby" value="画" />画 |
| reset | 重置表单数据 | <input type="reset" value="重置" /> |
| file | 文件上传 | <input type="file" name="files" /> |
| submit | 提交表单数据 | <input type="submit" value="提交" /> |
| image | 图形提交按钮 | <input type="image" src="images/button.gif" /> |
| button | 普通按钮 | <input type="button" value="播放音乐" /> |
下拉列表框
<select name="bmon"><option value="" selected="selected">[选择月份]</option><option value="0">一月</option><option value="1">二月</option><option value="2">三月</option><option value="3">四月</option>
</select>
多行文本框
<!--基本语法-->
<textarea name="... " cols="列宽" rows="行宽"> 文本内容
</textarea>
<!--示例-->
<h2><img src="images/read.gif" alt="阅读协议" title="阅读协议" />阅读贵美网服务协议
</h2>
<p><textarea name="textarea" cols="40" rows="6">欢迎阅读服务条款协议...</textarea>
</p>
表单的高级用法
隐藏域
既方便服务器端“记住”客户端的数据，又避免因显示浏览者不关心的数据导致用户反感
<!--基本语法-->
<input type="hidden" name="…." value="…" />
<!--示例-->
<input type="hidden" name="userid" value="666" />
<!--隐藏的客户代号信息：666，但客户端页面不显示 -->只读和禁用属性
readonly：希望某个框内的内容只允许用户看，不能修改
disabled：因没达到使用的条件，限制用户使用
<p><textarea name="content" cols="60" rows="8" readonly="readonly">欢迎阅读服务条款协议，贵美的权利和义务......</textarea><br /><br />同意以上协议<input name="agree" type="checkbox" /> <input name="btn" type="submit" value="注册" disabled="disabled" />
</p>今天的所有代码
（使用记事本编写）
<html>
<head><title>这是一个标题</title><style>span {width:20px;}#p1{width:300px;}#reset{margin-left:50px;}</style>
</head>
<body>
<h1>
<p>北京欢迎你</p></h1>
<hr>
<p>北京欢迎你,有梦想谁都了不起！</p>
<p>有勇气就会有奇迹</p>
<br>
<br>
<br>
<h1>唐诗三百首</h1>
<hr>
<h2>目录</h2>
<p>第一首，静夜思</p>
<p>第二首，忆江南</p>
<p>第三首，长恨歌</p><hr>
<h2>静夜思</h2>
<p>作者：李白</p>
<p>床前明月光,疑是地上霜。举头望明月，低头思故乡。</p><hr>
<p>【李白简介】</p>
<p>李白，字太白，号青莲居士，自称与李堂皇室同宗，祖籍陇西成纪（今甘肃天水附近)，剩余暗喜碎叶(遗址在今库尔吉斯坦国境内的阿克别希姆)。五罗随父迁居绵州彰明县......</p><br>
<br>
<br>
<h2>有序列表标签</h2>
<h3>注册步骤</h3>
<ol><li>填写信息</li><li>收电子邮箱</li><li>注册成功</li>
</ol>
<br>
<br>
<br>
<h2>无序列表标签</h2>
<h3>新人上路指南</h3>
<ul><li>如何获取会员名</li><li>如何注册贵美会员</li><li>注册时密码设置有什么要求？</li><li>贵美认证</li>
</ul><br>
<br>
<br><h2>定义描述标签</h2>
<dl><dt>这里是dt标签</dt><dd>这里是dd标签 描述1111111111111111111111111111</dd><dd>dd标签的特点就是会有一定的缩进！22222222222222222222222222222222</dd>
</dl><br>
<br>
<br>
<h2>商品信息</h2>
<h3>产品类别</h3>
<hr>
<!-- dasdasdasdas -->
<ul><li>数码</li><ul><li>笔记本</li><li>手机</li><li>家电</li></ul><li>美容</li><li>服装</li>
</ul>
<hr>
<dl><dt>联想电脑</dt><dd>产品型号。联想IdeaPad Y450A-TFU(NBA纪念版)</dd><dd>价格：4999元</dd><dd>所在地：北京</dd></dl><hr>
<h2>购物流程</h2>
<ol><li>确认购买的信息</li><li>付款到贵美</li><li>确认收货</li><li>付款给商家</li><li>双方评价</li>
</ol><br>
<br>
<br>
<h2>table</h2>
<h3>如何跨列（td colspan="2"）</h3>
<table width="200" border="1"><tr><!-- colspan 属性表示跨多少列 --><td colspan="2">学生成绩</td> </tr><tr><td >语文</td><td >98</td> </tr><tr><td >数学</td><td >95</td> </tr></table><br>
<br>
<br>
<h3>如何跨行（td rowspan="2"）</h3>
<table width="200" border="1"><tr><td rowspan="2">张三 </td><td >语文</td><td >98</td> </tr><tr><td >数学</td><td >95</td> </tr><tr><td rowspan="2">李四 </td><td >语文</td><td >88</td> </tr><tr><td >数学</td><td >91</td> </tr></table>
<br>
<br>
<br><table width="200" border="1"><tr><td colspan ="3">学生成绩 </td> </tr><tr><td rowspan="2">张三</td><td >语文</td><td >98</td> </tr><tr><td >数学</td><td >91</td> </tr><tr><td rowspan="2">李四 </td><td >语文</td><td >88</td> </tr><tr><td >数学</td><td >91</td> </tr></table><br>
<br>
<br>
<table width="500" border="1"><tr><td colspan="3"><h1>商品类目</h1></td></tr><tr><td rowspan="3">虚拟</td><td>移动</td><td>联通</td></tr><tr><td>充值卡</td><td>彩票</td></tr><tr><td>梦幻</td><td>QQ</td></tr><tr><td rowspan="3">虚拟</td><td>移动</td><td>联通</td></tr><tr><td>充值卡</td><td>彩票</td></tr><tr><td>梦幻</td><td>QQ</td></tr>
</table><br>
<br>
<br>
<hr>
<form action="javascript" method="POST">
<p>账号：<input name="userName" type="text" value="这里是默认值" size = "30"/></p>
<p>密码：<input name = "password" type="password" /></p>
<p><input name="reset" type="reset" value="重填"></p>
<p><input name="submit" type="submit" value="同意"></p>
<p><input name="button" type="button" value="重按钮"></p>
<p><input name="img" type="image" src="1.jpg"></p>
</form>
<br>
<br>
<br>
<hr><h3>表单元素--单选按钮</h3>
<p>性别：<input name="sex" type="radio" value="男" checked="checked"/>男<input name="sex" type="radio" value="女"/>女
</p>
<br>
<br>
<br>
<hr><h3>表单元素--复选按钮</h3>
<input type="checkbox" name="hobby1" value="sports" />运动
<input type="checkbox" name="hobby2" value="talk" checked="checked" />聊天
<input type="checkbox" name="hobby3" value="play" /> 玩游戏
<br>
<br>
<br>
<hr>
<h3>表单元素--文件域</h3>
<p><input type="file" name="files" /><br /><input type="submit" name="upload" value="上传" />
</p><br>
<br>
<br>
<hr>
<h3>练习——贵美登录页</h3>
<form action="login.jsp" method="POST">
<h1>贵美网站会员登录</h1>
<p><span>贵美网站会员登录</span><input type="text">
</p>
<p><span>输入密码</span><input type="password">
</p>
<p><span>再次输入密码</span><input type="password">
</p><p><input name = "1" type ="radio">豪华版<input name = "1" type ="radio">简洁版
</p><p><input name = "2" type ="checkbox">自动登录<input name = "2" type ="checkbox">安全登录
</p><p><input name = "2" type ="reset"><input name = "2" type ="button" value="登录">
</p><input type="image" scr="1.jpg" /></form><br>
<br>
<br>
<hr>
<h3>表单元素--下拉列表框</h3>
<select name="bmon"><option value="" selected="selected">[选择月份]</option><option value="0">一月</option><option value="1">二月</option><option value="2">三月</option><option value="3">四月</option>
</select> <br>
<br>
<br>
<hr>
<h3>表单元素--多行文本框</h3>
<h4><img src="" alt="阅读协议" title="阅读协议" />阅读贵美网服务协议
</h2>
<p><textarea name="textarea" cols="40" rows="6">欢迎阅读服务条款协议...</textarea>
</p><br>
<br>
<br>
<hr>
<h3>表单的高级应用——隐藏域</h3>
<!-- 方便服务器端“记住”客户端的信息、但又不希望客户看到的数据
隐藏的客户代号信息：666，但客户端页面不显示
隐藏域：既方便服务器端“记住”客户端的数据，又避免因显示浏览者不关心的数据导致用户反感
-->
<input type="hidden" name="userid" value="666" /><br>
<br>
<br>
<hr>
<h3>表单的高级应用——只读和禁用属性</h3>
<form><p><textarea name="content" cols="60" rows="8" readonly="readonly">欢迎阅读服务条款协议，贵美的权利和义务......</textarea><br /><br />同意以上协议<input name="agree" type="checkbox" /> <input name="btn" type="submit" value="注册" disabled="ture" /></p>
</form><br>
<br>
<br>
<hr>
<h3>练习——简易求职表 </h3><form>申请表<br><p>姓名：<input type="text"></p><p>密码：<input type="password"></p><p>照片：</p><p><input type="file"></p><p>感兴趣的职位</p><p><input type="radio" name="1">Web设计<input type="radio" name="1">Web开发</p><p>向往的 城市：<select name="bmon"><option value="" selected="selected">[选择城市]</option><option value="0">北京</option><option value="1">上海</option><option value="2">南京</option><option value="3">合肥</option></select> </p><p>协议：</p><p><textarea name="content" cols="60" rows="8" readonly="readonly">欢迎阅读服务条款协议</textarea><br /><br />我已认真阅读以上协议<input name="agree" type="checkbox" /> </p><p>经验：</p><p><select name="bmon"><option value="" selected="selected">无经验</option><option value="0">有经验</option></select> </p><p id="p1"><input name="btn" type="submit" value="注册" disabled="disabled" /><input type="reset" value="重置" id="reset"></p>
</form></body></html>更多推荐
java培训记录Day01 2022/3/14星期一
发布评论