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

htm网站制作

.htm网站制作基于HTML静态页面，通过html/head/body等标签构建框架，内嵌文字、图片及超链接，适合展示固定内容，需配合CSS美化样式，与动态技术结合可扩展功能

HTM 网站制作指南

基础概念

HTML 简介

  • 定义：HTML（HyperText Markup Language）即超文本标记语言，用于创建网页的标准标记语言。
  • 作用：通过一系列标签来定义网页的结构、内容和功能，如文字、图片、链接等元素的呈现。
  • HTML5：是目前广泛应用的版本，具备更强的语义化、多媒体支持以及更好的跨平台兼容性等特点，它简化了代码结构，增加了如 <canvas>、<video> 等新元素，方便开发者创建更丰富多样的网页内容。

文件扩展名

  • 通常以 .htm 或 .html 两者在功能上无本质区别，只是不同操作系统或服务器对文件名长度限制等因素导致的习惯用法差异。

开发工具

代码编辑器

  • 常见选择：
    • Visual Studio Code：免费且开源，具有丰富的插件生态，支持多种编程语言和前端开发框架，提供代码自动补全、语法高亮、调试等功能，方便开发者高效编写代码。
    • Sublime Text：轻量级但功能强大的编辑器，启动速度快，拥有简洁的界面和众多实用的快捷键，其“多重选择”功能可同时编辑多处相同代码，提高开发效率。
    • Atom：由 GitHub 开发的开源编辑器，具有高度的可定制性，社区提供了大量主题和插件，适合喜欢个性化配置的开发者。
  • 基本功能要求：语法高亮显示，便于区分不同类型的代码；代码自动缩进，使代码结构清晰易读；智能提示，减少代码拼写错误并提高编写速度。

浏览器开发者工具

  • 用途：用于测试和调试网页，不同浏览器（如 Chrome、Firefox、Edge 等）都内置了开发者工具，功能类似但各有特点。
  • 主要功能：
    • 元素检查：查看网页的 HTML 结构和 CSS 样式，可实时修改元素属性和样式，观察页面变化，帮助定位布局问题。
    • 控制台：输出 JavaScript 错误信息、日志信息，也可用于执行 JavaScript 代码片段，与网页进行交互式调试。
    • 网络监控：分析网页加载时的网络请求情况，包括请求的资源类型、大小、加载时间等，有助于优化网页性能，如压缩图片、合并脚本文件等。

页面结构

HTML 文档基本结构

  • DOCTYPE 声明：位于文件开头，如 <!DOCTYPE html>，告知浏览器文档类型，确保浏览器以正确的标准模式渲染网页，在 HTML5 中，该声明简洁明了，统一了文档类型定义。
  • <html>：根元素，包含整个网页内容，其属性如 lang 可指定网页语言，有助于搜索引擎优化和辅助技术支持。
  • <head> 部分：
    • <meta>：用于设置网页元数据，如字符编码（<meta charset="UTF-8"> 保证网页正确显示各种字符）、页面描述、关键词等，对搜索引擎排名和网页在不同设备上的显示有重要影响。
    • <title>：定义网页标题，显示在浏览器标签栏，也是搜索引擎结果中重要的展示内容，应简洁准确地反映网页主题。
    • 链接样式表：通过 <link rel="stylesheet" href="style.css"> 引入外部 CSS 文件，实现页面样式与结构的分离，便于统一管理和修改样式。
  • <body> 部分：包含网页的可见内容，如文本、图片、链接、表格等元素，是用户直接交互的部分。

头部与主体内容划分的意义

  • 逻辑清晰：将页面的配置信息（头部）与实际展示内容（主体）分开，使代码结构更清晰，易于理解和维护，开发人员可以快速定位到需要修改的部分，无论是调整样式还是更改内容。
  • 性能优化：浏览器在解析网页时，先读取头部信息，根据其中的设置（如缓存控制、样式表链接等）来处理后续的主体内容，合理设置头部元数据和资源引用顺序，可加快网页加载速度，提升用户体验，将关键 CSS 文件放在头部尽早加载，而将一些非关键的 JavaScript 文件放在页面底部延迟加载，避免阻塞页面渲染。

常用标签

