HTML 入门基础笔记
******************HTML5入门笔记**************************
*****************************************************
标签:
块属性标签:div(常用来布局划分区域) p(段落)h1-h6(标题)
特点:支持宽高,上下排列,独占一行,支持所有的css样式
行属性标签:span(文字) a(超链接)
特点:不支持宽高,排成一行,不支持上下的margin和padding
行块属性标签:img(图片)
特点:既支持宽高,又排成一行
******************************************************
CSS的三种引入方式:
行间样式:在标签中写入style属性,样式写在style中
(最不常用,优先级最高)
内部引入方式:在head中写入style标签,样式写在style标签中
外部引入方式:在head中,使用link标签引入外部css文件(开发中引用最多)
注意:其次外部和内部引入方式优先级相同,文档后边的会覆盖前面的.
******************************************************
选择器:
标签选择器:语法->标签名{ 样式 }
class选择器:语法:"."+class名 { 样式 }
特点:1 优先级比标签选择器高.2,一个标签可以有多个class名.
3,不同标签可以使用相同的class名.
后代选择器:语法:父选择器 空格 子选择器 { 样式 }
优先级为:选择器权重相加{class权重为10,标签选择器权重为1}
******************************************************
盒模型:
margin(外边距):
用来调整元素位置.相对于父元素的边缘或相邻元素.
注意:元素第一个子元素的margin-top会传递给父元素,解决方案是
给父元素设置overflow:hidden;
border(边框):
一般设置三个无序参数,分别为颜色,边框宽度,边框样式(常用实线 solid)
例如: border: 1 px; solid black;
padding(内边距)
内容区域距离元素边缘的距离
1.内容不回占padding的位置.2,padding的颜色和背景颜色相同
注意:border和padding都会让元素变大
补充内容:border-radius(圆角度)
圆角度的值,为圆角的半径
******************************************************
float(浮动):
浮动包括left和right(左浮动和右浮动)
设置浮动是为了让块属性元素排成一行
1.浮动可以是属性元素支持宽高
2.浮动具有流式布局效果和文字环绕效果
3.浮动会有脱离文档流的效果
浮动的影响:
如果父元素没有高度,靠子元素撑开,当子元素浮动,脱离文档流,父元素则不会被撑开,进而失去高度,这样会影响布局.
解决方案:给父元素设置overflow:hidden
******************************************************
position(定位):
fixed(固定定位):
相对于浏览器可视窗口,一般用于悬浮窗,小广告,返回顶端按钮等功能
relative(相对定位):
定位相对于它原来位置,一般配合子元素的,绝对定位(absolute)使用.
absolute(绝对定位):
定位于相对拥有定位的父级元素,如果父级没有定位,则一直向上查找定位的祖先要素,直到拿到body为止.
注意:定位只适用于,某一个模块中的某个小部件(小模块),不可以用于大范围布局.绝对定位大多数情况配合父元素的相对定位使用,可以搭配记忆.
******************************************************
居中问题:
水平居中:
块属性元素水平居中:给需要居中的元素设置 margin:0 auto;
行属性/行块属性/文本元素水平居中,给父元素设置text-align:center;
垂直居中:
大部分情况,没有捷径,使用margin或者定位调整.
单行文本/行属性标签,垂直居中,设置,line-height:父元素高度;
******************************************************
display:
display:block; 把元素转化为块属性
display:inline; 把元素转化为行属性
display:inline-block; 把元素转化为行块属性(最常用,让行
属性支持宽高)
display:none; 隐藏(常用来制作动态效果)/显示随便转换一个即可
*****************************************************
hover:
hover规定了:鼠标移入元素后展示的效果,hover只能控制它本身或者子元素
例如:
控制本身
选择器:hover{ 鼠标移入的效果 }
控制子元素
父选择器:hover 空格 子选择器{ 鼠标移入的效果 }
************************自我总结**********************
1.文字水平居右,用float:right.
2.如果有类名(尽量设置),可以直接调用.避免使用关键字(红色字)
3.优先度越大越靠上:z-index:100;只有定位的元素才可以设置层级
4.span和a不能设置高度,p有.
水平居中:text-align: center;
上下居中:line-height: 50px;
5.返回顶部:返回顶部
6.加圆角,加至正方形边长一半就可以形成圆了:border-radius: 50px;
7.在margin-top 中,父元素要用:overflow:hidden;
8.边框:border:3px solid #000;
9.有序列表:
10.无序列表:
11. alt 是图片加载失败时显示的内容:
alt="图像找不到">
12.表示css使用内部引入方式,
*****************************************************
标签:
块属性标签:div(常用来布局划分区域) p(段落)h1-h6(标题)
特点:支持宽高,上下排列,独占一行,支持所有的css样式
行属性标签:span(文字) a(超链接)
特点:不支持宽高,排成一行,不支持上下的margin和padding
行块属性标签:img(图片)
特点:既支持宽高,又排成一行
******************************************************
CSS的三种引入方式:
行间样式:在标签中写入style属性,样式写在style中
(最不常用,优先级最高)
内部引入方式:在head中写入style标签,样式写在style标签中
外部引入方式:在head中,使用link标签引入外部css文件(开发中引用最多)
注意:其次外部和内部引入方式优先级相同,文档后边的会覆盖前面的.
******************************************************
选择器:
标签选择器:语法->标签名{ 样式 }
class选择器:语法:"."+class名 { 样式 }
特点:1 优先级比标签选择器高.2,一个标签可以有多个class名.
3,不同标签可以使用相同的class名.
后代选择器:语法:父选择器 空格 子选择器 { 样式 }
优先级为:选择器权重相加{class权重为10,标签选择器权重为1}
******************************************************
盒模型:
margin(外边距):
用来调整元素位置.相对于父元素的边缘或相邻元素.
注意:元素第一个子元素的margin-top会传递给父元素,解决方案是
给父元素设置overflow:hidden;
border(边框):
一般设置三个无序参数,分别为颜色,边框宽度,边框样式(常用实线 solid)
例如: border: 1 px; solid black;
padding(内边距)
内容区域距离元素边缘的距离
1.内容不回占padding的位置.2,padding的颜色和背景颜色相同
注意:border和padding都会让元素变大
补充内容:border-radius(圆角度)
圆角度的值,为圆角的半径
******************************************************
float(浮动):
浮动包括left和right(左浮动和右浮动)
设置浮动是为了让块属性元素排成一行
1.浮动可以是属性元素支持宽高
2.浮动具有流式布局效果和文字环绕效果
3.浮动会有脱离文档流的效果
浮动的影响:
如果父元素没有高度,靠子元素撑开,当子元素浮动,脱离文档流,父元素则不会被撑开,进而失去高度,这样会影响布局.
解决方案:给父元素设置overflow:hidden
******************************************************
position(定位):
fixed(固定定位):
相对于浏览器可视窗口,一般用于悬浮窗,小广告,返回顶端按钮等功能
relative(相对定位):
定位相对于它原来位置,一般配合子元素的,绝对定位(absolute)使用.
absolute(绝对定位):
定位于相对拥有定位的父级元素,如果父级没有定位,则一直向上查找定位的祖先要素,直到拿到body为止.
注意:定位只适用于,某一个模块中的某个小部件(小模块),不可以用于大范围布局.绝对定位大多数情况配合父元素的相对定位使用,可以搭配记忆.
******************************************************
居中问题:
水平居中:
块属性元素水平居中:给需要居中的元素设置 margin:0 auto;
行属性/行块属性/文本元素水平居中,给父元素设置text-align:center;
垂直居中:
大部分情况,没有捷径,使用margin或者定位调整.
单行文本/行属性标签,垂直居中,设置,line-height:父元素高度;
******************************************************
display:
display:block; 把元素转化为块属性
display:inline; 把元素转化为行属性
display:inline-block; 把元素转化为行块属性(最常用,让行
属性支持宽高)
display:none; 隐藏(常用来制作动态效果)/显示随便转换一个即可
*****************************************************
hover:
hover规定了:鼠标移入元素后展示的效果,hover只能控制它本身或者子元素
例如:
控制本身
选择器:hover{ 鼠标移入的效果 }
控制子元素
父选择器:hover 空格 子选择器{ 鼠标移入的效果 }
************************自我总结**********************
1.文字水平居右,用float:right.
2.如果有类名(尽量设置),可以直接调用.避免使用关键字(红色字)
3.优先度越大越靠上:z-index:100;只有定位的元素才可以设置层级
4.span和a不能设置高度,p有.
水平居中:text-align: center;
上下居中:line-height: 50px;
5.返回顶部:返回顶部
6.加圆角,加至正方形边长一半就可以形成圆了:border-radius: 50px;
7.在margin-top 中,父元素要用:overflow:hidden;
8.边框:border:3px solid #000;
9.有序列表:
- 床前明月光
10.无序列表:
- 水浒传
11. alt 是图片加载失败时显示的内容:
alt="图像找不到">
12.表示css使用内部引入方式,