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

聊天网站制作教程seo比较好的优化方法

news 2025/7/1 22:54:21

聊天网站制作教程,seo比较好的优化方法,建设银行网上银行网站打不开,廊坊网站制作公司文章目录 1.什么是html？2.html文件基本结构3.htm常见标签3.1 注释标签3.2 标题标签3.3 段落标签3.4 换行标签3.5 格式化标签3.6 图片标签3.7 超链接标签希望读者们多多三连支持小编会继续更新你们的鼓励就是我前进的动力！ 从本篇开始学习前端基础之 htm…

文章目录

1.什么是html？
2.html文件基本结构
3.htm常见标签
- 3.1 注释标签
- 3.2 标题标签
- 3.3 段落标签
- 3.4 换行标签
- 3.5 格式化标签
- 3.6 图片标签
- 3.7 超链接标签
希望读者们多多三连支持
小编会继续更新
你们的鼓励就是我前进的动力！

从本篇开始学习前端基础之 html 的搭建路程，实现一个基本的静态网站框架，一般使用的软件是 VSCODE，可以自行上网查询下载配置教程

1.什么是html？

html 即超文本标记语言（HyperText Markup Language）
它是用于创建网页的标准标记语言，html 借助各类标签来对网页的结构和内容加以描述

html 代码是由标签构成的

💻比如：

<body>hello</body>

标签名 (body) 放到 < > 中
大部分标签成对出现，<body> 为开始标签，</body> 为结束标签
少数标签只有开始标签，称为 “单标签”
开始标签和结束标签之间，写的是标签的内容(hello)
开始标签中可能会带有 “属性”，id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)

2.html文件基本结构

<html><head><title>第一个页面</title></head><body>hello world</body>
</html>

html 标签是整个 html 文件的根标签(最顶层标签)，所有代码都是写在这里面的
head 标签中写页面的属性
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题

head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)，title 是 head 的子标签，head 是 title 的父标签，head 和 body 之间是兄弟关系

标签之间的结构关系, 构成了一个 DOM 树：
在这里插入图片描述

🔥值得注意的是：

<!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>

按住 SHIFT + !，按 ENTER 键，此时能自动生成代码的主体框架

<!DOCTYPE html> 称为 DTD (文档类型定义)，描述当前的文件是一个 HTML5 的文件
<html lang="en"> 其中 lang 属性表示当前页面是一个 “英语页面”，这里暂时不用管(有些浏览器会根据此处的声明提示是否进行自动翻译)
<meta charset="UTF-8"> 描述页面的字符编码方式，没有这一行可能会导致中文乱码
<meta name="viewport" content="width=device-width, initial-scale=1.0">。name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域。content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽，并设置初始缩放为不缩放(这个属性对于移动端开发更重要一些)
记得每次修改代码需要 CTRL + S 保存代码才会在网页上生效

✏️展示效果：

在这里插入图片描述

可以在浏览器界面按 F12 打开开发者工具查看页面结构，每个标签相当于一个对象，程序员可以通过这些代码对网页进行增删查改

3.htm常见标签

3.1 注释标签

<!-- 我是注释 -->

可以通过 CTRL + / 快捷键快速进行注释/取消注释

🔥值得注意的是： 可以 F12 查看注释

3.2 标题标签

✏️举个例子：

<!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>

从 h1-h6，数字越大，则字体越小

✏️展示效果：

在这里插入图片描述

3.3 段落标签

✏️举个例子：

<!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>我几乎每个星期四都在转发，但是就是没人V我50，不知道是不是有人在背后做局阴我</p><p>可能是我动了谁的汉堡 香辣鸡腿堡 劲脆鸡腿堡 新奥尔良烤鸡腿堡 老北京鸡肉卷 墨西哥鸡肉卷 深海鳕鱼堡 田园脆鸡堡 川辣嫩牛五方 薯条（小/中/大） 土豆泥 香甜粟米棒 四季鲜蔬 玉米色拉 胡萝卜餐包 深海鳕鱼条 上校鸡块 鸡米花 奥尔良烤翅 吮指原味鸡 香辣鸡翅 葡式蛋挞 草莓蛋挞 脆皮甜筒 草莓圣代 巧克力圣代 咖啡 果汁 冰爽茶 纯牛奶 红茶 蜂蜜茶 奶茶 百事可乐 七喜 美年达</p><p>资本你赢了！</p>
</body>
</html>

