聊天网站制作教程刷百度关键词排名优化
文章目录
- 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>
href：必须具备，表示点击后会跳转到哪个页面target：打开方式，默认是_self，在当前页面跳转，如果是_blank则用新的标签页打开
🔥值得注意的是： 使用 # 在 href 中占位表示空连接，禁止 a 标签跳转: <a href="javascript:void(0);"> 或者 <a href="javascript:;">
✏️展示效果：
希望读者们多多三连支持
小编会继续更新
你们的鼓励就是我前进的动力！
