学习总结（2022.05.01-2022.05.09）

2022年05月10日

HTML

HTML是一个用标签描述的文本语言。

HTML初始格式为：

<!DOCTYPE html>   语法声明: 声明使用HTML5语法
<html>
    <head>
        <meta charset="UTF-8">  meta: 描述网页的元信息
        <title>Title</title>
    </head>
    <body>
    ...
    </body>
</html>

重要标签（了解即可）：

<hr> : 横线标签, 单标签
<br> : 换行标签, 单标签
<h1><h2><h3><h4><h5><h6> : 标题标签, 双标签
<div> : 分区或者节给一个页面, 双标签
<p> : 段落标签, 双标签
<a> : 超链接标签, 双标签
<img> : 图片标签, 单标签
<ol>: 有序列表, 和<li>标签共同构成一套标签
<ul>: 无序列表, 和<li>标签共同构成一套标签
<table>: 表格标签, 定义一个表格 (和tr, td, th ...构成成套标签)
	<tr> : 一个表格中的一行
	<td> : 一行中的一个单元格

表单元素：表单元素会根据元素内的内容生成一个url，对后端发起请求，并根据请求获得内容。生成的url中分为非参数部分和参数部分，例子如下：

1 2	`https://s.taobao.com/search?q=鞋子非参数 \| 参数`

非参数部分由表单元素的action属性提供，参数则由表单元素的其他属性提供。

表单元素中有一个method属性，它决定了表单元素在提交表单时使用的HTTP方法：GET/POST。GET一般用于获取数据，POST一般用于提交数据；GET请求一般把请求参数直接拼接在url之后，POST请求一般把参数放在传输的正文中；GET请求不安全（可以被用户直接观察到），POST请求安全。

表单元素根据自身的name属性和value属性生成一个键值对数据，通过传输该数据完成与后端的交互。

常见表单元素：

1
2
3

<input> : 单标签, 表示一个输入框
<textarea> : 多行文本, 相当于一个可以输入多行内容的input
<select> : 下拉选择, 和<option> 是一套标签

CSS

CSS主要用于对HTML的文本、图片和版面的布局等显示样式。

CSS通过选择器将HTML代码和CSS代码关联。选择器的类型有标签选择器/类选择器/id选择器。

<style>
		/* 标签选择器 */
        div{
            width: 100px;
            height: 100px;
            background: red;
		}
         /* 类选择器 */
        .div1{
            width: 100px;
            height: 100px;
            background: red;
            color: white;
            font-size: 30px;
        }
		/* id选择器 */
        #div2{
            width: 100px;
            height: 100px;
            background: #c9ffe3;
        }
</style>

选择器的优先级是id选择器 > 类选择器 > 标签选择器。如果存在两个同优先级选择器，优先选择较近的选择器（本质是HTML的解析模式为从上到下解析）。

盒子模型：一个HTML标签在页面上占据的空间。这个空间分为四个结构：元素内容区域、内边距区域(padding)、边框区域(border)、外边距区域(margin)。盒子模型的作用是使布局模块化，方便整个布局和个体布局的设计。根据盒子模型种类的不同，可以将标签元素分为三种：

块级元素：独占一行，从上到下排布；可以直接控制宽高/内外边距，一般用于大布局的搭建。如：div、p、form、table
行级元素：不独占一行，与其他行级元素从左到右一行显示；只能控制内外边距，宽高受本身内容大小控制；一般用于小结构的搭建。如：span、a、br
行内块：本质属于行级元素，但是可以设置宽高。如：input、img、select

JavaScript

JS是一种轻量级、弱类型的语言，主要用于在HTML中添加交互行为。

JS的引入方式有两种。一种是直接在HTML中的script标签内部引入，一种是在script标签的src属性中导入外部的JS文件。

类型：统一用var声明，数据类型由赋值类型决定。数据类型一般有：Number，String，Array

函数：使用function声明。

DOM

DOM全称为文档对象模型，是一种将HTML文档视为树结构的理论，这种树结构也被称为DOM树。

DOM树的节点拥有层级关系，从顶端的文档节点开始，依次往下是：

由HTML元素构成的元素节点
HTML属性构成的属性节点
HTML元素内文本构成的文本节点

根据DOM理论，可以知道一个HTML文件的加载顺序：

解析HTML结构，构建DOM树
加载外部脚本(JS)和样式表文件(CSS)
解析并执行脚本代码
构造DOM模型，完成后根据DOM树显示页面。

JS中与DOM相关的操作有：

获取节点：

document.getElementById()
document.getElementsByName()
document.getElementsByTagName()
添加节点：

document.appendChild()
删除节点：

document.removeChild()
替换节点：

document.replaceChild()