表格
表格table
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<tr></tr> 行标签
<td></td> 单元格标签
<th></th> 单元格标签,居中加粗
内容居中 align="center"
行合并，单元格合并 rowspan="4"
列合并 colspan="3"
单元格扩宽 cellpadding="20"
单元格间距 cellspacing="20"
<table border="2" cellpadding="20" cellspacing="20">
<thead>
<tr>
<th align="center">班级</th>
<th>学号</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Java2</td>
<td>1001</td>
<td>二</td>
</tr>
<tr>
<!-- <td>Java2</td> -->
<td>1001</td>
<td>二</td>
</tr>
<tr>
<!-- <td>Java2</td> -->
<td>1001</td>
<td>二</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">10</td>
</tr>
</tfoot>
</table>
表单
form表单
一切与数据交互有关的
action: 提交数据的路径
method: 提交方式，get,post
get : 会把请求参数，拼写在（网址）请求url的末尾，用?连接，以name1=value1&name2=value2的形式
用于查询情况非常常见，因为明文，所以有安全隐患，但效率较高，有长度限制1k
post : 把请求参数放在"请求体"中，不是明文的，用于增删改较多，安全性有保证，长度无限制
表单控件
input
name属性 表单控件的名字，与数据交互有关，很重要的属性
value属性 表单控件的值，与数据交互有关，很重要的属性
type属性
text 文本输入框
password 密码框
submit 提交按钮，将表单的所有数据提交到指定的action
reset 重置按钮，将表单重置
button 自定义按钮
radio 单选框
checked 默认选中
checkbox 复选框
checked 默认选中
image 有提交功能的图片
file 文件域
email 有邮箱格式校验的text
date 日期
hidden 隐藏域
按钮的等效写法
<button type="submit">提交1</button>
<button type="reset">提交2</button>
<button type="button">提交3</button>
下拉框select
option是下拉选项
多行文本域
textarea
一些常见属性
placeholder="用户名" 占位
maxlength=3 最大长度
readonly 只读
disabled 禁用
示例：
<form action="https://www.baidu.com/s" method="post">
<p><label for="username">用户名:</label><input id="username" type="text" name="wd" pattern="[1-9]{3}" value="123" disabled=""></p>
<p>密码:<input type="password" placeholder="密码"></p>
<p>email: <input type="email" placeholder="邮箱"></p>
<p>生日: <input type="date"></p>
<p>
性别:<!-- name相同，达到互斥效果 -->
<input type="radio" name="sex" value="男" checked="true">男
<input type="radio" name="sex" value="女">女
</p>
<p>
兴趣爱好：<!-- name相同，保证一组 -->
<input type="checkbox" name="hobby" value="1" checked="true">篮球
<input type="checkbox" name="hobby" value="2" checked="true">足球
<input type="checkbox" name="hobby" value="3">台球
<input type="checkbox" name="hobby" value="4">排球
</p>
<p>
<!-- 有submit功能的图片 -->
<input type="image" src="../20190401/zl.jpg">
<!-- 隐藏域 -->
<input type="hidden" value="119">
</p>
<p>
<!-- 文件域 -->
<input type="file" style="width: 70px;">
</p>
<p>
<!-- 下拉框 -->
<select>
<option value="">省份</option>
<option value="辽宁">辽宁</option>
<option value="湖北" selected="true">湖北</option>
<option value="黑龙江">黑龙江</option>
</select>
</p>
<p>
<textarea placeholder="搜索" rows="10" cols="100" style="resize: none;font-size: 16px;"></textarea>
</p>
<p>
<!-- input -->
<input type="submit" value="提交表单">
<input type="reset" value="重置表单">
<input type="button" value="自定义按钮">
<!-- button -->
<!-- 默认是一个submit -->
<button type="submit">提交1</button>
<button type="reset">提交2</button>
<button type="button">提交3</button>
</p>
</form>
js热身
<style>
ul{
width: 100px;
margin:0;
padding:0;
list-style: none;
}
a{
text-decoration: none;
}
ul ul li{
border:1px solid #FF5722;
border-left: 0;
border-right: 0;
border-bottom: 0;
text-align: center;
}
.blog{
border:1px solid #FF5722;
}
.inner{
display: none;
}
</style>
</head>
<body>
<ul>
<li id="blog" class="blog">
<a id="text" href="javascript:;">博客</a>
<ul id="inner" class="inner">
<li><a href="">博客评论</a></li>
<li><a href="">未读提醒</a></li>
</ul>
</li>
</ul>
<!-- js -->
<script type="text/javascript">
// 根据id获取元素
var oLi = document.getElementById('blog');
var oUl = document.getElementById('inner');
var oText = document.getElementById('text');
/*
绑定事件 元素.事件 = 函数
鼠标左键 onclick
鼠标移入 onmouseover
鼠标移出 onmouseout
类似font-size这种样式，写法变成fontSize
*/
oLi.onmouseover = function (){
oUl.style.display = 'block';
oLi.style.background = 'url(img/zl.jpg)';
oLi.style.width = '200px';
oText.style.fontSize = '18px';
}
oLi.onmouseout = function(){
oUl.style.display = 'none';
oLi.style.background = '#fff';
oLi.style.width = '100px';
oText.style.fontSize = '16px';
}
</script>
</body>
script三种书写位置的写法
1.写在body中
2.写在head中需要在script标签后加window.onload=function(){}
3.写在.js中需要调用，调用语句为
<script src=".js文件地址" type="text/javascript" charset="utf-8"></script>
补充
绑定事件 元素 事件=函数
鼠标移入 onmouseover
鼠标移出 onmouseout
鼠标左键单击时 onclick
鼠标小手形状 cursor:pointer
注意在函数中类似font-size这样的，需要写成fontSize
属性读写
<input id="text" type="text">
<select name="" id="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="阜新">阜新</option>
</select>
<button id="btn" type="button">按钮</button>
<!-- 获取属性 元素.属性 -->
<script type="text/javascript">
var oBtn = document.getElementById('btn');
var oCity = document.getElementById('city');
var oText = document.getElementById('text');
oBtn.onclick = function(){
// oText.value = oText.value+oCity.value;
alert(oText.value + '在' + oCity.value);
}
</script>
属性读写-图片替换
<input id="text" type="text"> <button id="btn" type="button">替换</button>
<br><br>
<img id="img" src="img/zl.jpg" alt="">
<script type="text/javascript">
var oBtn = document.getElementById('btn');
var oImg = document.getElementById('img');
var oText = document.getElementById('text');
oBtn.onclick = function(){
oImg.src = oText.value;
}
</script>
内容替换
<div>
<input type="text" id="text">
<button id="btn" type="button">替换</button>
</div>
<p id="content">省电费水费古典风格的规划法规</p>
<script type="text/javascript">
var oBtn = document.getElementById('btn');
var oP = document.getElementById('content');
var oText = document.getElementById('text');
oBtn.onclick = function(){
// innerText也可以
oP.innerHTML += oText.value;
oText.value = '';
}
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
