简单介绍html/javascript、ajax应用

本文介绍: 今天简单的介绍HTML，以及简单的Jav aScri p t、ajax 交互

超文本标记语言（英语：Hy perText Mark up Lang ua g e，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

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

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

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

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

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>

HTML 段落是通过标签 <p> 来定义的。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

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>

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" />

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

Nam e	Po int s
Zhang san	50
Li si	94
Wang wu	80
Zha o liu	67

<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>

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

<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>

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

<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>

<!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>

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

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript:

<script>
    alert("我的第一个 JavaScript");
</script>

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

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

<!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>

<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>

$.get(URL,callback);

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

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

$.post(URL,callback);

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

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

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

html 表格

文章 目录

前言

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 标签

1.10、Bootstr ap 教程

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、jQue ry $.get() 方法

3.3、jQue ry $.post() 方法

总结

发表回复取消回复

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 标签

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() 方法

相关文章

发表回复 取消回复

1.1.、html 实例

1.10、Bootstr ap 教程

3.2、jQue ry $.get() 方法

3.3、jQue ry $.post() 方法

发表回复取消回复