网硕互联帮助中心HTML和CSS
web标准
1.web标准也称网页标准，由一系列的标准组成，大部分由w3c负责制定
2.三个组成部分
·html：负责网页的结构（页面元素和内容）
·CSS：负责网页的表现（页面元素的外观、位置等页面样式，如颜色、大小等）
·JavaScript：负责网页的行为（交互效果）
HTML
超文本标记语言（HyperText Markup Language）
·超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
·标记语言:由标签“<标签名>”构成的语言。
·HTML标签都是预定义好的。例如:使用<h1>展示标题，使用<img>展示图片，使用<video>展示视频。
CSS
Cascading style Sheet:层叠样式表，用于控制页面的样式(表现)
·MDN（面向开发者的web技术）
案例：HTML快速入门
1.新建文本文件，后缀名改为.html
2.编写HTML的基本骨架，定义标题
3.在<body>中填写内容
HTML标签特点
·html标签不区分大小写，建议小写
·html标签的属性值使用单引号/双引号都可以html语法结构松散，但是建议规范书写
前端开发工具：VS Code
常用插件
常见标签&样式
标题排版
1.！→enter 生成网页基本模板
2.超链接标签
<a></a>
·herf：链接地址 – url地址
·target：打开方式
·_blank：新窗口打开
·_self：本窗口打开（默认）
CSS样式
1.行内样式：写在标签的style属性中（配合JavaScript使用）
2.内部样式：写在style标签中（可以写在页面任何位置，但通常约定卸载head标签中）
3.外部样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）
颜色表示形式
CSS选择器
·选取需要设置样式的元素（标签）
·超链接显示器默认自带下划线
video标签属性
·<br>换行；<p></p>段落标签
图片标签属性
样式处理
加粗标签
首行缩进
整体布局
盒子模型
1.盒子:页面中所有的元素(标签)，都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
2.盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)
3.布局标签：网页开发中，会使用div和span这两个没有语义的布局标签
页面原型
在应用程序开发初期，由产品经理制作的一个早期项目模型，用于展示页面的基本布局、功能和交互设计。通常用来帮助设计师、开发者等更好地理解和讨论最终产品的外观和行为。
Tlias案例
顶部导航栏
flex布局
1.flex是flexible Box的缩写，意为"弹性布局"，是一种一维的布局模型。flex布局可以为元素之间提供强大的空间分布和对齐能力。
2.通过给父容器添加flex的相关属性，来控制子元素的位置和排列方式
搜索表单区域
表单标签
1.表单：在网页中主要负责数据采集功能，如注册、登录等数据采集
2.标签：<from>
3.表单项：不同类型的input元素、下来列表、文本域等。
<input>:定义表单项，通过type属性控制输入形式(text/password/…)
<select>:定义下拉列表
<textarea>:定义文本域
4.属性:
action:规定当提交表单时向何处发送表单数据，URL。
method:规定用于发送表单数据的方式。GET、POST。
5.
action:表单数据提交的url地址
method:提交方式
get:默认，表单数据会出现在url后面，形式:/save?name=Tom&age=18
特点:
·如果表单中包含了隐私数据，get方式并不安全，不推荐使用该方式。
·在浏览器中get请求的大小是有限制的，不适合提交大数据量的表单.
post:表单数据会在消息体/请求体中提交到服务器
特点:
·安全。
·请求大小没有限制
注意:表单项要想能够采集数据，必须得设置name属性，表示当前表单项的名字
表单项
·<input>:表单项，通过type属性控制输入形式。
·<select>:定义下拉列表，<option>定义列表项。
·<textarea>:文本域
表格数据展示区域
·再继续帮我生成第三个部分-表格展示区:
1.表格结构:展示列包括姓名、性别(显示 男/女)、头像(小图片展示)、职位(显示 班主任/讲师/学工主管/教研主管/咨询师)、入职日期、最后操作时间、操作(里包含两个按钮 编辑 与 删除)。
2.测试数据:基于《笑傲江湖》小说人物在表格中生成3条测试数据，每条数据应包含上述所有列的信息，以体现实际应用场景
3.样式:可适当调整表格样式，确保美观大气。
表头-thead
表格主题内容tbody
底部版权区域
再继续帮我生成第四个部分-页脚版权区域
1、内容:第一行显示公司全称“江苏传智播客教育科技股份有限公司”;第二行展示版权信息，"版权所有 copyright2086-2024 All Rights Reserved”.
2.设计:该区域应具有灰色背景，字体颜色为白色，居中对齐，以营造专业且统一的视觉效果
总结
JavaScript（交互效果）
1.JavaScript(简称:JS) 是一门跨平台、面向对象的脚本语言，是用来控制网页行为，实现页面的交互效果。
2.JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。
组成:
ECMAScript:规定了]S基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。
BOM:浏览器对象模型，用于操作浏览器本身，如:页面弹窗、地址栏操作、关闭窗口等。
DOM:文档对象模型，用于操作HTML文档，如:改变标签内的内容、改变标签内字体样式等。
JS核心语法
引入方式
内部脚本:将JS代码定义在HTML页面中
JavaScript代码必须位于<script></script>标签之间
在HTML文档中，可以在任意地方，放置任意数量的<script>
一般会把脚本置于<body>元素的底部，可改善显示速度
外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
基础语法
变量&常量
1.JS中用 let 关键字来声明变量弱类型语言，变量可以存放不同类型的值)
2.变量名需要遵循如下规则:
·只能用 字母、数字、下划线()、美元符号($)组成，且数字不能开头
·变量名严格区分大小写，如name和Name是不同的变量
·不能使用关键字，如:let、var、if、for等
3.JS中用const关键字来声明常量（一旦声明，不能改变）
4.输出语句
window.alert():弹出警告框(使用频次较高)
console.log():写入浏览器控制台(使用频次较高)
document.write():向HTML的body内输出内容
数据类型
js分为基本数据类型和引用数据类型（对象）
基本数据类型
·number：数字（整数、小数、NaN（Not a Number））
·boolean：布尔。true，false
·null：对象为空。JavaScript是大小写敏感的，因此null、Null、NULL是完全不同的
·undefined：当声明的变量未初始化时，该变量的默认值是 undefined
·string：字符串，单引号、双引号、反引号皆可，推荐使用单引号
模板字符串语法:``(反引号，英文输入模式下按键盘的tab键上方波浪线 ~那个键)内容拼接变量时，使用 ${}包住变量
函数
·函数( function )是被设计用来执行特定任务的代码块，方便程序的封装复用
·定义
·调用
由于JS是弱类型语言，形参、返回值都不需要指定类型。在调用函数时，实参个数与形参个数可以不一致，但是建议一致
匿名函数
一种没有名称的函数，可以通过两种方式定义:函数表达式 和箭头函数。
自定义对象
1.定义格式
this代表当前对象
2.调用格式
json
·概念:JavaScript 0biect Notation，JavaScript对象标记法(JS对象标记法书写的文本
·由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。
·JSON.parse:将json字符串转为js对象
·JSON.stringify:将js对象转为json字符串
DOM
1.概念：Document Object Model，文档对象模型
2.将标记语言的各个组成部分封装为对应的对象：
Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
JavaScript 通过DOM，就能够对HTML进行操作
改变 HTML 元素的内容
改变 HTML 元素的样式(CSS)
对 HTML DOM 事件作出反应
添加和删除 HTML 元素
3.DOM操作核心思想:将网页中所有的元素当做对象来处理。(标签的所有属性在该对象上都可以找到)
4.操作步骤:
·获取要操作的DOM元素对象
·操作DOM对象的属性或方法(查文档或AI)
5.获取DOM对象
·根据CSS选择器来获取DOM元素，获取匹配到的第一个元素:document.querySelector('选择器')
·根据CSS选择器来获取DOM元素，获取匹配到的所有元素:document.querySelectorAll('选择器')注意:得到的是一个NodeList节点集合，是一个伪数组(有长度、有索引的数组)
JS事件监听
1.JavaScript可以在事件触发时，就立即调用一个函数做出响应，也称为 事件绑定或注册事件。
2.语法：事件源.addEventListener（‘事件类型’，事件触发执行的函数）；
3.事件监听三要素
事件源:哪个dom元素触发了事件，要获取dom元素
事件类型:用什么方式触发，比如:鼠标单击click
事件触发执行的函数:要做什么事
4.早期版本
·区别：on方式会被覆盖，addEventListener方式可以绑定多次，拥有更多特性，推荐使用
5.【案例】通过js实现鼠标移入隔行换色效果，鼠标移入时，背景色为a，鼠标移出，背景色统一颜色
6.常见事件
（1）鼠标事件
·click：鼠标点击
·mouseenter：鼠标移入
·mouseleave：鼠标移出
（2）键盘事件
·keydown：键盘按下触发
·keyup：键盘抬起触发
（3）焦点事件
·foucs：获得焦点触发
·blur：失去焦点触发
（4）表单事件
·input：用户输入时触发
·submit：表单提交时触发
Vue
常用指令
·HTML标签上带有 V-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能
v-for
作用:列表渲染，遍历容器的元素或者对象的属性
语法:
参数说明:
·items 为遍历的数组
·item 为遍历出来的元素
·index 为索引/下标，从@开始 ;可以省略，省略index语法: v-for="item in items
key:
·作用:给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升染性能
·推荐使用id作为key(唯一)，不推荐使用index作为key(会变化，不对应)
注意:遍历的数组，必须在data中定义;要想让哪个标签循环展示多次，就在哪个标签上使用v-for 指令
v-model
作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据
语法：v-model=‘变量名’
v-on
作用:为html标签绑定事件(添加事件监听)
语法:
·v-on:事件名="方法名
·简写为@事件名="…"
注意：methods函数中的this指向Vue实例，可以通过this获取到data中定义的数据
Ajax
·介绍：Asynchronous JavaScript And XML，异步的JavaScript和XML
·作用
·数据交换:通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
·异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用的校验等等。
Axios
·引入axios的js文件
·使用axios发送请求，并获取相应结果
请求方式别名
async&await
Vue生命周期
每触发一个生命周期事件，会自动执行一个生命周期钩子
典型应用场景
·在页面加载完毕是，发起异步请求，加载数据，渲染页面。
评论前必须登录！
注册