零基础新手教程全部示例都附带逐行解释复制代码保存为.html直接就能运行查看效果。前言前面我们学会了 HTML 简介、安装编辑器以及 HTML5 基础网页骨架。 网页里面最常用 4 大类内容标题、文字段落、点击跳转的链接、图片。 这 4 类是网页最基础标签几乎每一个网页都会大量使用。记住一个核心规则所有页面看得见的内容全部写在body /body标签里面。完整基础骨架模板后面所有例子都基于这个模板!DOCTYPE html html langzh-CN head meta charsetUTF-8 title基础标签演示/title /head body !-- 所有示例代码写在这里 -- /body /html一、标题标签h1~h6HTML 提供 6 级标题h是 heading标题缩写。h1一级标题字号最大最重要h2二级标题h3三级标题h4四级标题h5五级标题h6六级标题字号最小✅特点自带加粗效果自动上下留白写完标题会自动换行不需要手动换行语义h1代表整个页面最重要标题一个网页建议只用 1 个 h1不要滥用h2‑h6 可以多次使用用来做子标题。完整示例代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 title标题标签演示/title /head body h1这是h1一级标题页面主标题一个页面尽量只用一次/h1 h2这是h2二级标题/h2 h3这是h3三级标题/h3 h4这是h4四级标题/h4 h5这是h5五级标题/h5 h6这是h6六级标题/h6 /body /html代码解释h1开始标签表示这里开始是一级标题中间文字就是显示在网页上的标题文字/h1结束标签表示标题到此结束浏览器会自动把文字放大加粗每个标题自动占一整行自动有上下间距。新手注意误区 不要用 h1‑h6 单纯用来调字体大小 h 标签有语义含义代表标题层级。想要改字体大小后面学 CSS不要乱用 h 标签。 ❌错误很多小文字全部写h1会破坏网页结构。二、段落标签pp是 paragraph段落。网页正文文字全部放在p标签。✅特点一个p代表一个完整段落段落和段落之间自动有上下空白间距段落会自动换行浏览器窗口变小文字会自动折行。示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 title段落演示/title /head body h2小猫介绍/h2 p小猫是一种很可爱的小动物性格温顺很多人喜欢养猫当做宠物。/p p小猫喜欢睡觉喜欢玩毛线球白天经常懒洋洋的晒太阳。/p /body /html解释第一个p是第一段文字第二个p是第二段文字两段之间浏览器自动空一行不用我们手动打空格换行。补充换行标签brbr break单标签不需要闭合标签。 作用强制文字换行但是不会产生段落之间的大间距。区分重点p新段落换行 上下大空隙br单纯强制换行没有额外空隙示例对比body p床前明月光br 疑是地上霜/p p举头望明月/p p低头思故乡/p /body解释br只是把一句诗换到下一行两段文字紧贴在一起两个独立p两句诗中间会空一大段距离。新手提示不要大量滥用br真正分段优先用p。只有同一段文字内部需要强制换行的时候才用br。补充空格问题在 HTML 代码里面不管敲多少个空格、回车换行网页只会显示 1 个空格。示例p我 爱 HTML/p代码里敲很多空格网页只会看到一个空格。如果想要网页显示多个连续空格使用nbsp;空格实体p我nbsp;nbsp;nbsp;爱HTML/pnbsp;代表一个空格写几个就代表几个空格。实际开发很少用后期 CSS 处理间距新手了解即可。三、超链接标签aa是 anchor锚。网页点击文字跳转到别的网页就是超链接。语法格式a href跳转的地址点击显示的文字/aa链接开始标签href地址属性写要跳转去哪里这个属性必须要有中间文字用户看到、可以点击的文字/a链接结束标签属性格式属性名属性值引号使用英文双引号新手千万不要打中文引号示例 1跳转到外部网站外网链接!DOCTYPE html html langzh-CN head meta charsetUTF-8 title超链接演示/title /head body p点击下面文字访问百度/p a hrefhttps://www.baidu.com去百度/a /body /html解释hrefhttps://www.baidu.com点击后跳转到百度“去百度” 是页面看到的蓝色带下划线文字默认在当前浏览器标签页打开网站。target 属性新标签页打开网页很多时候我们希望点击链接打开新浏览器标签页不关闭当前页面。 属性target_blanka hrefhttps://www.baidu.com target_blank在新窗口打开百度/a✨开发高频使用target_blank记住外部网站链接几乎都加上这个属性。示例 2内部链接跳转自己网站的 HTML 文件如果你本地文件夹有两个网页index.html首页、about.html关于页面 同一个文件夹下面直接写文件名a hrefabout.html跳转到关于页面/a这就是本地项目内部页面跳转做网站必备。示例 3空链接#暂时不知道跳转去哪里先用#占位点击回到页面顶部。a href#这是一个空链接/a新手常见错误href 忘记写链接失效使用中文引号href“xxx”必须英文 外网地址忘记写https://直接写www.baidu.com会出错。❌错误写法a href“www.baidu.com”错误示范/a✅正确a hrefhttps://www.baidu.com正确示范/a四、图像标签img插入图片img image图片标签。单标签不需要闭合标签。基础语法img src图片路径 alt图片描述文字两个最重要属性srcsource 来源图片的地址 / 路径必须写告诉浏览器图片在哪里alt替代文本。图片加载失败的时候就会显示 alt 里面的文字同时给读屏软件使用属于规范建议每一张图片都写 alt。img 是单标签HTML5 直接写img src即可不需要写/img。两种图片路径本地图片、网络图片方式 1网络图片网上图片地址直接复制图片网址直接拿互联网图片 URL不需要本地保存图片。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title图片演示/title /head body h2风景图片/h2 img srchttps://picsum.photos/id/10/400/250 alt风景照片 /body /html解释src里面是网络图片地址alt风景照片万一网络打不开图片显示不出来网页就会显示文字 “风景照片”。方式 2本地图片自己电脑上的图片重点新手最容易出错⚠️路径大坑 你的项目文件夹html 学习文件夹结构如下html学习/ ├─ index.html └─ images/ └─ cat.jpg新建一个文件夹叫images专门存放所有图片把图片cat.jpg放进去。 index.html 和 images 文件夹是同级。此时写图片img srcimages/cat.jpg alt小猫图片解释srcimages/cat.jpg先找 images 文件夹在文件夹里面找到 cat.jpg 图片。新手最常见错误图片路径写错图片显示不出来网页出现破碎小图标图片名字带中文图片文件名不要写中文不要空格不要写小猫.jpg改成 cat.jpg容易加载失败。VS Code 记得打开整个项目文件夹不要单独打开 html 文件否则图片找不到。设置图片宽高 width 和 height可以给图片设置宽度、高度单位是像素 px。img srcimages/cat.jpg alt小猫 width300 height200提示一般我们只写宽度高度浏览器会自动按比例缩放避免图片拉伸变形。后期开发中图片大小更多交给 CSS 处理。拓展图片外面包 a 标签实现点击图片跳转把img放到a标签中间点击图片就能跳转网页。a hrefhttps://www.baidu.com target_blank img srcimages/cat.jpg alt小猫图片 width200 /a解释点击这张小猫图片打开百度网页。完整综合示例把 4 种标签全部写在一起复制全部代码保存运行可以直接看到标题、段落、链接、图片一起使用效果!DOCTYPE html html langzh-CN head meta charsetUTF-8 title综合演示页面/title /head body h1小动物介绍/h1 h2小猫/h2 p小猫是非常可爱的宠物性格安静很多家庭都会饲养小猫。/p p小猫喜欢吃鱼喜欢晒太阳br白天大部分时间都在睡觉。/p !-- 网络图片 -- img srchttps://picsum.photos/id/40/300/200 alt小猫照片 p想了解更多宠物知识请访问 a hrefhttps://www.baidu.com target_blank百度搜索/a /p /body /html本篇新手重点总结标题 h1~h6一共 6 级h1 最重要一个页面尽量只用一次自带加粗换行段落p写正文文本段落之间自动有空隙br只是单纯强制换行超链接a href地址href 属性填写跳转地址target_blank新窗口打开图片img src路径 altsrc 写图片地址alt 写图片说明文字本地图片注意路径图片名字不要中文。所有标签内容写在body里面属性值必须使用英文双引号。新手高频踩坑清单引号写成中文引号代码全部失效图片路径写错图片不显示本地图片文件名中文导致加载失败忘记写target_blank点外部链接把自己网页覆盖掉滥用br来制造大间距应该优先使用p分段。下一节预告下一篇教程元素附带完整示例。