HTML基础

 html基本标签

段落<p></p>
文本标题<h1></h1> … -…<h6></h6>
加粗<b></b>    <strong></strong>
倾斜<i></i>   <em></em>
超链接<a></a>     
href="书写想要跳转的目标地址"  
title="设置鼠标悬停上去之后的信息"
target="设置窗口打开的方式"
自己默认  ＿self        空白  ＿blank
图片<img src="设置想要展示的目标文件">
title  设置图片鼠标悬停上去之后的提示信息
alt 定义图片不显示之后的提示信息
width 宽度      height 高度
无序列表<ul><li></li></ul>
type属性 ： disc实心圆  circle空心圆 square方块 none没有符号
有序列表<ol><li></li></ol>
type属性：1  A  a  i  I  ； 
start：定义列表符号开始的位置，属性值是数字。   
自定义列表<dl><dt></dt><dd></dd></dl>
dt  书写想要展示的内容货图片，只能有1个dt
dd  书写对应描述的内容，可以有多个dd
页面布局<div></div>  用来划分页面区域的
文本节点<span></span>
上标<sup></sup>   
下标<sub></sub>
删除线<del></del>
下划线<u></u>
空格 &nbsp；
版权 &copy；©
注册 &reg；®
商标 &trade；™
小于号 &lt；<
大于号 &gt；>

 html 表单应用

创建表单 <form method="post" action="http://www.baidu.com"></form>
method属性 一个是get 一个是post 传递的方式
action 设置数据传递之后给谁
输入框 <input />
type="" 类型：
（属性值）
文本框 text 密码框  password  提交按钮 submit或<button></button> 
单选按钮 radio   同一组单选必须添加相同的name名字
多选（复选）按钮 checkbox
重置按钮reset
file 上传文件   multiple=" multiple"上传多个
email  邮箱multiple=" multiple"多个
h5新增的表单及表单验证 input
type="" 类型：email  邮箱    要输入正确的邮箱才能提交
url  网址   要输入http://  才能提交
number  数字   输入框只能输入数字和科学计数法的e  
range  滑动控件    
 min=“最小值” max=“最大值”  step=“步值”一次跳几个
color  颜色  
date    年     __年  __月  __日
month 月     __年  __月
week   周     __年 第__周
time    时间         时：分
datatime-local    本地世界 __年  __月  __日   时：分 
search 搜索
标签
<label></lable>   增加单选和多选的可点区域
<fieldest></fieldest> 字段集 生成一个方框/边框
<legend></legend>  方框集的标题   夹在边框中间


属性
name 名字，主要是为了提交的时候知道提交的是谁
value 值，用来显示内容的 
checked="checked" 选中效果
disabled="disabled" 禁止使用  被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。
 placeholder 设置提示信息的
修改palceholder内文字的css样式
1 ::-webkit-input-placeholder{
2         color: red;
3         font-size: 20px;
4         line-height: 50px;
5 }
required  输入框不能为空  /  为空提交不了
maxlength  最大长度（最多只能输入多少）
autofocus  当页面打开时自动获得焦点的  只能设置一个
novalidate 取消验证  只能加给form   有兼容性
autocomplete  相当于历史记录  =“off”关闭状态    =“on”打开状态  
固定的可选信息
<input type="text" list="X" autocomplete="on" name="aa"/>
<datalist id="x">
    <option>XXXXX</option>
    <option>XXXXX</option>
</datalist>

readonly 属性规定输入字段为只读（不能修改）
注意，跟 input 标签设置样式一样，但是要设置标签中局部的样式不能实现。如改变日历的背景色，颜色框的按钮效果等，这些都不可以实现。
单纯的按钮 <input type="button" value="获取验证码" /> 没提交功能
下拉菜单 <select><option></option></select>
 selected="selected"默认首选
文本区域<textarea></textarea> 多行文本
css中的属性：  resize:none;  禁止textarea拖动

 html表格

创建表格<table></table> 
行<tr></tr> 
单元格<td></td>       <th></th> 列标题 有加粗和水平居中的效果
宽度 width 
高度 height 
边框 border 
边框颜色 bordercolor 
背景颜色 bgcolor 
水平对齐 align="left或right或center" 
垂直对齐valign="top或middle或bottom"
cellspacing="单元格与单元格之间的间距"   只能写在table
cellpadding="单元格与内容之间的空隙"      只能写在table
合并列 colspan="所要合并单元格的列数"    左右合并为列合并
合并行 rowspan="所要合并单元格的行数"   上下合并为行合并
注意   合并之后需要把多余的单元格删除   单元格合并，必须给td

表格标题<caption></caption> 
行分组：表头<thead></thead>   表体<tbody></tbody>  表尾 <tfoot></tfoot>
一个头   一个尾   多个身体
列分组：<col span="设置分组的列数"/>
 <colgroup span="设置分组的列数"></colgroup> 
span属性现实指定相邻几列组成一组，span属性值默认为1
设置表格分割线属性 rules 
rules="none" 没有线，合并间距 
rules="cols" 列线，合并间距 
rules="rows" 行线，合并间距 
rules="all" 行和列线，合并间距 
rules="groups" 组分割线，合并间距， 必须有分组才可以有效
CSS中的属性：
border-spacing:20px;   设置单元格间隔  单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值
border-collapse:separate;   合并相邻单元格边框  合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)
table-layout:fixed;/auto;    是否固定单元格的宽度   fixed：固定宽，没有定义时则宽度会平均分配，高度则会随内容变化
empty-cells:hide; /show;  无内容时单元格的设置   定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏；

html5新特性 

html5结构标签      语义化的结构标签（是个盒子类似div）   多用于移动端
header     头部 
nav     导航
footer   底部
section    主要内容
aside  侧边（辅助信息）
main   中间（有兼容）
article   文章
figure     figcaption     类似  dl   dt   dd
hgroup   标题组
 mark   高亮显示文字
引入视频  video       引入音频   audio
html中的属性：autoplay 自动播放
controls   是否允许用户控制播放
muted  静音
loop 循环
poster   定义视频第一帧的图片
preload  预备加载
 用<source src=“路径”>  来解决浏览器兼容性  


 

 BFC

BFC块级格式化上下文
触发BFC的条件
1、overflow：hidden/auto/scroll   值不为visible时
2、float 的值不为 none；
3、display的值为inline-block
4、position的值为absolute或fixed
根元素html就是BFC


BFC的应用
1、解决高度塌陷
2、两栏自适应布局（多用于后台管理系统）

3、用来解决margin的重叠