系列专栏HTML 零基础入门到企业实战全套教程【连载系列】 上一章2.2 HTML 页面基础结构、标签规范 适合人群零基础小白、转行前端、在校学生 学习目标理解head标签内部作用掌握 meta、title、link、style 标签的企业常用写法、作用和踩坑点能规范写出网页头部代码前言很多新手写 HTML 的时候觉得head里面的内容看不见不重要直接复制粘贴根本不知道每个标签是干嘛的。 但在企业开发里头部标签直接决定网页的标题、编码、移动端适配、SEO、样式引入、浏览器渲染行为是一个标准网页必不可少的部分。head中的内容不会直接展示在页面主体区域是给浏览器、搜索引擎、爬虫读取的配置信息。 本章我们只讲企业开发高频使用的 4 个标签meta、title、link、style附带可直接复制的标准模板。一、title 标签网页标题作用浏览器标签页展示文字搜索引擎收录时标题是搜索结果的大标题影响 SEO收藏网页时默认名称就是 title 内容语法titleHTML零基础教程 | CSDN前端实战/title✅ 企业规范要点一个页面只能有一个 title内容简洁一般控制在 20~30 字以内核心关键词前置不要写无关、堆砌大量关键词会被搜索引擎判定作弊禁止空 title❌ 错误写法示例!-- 不推荐关键词堆砌 -- title前端 HTML CSS JS 教程 零基础 入门 实战 网页开发/title二、meta 标签元信息标签最常用meta 是元数据标签用来给浏览器、搜索引擎传递页面配置是单标签不需要闭合。 格式分两种namexxx contentxxx自定义元信息http-equivxxx contentxxxhttp 相关配置下面是企业项目里必写的几个 meta直接背下来。1. 编码设置重中之重meta charsetUTF-8作用指定网页字符编码为 UTF-8防止中文乱码。早期写法meta http-equivContent-Type contenttext/html;charsetutf-8HTML5 简化成charset写法现在全部用简写。 ✅ 企业强制要求放在 head 最前面如果写在后面依然有可能出现乱码。2. 移动端适配视口标签移动端开发标配meta nameviewport contentwidthdevice-width, initial-scale1.0参数解释widthdevice-width页面宽度跟随设备屏幕宽度initial-scale1.0初始缩放比例 1 倍不自动放大缩小 拓展可选参数企业移动端项目常用meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalablenomaximum-scale1.0最大缩放 1 倍user-scalableno禁止用户双指缩放部分后台管理系统、H5 活动页使用⚠️ 注意普通官网、资讯页面不建议禁止缩放影响无障碍阅读3. 网页描述 descriptionSEO 优化meta namedescription content本教程是HTML零基础入门教程从语法到企业实战配套代码案例适合前端初学者学习静态网页开发。作用搜索引擎抓取后作为搜索结果下方的描述文案提升点击率。 规范80~160 字如实描述页面内容不要乱堆关键词。4. 关键词 keywords现在权重很低了解即可meta namekeywords contentHTML教程,前端入门,静态网页开发提示现在主流搜索引擎已经不太依赖 keywords新项目可以不写老项目保留。5. 禁止缓存、兼容旧浏览器后台系统常用!-- 告诉浏览器不要缓存页面 -- meta http-equivCache-Control contentno-cache meta http-equivPragma contentno-cache meta http-equivExpires content0 !-- IE浏览器优先使用最新渲染内核 -- meta http-equivX-UA-Compatible contentIEedgeX-UA-Compatible企业后台项目非常常见解决 IE 低版本兼容问题PC 端官网、后台管理页面建议加上。三、link 标签外部资源引入标签link 也是单标签最核心用途引入外部 CSS 样式文件也可以设置网页图标 favicon。 语法核心rel指定资源类型href指定资源地址。1. 引入外部 CSS 文件企业开发主流写法link relstylesheet href./css/style.cssrelstylesheet代表当前引入的是样式表hrefcss 文件路径可以是相对路径、绝对路径、在线 CDN 地址企业开发优先使用外部 CSS实现 HTML 和样式分离方便维护这也是项目规范。2. 设置网页小图标 favicon浏览器标签图标link relicon href./favicon.ico typeimage/x-icon图标一般使用 ico 格式也支持 png很多网站、后台管理系统都会配置这个标签提升页面完整度拓展link 还可以做预加载、预连接属于进阶内容零基础阶段先掌握上面两个即可。四、style 标签内嵌 CSS 样式style 是双标签写在 head 内部用来写内嵌样式。style /* 这里写CSS代码 */ body { background-color: #f5f5f5; color: #333; } /style✅ 使用场景区分企业面试高频考点外部 CSSlink项目大量样式、多个页面复用样式首选工程化项目标准写法内嵌 style单个页面少量样式、临时测试、页面独有样式适合简单静态页面行内样式写在标签上优先级最高尽量少用不方便统一维护 学习提醒HTML 阶段我们只需要认识 style 标签知道它是放 CSS 的地方CSS 语法后面章节会详细讲。五、企业标准 head 完整模板直接复制使用下面是企业静态官网通用头部模板以后写页面直接基于这个模板修改!DOCTYPE html html langzh-CN head !-- 编码放在最前面 -- meta charsetUTF-8 !-- IE兼容 -- meta http-equivX-UA-Compatible contentIEedge !-- 移动端视口 -- meta nameviewport contentwidthdevice-width, initial-scale1.0 !-- 网页描述 -- meta namedescription contentHTML零基础入门到企业实战教程配套代码案例零基础学习前端静态网页开发。 !-- 网页标题 -- titleHTML头部标签实战 | HTML零基础教程/title !-- 网页图标 -- link relicon href./favicon.ico typeimage/x-icon !-- 引入外部CSS -- link relstylesheet href./css/style.css !-- 内嵌样式 -- style body { margin: 0; } /style /head body !-- 页面主体内容 -- /body /html六、新手高频踩坑总结❌ meta charset 写在 title 后面存在乱码风险必须放在 head 第一行❌ 移动端页面忘记写 viewport手机打开页面会缩小布局错乱❌ 多个 title 标签一个页面只能有一个 title❌ link 的 rel 写错比如写 relcss浏览器识别不到样式文件❌ 分不清 link 和 stylelink 引入外部 css 文件style 写内嵌 css七、本节课后练习实操新建一个 html 文件把上面标准 head 模板抄写一遍修改 title、description 为你自己的内容尝试新增一个内嵌 style设置页面背景色自己新建一个 css 文件使用 link 标签引入测试样式是否生效
企业数字化 ERP 产品动态
相关推荐
前端小白也能掌握的Agent开发,升级你的产品体验与职业价值 本文深入浅出地介绍了Agent开发的核心概念与前端在其中的关键作用,指出Agent开发并非前端技能的边缘延伸,而是对其原有能力的升级与拓展。文章强调前端在理解用户意图、状态管理、交互设计及业务流程方面的优势,为前端转向Agent开发提供了清晰… · 2026/11/3 19:24:22
10 个惊艳 3D 场景盘点:Qwen3.5-4B-3D-Coder 官方作品画廊深度赏析 人工智能大模型代码模型微调本地部署3D渲染Qwen 【免费下载链接】Qwen3.5-4B-3D-Coder 项目地址: https://ai.gitcode.com/hf_mirrors/ccore/Qwen3.5-4B-3D-Coder 点击查看 免费下载 Qwen3.5-4B-3D-Coder 是一个由 CCORE 基于 Qwen3.5-4B 独立微调的 4B 代码大模型… · 2026/11/3 19:24:22
EtherCAT从站控制器LAN9252原理与工程实践解析 简介:这份PDF培训材料面向工业自动化、嵌入式控制与工业互联网方向的学习者和工程师,围绕EtherCAT实时以太网协议及Microchip LAN9252从站控制器展开,适合需要理解从站开发、网络通信与实时同步机制的读者。内容从EtherCAT的周期时间、低抖动… · 2026/11/3 20:00:36
技术债证券化对测试团队的影响与应对策略 1. 技术债证券化现象解析:当技术问题变成金融产品 在软件工程领域摸爬滚打十几年,我见证过各种形式的技术债处理方式,但最近两年出现的"技术债证券化"现象着实让人心惊。这个看似金融创新的方案,本质上是用金融工具包装… · 2026/11/3 20:00:36
使用Docker Compose部署Prometheus与Grafana监控系统 1. 项目概述监控系统是现代IT基础设施中不可或缺的一部分,而Prometheus和Grafana的组合已经成为监控领域的黄金标准。这套方案不仅适用于大型分布式系统,也能完美服务于中小型应用。我曾在多个生产环境中部署过这套监控栈,它的灵活性和强大功… · 2026/11/3 20:00:36
ASP检测手机客户端并跳转:User-Agent移动端分流实践 接手一个跑了快十年的 ASP 老站,最怕的不是代码有多老,而是需求方一句轻描淡写的话:手机打开要自动进手机版。听起来就是几行 if 的事,真做起来,iPad 到底算不算手机、微信里点开算不算、搜索引擎的爬虫抓到的是哪个版… · 2026/11/3 20:00:36
开发者健康监测系统:用代码数据守护程序员健康 1. 项目背景:当代码与健康相遇 凌晨三点的办公室,显示器蓝光映照着程序员疲惫的面容,咖啡杯早已见底,键盘敲击声在寂静的办公室里格外清晰。这样的场景在IT行业太常见了——根据2022年开发者生态调查报告,超过67%的程序… · 2026/11/3 20:00:36
智算中心网络架构演进与Border Leaf设计解析 1. 智算中心网络架构的演进挑战智算中心作为新一代算力基础设施,其网络架构设计正面临前所未有的流量模型变革。传统数据中心以"南北向"流量为主(客户端到服务器),而智算中心中服务器间"东西向"流量占比已超过… · 2026/11/3 19:59:36
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/2 13:10:28
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 6:04:24
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 5:52:46
STM32F411RE与MAX14431实现SPI隔离:工业现场抗共模干扰实战 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 1:01:59
ESP32+大模型AI硬件开发:从Demo到产品的8个工程问题 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 1:01:59
基于MAX14431BAEE+与PIC18F85J10的SPI隔离方案设计与实践 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 1:01:59
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/2 13:10:28
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 6:04:24
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 5:52:46