简单介绍html/javascript、ajax应用

文章目录

  • 前言
  • 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、 标签
      • 2.1.2、 中的 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>indextitle>
head>
<body>

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

1.2、HTML文档的后缀名

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

1.3、HTML 编辑器

可以使用专业的 HTML 编辑器来编辑 HTML,IDEA企业版本支持HTML编辑,同时支持快捷打开浏览器:
简单介绍html/javascript、ajax应用_第1张图片

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

表格由

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

1.8.1、HTML 表格实例

Name Points
Zhang san 50
Li si 94
Wang wu 80
Zhao liu 67
<h4>一列:h4>
<table border="1">
    <tr>
        <td>100td>
    tr>
table>

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

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

1.8.2、HTML 表格和边框

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

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

1.8.3、HTML 表格表头

表格的表头使用

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

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

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

1.9、HTML 标签

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

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

简单介绍html/javascript、ajax应用_第2张图片

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

选择一款表格样式,并点击【尝试一下】
简单介绍html/javascript、ajax应用_第3张图片

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>indextitle>
    <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>产品1td>
	        <td>23/11/2013td>
	        <td>待发货td>
	    tr>
	    <tr class="success">
	        <td>产品2td>
	        <td>10/11/2013td>
	        <td>发货中td>
	    tr>
	    <tr  class="warning">
	        <td>产品3td>
	        <td>20/10/2013td>
	        <td>待确认td>
	    tr>
	    <tr  class="danger">
	        <td>产品4td>
	        <td>20/10/2013td>
	        <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、

你可能感兴趣的:(前端,javascript,html,ajax)