HTML学习02
一、表格
属性名 含义 常用属性值
border 设置表格的边框（默认border=”0”无边框） 像素值
cellspacing 设置单元格与单元格边框之间的空白间距 像素值（默认为2像素）
cellpadding 设置单元格内容与单元格边框之间的空白距离 像素值（默认值为1像素）
width 设置表格的宽度 像素值
height 设置表格的高度 像素值
align 设置表格在网页中的水平对齐方式 left、right、center
表格有th表头（可自动居中对齐）tr行td列

<table border="1">
	<caption>这是标题</caption>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

这是标题

Header 1

Header 2

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2

跨行合并rowspan 跨列合并colspan ctrl+/快速注释 按住鼠标滚轮可以往下拉 表格可以分为三个部分 - 头部，主体和页脚，如同word文档中页面的页眉、正文、页脚。每个页面保持相同，而正文是表格的主要内容持有者。 　头部，主体和页脚的对应的三个标签是： - 创建单独的表头。 - 表示表格的主体。 - 创建一个单独的表页脚。 　表可以包含多个元素以指示不同的页面。 　但值得注意的是和标签应出现在之前 

<table border = "1" width = "100%">
    <thead>
        <tr>     <td colspan = "4">This is the head of the table</td>        </tr>    </thead>
    <tfoot>
        <tr>   <td colspan = "4">This is the foot of the table</td>        </tr>    </tfoot>
    <tbody>
        <tr>            <td>Cell 1</td>            <td>Cell 2</td>            <td>Cell 3</td>            <td>Cell 4</td>        </tr>    </tbody>         
</table>

二、表单
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签 来设置:

<form>
input elements
</form>

表单中input控件
属性 属性值 描述
type text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
file 文件域
name 用户自定义 控件的名称
value 用户自定义 input控件中的默认值
size 正整数 input控件在页面中显示的大小
checked checked 定义选择控件中默认被选择的项
maxlength 正整数 控件允许输入的最多字符数
图片按钮：

<input type=”image” src=”img.jsp”/>

单行文本：

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段

<form>
Password: <input type="password" name="pwd">
</form>

单选按钮

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选框

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

三、序列
无序列表使用

  • 标签： 
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

列表项项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

自定义列表以


开始 

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<label></label>使表单获得焦点
<textarea></textarea>文本域

下拉列表

<select>
<option selected=“selected”>北京</option>//默认选择
<option>上海</option>
<option>广州</option>
</select>

四、HTML5新增
新增标签
header：定义文档的头部
nav:定义导航链接的部分
footer:定义文档或节的页脚底部
article:定义文章
section：定义文档的节
aside:定义侧边
datalist使用

<input type=”text” value=”输入人名” list=”star”>
<datalist id=”star”>//datalist里面用id来实现input连接
<option>刘德华</option>
<option>刘晓</option>
<option>晨程</option>
</datalist>

fieldset用法可以将表单内相关元素分组打包，和legend搭配使用

<fieldset>
<legend>用户登录</legend>
用户名：<input type=”text”><br/>
密码：<input type=“password”>
</fieldset>

新增的input type属性

<input type=”email”>输入邮箱格式
<input type=”tel”>输入手机号码格式
<input type=”url”>输入URL格式，网址
<input type=”number”>输入数字格式
<input type=”search”>搜索框
<input type=”range”>自由拖动滑块
<input type=”time”>小时分钟
<input type=”date”>年月日
<input type=”datetime”>时间
<input type=”month”>月年
<input type=”week”>星期年

新增常用属性值

<input type=”text” placeholder =”请输入用户名”>
占位符提供可描述字段预期的提示信息
<inout type=”text” autofocus>
规定当页面加载时，input元素自动获得焦点
<inout type=”file” multiple>
多文件上传
<inout type=”text”autocomplete=”off” name=“1” >
规定表单是否启用自动完成功能，默认值为on on代表记录已经输入的值
自动记录完成需要提交按钮，表单必须有名字
<inout type=”text” required>
必填项
<inout type=”text” accesskey=”s”>
规定激活，采用Alt+字母的形式