-
<!DOCTYPE html>
说明使用的web页面标准和规范 -
head标签
1.<head></head>标签为html的头部，内部编写一些基本信息（主动闭合标签）
2.title标签=>标题
3.字符编码<meta chartset="UTF-8" />(自闭合标签)
4.刷新和跳转<meta http-equiv="Refresh" Content="3" />3秒刷新一次页面<meta http-equiv="Refresh" Content="3; url=http://www.baidu.com">3秒后跳转到指定页面
- 关键字
<meta name="keywords" content="萝莉,御姐,少妇,武sir" /> - 描述
<meta name="description" content="这是网站的描述信息" /> -
设置IE兼容性
<meta http-equiv="X-UA-Compatible" Content="IE=IE9;IE=IE8" />按顺序向下兼容- body标签
- 符号
><等 - p标签，段落
- br标签，换行
-
所有标签分为：
- 块级标签，直接占一行，作为一个块，如：div h系列（h1~h6） p标签
-
行内标签：有多大占多大，在一行之内，如：a标签，span标签
-
input 系列标签
- input type='text' 文本框 -name属性，定义提交数据的key
- input type='password' 密码输入框 -name属性，定义提交数据的key
- input type='submit' 提交按钮 -value属性定义按钮显示的文字，和表单配合使用
- input type='button' 按钮，-value属性定义按钮文字，在表单中无效果，和js配合使用
- input type='radio' 单选框，value为选中后的值，checked="checked"(默认选中设置)，name属性为提交数据的key，相同name的单选框互斥，数据提交为{name:value}
- input type='checkbox' 复选框 ，value为选中后的值， checked="checked"(默认选中设置)，每个name对应一个value，用于批量数据获取
- input type='file' 文件域，依赖form表单的一个属性 enctype="multipart/form-data"
- input type='rest' 重置按钮，重置表单中填写的值
<textarea name='提交后台数据的key'>默认值</textarea>文本域，默认值放标签之间- select 标签，下拉框，option标签之间的值是显示给用户看的，后台提交的是option的value属性
<select name='后台数据key'>
<option value ="volvo(后台数据的值)">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi" selectde="selected">Audi</option>
</select>selectde="selected"默认选中 ，option属性size=1默认size=1，size值表示直接显示几条option，select属性multiple="multiple"，设置多选，select属性- ''分组显示
<select name='后台数据key'>
<optgrout label="云南省">
<option>昆明</option>
<option>楚雄</option>
</optgroup>
<optgrout label="四川省">
<option>成都</option>
<option>眉山</option>
</optgroup>
</select>-
a标签，链接
<a herf="www.baidu.com" target="_blank" >跳转
<a herf="#id">当页跳转，跳转到herf中id标识的标签，标签的ID属性不允许重复 -
img标签，图片
<img src="1.jpg">放置图片，设置高宽可控制大小style="height:200px;300px;"
将img包含在a标签中可设置跳转
alt属性，设置图片显示不出来时的文字
title属性，设置鼠标放在图片上时的提示 -
列表
<!--无序列表-->
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<!--有序列表-->
<ol>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ol>
<!--分组列表-->
<dl>
<dt>一组</dt>
<dd>123</dd>
<dd>123</dd>
<dd>123</dd>
<dt>二组</dt>
<dd>123</dd>
<dd>123</dd>
<dd>123</dd>
</ol>- 表格
- 标准形式
<table border="1"> <!--border设置边框-->
<thead><!--表头-->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>小红</td>
<td>17</td>
<td>女</td>
</tr>
</tbody>
</table>- 合并单元格
<table border="1"> <!--border设置边框-->
<thead><!--表头-->
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="2">2</td> <!--合并2，3列,colspan值表示横跨几列-->
</tr>
<tr>
<td rowspan="2">1</td> <!--合并2，3行,rowspan值表示合并几行-->
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>- label标签
<label for="username">用户名</label>
<input id="username" type="text" name="user" />
<!--label的for属性关联input的id，点击label此input获得焦点-->- fieldset带标题的边框
<fieldset>
<legend>标题</legend>
<label for="username">用户名</label>
<input id="username" type="text" name="user" />
</br>
<label for="password">密码</label>
<input id="password" type="password" name="pwd" />
</fieldset><wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">