文本相关标签

  • <h1><h6> 标题标签：用于定义网页中的标题层次，<h1> 表示最高级别的标题，通常用于页面主标题，<h2><h6> 依次为子标题，不仅在视觉上突出显示，还有助于组织内容结构和搜索引擎理解页面重点。
  • <p> 段落标签：用于包裹一段文本内容，浏览器会自动在其前后添加适当的间距，使文本段落分明，易于阅读。
  • <strong> 和 <em> 强调标签：<strong> 表示强烈的强调，通常以粗体显示；<em> 表示语气上的强调，一般以斜体显示，它们在语义上有助于搜索引擎判断文本的重要性，同时也能为用户提供视觉上的提示，突出关键信息。
  • <br> 换行标签：强制文本在此处换行，常用于诗歌、歌词等需要特定换行效果的文本内容，或者在段落内需要短暂分隔的地方，但应谨慎使用，避免过多换行影响页面布局和可读性。

链接标签

  • <a>：定义超链接，是网页实现跳转和交互的重要元素。
    • 基本语法：<a href="目标网址">链接文本</a>，href 属性指定链接的目标地址，链接文本则是用户可见并点击的区域。
    • 打开方式：通过 target 属性设置链接的打开方式，如 target="_blank" 表示在新窗口或新标签页中打开链接，常用于外部链接，避免用户离开当前页面；target="_self" 则在当前窗口打开（默认行为）。
    • 锚点链接：在同一网页内部，可使用 href="#id" 的形式创建锚点链接，实现页面内的跳转定位，方便用户快速导航到页面特定部分，常用于较长的页面或文档。

图像标签

  • <img>：用于在网页中嵌入图像。
    • 必要属性：src 属性指定图像文件的路径，是必须填写的属性，否则无法显示图像；alt 属性用于提供图像的替代文本，当图像无法加载时会显示该文本，同时对于视力障碍用户使用的屏幕阅读器来说，alt 文本能帮助他们理解图像内容，提高网页的无障碍性。
    • 其他属性：width 和 height 属性可设置图像的宽度和高度，既可以指定具体像素值，也可以使用百分比实现响应式布局；title 属性可在鼠标悬停在图像上时显示提示信息，增强用户体验，但不应依赖 title 来传达关键信息，而应优先使用 alt 文本。

列表标签

  • 无序列表 <ul>：使用圆点或其他符号（可通过 CSS 修改）来标记列表项，适用于没有先后顺序关系的项目集合，如导航菜单、购物清单等，列表项使用 <li> 标签包裹，浏览器会自动为每个 <li> 添加缩进和列表符号。
  • 有序列表 <ol>：以数字或字母顺序标记列表项，用于表示有先后顺序的内容，如步骤说明、排名列表等，同样，列表项由 <li> 标签定义，其顺序由浏览器自动生成，也可通过 CSS 自定义起始值和列表样式。
  • 嵌套列表：可以在一个列表项内部嵌套另一个列表，实现多层级的列表结构，常用于构建复杂的菜单或分类结构，在一个主菜单的无序列表中，每个主菜单项下可以嵌套一个有序列表表示子菜单项，通过合理的缩进和样式设计，使页面布局清晰有序。

表格标签

  • <table> 表格标签：用于创建二维数据表格，由表格行（<tr>）、表格头（<th>）和表格数据（<td>）等元素组成。
  • 表格结构：
    • <table>：定义整个表格，可设置表格的宽度、边框、背景色等属性，也可以通过 CSS 进行更精细的样式控制。
    • <thead>：包含表格的头部行，通常用于放置列标题，<th> 单元格内的文本默认水平居中且加粗显示，可通过 CSS 进一步调整样式。
    • <tbody>：包含表格的主体内容，即数据行，每行由 <tr> 定义，行内的每个单元格由 <td> 表示，用于存放具体的数据信息。
    • <tfoot>：用于放置表格的页脚信息，如汇总数据、版权信息等，其内部结构与 <thead> 类似，由 <tr> 和 <td> 组成。
  • 表格用途：常用于展示结构化数据，如财务报表、产品规格对比、日程安排等，能够清晰地排列和对比大量数据，方便用户快速获取信息，但在现代网页设计中，由于表格布局较为僵硬，且不利于响应式设计，通常会结合 CSS 的弹性盒子模型（Flexbox）或网格布局（Grid）来实现更灵活的页面布局，而表格更多专注于数据的呈现。

