PythonNote03_HTML标签
2024-09-04 06:05:32
<!DOCTYPE>
<html>
<head>
<meta charset = "utf-8" />
<meta name="Keywords" content="" />
<mata name = "description" content = "" />
<title>03_复习随敲_0111</title>
<style>
*{margin: 0;padding: 0;}
h1{text-align: center;color: red;}
ol{margin: 0 0 0 30px}
.zd{color: red;font-size: 20}
</style>
</head>
<body>
<h1>03_复习笔记_0111</h1>
<hr color="blue" size="5" /> <h2>主要内容</h2>
<ol type="1">
<li>form表单</li>
<li>label元素</li>
<li>textarea元素</li>
<li>input元素</li>
<li>表格元素</li>
<li>frameset框架</li>
</ol>
<hr color="blue" size="5" /> <h2>1.form表单</h2>
<ol type="A">
<li>格式</li>
<ul>
<li class="zd"><form action=""><br />
表单域<br />
</form></li>
</ul>
<hr /> <li>属性</li>
<ul>
<li>action: 收集到的数据提交到哪个页面 --> # 表示当前页面</li>
<li>
method：提交数据的方式 --> GET 显示提交，请求快，URL地址有长度限制、POST 隐式提交
</li>
</ul>
<hr /> <li>效果展示</li>
<form action="#" method="GET">
性别：
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
<br />
提交：<input type="submit" name="submit" value="Yes">
</form>
</ol>
<hr color="blue" size="5" /> <h2>2.label标签</h2>
<ol type="A">
<li>功能</li>
<ul>
<li>
可以将两个标签链接起来，如：将男和男前面的radio元素关联起来，点击男就相当于点击了男前面的radio按钮<br />
利用id来实现关联
</li>
</ul>
<hr /> <li>格式</li>
<ul>
<li class="zd"><input type="radio" name="gender" id="男" /> <label for="男">男</label> </li>
</ul>
<hr /> <li>效果</li>
<ul>
<form action="#">
性别：
<input type="radio" name="gender" id="男" /> <label for="男">男</label>
<input type="radio" name="gender" id="女" /> <label for="女">女</label>
</form>
</ul>
</ol>
<hr color="blue" size="5" /> <h2>3.多行文本输入框标签 --> textarea标签</h2>
<ol type="A">
<li>格式</li>
<ul>
<li class="zd">
<textarea name="个人介绍" id="" cols="30" rows="10"></textarea>
</li>
</ul>
<hr /> <li>属性</li>
<ul>
<li>name：元素名字</li>
<li>id：类似于身份证号码，不能有重复值</li>
<li>cols：文本框的列数</li>
<li>rows：文本框的行数</li>
</ul>
<hr /> <li>效果展示</li>
<ul>
<li>
<textarea name="个人介绍" id="" cols="30" rows="10"></textarea>
</li>
</ul>
</ol>
<hr color="blue" size="5" /> <h2>4.input元素</h2>
<ol type="A">
<li>input实现按钮</li>
<ol type="a">
<li>格式</li>
<ul>
<li class="zd"><input type="button" name="" value="按钮"></li>
</ul>
<li>效果展示</li>
<ul>
<li>
<input type="button" name="" value="按钮">
</li>
</ul>
</ol>
<hr /> <li>input实现隐藏域</li>
<ol type="a">
<li>格式</li>
<ul>
<li class="zd">
<input type="hidden" name="hidden" value="我是被隐藏的数据">
</li>
</ul>
<li>实现效果</li>
<ul>
<li><input type="hidden" name="hidden" value="我是被隐藏的数据"></li>
<li>没有效果，但是如果将其进行提交就知道啦</li>
<li class="zd">注意：隐藏域和提交都必须位于同一个表单域时才能提交成功</li>
</ul>
</ol>
<hr /> <li>input实现文件打开</li>
<ol type="a">
<li>格式</li>
<ul>
<li class="zd"><input type="file" name="文件" /></li>
</ul>
<li>实现效果</li>
<ul>
<li>
<form action="#">
<input type="file" name="文件" />
<input type="submit" name="" />
</form>
</li>
</ul>
</ol>
<hr /> <li>input实现重置按钮</li>
<ol type="a">
<li>格式</li>
<ul>
<li class="zd"><input type="reset" name="reset" value="重置" /></li>
</ul>
<li>实现效果</li>
<ul>
<li>
<form action="">
用户名：<input type="text" name="username" placeholder="请输入用户名" />
<input type="reset" name="reset" value="重置" /><br />
<input type="submit">
</form>
</li>
</ul>
</ol>
<hr /> <li>input实现滑块</li>
<ol type="a">
<li>格式</li>
<ul>
<li class="zd"><input type="range" style="width:300px" name=""<</li>
</ul>
<li>实现效果</li>
<ul>
<li>
<input type="range" style="width:300px" name="">
</li>
</ul>
</ol>
<hr /> <li>注意：input元素要放在form表单域中</li>
</ol>
<hr color="blue" size="5" /> <h2>5.表格元素</h2>
<ol type="A">
<li>格式</li>
<ul>
<li class="zd">见源代码</li>
</ul>
<hr /> <li>实现效果</li>
<ul>
<li>
<table border="1">
<thead>
<tr>
<td colspan="3">学生信息</td>
</tr>
</thead>
<tbody>
<tr>
<td>学号</td>
<td>姓名</td>
<td>爱好</td>
</tr>
<tr>
<td>2012114018</td>
<td>王杨帅</td>
<td>basketball</td>
</tr>
<tr>
<td>21116092312</td>
<td>杨帅王</td>
<td>programming</td>
</tr>
</tbody> </table>
</li>
</ul>
<hr /> <li>注意：详细笔记见 03_课堂随敲03_表格</li>
</ol>
<hr color="blue" size="5" /> <h2>6.frameset框架</h2>
<ol type=""A>
<li>见单独的frame文件</li> </ol> </body>
</html>
复习代码
最新文章
- HTML5 学习总结（三）——本地存储
- CMakeLists.txt
- ScrollView 里的 EditText 与输入法的用例
- Windows下好用到必须开机自启的小工具
- 在Android中如何获取视频的第一帧图片并显示在一个ImageView中
- HTC Vive开发笔记之手柄控制
- 二模02day1解题报告
- C++和C#混合编程
- C#常用集合的使用(转载)
- 对比C++中的指针和引用
- Delphi 发展历史
- maven 解决 Eclipse is running in a JRE, but a JDK is
- ACM2028
- java中的多线程——进度1
- java中关于转义字符的一个bug
- 企业级缓存系统varnish应用
- SmartSql 入门
- 20175236 2018-2019-2 《Java程序设计》第五周学习总结
- ACM-ICPC 2018 焦作赛区网络预赛 G Give Candies(高精度求余)
- SQL 性能分析