HTML基础知识整合2

meta标签

<meta charset="utf-8">编码字符集

<meta name="keywords" content="关键字内容，给搜索引擎看的">

<meta name="description" content="网页描述内容">

<meta http-equiv="refresh" content="n;(n秒后跳转的网址）">

link标签

链接外部样式表文件：<link rel="stylesheet" href="1.css">

icon图标：<link rel="icon" href="图标.ico(图标名)"

表格行与列

<table border(边框粗细)="1" width="500" height="300" cellspacing(单元格间距)="0" cellpadding(内容距边框的距离)="10" align="left|right|center"  bgcolor="表格背景颜色" bordercolor="边框颜色">

<tr>--------------------行

<td align(文字居中)="center"></td>-------------列(1个td对应1个单元格)

<td></td>

</tr>

</table>

表格的标准结构

<table>

<thead><tr><td></td></tr></thead>

<tbody><tr><td></td></tr></tbody>

<tfoot><tr><td></td></tr></tfoot>

</table>

表头和单元格合并

<caption>表头</caption>

<td colspan="2"></td>(本单元格横向合并两格)

<td rowspan="2"></td>(本单元格纵向合并两格)

表格标题（内容加粗居中）

首行的<td>全部变为<th>

内容垂直对齐方式(顶中底部对齐)

<td valign="top|middle|bottom"></td>

细线表格

<table bgcolor="有色背景颜色" cellspacing="1">

<tr bgcolor="white"></tr>    (单元格设为白色底)

<tr bgcolor="white"></tr>

</table>

表单文本输入框

表单的组成：提示信息+表单控件+表单域

<form action="信息提交后的处理文件" method="get|post（通过地址栏|通过文件传递信息）">

用户名：<input type="text" maxlength（输入上限）="6" readonly(只读)="readonly"  disabled(未激活)="disabled" name（输入框名字）="username"  value（将输入框内容传给处理文件）="默认内容值">

<br>(换行)

密码：<input type="password" name="pwd" 其余同上>

单选框(name设置相同时才能实现单选)：

             <input type="radio" name="gender" checked(默认选中)="checked">男

             <input type="radio" name="gender">女

</form>

表单下拉列表

 文本：<select multiple(设置可多选)="multiple">

          <option selected(默认选中)="selected">下拉列表选项</option>

          <option>下拉列表选项</option>...

          </select>

下拉列表内容分组：

          <select>

          <optgroup lable="分组名">

          <option>下拉列表选项</option>...

          </optgroup>

          </select>

表单多选框

<input type="checkbox" checked="checked">选项一

<input type="checkbox">选项二

<input type="checkbox">选项三

多行文本框

<textarea cols(字长限)="30" rows(行数限)="10"></textarea>

文件上传控件

<input type="file">

按钮

<input type="submit">   (可以提交)

<input type="button" value="普通按钮">  （不能提交，配合js作效果）

<input type="image" src="图片来源">  （图片按钮可实现提交功能）

<input type="reset">  (将信息重置至默认)

表单分组

<form>

<fieldset>

<legend>分组信息</legend>

</fieldset>

</form>

表单控件补充

<input type="url">  网址控件

<input type="date"> 日期控件

<input type="time"> 时间控件

<input type="email"> 邮件控件

<input type="number" step="每次跳步数"> 数字控件

<input type="range" step="每次滑步数"> 滑块控件

标签语义化

好的语义化的网站标准就是去掉样式表文件之后，结构依旧清晰。

尽少使用无语义的标签div和span；

不要使用纯样式标签：b、font、u，改用css设置；

需要强调的文本可以包含在strong（加粗）或者em（斜体）标签中。