【归纳总结】HTML、CSS、JavaScript、Vue

2021-02-23 20:31:51 阅读：145 来源： 互联网

HTML

一、HTML文档的特点

以标签包裹整个文档
大多数标签成对出现
分为头和身体两大部分

二、Html的重要标签(body)

•<hr>:  横线 
•<br>:  换行
•<h1>-<h6>:  标题 
•<div>:   文档分区或分节
•<span>:  行内区域
•<a> :    超链接
•<p>:     段落
•<img>:   图片 
•<input>:  输入框
•<textarea>: 多文本 
•<select> :   下拉选
•<ol>--<ul>:  有序和无序列表, 
•<table>：  表格
•<tr>：  一行
•<td>：  行内一个单元格
•<th>：  
•<form>

hr:
单标签，标识一条横线

br：
单标签，多个行级元素需要换行使用

h1-h6：
描述标题，h1最大，h6最小
h1只能出现一次

div：
对文档(页面)进行分区或者分节

span:
在行内定义一个区域，也就是一行内可以被span划分成好几个区域，从而实现某种特定效果。

a:
标识超链接. 用于从一张页面链接到另一张页面
属性：

target
•_self:（默认）在本窗口打开
•_blank:在新窗口打开
•_parent:在父窗口打开
•_top:在顶级窗口打开
•同组值:通过单击一个窗口中的不同链接控制另一窗口内容变化
href: 标识改超链接, 要跳转的位置

p:
标识一个段落标签
注意: p标签会在段前和段后占据一部分空间(上下空间)

img:
一个图片标签
可以通过width、height控制图片宽、高

input:
标识一个输入框

textarea:
多行的文本输入

select:
标识一个下拉选 , 并且必须和option一起使用才具有实际意义
option: 标识下拉选的一个选项

ol ul li:
ol: 标识有序列表
ul: 标识无序列表
li: 标识选项

table tr td th:
table的属性：

标识一个单元格元素内容, 到单元格边框的距离
cellpadding=“100”
标识单元格与单元格之间的距离
cellspacing=“10”
合并列
colspan=“2”
合并行
rowspan=“2”

（重要）form:
在一个页面内部, 发起一个请求(调用浏览器发起)

比如在百度首页的搜索框输入内容，按回车，就会跳转到另一个页面。
因此，百度首页就是一个form表单。

表单元素（带有value属性）： input select textarea option button
key就是表单元素的name属性

CSS

作用：用于修饰HTML页面
在这里插入图片描述

一、选择器

作用：把css样式用过某种途径和html标签相互关联起来

标签选择器
div{XXX}
类选择器（用得最多）
.div{XXX}
id选择器（唯一）
#div{XXX}
属性选择器
[属性名]{XXX}

选择器优先级：
!important > 行内 > ID选择器 > 伪类|类 | 属性选择 > 标签 > 通配符
如果同优先级，采取“就近原则”

二、盒子模型

定义：把html的标签在页面上所占据的位置看成一个矩形的盒子。这个盒子分为四部分: 元素内容、内边距、边框、外边距

背景色作用范围：元素内容 + 内边距

外边距合并：在一个html页面上, 在’’垂直’’ 方向上, 两个盒子模型的外边距 “紧相邻”, 那么这两个盒子模型的外边距会发生合并: 谁大听谁的。

三、标签分类

块级标签
独占一行,，上下排列，宽度继承父元素，高度是它本身内容的高度
行级标签
在一行排列, 从左向右
行内块
属性为display:inline-block;的元素。
本质上是一个行级元素(在一行排列), 有一些块级元素的特性(可以控制宽高和内外边距)

四、浮动

标准文档流：元素(标签) 根据元素特性(行级,块级, 行内块) 从左向右, 自上而下顺序排列。

通过指令float: left; 把一个元素’漂浮起来’，浮动使元素脱离了标准文档流

JavaScript

一、JavaScript

怎么在HTML中引入JS？

直接写在html页面中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

123

<script>
    alert("我太帅了")
</script>
</body>
</html>

外部导入js文件

即 <script src="./js.js"></script>，
而不是 <script src="./js.js">
</script>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js.js"></script>
</head>

常用测试和调试代码
•alert() 打印在浏览器的上方
•console.log() 在Console栏输出

特点

JavaScript在声明时统一使用无类型（untyped）的“var”关键字。
JavaScript并没有避开数据类型，它的数据类型是根据所赋值的类型来确定的。
JavaScript 对大小写敏感。

函数写法

function functionname(parm)
{
    // 执行代码
}

二、DOM

DOM: 文档对象模型(document object model )。
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：DOM Tree。
在这里插入图片描述

Vue

一、定义

Vue.js：渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合(非常容易导入第三方轮子)。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持开发复杂单页应用。

渐进式：从核心到完备的全家桶(需要什么引用什么)
增量：从少到多,从一页到多页,从简单到复杂
只关注视图层：只关注显示相关的
单文件组件：一个文件描述一个组件
单页应用：经过打包生成一个单页的html文件和一些js文件

二、V指令

V-bind
V-model
V-text
V-html
V-show
V-if
V-else
V-else-if
V-for
V-on
V-pre
V-cloak
v-once

标签：Vue,标签,元素,标识,HTML,JavaScript,选择器,页面
来源： https://blog.csdn.net/Octavius_/article/details/113924927

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9