★ FEATURED ARTICLE 系列定位零基础友好、无门槛入门从基础语法到企业规范、实战开发、兼容适配全覆盖适合前端初学者、转行开发者、在校学生全程配套代码案例可直接上手实操 系列特色摒弃枯燥理论堆砌知识点碎片化拆解、章节层层递进、配套实战案例、贴合企业开发规范学完可独立开发静态网页、企业官网页面 更新形式CSDN 连载博客单章独立成文章节之间关联互通支持收藏系统化学习前言很多初学 HTML 的同学上来就直接写文字、写标签忽略页面最外层的骨架。 骨架就相当于房子的地基和框架地基写错页面就会出现乱码、移动端适配失效、浏览器怪异模式渲染、SEO 不友好等一系列隐性 bug。企业开发中每一个 HTML 页面都必须带上标准骨架这是前端面试高频基础考点也是写好网页的第一道门槛。 本节我们吃透 HTML5 标准文档结构!DOCTYPE、html、head、body同时给大家一套企业项目通用的 HTML5 模板以后写页面直接复制使用。一、完整标准骨架先睹为快先看完整代码下面逐个拆解每一行含义!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentIEedge title我的第一个网页/title /head body h1Hello HTML/h1 p这里是页面可见内容/p /body /html重点区分 head 里面的内容不会直接展示在页面上是给浏览器、搜索引擎看的元信息 body 里面的内容是用户肉眼能看到的所有页面内容。二、逐个标签详细讲解2.1.1!DOCTYPE html文档类型声明!DOCTYPE html✅ 核心知识点!DOCTYPE不是 HTML 标签它只是一行声明指令必须放在页面第一行前面不能有任何文字、空格、注释。作用告诉浏览器当前文档使用HTML5 标准解析触发浏览器标准渲染模式避免进入怪异模式Quirks Mode。历史补充HTML4、XHTML 的 DOCTYPE 非常冗长需要绑定 DTD 文档HTML5 做了简化直接写!DOCTYPE html即可不区分大小写推荐小写写法。❌ 踩坑提醒漏掉 DOCTYPE不同浏览器渲染样式会出现莫名其妙的差异企业规范强制要求必须写。2.1.2html langzh-CN根标签html langzh-CN✅ 核心知识点html是整个页面唯一的根元素所有其他标签都必须写在html和/html之间不能跑到外面。lang属性声明网页的自然语言zh-CN代表简体中文英文页面写langen。作用辅助屏幕阅读器无障碍访问残障适配帮助搜索引擎识别页面语言利于 SEO企业规范国内项目统一写langzh-CN。内部包含两大子节点head和body且一个 html 页面只能有一对 head、一对 body。2.1.3head/head头部元信息容器head 是页面的 “配置中心”存放页面描述、编码、标题、引入 CSS、图标、SEO 信息里面内容不会直接渲染到页面MDN Web Do...。我们拆解里面高频必须写的几个标签head !-- 1. 字符编码UTF-8必须写在head最前面 -- meta charsetUTF-8 !-- 2. 视口标签移动端适配必备 -- meta nameviewport contentwidthdevice-width, initial-scale1.0 !-- 3. IE兼容让IE使用最新内核渲染 -- meta http-equivX-UA-Compatible contentIEedge !-- 4. 页面标题浏览器标签栏文字SEO权重很高 -- title我的第一个网页/title /headmeta charsetUTF-8设置文档字符编码为 UTF-8支持全球绝大多数文字、中文、emoji不写极易出现中文乱码国内项目固定 UTF-8不要用 gb2312。meta nameviewport移动端网页必备widthdevice-width页面宽度等于设备屏幕宽度initial-scale1.0初始缩放比例 1 倍禁止默认缩放做响应式网页必加。meta http-equivX-UA-Compatible contentIEedge兼容老旧 IE 浏览器强制 IE 使用最高版本渲染内核很多政企老项目依然保留这条。title/title浏览器标签页显示的标题同时是搜索引擎抓取页面标题对 SEO 至关重要每个页面标题不允许重复。head 里面还可以放link引入外部 CSS、网页图标、script脚本、description 关键词 meta 等后面章节拓展。2.1.4body/body页面主体可视区域body !-- 所有用户看得见的内容全部写在这里 -- h1标题/h1 p段落文字/p img srcxxx.jpg alt图片 a href#超链接/a /body✅ 核心知识点用户打开网页看到的一切内容文字、图片、按钮、导航、视频、表格全部放在 body 内部。一个页面只能有一个 body。开发规范不要在 body 标签内写元信息、不要把 css、meta 标签放到 body 里面。三、初学者高频误区汇总企业面试常问❌ 误区DOCTYPE 是 html 标签可以放到 html 里面 ✅ 纠正DOCTYPE 只是声明不属于标签必须第一行在 html 外面。❌ 误区head 里面写文字页面能正常展示 ✅ 纠正head 内容不会渲染文字写在 head 里用户看不到。❌ 误区移动端网页不用写 viewport ✅ 纠正不写 viewport手机打开页面会缩小布局错乱企业移动端项目强制加。❌ 误区lang 属性可有可无 ✅ 纠正无障碍规范、搜索引擎优化正规项目都会加上 lang。❌ 误区html、head、body 可以写多组 ✅ 纠正一个页面有且仅有一组。四、实战练习手写第一个标准页面新建文件命名index.html网页入口默认文件名复制下面代码保存后双击用浏览器打开观察标签标题、页面内容效果!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta http-equivX-UA-Compatible contentIEedge titleHTML骨架实战练习页/title /head body h2页面主体内容/h2 p这是我们学习页面骨架的实战案例/p p打开浏览器标签栏可以看到title文字/p /body /html实操提示推荐编辑器 VS Code输入!再按 Tab 键VS Code 自带 HTML5 骨架快捷生成就是这套企业标准模板。五、本节小结!DOCTYPE html告诉浏览器用 HTML5 标准渲染放首行html langzh-CN页面根标签lang 指定语言head存放元信息、配置不显示内容body存放所有用户可见页面内容。骨架是 HTML 一切开发的起点后面我们学习标题、段落、图片、链接、列表等所有标签全部写在这套骨架里面。下节预告2.2 HTML 标签语法规范双标签、单标签、属性写法、大小写、注释规范、企业编码规范与常见书写错误。本教程持续连载欢迎收藏 关注跟着节奏从零到企业实战。有疑问可以评论区留言我会统一回复。
阅读完成 · 觉得有帮助？