用 p 标签表示一个段落，因为代码里的换行在网页里只会显示为一个空格

p 标签之间存在一个空隙
当前的 p 标签描述的段落，前面还没有缩进(未来 css 会学)
自动根据浏览器宽度来决定排版
html 内容首尾处的换行，空格均无效
在 html 中文字之间输入的多个空格只相当于一个空格

✏️展示效果：

在这里插入图片描述

3.4 换行标签

✏️举个例子：

<!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>我几乎每个星期四都在转发,但是就是没人V我50,<br/>不知道是不是有人在背后做局阴我</p><p>可能是我动了谁的汉堡 香辣鸡腿堡 劲脆鸡腿堡 新奥尔良烤鸡腿堡 老北京鸡肉卷 墨西哥鸡肉卷 深海鳕鱼堡 田园脆鸡堡 川辣嫩牛五方 薯条（小/中/大） 土豆泥 香甜粟米棒 四季鲜蔬 玉米色拉 胡萝卜餐包 深海鳕鱼条 上校鸡块 鸡米花 奥尔良烤翅 吮指原味鸡 香辣鸡翅 葡式蛋挞 草莓蛋挞 脆皮甜筒 草莓圣代 巧克力圣代 咖啡 果汁 冰爽茶 纯牛奶 红茶 蜂蜜茶 奶茶 百事可乐 七喜 美年达</p><p>资本你赢了！</p>
</body>
</html>

br 是 break 的缩写，表示换行

br 是一个单标签(不需要结束标签)
br 标签比 p 标签的间隔空隙小
<br/> 是规范写法，不建议写成 <br>

✏️展示效果：

在这里插入图片描述

3.5 格式化标签

✏️举个例子：

<!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><b>b 加粗</b><br><em>em 倾斜</em><i>i 倾斜</i><br><del>del 删除线</del><s>s 删除线</s><br><ins>ins 下划线</ins><u>u 下划线</u>
</body>
</html>

使用 css 也可以完成类似的效果，但是 html 里也有相关的实现，实际开发中以 css 方式为主

加粗： strong 标签和 b 标签
倾斜： em 标签和 i 标签
删除线： del 标签和 s 标签
下划线： ins 标签和 u 标签

🔥值得注意的是： strong 和 b 的区别在于强调的程度不同，比如在爬取网站的重要内容时，会优先爬取 strong 的文本，其他标签也是同理

3.6 图片标签

<img src=" ">

img 标签必须带有 src 属性，表示图片的路径

这里图片路径分为两种

绝对路径：
磁盘路径 C:\Users\ZHANGZHANHUA\Desktop\微信图片_20250603234406.png
网络路径 https://blog.csdn.net/Zero_VPN?spm=1011.2415.3001.5343
相对路径：
同级路径直接写文件名即可 (或者 ./)
下一级路径 image/1.jpg
上一级路径 ../image/1.jpg

图片标签的其他属性：

alt：替换文本，当文本不能正确显示的时候，会显示一个替换的文字
title：提示文本，鼠标放到图片上，就会有提示
width/height：控制宽度高度. 高度和宽度一般改一个就行，另外一个会等比例缩放，否则就会图片失衡
border：边框，参数是宽度的像素，但是一般使用 css 来设定

✏️举个例子：

<!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="C:\Users\ZHANGZHANHUA\Desktop\壁纸\微信图片_20250603234406.png" alt="不能显示" title="这是磁盘图片链接" width="1200px" height="800px" border="4px">
</body>
</html>

✏️展示效果：

在这里插入图片描述

3.7 超链接标签

✏️举个例子：

<!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://blog.csdn.net/Zero_VPN?spm=1011.2415.3001.5343" target="_blank">我的博客</a><a href="#">空链接</a><a href="https://blog.csdn.net/Zero_VPN?spm=1011.2415.3001.5343"><img src="C:\Users\ZHANGZHANHUA\Desktop\壁纸\微信图片_20250603234406.png" alt="不能显示" title="这是磁盘图片链接" width="120px" height="80px"></a><a href="test.zip">下载文件</a>
</body>
</html>