系列专栏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 标签引入测试样式是否生效