HTML网站常用基础代码

Carlgood-Minecraft

已于 2025-04-17 16:55:06 修改

阅读量484

点赞数 3

分类专栏： HTML 编程文章标签： html 前端

于 2025-03-17 20:30:46 首次发布

本文链接：https://blog.youkuaiyun.com/WTC20120518/article/details/146324823

版权

编程同时被 2 个专栏收录

96 篇文章

订阅专栏

HTML

3 篇文章

订阅专栏

HTML 常用代码大全与网页开发示例

以下是关于HTML网页开发中的常用代码示例及其说明：

1. HTML 骨架结构

HTML文档的基本骨架由<html>、<head>和<body>组成。其中，<head>部分通常包含元数据（如标题 <title>），而<body>则包含了用户可见的内容。


<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>网页标题</title>
 </head> 
<body> 
<p>这是网页主体内容。</p> 
</body> 
</html>

上述代码展示了标准的HTML文档结构。

2. 文本标签

常见的文本标签包括但不限于以下几种：

段落：<p>
标题：<h1>到<h6>
加粗：<b> 或 <strong>
斜体：<i> 或 <em>

示例如下：

<h1>这是一个大标题</h1> <p><strong>重要：</strong> 这是一个普通的段落。</p> <i>这是一段斜体文字。</i>

这些标签可以用来定义不同样式的文本。

3. 列表标签

列表分为有序列表 (<ol>) 和无序列表 (<ul>)，每项通过 <li> 定义。

<ul> <li>项目一</li> <li>项目二</li> </ul> <ol> <li>第一步</li> <li>第二步</li> </ol>

以上代码分别创建了一个无序列表和一个有序列表。

4. 图像标签

图像可以通过 <img> 标签嵌入网页中，需指定 src 属性来设置图片路径以及可选的 alt 描述属性。

<img src="example.jpg" alt="描述性文字">

该标签允许开发者向页面添加静态或动态图片资源。

5. 超链接

超链接使用 <a> 标签实现，其核心属性为 href，指向目标URL地址。

<a href="https://www.example.com">访问 Example 网站</a>

这一功能使得网站间能够相互连接形成网络体系。

6. 表单输入控件

HTML 提供多种交互方式，比如按钮、文本框等，均属于表单项的一部分。

<form action="/submit" method="post"> 用户名：<input type="text" name="username"><br> 密码：<input type="password" name="password"><br> <button type="submit">登录</button> </form>

这段代码构建了一个简单的登录界面。

7. CSS样式应用

虽然CSS单独存在，但在实际操作过程中经常配合HTML一起工作。下面展示如何利用内部样式表改变字体颜色。

<style> p { color: red; } </style> <p>红色的文字。</p>

这里介绍了基础的CSS语法及其实现效果。

8. JAVASCRIPT事件绑定 (HBUILDER 示例)

借助JavaScript增强用户体验成为可能，如下所示的是监听点击事件的一个例子。

document.getElementById("myButton").addEventListener("click", function() { alert("按钮被点击！"); });

此脚本片段实现了当特定ID的元素受到触发时弹窗提示的功能。