一般 一个网页由三部分组成 HTML(网页的具体内容) CSS(网页的样式调整布局) JavaScript(网页的交互)
一 . HTML标签类型:
HTML 可以分为三大类
块级标签: 独占一行的标签, 能随时设置高度和宽度(如: div , p h1 h2 , ul, li)
行内标签(内联标签): 多个行内标签能同时显示在同一行, 宽度和高度取决于内容的大小(如: span , a , label)
行内-块级标签(内联-块级标签): 多个行内块级标签能同时显示在同一行. 能设置宽度和高度(如: input 和 button)
display 属性能修改标签的类
none: 影藏标签 (与visibility 不同的是 display影藏标签不保留标签的占位, visibility 保留标签的占位)
block: 让标签变为块级标签
inline: 让标签变为行内标签
inline-block: 让标签变为行内块级标签;
HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签、级块性标签、行内语义性标签、交互性标签
1.结构性标签
article 文章主体内容(一篇博客、一篇论坛帖子、一段用户评论、插件
header 标记头部区域内容
footer 标记脚部区域内容
section 区域章节表述
nav 菜单导航,链接导航
2.块级性标签
3.行内语义性标签
4.交互性标签
功能性内容的表达,有一定的内容和数据的关联,是各种事件的基础,包括:
二. CSS
选择器 :
1. 标签选择器
a标签
a{
}
2. 类选择器
.content{
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
}
3. id选择器
#more-product{
background:#398bfb;
color: white;
/*行内块, 设置后才能调整行内标签的大小*/
display: inline-block;
width: 86px;
height: 32px;
/*这两句配合才能实现垂直水平居中*/
text-align: center;
line-height: 32px;
/*取消下滑线*/
text-decoration: none;
}
4. 并列选择器 (几个选择器或的关系)
div , .content , #more-product{
}
5复合选择器 (几个选择器与的关系)
div .content #more-producr{
}
(并列选择器和复合选择器写法上 并列选择器中间用逗号隔开, 复合选择器中间用空格隔开)
6后代选择器
div p{
<!--在div内部的p标签 -->
}
7 直接后代选择器
div > p{
<!--仅在div内部的且只在div 直接子类中. 不包含div 子类的子类中包含的 p 标签-->
}
8 相邻兄弟选择器
div + p{
<!--与div 同级, 且是p标签-->
}
9属性选择器
HTML:
<div "name" = ""aaa">111<div>
CSS
div[name] {
<!---->
}
HTML :
<div "name" = "aaa" "age" = "111">111<div>
CSS
div[name][age]{
}
div[name = "aaa"]{
}
CSS 伪类
:active 向被激活的元素添加样式
:focus 向拥有键盘输入焦点的元素添加样式
:hover 当鼠标悬浮在元素上方时, 向元素添加样式
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:first-child 向元素的第一个元素添加样式
:lang 向带有指定lang属性的元素添加样式
伪元素
: first-letter 向文本的第一个字母添加特殊样式
: first-line 向文本的首行添加特殊样式
: before 在元素添加之前添加内容
:after 在元素之后添加内容
优先级: 本着谁描述的更具体, 一样具体比距离的原则
盒子模型
img 的一些常用属性
1. img.onmousemove = function (){
在图片上移动调用
}
2. img.onmouseover 鼠标进入图片
3. img,onmouseout 鼠标移除图片
input :
input。onselect = function(){
// input.value 获取到 input内部的值。
}
btn :
btn。innerHTML = 'baiduyixia' ; // 获取按钮的title