【前端基础】摩天之建的艺术:html(上)

文章目录

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

1.什么是html?

html 即超文本标记语言(HyperText Markup Language

它是用于创建网页的标准标记语言,html 借助各类标签来对网页的结构和内容加以描述

html 代码是由标签构成的

💻比如:

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

2.html文件基本结构

html 复制代码
<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
       hello world
    </body>
</html>
  • html 标签是整个 html 文件的根标签(最顶层标签),所有代码都是写在这里面的
  • head 标签中写页面的属性
  • body 标签中写的是页面上显示的内容
  • title 标签中写的是页面的标题

headbodyhtml 的子标签(html 就是 headbody 的父标签),titlehead 的子标签,headtitle 的父标签,headbody 之间是兄弟关系

标签之间的结构关系, 构成了一个 DOM 树:

🔥值得注意的是:

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>
    
</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 注释标签

html 复制代码
<!-- 我是注释 -->

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

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

3.2 标题标签

✏️举个例子:

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>

h1-h6,数字越大,则字体越小

✏️展示效果:

3.3 段落标签

✏️举个例子:

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

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

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

✏️展示效果:

3.4 换行标签

✏️举个例子:

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

brbreak 的缩写,表示换行

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

✏️展示效果:

3.5 格式化标签

✏️举个例子:

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>
    <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 标签

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

3.6 图片标签

html 复制代码
<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 来设定

✏️举个例子:

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

✏️展示效果:

3.7 超链接标签

✏️举个例子:

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>
    <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:;">

✏️展示效果:


希望读者们多多三连支持

小编会继续更新

你们的鼓励就是我前进的动力!

相关推荐
0wioiw08 分钟前
Flutter基础(前端教程⑨-图片)
前端·flutter
一只一只妖11 分钟前
uniapp小程序无感刷新token
前端·小程序·uni-app
绅士玖38 分钟前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子1 小时前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang1 小时前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课1 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在1 小时前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵1 小时前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius1 小时前
Unity URP管线着色器库攻略part1
前端
Xy9101 小时前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端