简单介绍html/javascript、ajax应用

news2024/11/14 18:21:17

文章目录

  • 前言
  • 1、html
    • 1.1.、html实例
    • 1.2、HTML文档的后缀名
    • 1.3、HTML 编辑器
    • 1.4、HTML 标题
    • 1.5、HTML 段落
    • 1.6、HTML 链接
    • 1.7、HTML 图像
    • 1.8、HTML 表格
      • 1.8.1、HTML 表格实例
      • 1.8.2、HTML 表格和边框
      • 1.8.3、HTML 表格表头
    • 1.9、HTML <input> 标签
    • 1.10、Bootstrap 教程
      • 1.10.1、选择Bootstarp表格
      • 1.10.2、找到Bootstarp需要引入的CDN文件
      • 1.10.3、本地使用Bootstarp渲染表格
  • 2、JavaScript
    • 2.1、JavaScript用法
      • 2.1.1、<script\> 标签
      • 2.1.2、<body\> 中的 JavaScript
      • 2.1.3、JavaScript事件
      • 2.1.4、JavaScript函数
      • 2.1.5、外部的 JavaScript
  • 3、ajax
    • 3.1、HTTP 请求:GET vs POST
    • 3.2、jQuery $.get() 方法
    • 3.3、jQuery $.post() 方法
  • 总结


前言

今天简单的介绍HTML,以及简单的JavaScript、ajax交互


1、html

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。

1.1.、html实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>index</title>
</head>
<body>

<h1>hello,world!</h1>
</body>
</html>

1.2、HTML文档的后缀名

● .html
● .htm
以上两种后缀名没有区别,都可以使用。

1.3、HTML 编辑器

可以使用专业的 HTML 编辑器来编辑 HTML,IDEA企业版本支持HTML编辑,同时支持快捷打开浏览器:
在这里插入图片描述

1.4、HTML 标题

HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>

1.5、HTML 段落

HTML 段落是通过标签 <p> 来定义的。
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

1.6、HTML 链接

HTML 链接是通过标签 <a> 来定义的。
<a href="https://www.baidu.com">这是一个链接,href是链接的属性,里面的内容是待跳转的链接地址</a>
<a href="https://www.baidu.com" target="_blank">这是一个打开新页面的链接</a>
<a href="https://www.baidu.com" target="_self">这是一个覆盖本页面的链接</a>

1.7、HTML 图像

HTML 图像是通过标签 <img> 来定义的.
<img decoding="async" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" 
width="258" height="39" />
<img decoding="async" src="static/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" 
width="258" height="39" />

注意: 图像的名称和尺寸是以属性的形式提供的,src里的内容是图片的地址,可使用相对路径和绝对路径。

1.8、HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

1.8.1、HTML 表格实例

NamePoints
Zhang san50
Li si94
Wang wu80
Zhao liu67
<h4>一列:</h4>
<table border="1">
    <tr>
        <td>100</td>
    </tr>
</table>

<h4>一行三列:</h4>
<table border="1">
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
    </tr>
</table>

<h4>两行三列:</h4>
<table border="1">
    <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
    </tr>
    <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
    </tr>
</table>

1.8.2、HTML 表格和边框

如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
使用边框属性来显示一个带有边框的表格:

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

1.8.3、HTML 表格表头

表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在浏览器显示如下:
在这里插入图片描述

1.9、HTML 标签

一个文本输入框、一个密码文本输入框和一个提交按钮

<input type="text"  id="name" placeholder="请输入姓名"><br>
<input type="password"  id="pwd" placeholder="请输入密码"><br>
<button>确认</button>

在这里插入图片描述

1.10、Bootstrap 教程

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
案例地址:https://www.runoob.com/bootstrap/bootstrap-tutorial.html

以下内容以表格为案例:https://www.runoob.com/bootstrap/bootstrap-tables.html

1.10.1、选择Bootstarp表格

选择一款表格样式,并点击【尝试一下】
在这里插入图片描述