表单标签

  • <form> 表单标签：用于创建用户输入表单，是网页与用户交互的重要方式，如登录表单、搜索表单、注册表单等。
  • 表单元素：
    • 文本输入框 <input type="text">：允许用户输入单行文本，如用户名、密码（需配合 type="password"）、电子邮件地址等，可通过 name 属性标识输入框的名称，以便在表单提交时后台程序获取数据；placeholder 属性可提供提示文本，引导用户输入正确格式的内容；required 属性表示该输入框为必填项，在表单验证时会检查用户是否输入内容。
    • 密码输入框 <input type="password">：与文本输入框类似，但输入的内容会以掩码形式（如星号或圆点）显示，保护用户隐私，其工作原理与文本输入框相同，可设置 name、placeholder、required 等属性。
    • 单选按钮 <input type="radio">：用于在一组选项中选择一个唯一答案，同一组单选按钮应具有相同的 name 属性值，这样浏览器才能确保用户只能选择其中一个，每个单选按钮的 value 属性值将作为提交时传递的数据值，代表用户的选择。
    • 复选框 <input type="checkbox">：允许用户在一组选项中选择多个答案，可单独或组合使用，与单选按钮类似，通过 name 属性分组，value 属性确定提交值，常用于多选题、兴趣爱好选择等场景。
    • 下拉菜单 <select>：提供一个下拉列表供用户选择，可包含多个 <option> 选项。<select> 标签的 name 属性用于标识下拉菜单的名称，<option> 的 value 属性为选中时的提交值，通过 multiple 属性可设置为允许多选的下拉菜单，用户可按住 Ctrl（Windows）或 Command（Mac）键进行多选操作。
    • 提交按钮 <input type="submit">：当用户填写完表单并点击提交按钮时，表单数据将被发送到服务器指定的处理程序（由 action 属性指定 URL），提交按钮的文本内容可通过标签内的文本或 value 属性设置，通常会显示为“提交”“登录”等提示性文字，引导用户完成操作。
  • 表单属性：
    • action：指定表单数据提交的目标 URL，即服务器端处理表单数据的脚本文件地址，如果省略该属性，表单数据将提交到当前页面所在的 URL。
    • method：设置表单数据的提交方式，主要有“GET”和“POST”两种方式。“GET”方式将表单数据附加在 URL 后面发送，数据量较小且容易被缓存，常用于获取数据等简单操作；“POST”方式则将数据放在请求体中发送，相对更安全，适合处理敏感信息（如登录密码）或较大数据量的提交，如文件上传、注册表单等。

样式设计

CSS 基础

  • 作用：CSS（Cascading Style Sheets）即层叠样式表，用于控制网页的外观样式，如字体、颜色、间距、布局等，实现内容与表现的分离，使网页更美观、易读且易于维护。
  • 选择器：
    • 元素选择器：直接根据 HTML 元素名称选择元素，如 p 选择所有段落元素，h1 选择所有一级标题元素等，这种选择器简单直接，适用于对某一类元素的统一样式设置。
    • 类选择器：使用 加类名的形式，如 .myClass，可选择所有具有该类属性的元素，通过为不同的元素添加相同的类名，可以应用相同的样式规则，方便对多个元素进行批量样式设置，提高代码的复用性。
    • ID 选择器：以 加 ID 值表示，如 #uniqueId，用于选择具有特定 ID 的唯一元素，ID 在整个 HTML 文档中应该是唯一的，常用于对单个元素进行精确的样式控制，如页面的主标题、特定的图片或链接等。
  • 层叠性：当多个样式规则应用于同一个元素时，CSS 会根据优先级和来源进行层叠计算，最终确定元素的样式，优先级从高到低依次为：内联样式（直接在元素标签内设置的样式）> ID 选择器 > 类选择器 > 元素选择器，后定义的样式会覆盖先定义的样式，除非使用 !important 声明来提高某个样式规则的优先级，但应谨慎使用，以免造成样式混乱。

内联样式、内部样式表与外部样式表

  • 内联样式：直接在 HTML 元素的 style 属性中编写 CSS 样式，如 <p style="color: red; font-size: 16px;">，这种方式只针对单个元素生效，样式与内容紧密耦合，不利于样式的统一管理和复用，通常用于对个别元素进行快速且特定的样式调整，或者在无法使用外部样式表的情况下临时设置样式。
  • 内部样式表：将 CSS 代码放置在 HTML 文档的 <head> 部分的 <style> 标签内，如： 
    <head>
  <style>
      p {
          color: blue;
          font-family: Arial, sans-serif;
      }
  </style>
