JavaScript学习笔记

小时光

北京体适能体育科技有限公司

1、相关资料

• JavaScript: J和S大写，其他字母小写

• HTML: Hyper Text Markup Language四个字母全部大写

• CSS: Cascading Style Sheets 三个字母全部大写

The Modern JavaScript Tutorial

Periodic Table of the HTML5 Elements

JavaScript高级程序设计（第3版）

JavaScript权威指南(第6版)

2、HTML元素属性

3、HTML常用标签

• 块标签:容器元素，h1~h6,p
• 行标签:span,a,img,video,audio

(1)、文本相关

pre

(2)、行级元素和块级元素

行级元素:大多为描述性标记

     1、和其他元素在同一行；
     2、高度、宽度以及内边距是不可控的；
     3、宽高大小根据内容多少来填充，不可以改变;
     4、不能包含块级元素；
块级元素:大多为结构性标记
     1、总是从新的一行开始；
     2、宽、高大小是可控的；
     3、宽度没有设置时，默认为100%；
     4、块级元素内部可以包含块级元素和行级元素；

4、HTML语义化

• 每一个HTML标签元素都有具体的含义
• 标签的显示效果是由CSS决定的
• 因为浏览器带有默认的CSS样式，所有每个元素都有一些默认样式
• 选择什么元素取决于内容的含义而不是显示出的效果
• 块级元素：在显示时会独占一行， 行级元素：在显示时不会独占一行 （HTML 已经废止，被内容类别代替）
• 实体字符：通常在HTML中显示一些特殊字符

5、HTML 链接

• 普通链接
• 锚链接

 <a>

<a href="#chapter1">chapter1</a>

<h2 id = "chapter1">
   chapter1
 </h2>
 <p>
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos fugiat dolorum ipsa magnam suscipit similique, accusamus, sapiente commodi, voluptas repellendus ullam? Dolorum tempore error eveniet laudantium architecto placeat non fugit?
 </p>

• 发送邮件
• 点击后执行JS代码 javascript:

 <a href="mailto:deng_feng520@163.com">
      发送邮件
  </a>

• targer : 跳转窗口位置，默认是覆盖当前页面

  _self: 覆盖掉当前页面

  _blank: 新的页面打开

6、HTML 容器元素

容器元素：该元素代表一个块区域，内部用于放置其他元素。

• div 元素 没有语义

• header 头部 标题 说明

• footer 尾部

• article 文章内容

• section 文章章节

• nav 导航菜单

• aside 附加信息，通常用于表示侧边栏

• del 错误的信息

• s 错误的信息

7、HTML 元素包含关系

• 元素的包含关系是由元素的内容类别决定的
• 容器元素中可以包含任何元素
• a元素集合可以包含任何元素
• 某些元素有固定的子元素(ul>li, ol>li, dl>dt+dd)
• 标题元素和段落元素不能互相潜逃，并且不能包含容器元素

8、CSS 样式

选择器

(1)、常用选择器

• ID选择器
• 元素选择器
• 类选择器
• 通配符选择器
• 属性选择器

[href = "http://www.sina.com"] {
    color: red;
}

• 伪类选择器

/* 鼠标悬停状态 */
a:hover {
    color: red;
}
/* 激活状态 鼠标按下状态*/
a:active {
    color: #008c8c;
}
/* 超链接未访问时的状态 */
a:link {
    color: black;
}
/* 超链接访问过后的状态 */
a:visited {
    color: crimson;
}

• 伪元素选择器

span::before {
    content: "《";
    color: darkcyan;
}
span::after {
    content: "》";
    color: darkcyan;
}

(2)、选择器的组合

• 后代元素 空格
• 子元素 >
• 相邻兄弟元素 +
• 后面出现的所有兄弟元素 ～

9、CSS 重叠

• 声明冲突： 同一个样式，多次应用到同一个元素
• 层叠: 解决声明冲突的过程，浏览器自动处理

(1)、比较重要性

• 作者样式表: 开发者书写的样式表 !important
• 作者样式表中的普通样式
• 浏览器默认样式表中的样式

(2)、比较特殊性

• 总体规则：选择器选中的范围越小越特殊
• 具体规则：通过选择器计算出一个四位数字
  • 1、千位： 如果是内联样式 记1否则记0
  • 2、百位：等于所有选择器中所有id选择器的数量
  • 3、十位：等于选择中所有类选择器、属性选择器、伪类选择器
  • 4、个位：等于选择器中所有元素选择器、伪类选择的数量

