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)、文本相关

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

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

     1、和其他元素在同一行；

     2、高度、宽度以及内边距是不可控的；

     3、宽高大小根据内容多少来填充，不可以改变;

     4、不能包含块级元素；

块级元素:大多为结构性标记

     1、总是从新的一行开始；

     2、宽、高大小是可控的；

     3、宽度没有设置时，默认为100%；

     4、块级元素内部可以包含块级元素和行级元素；

(3)、

(3)、严格模式

     在IDE中输入以下JS代码:

  number = 5;

  document.write("number=========" + number);
  
  number2 = null;
    
  document.write("number=========" + number2);
    

运行代码，

Log

     在 JavaScript文件中加入"use strict";
再次运行，发现报错Uncaught ReferenceError: number is not defined,

Error

  let number = 5;
  document.write("number=========" + number);
  let number2 = null;
  document.write("number=========" + number2);

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 页面渲染的过程

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

  RenderingOrder.png

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

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

vue_003.png

11、CSS盒模型

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

• 盒子类型: 此处区别于HTML中的行标签和块标签

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

    display: inline;
    

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

  display: block; 
  

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

  • 1、内容 content

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

     width: auto;
     height: 100%;
    

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

  • 2、填充（内边距） padding

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

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

  • 3、边框 border

  • 4、外边框 margin

• 盒模型应用:

  • 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;
}

vue_005.png

加上一行代码：

```
overflow-y: scroll;
```

vue_006.gif

• 4、断词规则

• 5、空白处理

• 行盒:

  • 1、盒子沿着内通延伸

  • 2、行盒不能设置宽高

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

  • 3、内边距（填充区）

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

  • 4、边框

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

  • 5、外边距

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

 设置行盒宽度:
 
 ```
 <a> Google </a>
 
 a {
background-color: #008c8c;
padding: 0 20px;
}
 ```

vue_007.png

vue_008.png

或者直接变为行块盒:

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;
}
```

vue_009.gif

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

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

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

<img class="grilsImg" src="Users/Desktop/MyBlocks/xiaoshiguangBlog/VueNotes/vue_010.JPG"/>

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