</head>

    这种形式可以对整个页面的元素进行样式设置,适用于单一页面的样式设计，方便在同一文档内组织和管理样式代码，但由于样式与 HTML 代码混合在一起，当网站规模较大或需要在多个页面共享样式时，维护成本较高，不易实现样式的统一更新。

    htm网站制作 第1张

  • 外部样式表：将 CSS 代码单独保存在一个以 .css 结尾的文件中，然后在 HTML 文档中使用 <link> 标签引入，如： 
    <head>
  <link rel="stylesheet" href="styles.css">
</head>

    外部样式表是推荐的方式,具有诸多优点，它实现了内容与样式的完全分离，使得多个 HTML 页面可以共享同一套样式表，便于统一管理和修改网站风格，当需要更改样式时，只需修改外部 CSS 文件，所有引用该文件的页面都会自动更新样式，大大提高了开发效率和维护性，外部样式表还可以被浏览器缓存，减少了重复下载样式文件的次数，有助于提高网页加载速度。

常见 CSS 属性与值

  • 字体相关：
    • font-family：设置字体系列，可指定多个字体名称作为备选方案，如 font-family: Arial, Helvetica, sans-serif;，浏览器会按照顺序查找系统中可用的字体，若前面的字体不可用，则使用后面的字体，这样可以确保在不同设备和操作系统上都能有较为相似的显示效果。
    • font-size：定义字体大小，可以使用像素（px）、百分比（）、em 或 rem 等单位，像素单位较为精确，但缺乏灵活性；百分比单位相对于父元素的字体大小进行设置，具有一定的响应性；em 和 rem 单位则更适合实现相对布局和响应式设计，em 相对于当前元素的字体大小，而 rem 相对于根元素（<html>）的字体大小。
    • font-weight：设置字体粗细，取值可以是关键字（如 normal、bold）或数字（如 100900），数字越大表示越粗。font-weight: bold; 会使字体加粗显示。
    • font-style：控制字体样式，常见取值为 normal（正常）、italic（斜体）和 oblique（倾斜），斜体字常用于强调文本或表示书籍、文章的标题等。
  • 颜色相关：
    • color：设置文本颜色，可以使用颜色名称（如 red、blue）、十六进制值（如 #FF0000 表示红色）、rgb() 函数（如 rgb(255, 0, 0) 也表示红色）或 hsl() 函数等，选择合适的颜色可以提高文本的可读性和页面的视觉效果，但也要注意颜色的对比度和搭配协调性。
    • background-color：定义元素的背景颜色，与 color 属性类似，可使用各种颜色表示方法，背景颜色可以为元素营造不同的氛围和层次感，例如将按钮设置为深色背景以突出显示，或者为整个页面设置统一的浅色背景以增强内容的清晰度。
  • 布局相关：
    • margin：用于设置元素的外边距，即元素与其他元素之间的距离，可以分别设置上下左右四个方向的外边距，如 margin: 10px 5px 15px 20px;（上、右、下、左），也可以使用简写形式，如 margin: 10px;（四个方向相同）、margin: 10px 5px;（上下相同，左右相同）等，外边距在页面布局中起着重要作用，可以控制元素之间的间距，实现元素的水平和垂直对齐以及留白效果。
    • padding：设置元素的内边距，即元素内容与边框之间的距离，其用法与 margin 类似，也有四个方向的设置方式和简写形式，内边距常用于增加元素内部的空间感，使内容不至于紧贴边框而影响可读性或美观度，例如为按钮添加内边距可以让文字在按钮内部更居中且有足够的空间。
    • border：定义元素的边框样式，包括边框宽度、样式和颜色。border: 1px solid black; 表示边框宽度为 1 像素，样式为实线，颜色为黑色，边框可以用于划分元素边界、强调重要元素或创建视觉效果较强的区域分隔，在设计时要注意边框的粗细、颜色与整体页面风格的协调性以及不同元素之间边框

原创文章，作者：未希，如若转载，请注明出处：https://www.xixizhuji.com/ask/1748240.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。

前端网站开发
0

相关文章