当前位置：首页 > 行业动态 > 正文

html教学文档

HTML教学文档系统讲解基础语法、常用标签、元素结构及属性设置，通过实例演示从入门到实践

HTML 基础教程

HTML

HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页的标准标记语言，它通过各种标签来定义网页的结构和内容,浏览器负责解析这些标签并呈现相应的页面效果。

HTML 基本结构

描述
<!DOCTYPE html> 文档类型声明，告知浏览器使用 HTML5 标准解析文档
<html> 根元素，包含整个网页内容
<head> 头部元素，包含元数据（如编码、页面标题、链接的 CSS 文件等）
<body> 主体元素，包含网页的可见内容（如文本、图像、链接等）

示例：

html教学文档 第1张

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">我的网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一段示例文本。</p>
</body>
</html>

常用 HTML 标签

（一）文本标签

功能 示例
<h1><h6> 标题标签，<h1>为最高级别标题，<h6>为最低级别 <h1>一级标题</h1>
<p> 段落标签 <p>这是一个段落。</p>
<strong> 加粗文本 <strong>重要内容</strong>
<em> 斜体文本 <em>强调内容</em>

（二）链接标签

属性 功能 示例
<a> href（指定链接地址） 创建超链接 <a href="https://www.example.com">访问示例网站</a>

（三）图片标签

属性 功能 示例
<img> src（图片来源路径）、alt（替代文本） 嵌入图像 <img src="image.jpg" alt="示例图片">

（四）列表标签

功能 示例
<ul> 无序列表 <ul><li>项目一</li><li>项目二</li></ul>
<ol> 有序列表 <ol><li>第一步</li><li>第二步</li></ol>
<li> 列表项 同上

（五）表格标签

功能 示例
<table> 表格容器 <table><tr><td>单元格内容</td></tr></table>
<tr> 表格行 同上
<td> 表格列 同上

（六）表单标签

属性 功能 示例
<form> action（提交地址）、method（提交方式，如 get/post） 表单容器 <form action="submit.php" method="post">...</form>
<input> type（输入类型，如 text/password 等）、name（名称）、value（值） 输入框 <input type="text" name="username" value="默认值">
<textarea> rows（行数）、cols（列数） 多行文本输入框 <textarea rows="5" cols="20">初始文本</textarea>
<select> name（名称） 下拉列表 <select name="option"><option>选项一</option></select>
<option> value（选项值） 下拉列表项 同上

CSS 样式基础

（一）引入 CSS 的方式

方式 示例 优点 缺点
内联样式 <p style="color: red;">文本</p> 直接作用于特定元素，优先级高 不利于样式统一管理和维护
内部样式表 <style>p { color: red; }</style> 可对当前页面所有同类元素统一设置样式 只对当前页面有效，无法复用
外部样式表 <link rel="stylesheet" href="style.css"> 可多个页面共享，便于维护和管理 需要额外创建和引用 CSS 文件

（二）常用 CSS 属性

属性 功能 示例
color 设置文本颜色 p { color: blue; }
font-size 设置字体大小 h1 { font-size: 24px; }
background-color 设置背景颜色 body { background-color: #f0f0f0; }
margin 设置外边距 div { margin: 20px; }
padding 设置内边距 p { padding: 10px; }
border 设置边框 img { border: 1px solid black; }

JavaScript 交互基础

（一）引入 JavaScript 的方式

方式 示例 说明
内联脚本 <script>alert("你好");</script> 直接在 HTML 文件中编写脚本，简单快捷但不利于代码组织和维护
内部脚本 <script>function sayHello() { alert("你好"); }</script> 将脚本放在 <head> 或 <body> 标签内，可定义函数和变量供页面使用
外部脚本 <script src="script.js"></script> 将脚本写在单独的 .js 文件中，通过 <script> 标签引入，便于代码复用和维护

（二）常用 JavaScript 事件

事件 触发时机 示例
onclick 元素被点击时 <button onclick="alert('按钮被点击');">点击我</button>
onmouseover 鼠标移入元素时 <img onmouseover="this.src='new.jpg';" src="old.jpg">
onload 页面或图像加载完成时 <body onload="init();">

相关问题与解答

问题 1：HTML 中如何设置图片的宽度和高度？

解答：可以通过在 <img> 标签中使用 width 和 height 属性来设置图片的宽度和高度。<img src="image.jpg" width="300" height="200" alt="示例图片">，这样可以在浏览器渲染页面时，按照指定的尺寸显示图片，也可以在 CSS 中通过 width 和 height 属性来设置图片的宽度和高度，img { width: 300px; height: 200px; }，这种方式可以将样式与结构分离,更便于维护和管理。

问题 2：如何在 HTML 表单中提交数据？

解答：在 HTML 表单中，通过 <form> 标签的 action 属性指定数据提交的地址，method 属性指定提交方式（如 get 或 post），当用户填写完表单并点击提交按钮（通常是 <input type="submit">）后，浏览器会按照指定的 method 将表单数据发送到 action 属性指定的地址。

<form action="submit_form.php" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"><br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password"><br>
    <input type="submit" value="登录">
</form>

在这个例子中，当用户点击“登录”按钮时，表单数据将以 post 方式提交到 submit_form.php 页面进行处理，在服务器端，可以通过相应的编程语言（如 PHP、Python 等）获取并

0

相关文章