HTML，css，js，vue的简单介绍

Fengkx518

已于 2022-08-13 16:20:20 修改

阅读量6.7k

点赞数 9

分类专栏： HTML 文章标签： vue.js html javascript

于 2022-01-13 20:30:18 首次发布

本文链接：https://blog.csdn.net/Fengkx518/article/details/122473012

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML

HTML简介：

HTML是一个超文本的标记语言，做出来的是一个静态的网页

HTML含有许多的标签可以使用，HTML是全是标签组成的，以下介绍常用的HTML标签

a标签：

<a></a> a标签一般用于超链接的跳转 <a href =" #"></a>，# 可以用于防止跳转出去，当然，也可以写入想要跳转的页面或者其他网页

br标签：

<br/> 一般是自闭标签，一般用于换行

nbsp：

  一般用于空一格

标题标签：

h1 h2 h3 h4 h5 h6

分别是字号从大到小h1-h6，其中h1的字体最大，h6的字体最小

列表标签：

列表标签分为两种，一种是有序列表标签ol

<ol>

<li></li> 可以多个li标签

</ol>

一种是无序列表标签ul

<ul>

<li></li> 可以多个li标签

</ul>

图片标签：

一般 #的位置是用来写入图片位置的

输入标签：

<input type="text" /> 文本输入框：可以输入文本信息
<input type="password" /> 密码输入框：可以自动隐藏密码
<input type="radio"/> 单选框：可以单选
<input type="number" /> 数字输入框：可以输入数字
<input type="week" /> 日期输入框：输入日期，可以选择
<input type="checkbox" /> 多选框：可以选择多个或者全选
<input type="button"/> 按钮：设置一个按钮，可以用于点击

<input type="hidden"/> 隐藏：设置value，可以隐藏内容

按钮标签：

定义一个按钮，# 表示按钮的名字，这个是什么按钮，用来标识的

表单标签：

注意：很多小伙伴们把form写成from，这是一个容易写错的地方，表单标签一般用于提交数据到后端程序中

表单标签有两种提交方式：

一种是get提交：get提交可以在网页中显示出提交的数据，很好使用，但是不安全

一种是post提交：post提交可以隐藏网页中的值，一般提交方式都为post方式提交

表格标签：

<table>

</table>

其他标签：

<p>行元素：要比正常的行元素多空间</p>

音频标签：

可以插入音频，在 # 处写入音频地址

视频标签：

可以插入音频，在 # 处写入视频地址

css

css简介：

css是一门修饰HTML的技术，是为了让网页变得美观，同样也是静态的，其中包含了5中比较好用的选择器方便我们使用

标签名选择器：

顾名思义，就是直接写这个标签的名字然后进行增强属性值

class选择器：

class选择器是可以多选的，可以在多个标签处定义class选择器，在增强属性的时候更改的是被class选择器定义了的标签

id选择器：

id选择器是唯一的，是高效的，也就是说id只有一个，想要查询，在使用的时候肯定是最快的，所以高效

分组选择器：

分组选择器是可以多个选择器一起使用，例如：class选择器，id选择器，class选择器一起使用，中间需要使用逗号隔开即可

属性选择器：

选中这个标签中的一个属性进行属性增强，如果其他标签也有相同属性，也会增强，那么需要更加细致的写清属性，例如：input 标签中的 type=text 这个属性，标明了标签是input，其中属性时text，如果有其他input，属性也是text的就会一起修改，如果没有就只修改这一个

盒子模型：

盒子模型是css的重点，其中的内边距和外边距，很容易让人搞混淆，所以我们需要把所有的元素都当做是一个个的盒子，外边距是指，标签与标签之间，内边距是指标签里的距离，指当前标签

js

js简介：

js的全称是JavaScript，是一种修饰HTML动态的工具，通过前面两种静态网页修饰已经使网页变得更加美观了，但毕竟是静态网页，无法动起来，那么这就需要用到js了，它可以用于每个标签之间产生关联和进行数据前后端或者是数据库交互，功能非常强大

js语法：

js是一门单独的语言，也是含有非常丰富的api，与java很相似

js基本类型：

js基本类型分为两大类：原始类型和引用类型

js原始类型分为5个：number string boolean null undefined

分别就是：数字类型字符串类型布尔类型空值未赋值

数字类型：包含了整数和小数，统称为数字类型

JS的变量：

在全局中js的变量可以用 var 表示，var 由于是弱语言，可以包含所有的类型，也就是说所有的类型都可以用var变量来赋值，count表示常量

在局部js的变量中可以用let表示，但就仅仅只能在那一个地方使用，超出了范围就不能继续使用了

js的运算符：

js中的运算符与java类似

算术运算符: +，-，*，/，%，++，–

赋值运算符: =，+=，-=，*=，/=，%=

比较运算符: ==，!=, =，!, > ，< ，>=，<=

位运算符: & ， |

逻辑运算符: &&，||

前置逻辑运算符: ! (not)

三元运算符: a?b:c

js结构顺序：

在js中也是有结构顺序的，与java类似，也是从头到尾，从左往右的顺序结构来执行顺序的

js判断结构：

if（）{}单分支结构

if（）{}else{}多分支结构

if（）{}else（）{}else{}嵌套分支结构

js选择语句：

switch（）{

case " ":" ";brack;

}

js循环语句：

for(;;){}循环语句

js数组：

动态创建数组

var a = new [];

静态创建数组

var a = [1,"a",null]；

js函数：

与java相似，函数指的就是 java中的方法

用function来使用

方式1：

function text1(){};

创建函数后需要调用函数才能使用函数里面的

text1();

方式2：

var text1:function(){};

内置对象:

在js中存在的对象，不用创建，直接使用调用

window.onload()        在浏览器加载完整个html后立即执行!
window.alert("text")                提示信息会话框
window.confirm("text")            确认会话框
window.prompt("text")            键盘输入会话框
window.event                       事件对象
window.document                   文档对象

DOM：

document.write() 动态向页面写入内容

document.getElementById(id) 获得指定id值的元素

document.getElementsByName(name) 获得指定Name值的元素

获取对象: window.document
调用方法:
       getElementById("元素的id的属性的值")--返回1个元素
       getElementsByName("元素的name属性的值")--返回多个元素(用数组)
       getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)
       getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)
write()--向文档写 HTML 表达式或 JavaScript 代码
title--返回网页的标题
id--设置或返回元素的id
innerHTML--设置或返回元素的内容