当前位置：首页 > news >正文

简单网页html模板/北京seo编辑

news 文章来源：https://blog.csdn.net/chengkai730/article/details/139874942 2025/3/13 9:19:33

简单网页html模板,北京seo编辑,有关优化网站建设的书籍,wordpress 编辑器空白链接 HTML 介绍写代码的位置：VSCode 看效果的位置：谷歌浏览器安装插件 open in browser： 接下来要保证每次用 open in browser 打开的是谷歌浏览器。只需要将谷歌浏览器变为默认的浏览器就可以了。首先进入控制面板，找到默…

链接

HTML 介绍

在这里插入图片描述

写代码的位置：VSCode

看效果的位置：谷歌浏览器

安装插件 open in browser：

在这里插入图片描述

接下来要保证每次用 open in browser 打开的是谷歌浏览器。只需要将谷歌浏览器变为默认的浏览器就可以了。

首先进入控制面板，找到默认程序：

在这里插入图片描述

VSCode Ctrl + b 折叠侧边栏。

在这里插入图片描述

效果：

在这里插入图片描述

修改代码，加上标签：

在这里插入图片描述

点击刷新按钮，刷新网页，查看效果：

在这里插入图片描述

需要包裹内容时，使用双标签，不需要则使用单标签。

HTML 中绝大多数都是双标签，只有极个别是单标签。

HTML 基本骨架就是网页模板，所有网页都要基于这个模板来编写代码。这个模板由几个固定的标签组成，用这几个标签来表示 HTML 的不同位置。写代码时可以根据位置的不同来对号入座。

最外层是一对 html 标签，html 标签表示整个网页。

HTML 基本骨架

在这里插入图片描述

用快捷键生成模板的效果：

在这里插入图片描述

在浏览器中打开时是一个空白的白板，没有任何内容：

在这里插入图片描述

如果想要展示一些文字，需要将文字写在 body 标签内部。

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>想要展示的文字。
</body>
</html>

效果：

在这里插入图片描述

注意这里代码里的网页标题是 Document，浏览器网页的标题同样也是 Document，是保持对应的。

标签的关系

标签之间有两种关系：

父子（嵌套）
兄弟（并列）

<html><head></head><body></body>
</html>

注释

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>这是文字，能看见吗？<br><!-- 这是注释，浏览器不显示。 --><!-- 可以给代码加注释 --><strong>111. 这是加粗的内容。</strong><!-- <strong>222. 这是加粗的内容。</strong> -->
</body>
</html>

效果：

在这里插入图片描述

标题标签

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>

效果：

在这里插入图片描述

段落标签

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>有些亲贵却不在乎前车之鉴，多尔衮一垮台，便纷纷来永平府设立王庄、田庄。这两年山川秀美的所在，不时出现楼阁亭台点缀的花园、歇山顶的高大堂屋、卷棚式的青砖住房，一派华美富丽，乡下人都看得目瞪口呆了。</p><p>虹桥镇的东岳庙前和通向四乡的大路口，早已布棚林立，摊贩如云了。火势旺盛的炉边，热气腾腾，铜勺敲着锅边当当响，卖的是油炸果子、油豆腐、豆浆、豆腐脑、杂碎汤；提篮挎筐的小贩声声吆喝，叫卖着酱鸡、卤蛋、夹肉火烧、点红馒头；茶棚、酒棚随处可见；落花生、炒栗子、金黄柿子、山里红，更摆得一堆一堆的。小地摊最多，在兜售用麦草、箔纸编制的各种玩具：身上写着“富贵有余”字样的红鱼，手捧大元宝笑嘻嘻的“招财童子”，盛满银锭、金光闪闪的“聚宝盆”，象征福气的红绒蝙蝠，等等。摊贩的主顾主要倒不是赛神队伍，而是这些来自方圆百里内的游人看客。这里既有身着直领衫、交领衫、毡帽布鞋，被满洲人称为“蛮子”的汉人，又有长袍短褂、皮帽皮靴，被汉人叫做“鞑子”的满洲人、蒙古人；既有缠腰带、背褡裢、一脸风霜的庄户人，又有长衫翩翩、满面书卷气的文人。不管是哪种人，都将在这纷纷攘攘的庙会上吃饱喝足看够，然后买点小玩艺儿带回家：买个“聚宝盆”，叫做“求财如意”；买只绒蝙蝠，叫做“戴福还家”。只这吉兆，就够叫人舒心快意的了。这就难怪太阳才上一竿，镇上已经万头攒动，一片嘈杂了。</p>
</body>
</html>

效果：

在这里插入图片描述

换行与水平线标签

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>第一行内容。还是第一行内容。<br>第二行内容。<br>第三行内容。<!-- 可以添加多个换行，从而产生空行 --><br><br><br>新的一行。<hr>
</body>
</html>

效果：

在这里插入图片描述

文本格式化标签

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><strong>strong 加粗</strong><br><b>b 加粗</b><br><em>em 倾斜</em><br><i>i 倾斜</i><br><ins>ins 下划线</ins><br><u>u 下划线</u><br><del>del 删除线</del><br><s>s 删除线</s><br>嵌套写法：<br><strong><em>加粗斜体</em></strong>
</body>
</html>

效果：

在这里插入图片描述

图像标签

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="./1.jpg"><img src="./2.jpg">
</body>
</html>

两张图片不会换行，除非一张图片太大了，导致放不下，下一张图片会看起来放在了下一行，其实还是在同一行。或者下一张图片比较大，在上一张图片后面放不下，就会单独放到一行中。

