您的位置：首页 > Web前端 > HTML

HTML学习笔记(下)

2016-07-06 23:40 253 查看

表格标签

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表格标签</title>
</head>
<body>

<!--
##表格标签
```html
<table>
<caption>表格名称</caption>
<tr>
<th>一个单元格</th>
<th>一个单元格</th>
</tr>
<tr>
<td>一个单元格</td>
<td>一个单元格</td>
</tr>
</table>
```
**table常见属性**
- border:边框宽度
- width:宽度
- height:高度
**tr的属性**
- align: 对齐方式
**td的属性**
- width:宽度
- height:高度
- 合并单元格:(值的写法,合并几个单元格,值就写几)
- 行合并:rowspan=""  将几行合并在一起,看上去是一列的几个单元格合并成了一个
- 列合并:colspan=""  将几列合并在一起,看上去是一行的几个单元格合并成了一个
**td和th**
- 区别:
- th中间的内容默认粗体居中显示
- th一般用于做表头

-->
<!-- 一个简单的表格 -->
<table border="1" width="50%" height="50%" bgcolor="gray">
<caption>用户列表</caption>
<tr align="center">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr align="center">
<td>2</td>
<td>李四</td>
<td>女</td>
</tr>
</table>
<!-- 合并单元格 -->
<table border="1" width="50%" height="50%" bgcolor="gray">
<caption>用户列表</caption>
<tr align="center">
<th>默认单元格</th>
<th>默认单元格</th>
<th>默认单元格</th>
</tr>
<tr align="center">
<td colspan="3">这是一个列合并单元格(colspan="3")</td>

</tr>
<tr align="center">
<td rowspan="2">这是一个行合并单元格(rowspan="2")</td>
<td>默认单元格</td>
<td>默认单元格</td>
</tr>
<tr align="center">
<td>默认单元格</td>
<td>默认单元格</td>
</tr>
</table>

<!-- 表格嵌套 -->
<table border="1">
<caption>表格的嵌套</caption>
<tr>
<td rowspan="3">
<table>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>

</body>
</html>

表单

这段我必须承认我非常无耻的抄了别人的笔记…

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单标签</title>
</head>
<body>
<!--
* 表单标签（**********）
* 收集用户输入的数据

* 表单的标签
<form >
* form的属性
* action="表单的提交路径"
* http://www.baidu.com * html页面
* method="提交方式（默认是get方式）"（面试题）
* form表单的提交方式有哪些？（get和post的区别）
* 答：form表单提交方式有很多，常用的有两种post和get
* post和get提交方式的区别：
* get方式会把参数列表显示在地址栏上，post方式不会（请求体）。
* get方式说明网站安全级别较低，post安全级别较高。
* get方式不支持大数据，post支持大数据。

* 推荐大家使用post方式。

* 用户输入的内容
<input type="类型" name="名称(必须要指定)" value="是否指定value属性" />
* name属性必须要指定，value可以看情况指定

* type="text"           普通的文本框
* name必须指定

* type="password"       密码框
* * name必须指定

* type="radio"          单选按钮
* name必须指定  value必须指定
* name的属性，值要相同
* 默认值：checked=checked或者true

* type="checkbox"       多选按钮
* name必须指定  value必须指定
* 默认值：checked=checked或者true

* type="reset"          重置：恢复到最初的状态
* type="submit"         提交表单
* 点击提交后，地址栏发生了变化（?sex=on）
* 在普通的文本框上添加name属性 name="username"之后，点击提交，地址栏发生了变化（?username=haha&sex=on）
String str = "?username=haha&sex=on";
* ?username=zhangsan&password=123&sex=nan&love=zq

* type="file"           选择文件
* name属性指定
* type="hidden"         隐藏组件
* name指定 value指定

* type="button"         按钮
* value="显示的文字"
* 和js（javascript）   绑定事件

* type="image"          图片
* 提交    引入外部的一个文件（图片）

* 声明选择框
<select name="city">
<option value="bj"></option>
<option value="sh"></option>
</select>

* <textarea>文本域
* rows="行"
* clos="列"
* name属性指定
* selected="selected"   代表默认值
</form>
-->

<form>
输入姓名:<input type="text" name="username"/><br/>
输入密码:<input type="password"/><br/>
选择性别:<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" checked="checked" value="femal"/>女<br/>
选择爱好:<input type="checkbox" name="love" value="basketball"/>篮球
<input type="checkbox"/>足球
<input type="checkbox"/>冰球
<input type="checkbox"/>排球<br/>
选择附件:<input type="file"><br/>
隐藏组件:<input type="hidden" name="userID" value="001"><br/>
选择城市:<select name="city">
<option>请选择</option>
<option value="wh">武汉</option>
<option value="hh">黑河</option>
</select>
<input type="reset"/>
<input type="submit"/><br/>
<input type="button" value="test"/>
<input type="image" src="../imgs/tj.png" >
个人简介:<textarea cols=10 rows="20"></textarea>
</form>

</body>
</html>

其他

其他的忽略了…实在不感兴趣…
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航