1、相关资料
- JavaScript: J和S大写，其他字母小写
- HTML: Hyper Text Markup Language四个字母全部大写
- CSS: Cascading Style Sheets 三个字母全部大写
The Modern JavaScript Tutorial
Periodic Table of the HTML5 Elements
2、HTML元素属性
| 属性 | 描述 |
|---|---|
| id | 规定元素的唯一 |
| class | 规定元素的类名 |
| style | 规定元素的行内样式 |
| title | 规定元素的额外信息（可在工具提示中显示） |
3、HTML常用标签
- 块标签:容器元素，h1~h6,p
- 行标签:span,a,img,video,audio
(1)、文本相关
| 属性 | 描述 |
|---|---|
| 标题 head | <h1>h1 title</h1> <h2>h2 title</h2> <h3>h3 title</h3> <h4>h4 title</h4> <h5>h5 title</h5> <h6>h6 title</h6> |
| 段落 | <p>段落段落段落段落段落段落</p> |
| lorem | 乱数假问，没有任何实际含义的文字 |
| 无语义，设置样式 | <span>Container with no semantic meaning.</span> |
| <pre>pre</pre> | 通常在网页中用于显示代码 |
| <code>code</code> | 显示代码 |
| 实体字符：通常在HTML中显示一些特殊字符 | <P> |
(2)、行级元素和块级元素
行级元素:大多为描述性标记
1、和其他元素在同一行；
2、高度、宽度以及内边距是不可控的；
3、宽高大小根据内容多少来填充，不可以改变;
4、不能包含块级元素；
块级元素:大多为结构性标记
1、总是从新的一行开始；
2、宽、高大小是可控的；
3、宽度没有设置时，默认为100%；
4、块级元素内部可以包含块级元素和行级元素；
(3)、
| 行级元素统计 | 块级元素统计 |
|---|---|
<span></span> |
<address> </address> |
<a></a> |
<h1></h1> |
<br> |
<h2></h2> |
<b></b> |
<h3></h3> |
<strong></strong> |
<h4></h4> |
<img> |
<h5></h5> |
<sub></sub> |
<h6></h6> |
<sup></sup> |
<hr> |
<i></i> |
<p></p> |
<em></em> |
<pre></pre> |
<del></del> |
<blockquote></blockquote> |
<u></u> |
<ul></ul> |
<input> |
<ol></ol> |
<textarea></textarea> |
<table></table> |
<select></select> |
<form></form> |
<div></div> |
|
<button></button> |
(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 样式
| 属性 | 描述 |
|---|---|
| color | 文字颜色 |
| background-color | 背景颜色 |
| px | 像素：绝对单位，简单的理解为文字的高度占多少个像素 |
| em | 相对单位，相对于父元素的字体大小，每个元素必须有字体大小，如果没有申明，则直接适用父元素的的字体大小，如果没有父元素，则适用基准字号。 |
| font-weight | 文字粗细程度（） |
| text-decoration | 下划线 |
| text-indent | 段落首行缩进 |
| line-height | 每行文本的高度，该值越大，每行文本的距离越大。设置行高为元素的高度，可以让单行文本垂直居中 |
| letter-spacing | 文字间隙 |
选择器
(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;
}
网友评论