在实际工作当中，设置图片的高度和宽度，都是通过 CSS 来设置的，对 HTML 的高度和宽度两个属性，只需要了解即可。

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 网速较慢时，图片加载不出来，有了替换文本，不用猜也能知道图片是什么内容。 --><img src="./11.jpg" alt="周依然"><img src="./2.jpg" title="还是周依然">
</body>
</html>

效果：

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 单独指定图片的高度或者宽度时，图片会按比例放大或缩小，同时指定图片的高和宽时，图片尺寸将会变为指定的值 --><img src="./1.jpg" alt="" width="600"><img src="./1.jpg" alt="" width="900" height="200">
</body>
</html>

效果：

在这里插入图片描述

路径

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><img src="E:\杂\2.jpg" alt=""><img src="E:/杂/2.jpg" alt="">
</body>
</html>

不希望下载图片，而是使用网络图片：

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- https://www.itheima.com/images/logo.png --><img src="https://www.itheima.com/images/logo.png">
</body>
</html>

超链接

在这里插入图片描述

超链接标签是双标签 a，中间包裹内容。

程序示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="https://www.baidu.com/">跳转到百度</a> <!-- 好使 --><br><a href="www.baidu.com/">跳转到百度</a> <!-- 不好使 --><br><!-- 可以跳转本地文件 --><a href="./01-标签的写法.html">跳转到01-标签的写法</a>
</body></html>

对于超链接，按住 Ctrl 键就能在新窗口中打开。

在这里插入图片描述

或者再加一个属性，也能实现新窗口打开：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="https://www.baidu.com/" target="_blank">跳转到百度</a> <!-- 好使 --><br><a href="www.baidu.com/">跳转到百度</a> <!-- 不好使 --><br><!-- 可以跳转本地文件 --><a href="./01-标签的写法.html">跳转到01-标签的写法</a>
</body></html>

开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。

程序示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="#">空链接</a>
</body></html>

音频标签

音频标签在网页中插入声音。

在这里插入图片描述

音频标签是 audio 双标签，src 属性是必须要有的属性。

程序示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><audio src="./media/music.mp3"></audio>
</body></html>

此时打开浏览器是没有声音的，因为浏览器把自动播放的功能都是禁用的。而且也看不出来有没有添加成功，因为没有任何提示信息，打开浏览器就是一个空白的白板。如图：

在这里插入图片描述

可以使用 controls 属性显示音频控制面板，面板能看到就说明声音插入成功了。

程序示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><audio src="./media/music.mp3" controls></audio>
</body></html>

效果：

在这里插入图片描述

controls 属性的完整写法为 controls = "controls"，但是在书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。因此 controls = "controls" 可以简写为 controls。

添加 loop 属性可以让音频自动循环播放，一次播放完了后自动开始从头播放。

添加 autoplay 属性将不会起任何作用，因为浏览器是禁用自动播放的。

程序示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><audio src="./media/music.mp3" controls loop autoplay></audio>
</body></html>

视频标签

在这里插入图片描述

视频标签在网页中插入一个视频。

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><video src="./media/vue.mp4"></video>
</body>
</html>

效果：

在这里插入图片描述

看不出来是不是一个视频，下面添加控制面板：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><video src="./media/vue.mp4" controls></video>
</body>
</html>

效果：

在这里插入图片描述

点击播放按钮就可以开始播放视频了。

添加 muted 属性时，打开浏览器时默认声音是关闭的，可以手动打开。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><video src="./media/vue.mp4" controls loop muted></video>
</body>
</html>

效果：

在这里插入图片描述

有了 muted 属性之后再添加 autoplay 属性时，当打开浏览器时，视频将自动播放且静音播放。如果没有 muted 属性却有 autoplay 属性，当打开浏览器时视频将不会播放。

程序示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><video src="./media/vue.mp4" controls loop muted autoplay></video>
</body>
</html>

综合案例一个人简介

VSCode 自动换行：alt + z

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人简介</title>
</head>
<body><h1>尤雨溪</h1><hr><p>尤雨溪，前端框架<a href="#">Vue.js</a>的作者，<a href="#">HTML5</a>版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目<a href="#">JavaScript</a>，最后自己也走上了开源之路，现全职开发和维护<a href="#">Vue.js</a>。</p><img src="./photo.jpg" alt="尤雨溪的照片" title="尤雨溪"><h2>学习经历</h2><p>尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。</p><h2>主要成就</h2><p>尤雨溪<strong>大学专业并非是计算机专业</strong>，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，<ins>正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯</ins> 。</p><p>2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。</p><h2>社会任职</h2><p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。</p>
</body>
</html>

效果：

在这里插入图片描述

综合案例二 Vue 简介

程序：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 简介</title>
</head>
<body><h1>Vue.js</h1><p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p><p>其作者为<a href="./个人简介.html" target="_blank">尤雨溪</a> </p><h2>主要功能</h2><p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p><p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p><p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [2] ，Vue.js 也能驱动复杂的单页应用。</p><video src="./media/vue.mp4" controls></video>
</body>
</html>

HTML 介绍

HTML 基本骨架

标签的关系

注释

标题标签

段落标签

换行与水平线标签

文本格式化标签

图像标签

路径

超链接

音频标签

视频标签

综合案例一 个人简介

综合案例二 Vue 简介

相关文章：

综合案例一个人简介