HTML5笔记

==============标签================
1. h1 h2 h3 h4 h5 h6 标题标签 重要性随等级递减
2. <p></p> 段落标签 给文本内容分段
3文本加粗 <b></b> <strong></strong>
4 倾斜文字 <i></i> <em></em>
5删除线的文字 <s></s> <del></del>
6下划线 <u></u> <ins></ins>
7.使网页中所有的超链接在新的窗口打开 <base target="_blank"/>
==============标签属性================
<hr width="100" color="red"></hr>
==============图像标签================
<img src=""></img>

1.src 引用图片的路径
2.alt 显示图片不能显示时的替换文本
3title 鼠标悬停时显示的内容
4.width 宽
5height 高
6.border 设置图像边框的高度
==============链接标签================
<a href="http://www.baidu.com"></a>

***连接必须以http：//开头
==============锚点定位================
<a href="#id名"></a>

<h1 id="id名"></h1>
==============相对路径================
引用上一级图片路径：<img src ="../niu.png"></img>
引用同级的图片路径：<img src ="niu.png"></img>
引用下一级图片的路径：<img src="/niu.png"></img>
==============列表================
无序列表：
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
...
</ul>

***注意：ul标签下不能有除li标签以外的标签，但li标签下可以有其他标签
有序列表：
<ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
...
</ol>
==============表格================
<table>
<tr> //行标签
<td>姓名</td> //单元格标签
<td>性别</td>
<td>年龄</td>
</tr>
<tr> //行标签
<td>姓名1</td> //单元格标签
<td>性别2</td>
<td>年龄3</td>
</tr>
<tr> //行标签
<td>姓名11</td> //单元格标签
<td>性别22</td>
<td>年龄333</td>
</tr>
</table>
==============表格属性================

border：设置表格的边框

cellspacing：设置单元格与单元格之间的空白间距

cellpadding：设置单元格内容与单元格边框之间的空白间距

width：宽

height：高

align：设置表格在网页中的对齐方式 left，center，right

<th></th>表格的表头标签（表格的第一行或第一列）：使表格的第一行或第一列居中加粗

<thead></thead> :表格的头部

<tbody><tbody>: 表格的主体

表格的标题标签：<caption></caption> ***注意：写在table的里面

合并单元格： 1. 跨列合并 <td colspan="合并的列数"></td>
2. 跨行合并 <td rowspan="合并的行
==============表单==================
表单控件：<input type="text"/> type的属性值有：text（单行文本输入框），password（密码输入框），radio（单选按钮），checkbox（复选框），button（普通按钮）
submit（提交按钮） reset（重置按钮），image（图像形式的提交按钮），file（文件域）
html5 (仅支持html5)新增的type属性有：email（输入邮箱格式），tel（输入手机号码格式），url（请输入url格式），number（数字格式）
search（搜索框（体现语义化）），range（自由拖动滑块），time（小时分钟），date（年月日），
datetime（时间），month（月年），week（星期，年）
<input type="text" checked/> 定义选择控件被选中的项

<input type="text" maxlength="6"/> 控件允许输入的最多字符

<input type="text" placeholder="请输入密码"/> 占位符 当用户输入的时候提示信息消失

<input type="text" autofocus/> 自动获得焦点
<input type="file" mutiple/> 多文件上传
<input type="text" require/> 不能为空
<input type="text" accesskey="s"/> 设置ctrl+s可以获取此输入框的光标
==============自动记录搜索信息==================
<form>
姓名<input type="text" autocomplete name="username"/>
<input type="sumit"/>
</form>

***1.必须要有提交按钮
2.必须要有name属性

==============单选按钮==================
<input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女
***通过相同的name值来实现
==============复选框==================
<input type="checkbox" name="ball"/>篮球 <input type="checkbox" name="ball"/>足球<input type="checkbox" name="ball"/>乒乓球
***通过相同的name值来实现

默认选择表单属性： checked="checked"
==============label标签==================
1. <label>账号：<input type="text"/></label>
***用label标签包裹文字和输入框可以实现 点击账号获取输入框的焦点
2. 如果label中有多个输入框 想要定位到某个输入框 可以使用for id 的方式
<label for="two"><input type="text"/> <input type="text" id="two"/></label>

==============下拉菜单==================
<select>
<option>点击选择你的籍贯</option>
<option>山西</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>

***设置当前选中 selected="selected"

==============datalist==================
<input tupe="text" value="输入明星" list="star"/>
<datalist id="star">
<option>刘德华<option>
<option>刘若英<option>
<option>刘家<option>
<option>流氓<option>
</datalist>
***通过list和id来绑定输入框和datalist

==============filedset================
<filedset>
<legend>我是一个包裹框</legend>
</filedset>