Article Directory
foreword
A brief introduction to HTML today, as well as simple JavaScript and ajax interactions
1、html
Hypertext Markup Language (English: HyperText Markup Language, referred to as: HTML) is a standard markup language used to create web pages.
You can use HTML to build your own WEB site. HTML runs on the browser and is parsed by the browser.
1.1.、html example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
</head>
<body>
<h1>hello,world!</h1>
</body>
</html>
1.2, the suffix name of the HTML document
● .html
● .htm
There is no difference between the above two suffixes, both can be used.
1.3, HTML editor
You can use a professional HTML editor to edit HTML. IDEA Enterprise Edition supports HTML editing and supports quick opening of browsers:
1.4, HTML title
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>
1.5. HTML paragraphs
HTML 段落是通过标签 <p> 来定义的。
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
1.6. HTML links
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 images
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" />
Note: The name and size of the image are provided in the form of attributes, and the content in src is the address of the image, and relative paths and absolute paths can be used.
1.8. HTML table
Tables are defined by the <table> tag. Each table has a number of rows (defined by <tr> tags), and each row is divided into a number of cells (defined by <td> tags). The letters td refer to table data, that is, the contents of a data cell.
Data cells can contain text, pictures, lists, paragraphs, forms, horizontal lines, tables, and more.
1.8.1. Example of HTML table
| Name | Points |
|---|---|
| Zhang san | 50 |
| Li Si | 94 |
| Wang Wu | 80 |
| Zhao 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>
1.8.2, HTML tables and borders
If no border property is defined, the table will not display a border. Sometimes this is useful, but most of the time, we want the border to show.
Use the border property to display a table with a border:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
1.8.3, HTML table header
Table headers are defined using the <th> tag.
Most browsers will display the table header as bold centered text:
<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>
Displayed in the browser as follows:
1.9. HTML tags
A text input box, a password text input box and a submit button
<input type="text" id="name" placeholder="请输入姓名"><br>
<input type="password" id="pwd" placeholder="请输入密码"><br>
<button>确认</button>
1.10. Bootstrap Tutorial
Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is concise and flexible, making Web development faster.
Case address: https://www.runoob.com/bootstrap/bootstrap-tutorial.html
The following content uses tables as an example: https://www.runoob.com/bootstrap/bootstrap-tables.html
1.10.1. Select the Bootstarp form
Select a table style and click [Try it]
1.10.2. Find the CDN file that Bootstarp needs to import
<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, use Bootstarp locally to render the form
<!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 is the programming language of the Web. All modern HTML pages can use JavaScript.
2.1, JavaScript usage
HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。
2.1.1, <script> tag
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript:
<script>
alert("我的第一个 JavaScript");
</script>
2.1.2. JavaScript in <body>
<script>
document.write("<h1>Hello world！</h1>");
</script>
2.1.3. JavaScript events
Defines a button that triggers an event when the button is clicked
<button onclick="alert('Hello world!')">按钮</button>
2.1.4, JavaScript function
In this example, we place a JavaScript function into a section of the HTML page.
This function will be called when the button is clicked:
<!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. External JavaScript
For example 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
The jQuery get() and post() methods are used to request data from the server through HTTP GET or POST requests.
3.1. HTTP request: GET vs POST
Two common methods for request-response on client and server side are: GET and POST.
● GET - Request data from the specified resource
● POST - Submit data to the specified resource for processing
GET is basically used to get (retrieve) data from the server. Note: The GET method may return cached data.
POST can also be used to fetch data from the server. However, the POST method does not cache data and is often used to send data along with the request.
3.2. jQuery $.get() method
The $.get() method requests data from the server via an HTTP GET request.
grammar:
$.get(URL,callback);
or
$.get( URL [, data ] [, callback ] [, dataType ] )
● URL: URL string to send the request.
● data: optional, a string or key/value pair sent to the server.
● callback: optional, the callback function executed after the request succeeds.
● dataType: optional, the data type returned from the server. Default: smart guess (can be xml, json, script, or html).
$.get("http://localhost:8080/hello",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
The first argument to $.get() is the URL we wish to request ("http://localhost:8080/hello").
The second parameter is the callback function. The first callback parameter stores the content of the requested page, and the second callback parameter stores the status of the request.
3.3. jQuery $.post() method
The $.post() method submits data to the server via an HTTP POST request.
grammar:
$.post(URL,callback);
or
$.post( URL [, data ] [, callback ] [, dataType ] )
● URL: URL string to send the request.
● data: optional, a string or key/value pair sent to the server.
● callback: optional, the callback function executed after the request succeeds.
● dataType: optional, the data type returned from the server. Default: smart guess (can be xml, json, script, or html).
$.post("http://localhost:8080/hello",
{
name:"小米电视"
},
function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
The first argument to $.post() is the URL we wish to request ("http://localhost:8080/hello").
Then we send the data along with the request (name and url). The third parameter is the callback function.
Summarize
The above is what I want to talk about today. This article only briefly introduces the short-answer interaction of HTML, JavaScript, and Ajax. If you want to do personal projects or enterprise-level projects, you need to know more about CSS, JavaScript, and more component knowledge.