(3)、比较源次序

• 代码书写顺序靠后的胜出

(4)、应用

• 自定义的样式覆盖浏览器默认的样式

10、CSS 继承

• 子元素会继承父元素的某些CSS属性
• 通常跟文字内容相关的属性都能被继承

11、CSS 页面渲染的过程

• 浏览器渲染页面是一个元素一个元素一次渲染的，顺序按照页面文档的树形结构目录进行

  

• 渲染每个元素的前提条件：该元素的所有CSS属性必须有值

  • **（1）、确定申明值：**参考样式表中没有冲突的申明，作为CSS属性值
  • **（2）、层叠冲突：**对样式表中有冲突的申明适用层叠规则，确定CSS属性值
    • 比较重要性
    • 比较特殊性
    • 比较源次序
  • **（3）、使用继承：**对仍然没有值的属性，若可以继承，则继承父元素的值
  • **（3）、适用默认值:**对仍然没有值的属性，使用默认值

12、CSS盒模型

box:每个元素在页面中都会生成一个矩形区域

(1)、盒子类型: 此处区别于HTML中的行标签和块标签

• 1、行盒: 在页面中不换行

  display: inline;
  

• 2、块盒: 在页面中独占一行

```
display: block; 
```

(2)、盒子的组成部分: 无论是行盒还是块盒，都由以下几个部分组成，从内到外分别是：

• 1、内容 content

  • width、height设置的是盒子内容的宽高

   width: auto;
   height: 100%;
  

  • 部分内容通常叫做整个盒子的内容盒 content-box**

• 2、填充（内边距） padding

  • 盒子边框到黑子内容的距离

    padding-left: 0px;
    padding-right: 0px;
    

• 3、边框 border

• 4、外边框 margin

(3)、盒模型应用:

• 1、改变宽高范围

  默认情况下，width 和 height 设置的是内容盒宽高。

• 2、改变背景范围覆盖

  默认情况，背景覆盖边框盒 可通过background-clip进行修改

• 3、溢出处理

  overflow: 控制内容已出边框盒后的处理方式

<p class = "overflowClassTxt">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis facere, exercitationem officiis officia quibusdam ipsam impedit beatae mollitia ipsa ipsum illum totam ab non earum animi nihil iste minus quisquam!
</p>

.overflowClassTxt {
       width: auto;
       height: 50px;
       font-size: 15px;
       background-color: #008c8c;
       border-color: red;
       border-style: solid; 
       border-width: 5px;
}

加上一行代码：

overflow-y: scroll;

• 4、断词规则

• 5、空白处理

(4)、行盒:

• 1、盒子沿着内通延伸

• 2、行盒不能设置宽高

  调整行盒的宽高，应该使用字体大戏、行高、字体类型来间接调整

• 3、内边距（填充区）

  水平方向有效，垂直方向不会实际占据空间

• 4、边框

  水平方向有效，垂直方向不会实际占据空间

• 5、外边距

  水平方向有效，垂直方向不会实际占据空间

设置行盒宽度和高度:

<a> Google </a>
  
  a {
 background-color: #008c8c;
 padding: 0 20px;
 }

a {
  background-color: #008c8c;
  padding: 0 50px;
  font-size: 2em;
  color: white;
}

或者直接变为行块盒:

display: inline-block;

• 6、行块盒

<div class="pager">
 <a href="" class="selected">1</a>
 <a href="">2</a>
 <a href="">3</a>
 <a href="">4</a>
 <a href="">5</a>
 <a href="">6</a>
 <a href="">7</a>
 <a href="">8</a>
 <a href="">9</a>
 <a href="">10</a>
 </div>


.pager {
 margin-top: 10px;
 text-align: center;
}
.pager a {
 margin-top: 8px;
 border: 1px solid #e1e2e3;
 color: #3388ff;
 width: 34px;
 height: 34px;
 display: inline-block;
 line-height: 34px;
}
.pager a:hover {
 border-color: 1px solid #38f;
 background-color: #f2f8ff;
}
.pager a.selected {
 border: none;
 color: black;
 background-color: initial;
}

• 7、可替换元素和非可替换元素

  大部分元素，页面上显示的结果，取决于元素的内容，称为非可替换元素 少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素

  可替换元素: img、video、audio 绝大部分可替换元素均为行盒。 可替换元素类似于行块盒，盒模型中所有尺寸都有效。

<img class="grilsImg" src=""/>

/* 设置填充模式 */
.grilsImg {
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-top: 10px;
}