html

1. 基础

html 骨架 ，存文本，只能记录文字。
css 形状， 
js 行为
<!--给爬虫看的-->
<meta name="keywords" content="java , python">
<meta name="description" content="haha nikandaole ">
<mate charset='utf-8'>
<!-- 重定向-->
<meta http-equiv="refresh" content="5,url=http://www.baidu.com">

• input 类型

color
date
datetime
datetime-local
email
month
* number
#<input type="number" name="quantity" min="1" max="5">
* range
# <input type="range" name="points" min="1" max="10"> 是一个滑块
search
tel
time
url
week

• a

块元素布局，内联元素用来选择。
p 中不能包含任何块元素。
a标签可以放出a以外的任何块元素。

• 列表
  • ul

• ol
  • type="A，a, 1, i, I"
• dl
  • dt
    被定义的名字
  • dd
    定义的内容
• em
  当前字体大小的倍数-
• 颜色
  16进制的六位数，两个一组分别是rgb.
• 字体

color 
font-size
font-family
font-style  :[italic ,normal ]
font-weight: [ 全靠计算机里的字体]
line-height:  行间距,减去字体大小就是两行的间隔。100% 就是相对字体大小的。也可以设置为一个float
text-transform: [uppcase]

3.盒子模型

• border

broder 三个属性
border-color
border-width
border-style 必须设置
border color  style width，一次设置四个边的三个属性
border-left color  style width 设置左边的三个属性

• padding

子元素占满的只是父元素的content 区域。

padding-left 
padding-top
padding-right
padding-bottom 

• margin 不可见元素

margin-top
可以是负值，用来设置重叠。
水平方向auto ,为最大值
垂直方法auto， 为0 
相邻元素的垂直外边距margin 取最大值。
直接子元素相邻的设置的的margin-top会传递给

相邻的元素是不是因为边界位置一样呢?

• 内联元素

不支持宽高的设置。
padding 水平方向影响布局
垂直方向不影响其他div布局
margin 水平方向的外边距不会重叠
外边距不支持垂直方向的设置

• display

• overflow

• 文档流

  • 块
    块元素独占一行，宽度默认为100% 宽度默认被撑开。
  • 内联
    宽度高度都是被文档撑开
    脱离文档流后全是块元素。
    文档流里的内容默认是占100%

• float
  脱离文档流，重新排列
  如果浮动元素上边是是块元素，则不能浮动进去。float 不占用位置。浮动元素不会盖住文字。

• bfc
  子元素带float时，父元素会失去高度。开启父元素bfc可以包含浮动的子元素。

1. 设置浮动  x
2. 设置绝对定位 x

3. 设置inline-block 可以避免被后边的覆盖。
4. overflow auto，hidden副作用最小的 开启bfc的好办法。

2.其他

• datalist select

//datalist 紧跟着input ,并且input的属性list等于datalist的id才能匹配。
//并且在输入框可以实现模糊匹配
<form>
选择：
<input type='text' name='capital' list='capitals' />
  <datalist id='capitals'>
    <option value='bj'>北京</option>  /*注释的赶脚*/
    <option value='jn'>山东</option>
    <option value='zhzh'>河南</option>
  </datalist>
  </form>

• 表单元素

// 加密
<keygen name="security">
  <input type="submit">
//竟然是用input 提交

• button

<button type="button" onclick="alert('a')">Click Me!</button>