HTML Notes

2020-04-29 本文已影响0人小時間光

1、相关资料

JavaScript: J和S大写，其他字母小写
HTML: Hyper Text Markup Language四个字母全部大写
CSS: Cascading Style Sheets 三个字母全部大写

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