杂货区(前端)


html

html:超文本 标记 语言,html文档也叫做Web页面。

html基本语法:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
        <meta charset="utf-8">
        <!-- 定义网页编码格式为utf-8 -->

        <title>hello,html</title>
    </head>
    <body>
        <h1>这是一个标题</h1>
        <!-- 标题通过h1~h6标签定义 -->

        <!-- 使用img来更改图片大小 -->
        <img src="图片路径" style="zoom:50%">

        <p>这是一个段落</p>
        <a href="www.baidu.com">这是一个链接</a>

        <img loading="lazy" src="" width="258" height="39" />

        <br />
        <!-- br表示换行 --> 
        <hr />
        <!-- hr创建水平线 --> 
    </body>
</html>

html特殊语法:

<!-- 无序列表,有序列表以o开头 -->
<ul>
    <li>项目</li>
    <li>项目</li>
</ul>

<!-- 表单,密码字段 -->
<form>
Password: <input type="password" name="pwd">
</form>

<!-- 框架,用于显示另一个页面 -->
<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>

css

id 选择器,可以为标有特定 id 的 HTML 元素指定特定的样式。

#para1
{
    text-align:center;
    color:red;
}

class 选择器,用于描述一组元素的样式

.center {text-align:center;}

p.center {text-align:center;}

外部样式

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

javasript

  • Web 的编程语言,控制着网页的行为。
  • 可插入 HTML 页面
  1. 在 浏览器 中使用 开发者工具,console 窗口可运行 Javascript 代码
  2. 在 浏览器 中使用 开发者工具,sources 窗口可建立 Javascript 脚本
console.log("hello, world")
  • 基本思想
    • 使用 ; 分隔语句
    • 大小写敏感
    • // 单行注释,/**/ 多行注释
    • var 用于声明变量,无值的变量为 undefined
    • 几乎所有事物都是对象
      • 对象创建 var p = {firstname:"jon",lastname:"Doe"}
      • 访问方式
        • p.lastname
        • p[“lastname”]
  • 数据类型
    • 基本类型
      • String
      • Number
      • Boolean…
    • 引用类型
      • Object
      • Array
      • Function…
    • 检查方式
      • typeof xxx
  • 输出
    • window.alert() ,弹出警告框
    • document.write(),写入 html 文档
    • innerHTML,写入到 html 元素
    • console.log(),写入到浏览器的控制台
  • 函数
function myfun(var1, var2){
    ...
}

jquery

是目前最受欢迎的 JavaScript 框架。

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

基础语法: $(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)”查询”和”查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("/try/ajax/demo_test.txt");
    });
});
</script>

例子:隐藏和显示

<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>

vue

是一套构建用户界面的渐进式框架。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>

<script>
const app = {
  data() {
    return {
      counter: 1
    }
  }
}
vm = Vue.createApp(app).mount('#app')
vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
</body>
</html>

react

React 是一个用于构建用户界面的 javascript 库。

node.js

Node.js 就是运行在服务端的 JavaScript。

console.log('Hello World!');

bootstrap

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

响应式设计,使其自适应于各种屏幕大小的客户端


文章作者: ╯晓~
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 ╯晓~ !
评论
  目录