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">
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
块元素布局,内联元素用来选择。
p 中不能包含任何块元素。
a标签可以放出a以外的任何块元素。
- ol
- dl
- em
当前字体大小的倍数-
- 颜色
16进制的六位数,两个一组分别是rgb.
- 字体
color
font-size
font-family
font-style :[italic ,normal ]
font-weight: [ 全靠计算机里的字体]
line-height: 行间距,减去字体大小就是两行的间隔。100% 就是相对字体大小的。也可以设置为一个float
text-transform: [uppcase]
3.盒子模型
broder 三个属性
border-color
border-width
border-style 必须设置
border color style width,一次设置四个边的三个属性
border-left color style width 设置左边的三个属性
子元素占满的只是父元素的content 区域。
padding-left
padding-top
padding-right
padding-bottom
margin-top
可以是负值,用来设置重叠。
水平方向auto ,为最大值
垂直方法auto, 为0
相邻元素的垂直外边距margin 取最大值。
直接子元素相邻的设置的的margin-top会传递给
相邻的元素是不是因为边界位置一样呢?
不支持宽高的设置。
padding 水平方向影响布局
垂直方向不影响其他div布局
margin 水平方向的外边距不会重叠
外边距不支持垂直方向的设置
名称 |
介绍 |
inline 0 |
内联,不能设置宽高。 |
block |
块,可以设置宽高 |
inline-block |
行内块元素,就是快,但是不换行。 |
none |
隐藏子元素 |
visibility |
hidden ,设置元素的隐藏和显示状态,虽然不显示,但是占位置。 |
名称 |
介绍 |
scroll |
滚动,不论是否溢出总是有两个滚动条 |
hidden |
隐藏 |
auto |
x,y方向自动添加滚动条。 |
visible |
可见的 |
名称 |
介绍 |
right |
向右上浮动 ,直到父元素的边框,或者其他浮动元素 |
left |
向左上浮动 |
|
- bfc
子元素带float时,父元素会失去高度。开启父元素bfc可以包含浮动的子元素。
1. 设置浮动 x
2. 设置绝对定位 x
3. 设置inline-block 可以避免被后边的覆盖。
4. overflow auto,hidden副作用最小的 开启bfc的好办法。
2.其他
//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 type="button" onclick="alert('a')">Click Me!</button>