HTML 基础知识01

一般 一个网页由三部分组成 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.块级性标签

aside  注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容

figure  对多个元素组合并展示的元素,常与figcaption联合使用

code    表示一段代码块

dialog 人与人之间对话,包含dt和dd两个组合元素（dt用于表示说话者、dd用于表示说话者的内容

3.行内语义性标签

meter    特定范围内的数值，如工资、数量、百分比

time      时间值

progress  进度条，可用max、min、step进行控制，完成对进度的表示和监听   

video     视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式

audio     音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式

4.交互性标签

功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础，包括：

details  表示一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示

datagrid  控制客户端数据与显示，可用于动态脚本及时更新

menu      用于交互菜单

command   用来处理命令按钮

二. 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