Linux应用实战之网络服务器（二）HTML介绍

最新推荐文章于 2024-06-27 21:53:06 发布

我系真滴菜

最新推荐文章于 2024-06-27 21:53:06 发布

阅读量944

点赞数 26

分类专栏： Linux应用实战文章标签：服务器 html 运维

本文链接：https://blog.csdn.net/cesheng3410/article/details/137102289

版权

Linux应用实战专栏收录该内容

5 篇文章 0 订阅

订阅专栏

0、前言

准备做一个Linux网络服务器应用实战，通过网页和运行在Linux下的服务器程序通信，这是第二篇，介绍一下HTML，制作一个简单的界面，用于后续和服务器通信。笔者对HTML了解不多，本文只讲解一些简单的用法。

1、HTML常用语法

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它由一系列的标签（tags）组成，这些标签定义了网页的结构和内容。

1.1 文档结构

文档基本结构如下：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>页面标题</title>  
    </head>  
    <body>  
        <!-- 页面内容在这里 -->  
    </body>  
</html>

其中：

<!DOCTYPE html>：声明文档类型和HTML版本。
<html>：HTML文档的根元素。
<head>：包含文档的元信息，如标题、字符编码、样式表和脚本等。
<title>：定义浏览器标签页上显示的标题。
<body>：包含网页的所有内容，如文本、图片、链接、列表、表格等。

讲上述内容保存到.html文件中即可用浏览器打开，效果如下，展示了一个只有页面标题的空页面：

1.2 文本内容

文本常用语法如下：

<h1> 到 <h6>：定义六个级别的标题，<h1> 是最高级别的标题。
<p>：定义一个段落。
<br>：插入一个换行符。
<hr>：插入一个水平线。
<b>：使文本加粗。
<i>：使文本斜体。
<u>：为文本添加下划线。
<s>：为文本添加删除线。
<strong> 和 <em>：分别用于强调文本（通常显示为加粗和斜体）。

对上述空页面进行修改：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>页面标题</title>  
    </head>  
    <body>  
        <!-- 标题测试 -->  
		<h1> 这是一级标题 </h1> 
		<h3> 这是三级标题 </h3>
		<!-- 水平线 -->  
		<hr>
		<!-- 段落 下划线 倾斜 --> 
		<p> 这是<u>段落</u>1……</p> 
		<p> 这是<i>段落</i>2…… </p> 
    </body>  
</html>

显示结果如下：

1.3 链接和图片

<a href="URL">链接文本</a>：定义一个超链接，href 属性指定链接的目标地址。
<img src="图片URL" alt="描述性文本">：插入一个图片，src 属性指定图片的地址，alt 属性提供图片无法显示时的替代文本。

示例代码：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>HTML示例</title>  
</head>  
<body>  
  
    <p>这是一个包含超链接和图片的简单HTML示例。</p>  
  
    <!-- 超链接示例 -->  
    <p>可以通过点击下面的链接访问百度<a href="https://www.baidu.com">百度跳转链接</a></p>  
  
    <!-- 图片插入示例 -->  
    <p>通过点击下面的图片访问百度</p>  
	<a href="https://www.baidu.com">
    <img src="baidu.ico" alt="示例图片">  
	</a>
  
</body>  
</html>

通过点击链接或者下面的图片都可以跳转到百度首页：

1.4 列表

列表的常用语法：

<ul>：定义一个无序列表。
<ol>：定义一个有序列表。
<li>：定义列表项。
<tr>：定义表格行。
<th>：定义表头单元格，通常显示为加粗居中文本。
<td>：定义表格数据单元格。

测试代码：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">    
</head>  
<body>  
  
<h2>无序列表</h2>  
<ul>  
    <li>AA</li>  
    <li>BB</li>  
    <li>CC</li>  
</ul>  
  
<h2>有序列表</h2>  
<ol>  
    <li>DD</li>  
    <li>EE</li>  
    <li>FF</li>  
</ol>  
  
<h2>表格</h2>  
<table border="1">  
    <tr>  
        <th>姓名</th>  
        <th>年龄</th>  
        <th>职业</th>  
    </tr>  
    <tr>  
        <td>张三</td>  
        <td>22</td>  
        <td>程序员</td>  
    </tr>  
    <tr>  
        <td>李四</td>  
        <td>33</td>  
        <td>测试员</td>  
    </tr>  
    <tr>  
        <td>王五</td>  
        <td>44</td>  
        <td>可恨领导</td>  
    </tr>  
</table>  
  
</body>  
</html>

测试结果：

1.5 表单

<form action="URL" method="post/get">：定义一个表单，action 属性指定表单数据提交的目标地址，method 属性指定提交方法（POST或GET）。
<input>：定义输入字段，type 属性指定输入类型（如text、password、submit等）。
<textarea>：定义多行文本输入字段。
<label>：定义表单元素的描述。
<select> 和 <option>：定义下拉列表。

测试代码：

<!DOCTYPE html>  
<html>  
    <head>  
        <title>表单测试</title>  
    </head>  
    <body>  
		<form action="/submit" method="post">
			<label for="username">Username:</label>
			<input type="text" id="username" name="username">
			
			<label for="password">Password:</label>
			<input type="password" id="password" name="password">
			
			<input type="submit" value="Submit">
		</form>
    </body>  
</html>

测试结果：

1.6 按键

在HTML中，按键通常使用<button>标签或<input>标签的type="button"、type="submit"或type="reset"属性创建。

type="button"：指定按钮的类型为普通按钮，点击时不会提交表单，通常用于触发JavaScript事件。
type="submit"：指定按钮的类型为提交按钮，点击时会提交表单数据。
type="reset"：指定按钮的类型为重置按钮，点击时会清除表单中的所有输入字段。

测试代码：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>按键示例</title>  
</head>  
<body>  
	<form action="/submit-form" method="post">  
		<label for="username">用户名:</label>  
		<input type="text" id="username" name="username" placeholder="请输入用户名" required><br><br>  
		<button type="submit">提交</button>  
		<button type="reset">重置</button>  
	</form>  
</body>  
</html>

测试结果：

1.7 文本框

在HTML中，文本框通常使用<input>标签创建，并通过设置其type属性为text来指定。

type="text"：指定输入框的类型为文本。
name="myTextbox"：为输入框指定一个名称，通常用于表单提交时标识该字段。
id="myTextbox"：为输入框指定一个唯一的ID，用于CSS样式或JavaScript脚本引用。
placeholder="请输入内容"：提供一个占位符文本，当输入框为空时显示。

测试代码：

<!DOCTYPE html>  
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Text Input Example</title>
</head>
<body>
	<label for="myInput">Enter your text:</label>
	<input type="text" id="myInput" placeholder="Type here...">
	<p id="output"></p>
</body>
</html>

测试效果：

2、编写界面

2.1 编写一个登录界面

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Enter your username"><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="Enter your password"><br><br>
  <button type="submit">Login</button>
</form>
</body>
</html>

显示效果：

2.2 编写一个查询界面

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Query Interface</title>
</head>
<body>
<h2>Query Interface</h2>
<div>
  <button onclick="queryData('query1')">Query 1</button>
  <button onclick="queryData('query2')">Query 2</button>
  <button onclick="queryData('query3')">Query 3</button>
  <button onclick="queryData('query4')">Query 4</button>
</div>
<textarea id="result" rows="10" cols="50" readonly></textarea>

</body>
</html>

显示效果如下：