1.10.2、找到Bootstarp需要引入的CDN文件

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

1.10.3、本地使用Bootstarp渲染表格

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>index</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

	<table class="table">
	    <caption>上下文表格布局</caption>
	    <thead>
	    <tr>
	        <th>产品</th>
	        <th>付款日期</th>
	        <th>状态</th>
	    </tr>
	    </thead>
	    <tbody>
	    <tr class="active">
	        <td>产品1</td>
	        <td>23/11/2013</td>
	        <td>待发货</td>
	    </tr>
	    <tr class="success">
	        <td>产品2</td>
	        <td>10/11/2013</td>
	        <td>发货中</td>
	    </tr>
	    <tr  class="warning">
	        <td>产品3</td>
	        <td>20/10/2013</td>
	        <td>待确认</td>
	    </tr>
	    <tr  class="danger">
	        <td>产品4</td>
	        <td>20/10/2013</td>
	        <td>已退货</td>
	    </tr>
	    </tbody>
	</table>

</body>
</html>

2、JavaScript

JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都可以使用 JavaScript。

2.1、JavaScript用法

HTML 中的 Javascript 脚本代码必须位于 <script></script> 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的 <body><head> 部分中。

2.1.1、<script> 标签

如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。
<script></script> 会告诉 JavaScript 在何处开始和结束。
<script></script> 之间的代码行包含了 JavaScript:
<script>
    alert("我的第一个 JavaScript");
</script>

2.1.2、<body> 中的 JavaScript

<script>
    document.write("<h1>Hello world!</h1>");
</script>

2.1.3、JavaScript事件

定义了一个button,在点击按钮时触发事件

<button onclick="alert('Hello world!')">按钮</button>

2.1.4、JavaScript函数

在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 部分。
该函数会在点击按钮时被调用:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>index</title>
    <script>
        function hello() {
            alert('Hello world!')
        }
    </script>

</head>
<body>

	<button onclick="hello()">按钮</button>

</body>
</html>

2.1.5、外部的 JavaScript

例如jquery、bootstrap :

<script src=""></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>index</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>

3、ajax

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

3.1、HTTP 请求:GET vs POST

两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
● GET - 从指定的资源请求数据
● POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

3.2、jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法:

$.get(URL,callback);

$.get( URL [, data ] [, callback ] [, dataType ] )

● URL:发送请求的 URL字符串。
● data:可选的,发送给服务器的字符串或 key/value 键值对。
● callback:可选的,请求成功后执行的回调函数。
● dataType:可选的,从服务器返回的数据类型。默认:智能猜测(可以是xml, json, script, 或 html)。

$.get("http://localhost:8080/hello",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
});

