JavaWeb前端速通（黑马23年课）-CSDN博客

本文介绍了HTML、CSS、JavaScript、Vue框架以及ElementUI的基础知识，包括Web服务器技术、动态和静态Web的区别、HTML/CSS常用标签、JavaScript语法、Vue指令、Ajax交互和前端工程化的工具如YApi和VueCLI。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML+ CSS+ JS+ Vue+ Element

2.1 技术讲解

2.2 web服务器

w3school.com.cn

3.2 常用标签

img：src 图片资源路径；width，height（单位：px 像素；% 相对于父元素的百分比）
- 绝对路径：绝对磁盘路径；绝对网络路径。
- 相对路径（推荐）：./ 当前目录（可以省略）；…/ 上一级目录。
<h1>~<h6> 标题
<a href = “…” target = “…”>央视网<\a>
- href 制定资源访问的url
- target：_self 在当前页面打开；_blank 在空白页面打开。
<video> 视频
- src：url
- controls :播放控件
<audio> 音频
<p> 段落标签
<br> 换行
<b>/<strong> 文本加粗
表格标签
- <table> 表格整体
- <tr> 表格的行
- <td> 表格的单元格，如果是表头可以替换成<th>
<from> 表单标签：action 向何处（url）提交数据；method 发送表单数据的方式（GET、POST）
- <input> 表单项：type（text、password、radio、checkbox…），name，value
- <select> 下拉列表
- <textarea> 文本域

3.3 CSS的引用方式

在这里插入图片描述

颜色的表示形式
- 关键字；
- rgb表示法：红绿蓝三原色，取值0~255；
- 十六进制表示法：#开头，十六进制表示。
识色器插件：live color picker
CSS选择器
- 元素选择器：使用一个没有语义的标签 <span>
- id选择器
- 类选择器
text-indent：首行缩进
- 单位：px
line-hight：行高
text-align：文本对齐
- center
- left
- right
页面布局
- 盒子模型：content, padding, border, margin；上右下左。
- 布局标签：<div> 独占一行，可以设置宽高；<span> 一行可以显示多个，不可以设置宽高。

4.1 引入方式

4.2 语法

行末分号可不写
输出语句
- window.alert() 写入警告框。
- document.write() 写入html输出。
- console.log() 写入浏览器控制台。
声明变量
- var 可以存放不同类型的值；全局变量；可重复声明。
- let 只在改代码块生效，不可重复声明。
- const 常量，不可被改变。
数据类型
- typeof
- 原始类型：number、string、boolean、null、undefined
运算符
- == 会进行类型转换，=== 全等运算符不会进行类型转换。
- parseInt 将其他类型转化为数字，如果字面值不是数字则转为NAN。

4.3 函数

4.4 对象

Array 长度可变，类型可变
- foreach() 遍历有值的元素；箭头函数 =>
- push() 添加元素到数组的尾部
- splice() 删除元素
String
- charAT() 返回指定位置的字符
- indexOf() 检索字符串
- trim() 去除字符串两边的空格
- subtring() 提取字符串中两个指定的索引号之间的字符
JSON：通过JavaScript对象标记法书写的文本
- 自定义对象
  
  var 对象名 = {
  属性名1: 属性值1;
  属性名2: 属性值2;
  函数名称: function(形参列表){};
  }
- JSON格式化工具
- parse()：将JSON字符串转化为JS对象
- stringify()：JS对象转化为JSON字符串

4.5 BOM（对象）

window 浏览器窗口对象
- 属性：History，Location，navigator
- 方法：alert()，confirm()，setInterval()，setTimeout()
navigator 浏览器对象
- href 设置或返回完整的url
Screen 屏幕对象
History 历史记录对象
Location 地址栏对象

4.6 Dom

document 整个文档对象
element 元素对象
Attribute 属性对象
text 元素对象
comment 注释对象
Core Dom 所有文档的标准模型
XML Dom
HTML Dom
image：<img>
Button：<input type=‘button’>
获取元素对象：
- id属性值 var h1 = document.getElementById(‘h1’)
- 标签名 getElementsTagName
- name属性值 getElementsName
- class属性值 getElementsClassName

4.7 js事件

事件绑定

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sB17Kz84-1693227273996)(file:///C:\Users\31067\Documents\Tencent Files\3106799954\Image\C2C%H__OZ[940GJ3V8]K9%I3.png)]$