7 - 【JavaWeb】HTML页面基础

最新推荐文章于 2024-09-12 15:29:35 发布

weixin_44329069

最新推荐文章于 2024-09-12 15:29:35 发布

阅读量630

点赞数 8

分类专栏： JavaWeb 文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_44329069/article/details/142173282

版权

JavaWeb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1. HTML语法规范

HTML（HyperText Markup Language）是一种标记语言，用于创建和设计网页。HTML文档的基本结构如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

<!DOCTYPE html>: 声明文档类型，告知浏览器这是一个HTML5文档。
<html>: 根元素，所有其他元素都嵌套在其中。
<head>: 包含文档的元数据，如字符集、标题、样式表等。
<body>: 包含网页的实际内容，如文本、图像、链接等。

2. 常用HTML标签

标题标签

<h1>主标题</h1>
<h2>副标题</h2>
<!-- ... -->
<h6>最小标题</h6>

段落标签

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

链接标签

<a href="https://www.example.com" target="_blank">访问示例网站</a>

图像标签

<img src="image.jpg" alt="描述文字" width="300">

列表标签
无序列表（<ul>）和有序列表（<ol>）:

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

表格标签

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
</table>

3. HTML表单

表单用于收集用户输入。基本的表单结构如下：

<form action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required><br><br>

    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email" required><br><br>

    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required><br><br>

    <input type="submit" value="提交">
</form>

表单元素：

<form>: 定义表单，action属性指定数据提交的URL，method属性指定HTTP方法（如GET或POST）。
<label>: 为表单控件提供标签。
<input>: 用户输入控件，类型通过type属性指定，如text、email、password等。
<textarea>: 多行文本输入。
<select>: 下拉菜单。
<button>: 按钮控件。

4. 实践示例

以下是结合前面所述内容的一个简单HTML页面示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML示例页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
        }
    </style>
</head>
<body>
<h1>欢迎来到HTML示例页面</h1>
<p>这是一个展示HTML基本标签和表单的示例页面。</p>

<h2>示例链接和图像</h2>
<a href="https://www.ilovepdf.com/jpg_to_pdf" target="_blank">访问ilovepdf</a>
<br><br>
<img src="https://cdn.pixabay.com/photo/2024/08/02/09/01/barracuda-8939250_1280.jpg" alt="示例图像" width="300">

<h2>示例表单</h2>
<form action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" required><br><br>

    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email" required><br><br>

    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required><br><br>

    <input type="submit" value="提交">
</form>
</body>
</html>

要访问和查看一个HTML页面，你需要将其保存到本地计算机上并在浏览器中打开。

1. 保存HTML文件

创建HTML文件:
- 打开一个文本编辑器（如 Notepad、Visual Studio Code、Sublime Text 等）。
- 将上面提供的HTML代码粘贴到文本编辑器中。
- 保存文件时，将其命名为 index.html（或者其他你喜欢的名字，只要确保文件扩展名是 .html）。
保存文件:
- 在文本编辑器中，选择 File -> Save As。
- 在文件名框中输入 index.html。
- 确保文件类型选择为“所有文件”或“文本文件”。
- 选择一个保存位置（如桌面或某个文件夹），然后点击 Save。

2. 打开HTML文件

找到保存的文件:
- 打开文件所在的文件夹（比如桌面或你保存的目录）。
使用浏览器打开文件:
- 双击 index.html 文件。默认情况下，它会用你默认的网页浏览器（如 Chrome、Firefox、Edge、Safari）打开。
- 或者，你可以右键点击文件，选择 Open with，然后选择你喜欢的浏览器。