$.get() 的第一个参数是我们希望请求的 URL(“http://localhost:8080/hello”)。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容,第二个回调参数存有请求的状态。

3.3、jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:

$.post(URL,callback);

$.post( URL [, data ] [, callback ] [, dataType ] )

● URL:发送请求的 URL字符串。
● data:可选的,发送给服务器的字符串或 key/value 键值对。
● callback:可选的,请求成功后执行的回调函数。
● dataType:可选的,从服务器返回的数据类型。默认:智能猜测(可以是xml, json, script, 或 html)。

$.post("http://localhost:8080/hello",
{
    name:"小米电视"
},
function(data,status){
    alert("数据: " + data + "\n状态: " + status);
});

$.post() 的第一个参数是我们希望请求的 URL (“http://localhost:8080/hello”)。
然后我们连同请求(name 和 url)一起发送数据。第三个参数是回调函数。


总结

以上就是今天要讲的内容,本文仅仅简单介绍了HTML、JavaScript、Ajax的简答交互,如果要做个人项目、企业级项目,还需要了解更多的CSS、JavaScript以及更多的组件知识。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/673543.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

开发常用命令合集(Docker、K8s、Linux、Windows等)

开发常用命令合集&#xff08;Docker、K8s、Linux、Windows等&#xff09; 1 Docker 详情查看&#xff1a;https://blog.csdn.net/weixin_45565886/article/details/130130361 1.1 基础命令 ①拉取、查看、删除镜像 docker pull nginx #下载最新版镜像名:版本名&#xff08…

元数据驱动架构的官方数据空间设计

淘宝开放平台是阿里与外部生态互联互通的重要开放途径&#xff0c;通过开放的产品技术把阿里经济体一系列基础服务&#xff0c;像水、电、煤一样输送给我们的商家、开发者、社区媒体以及其他合作伙伴&#xff0c;推动行业的定制、创新、进化, 并最终促成新商业文明生态圈。 开放…

PHP简单入门

PHP是一种流行的服务器端编程语言&#xff0c;被广泛用于Web开发。许多著名的网站和应用程序都是使用PHP编写的&#xff0c;例如Facebook、Wikipedia和WordPress等。本篇文章将为您介绍如何入门PHP编程。 环境配置 在开始使用PHP之前&#xff0c;需要先配置开发环境。要在本…

3ds MAX绘制花坛

绘制一个八边形花坛&#xff1a; 首先绘制一个八边形&#xff0c;并将它转换为可编辑样条线&#xff1a; 在前视图中绘制一个长方形&#xff0c;参数如图&#xff0c;可以按照喜好变换弧度等 注意&#xff0c;长方形的宽要和八边形的边长对应。 接下来我们通过旋转创建完整的…

测试流程体系

目录&#xff1a; 软件测试基本概念软件测试模型软件测试工作流程测试左移和测试右移 1.软件测试基本概念 通过手工或者工具对"被测对象"进行测试验证实际结果与预期结果之间是否存在差异 软件测试作用 通过测试工作可以发现并修复软件当中存在的缺陷&#xff…

环状支撑佩戴,骨传导新体验:南卡OE骨传导开放式耳机

骨传导耳机究竟是“黑科技”还是“智商税”呢&#xff1f;我想近几年的市场反馈就能给出答案。尤其是在户外运动场景下&#xff0c;骨传导耳机的综合体验都要比入耳式耳机更好一些。最近国产品牌南卡推出了一款新形态的骨传导耳机&#xff0c;南卡OE&#xff0c;它通过改良耳机…

【二叉树part03】| 104.二叉树的最大深度、559.n叉树的最大深度、111.二叉树的最小深度、222.完全二叉树的节点个数

目录 ✿LeetCode104.二叉树的最大深度❀ ✿LeetCode559.n叉树的最大深度❀ ✿LeetCode111.二叉树的最小深度❀ ✿LeetCode222.完全二叉树的节点个数❀ ✿LeetCode104.二叉树的最大深度❀ 链接&#xff1a;104.二叉树的最大深度 给定一个二叉树&#xff0c;找出其最大深度…

[Leetcode] 0014. 最长公共前缀

14. 最长公共前缀 img { margin: auto; display: block } 点击上方&#xff0c;跳转至Leetcode 题目描述 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&#xff0c;返回空字符串 ""。 示例 1&#xff1a; 输入&#xff1a;strs ["flowe…

一道有点仙的数位dp 方伯伯的商场之旅

link 大意&#xff1a; 思路&#xff1a; 先来考虑单个数字的情况 其实首先可以将题意稍微转化一下&#xff0c;就是移动一个石子的代价是其移动的距离。这样的话&#xff0c;显然我们的策略就是对于每一个石子&#xff0c;一次性将其移动到正确的位置&#xff0c;毕竟能一步…

Axure教程—选择器

本文将教大家如何用AXURE中的动态面板制作选择器 一、效果 预览地址&#xff1a;https://zhihp9.axshare.com 二、功能 用户点击选择框&#xff0c;可以显示下拉选择器&#xff0c;点击后选择对应项。 三、制作 1、选择框 拖入一个矩形&#xff0c;设置大小为16438&#xff…

macOS Ventura 13.4.1 (22F82) Boot ISO 原版可引导镜像下载

macOS Ventura 13.4.1 (22F82|22F2083) Boot ISO 原版可引导镜像下载 本站下载的 macOS 软件包&#xff0c;既可以拖拽到 Applications&#xff08;应用程序&#xff09;下直接安装&#xff0c;也可以制作启动 U 盘安装&#xff0c;或者在虚拟机中启动安装。另外也支持在 Wind…

EMC学习笔记(六)优选布线层

EMC学习笔记&#xff08;六&#xff09;优选布线层 1. 表层与内层走线的比较1.1 微带线&#xff08;microsstrip&#xff09;1.2 带状线&#xff08;stripline&#xff09;1.3 微带线与带状线的比较 2.布线层的优先级别 对于时钟、高频、高速、小、弱信号而言&#xff0c;选择合…

React封装axios请求

1、前言 因为最近在进行老系统用新框架改造&#xff0c;正好用到了react&#xff0c;就顺便整理了一下react中对axios进行封装的相关知识点和步骤。 2、如何封装 可以参考一下chat gpt给出的回答。 我大概总结一下&#xff0c;其实就是使用axios.create创建一个axios的实例&…

基于座位预约管理系统的设计与实现

前言&#xff1a; 各位小伙伴儿们端午节快乐&#xff0c;本篇文章为大家带来一份基于ssm技术搭建的项目&#xff0c;正在学习这块技术的童靴们可以体验一下哦&#xff0c;在资源中可获取源码 ~ 以下正文开始&#xff1a; 文章目录 需求分析功能模块项目架构图首页部分Controll…

存储笔记 - 整理

文章目录 第一章 存储系统introlesson 1何为数据&#xff1f;类型与关系 lesson 2 存储系统环境lesson 1lesson 2 Disk Drive 数据保护 RAIDlesson 1 智能存储lesson 第二章 存储网络技术与虚拟化DAS 直连式存储与 SCSIlesson 直连存储lesson&#xff1a; SCSI简介summary SANl…

长尾关键词有什么作用?要怎么用?

长尾关键词很多的网站都会忽略其存在&#xff0c;其实你不要小看长尾关键词&#xff0c;他将带给网站的流量也是极其可观的&#xff0c;所说比不上那些重点关键词的流量&#xff0c;但是对提升网站的权重还是有着重要的作用。 长尾关键词有什么用&#xff1f;长尾关键词的3…

基于spss的多元统计分析 之 因子分析(4/8)

实验目的&#xff1a; 1&#xff0e;掌握因子分析的基本思想&#xff1b; 2&#xff0e;熟悉掌握SPSS软件进行因子分析的基本操作&#xff1b; 3&#xff0e;利用实验指导的实例数据&#xff0c;上机熟悉因子分析方法。 实验内容&#xff1a; 附表的数据来自一次对液晶电视的调…

English Learning - L3 作业打卡 Lesson7 Day48 2023.6.21 周三

English Learning - L3 作业打卡 Lesson7 Day48 2023.6.21 周三 引言&#x1f349;句1: I thought the worst was over until weeks later when I saw my new legs for the first time.成分划分弱读连读爆破语调 &#x1f349;句2: I didn’t know what to expect but I wasn‘…

【C++】 Qt-认识Qt

文章目录 Qt简介Qt建立工程准备建立控制台程序建立桌面窗口程序 Qt简介 Qt&#xff08;官方发音[kju:t]&#xff0c;同音cute&#xff09;是一个跨平台的C开发库&#xff0c;主要用来开发图形用户界面&#xff08;Graphical User Interface&#xff0c;GUI&#xff09;程序&am…

Android之 日历单选多选控件

一&#xff0c;效果图 1.1 单选 2.2 多选 二 实现思路 2.1 数据来源&#xff0c;利用原生日历Calendar&#xff0c;获取从本月开始的往后一年的日期&#xff0c;遍历月数添加全部天数据 private void initCalendarData() {Calendar calendar Calendar.getInstance();year …