博客

表格

<!--基本语法-->
<table>
    <caption>
    标题
    </caption>
    <thead>
    	<tr>
        	<th></th>
        </tr>
    </thead>
	<tbody>
    	<tr>
        	<td></td>
        </tr>
    </tbody>
</table>

<!--
<tr>:    一个tr代表一行
<th>:    内部内容加粗
<td>:    普通内容不加粗
<caption>: 表格标题
<thead>: 表格头
<tbody>: 表格内容
-->


<!--
表格属性
1.border:表格边框宽度
2.cellpadding:内边距
3.cellspacing:外边距
4.width:宽度，最好通过css样式修改长宽
5.rowspan:单元格竖跨多少行
6.colspan:单元格横跨多少列
-->

表单

form表单除了上述的属性还可以在内部嵌套多个标签

label标签

<!--label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果label标签内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。-->	
<!--使用方法-->
<label for="username(指定的标签id)">username:<input type="text" id="username"></label>

textarea标签

<!--可以让用户输入一大段文字-->
<!--使用方法-->
<textarea name="" id="" cols="30" rows="10">
  默认内容
</textarea>
<!--
1.name：名称
2.rows：行数
3.cols：列数
4.disabled：禁用
-->

select

<!--下拉列表，配合option标签一起使用-->
<select name="" id="">
    <optgroup label='一线城市'></optgroup> <!--提示信息-->
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广东</option>
    <option value="4">杭州</option>
</select>
<!--
1.multiple：布尔属性，设置后为多选，否则默认单选
2.disabled：禁用,禁止被选择
3.selected：默认初始值
4.value：定义下拉列表的值，获取值得时候一般获取的都是value
-->

input

<!--输入框，也是表单里面最重要的标签，功能十分之多-->
<!--主要是通过修改type属性来修改功能的-->
<!--
type="text" 普通的文本输入框
type="password" 密码输入框
type="date" 日期选择 若要为其设置values需要遵循格式 Y-m-d
type="checkbox" 多选框 多个多选框需要指名同一个name
type="radio" 单选框 多个单选框需要指名同一个name
type="submit" 提交按钮
type="reset" 重置按钮
type="button" 普通按钮
type="hidden"隐藏的输入框
type="file"文件选择
-->

属性
<!--
name：表单提交时的“键”，注意和id的区别
value：
	type="button", "reset", "submit"时，为按钮上显示的文本年内容
	type="text","password","hidden"时，为输入框的初始值
	type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用
-->

<!--能够触发form表单提交的按钮有-->
<button></button>
<input type='submit'>