从零开始的前端生活( •̀ ω •́ )y ————HTML篇（上）

葬送的代码人生
26 阅读10分钟

从零开始的前端生活( •̀ ω •́ )y ————HTML篇（上）

HTML入门看这一个就够了和小白我一起从零开始，满满都是干货

引言

🎮 为什么选择前端？

  1. 即时满足症患者福音：写一行代码就能看到效果，比泡方便面还快

  2. 全宇宙最可视化工种：GitHub代码是黑的，但你的网页必须是五彩斑斓的黑

  3. 人类历史上最大规模"真香"现场：

    • 第一天："CSS好反人类！"
    • 第七天："让我再调亿像素对齐！"
    • 第三十天："Flex布局是我异父异母的亲兄弟！"

🚀 2024年入坑前端の奇妙优势

现在连AI都学会抢工作了？别慌！

  • 大模型帮你生成代码（然后你负责骂它写的烂）
  • GitHub Copilot当24小时陪练（并偷偷学走你的坏习惯）
  • 调试时可以和AI对线："你确定这个方案行？""亲这边建议您换个脑子呢"

准备好进入这个比《塞尔达》更开放的世界了吗？

哪怕只是一个和我一样的编程小白，也无需担忧。前端开发并非高不可攀，只要掌握正确方法，每个人都能开启这场奇妙的编程之旅，从认识 HTML、CSS 和 JavaScript 开始，逐步构建属于自己的数字世界。你准备好迈出这关键的第一步了吗？

一、准备开发环境

一般情况下前端工程师在编辑器中写代码，再浏览器中看效果

浏览器：edge或谷歌

谷歌：www.google.cn/intl/zh-CN_…

edge：下载 Microsoft Edge

都是傻瓜式安装

编辑器：VS Code

code.visualstudio.com，可自行前往官网下载并安装，傻瓜式安装即可

VS Code基本使用
  • 打开文件夹 任意文件夹 -> 拖拽至VS Code空白位置即可 也可在VS Code内部创建

image.png

  • 安装插件

  • 扩展 -> 搜索插件 -> 安装 -> 重启VS Code image.png

  • 由于VS Code插件较多，我们首先安装两个

  • 打开网页插件：open in browser

  • 汉化菜单插件：Chinese

  • 缩放代码字号

  • 放大：Ctrl + 加号

  • 缩小：Ctrl + 减号

二、HTML初体验

HTML定义

HTML(超文本标记语言) —— HyperText Markup Language。

  • 超文本是很么？ 链接
  • 标记是什么？ 标记也叫标签，带尖括号的文本

image.png

标签语法

  • 标签成对出现，中间包裹内容
  • <>里面放英文字母（标签名）
  • 结束标签比开始标签多 ‘/’

<开始标签> 文字 <结束标签>

例如把文字加粗--><strong>需要加粗的文字</strong>

让我们实践一下，尝试在网页里加粗文字

  • 打开VS Code新建文件 （你的文件名）.html--> 网页文件的后缀为.html
  • 随意输入文字，例如：需要加粗的文字，Ctrl + s保存之后打开浏览器

image.png 发现文字根本没有加粗 image.png 按照刚刚学的标签，我们尝试用标签把文字加粗（不要忘了结束标签比开始标签多 ‘/’ 哦） image.png Ctrl+s保存后再次进入浏览器刷新后我们发现文字真的被加粗了！ image.png 拓展

  • 双标签：成对出现的标签
  • 单标签：只有开始标签，没有结束标签
    例如：<br>：换行，<hr>：水平线
    现在我们尝试自己在strong标签下边添加水平线

image.png image.png 小技巧

  • 但凡要包裹内容的都是双标签，只需要一个换行之类的效果不需要包裹文字就是单标签
  • html中大部分是双标签

HTML基本骨架

HTML基本骨架是网页模板 由以下几个固定标签组成

image.png

  • 最外层一对html标签表示整个网页
  • head：网页头部，存放给浏览器看的代码，例如CSS
  • body：网页主体，存放給用户看的代码，例如图片、文字
  • title：网页标题

基本骨架不需要自己写，VS Code内生成
在HTML文件内，‘！’（英文）配合Enter/Tab 键

image.png

image.png 让我们试试生成的骨架能不能用，发现可以显示文字

image.png

image.png 尝试更改标题title栏，注意Ctrl+s保存

image.png

image.png

标签的关系

  • 父子关系（嵌套关系）
  • 兄弟关系（并列关系）

image.png VS Code自带父子关系之间有缩进而兄弟关系直接对齐 image.png 技巧

  • 每按一次Tab就会向后缩进一次不需要按空格，如果Tab多了就shift+Tab往前缩
  • 写标签时不需要打全VS Code有联想功能
    • 例如打html标签只需要打html回车就会出现<html></html>

image.png

注释

代码注释是程序员在编写代码时添加的说明性文字，目的是让自己或他人更容易理解代码的功能、实现思路和使用方法。

注释的作用
  1. 提高代码可读性：注释可以帮助开发者快速理解代码的逻辑和用途，特别是在处理复杂算法或大型项目时。
  2. 记录设计思路：注释可以记录代码的设计思路、实现背景以及某些决策的原因，便于后续维护和迭代。
  3. 指导代码使用：对于公共接口或库，注释可以说明函数的参数、返回值和使用示例，帮助其他开发者正确调用。
  4. 辅助调试和测试：注释可以标记代码的关键部分或可能存在的问题，帮助调试和测试工作。
    <!--...-->注释标签用来在源文档中插入注释，不会在浏览器中显示 VS Code中，添加/删除注释的快捷键：Ctrl+/

image.png

image.png

标签

标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
标签名h1~h6（双标题）（h几就是几级标题）
显示特点：

  • 文字加粗
  • 字号逐渐减小
  • 独占一行（换行）

image.png

image.png

image.png

  • h1标签一般一个网页中只能用一次，用来放新闻标题或者网页logo
  • h2~6，没有使用次数的限制
段落标签

一般在新闻段落、文章段落、产品描述信息等。
标签名：p（双标签）
显示特点

  • 独占一行
  • 段落之间存在间隙

image.png

image.png

换行和水平线标签
  • 换行：<br>（单标签）
    • 由于浏览器不识别代码中的Enter换行所以要用此标签

image.png

image.png

image.png

image.png

  • 水平线<hr>（单标签）

image.png

image.png

文本格式化标签

作用:为文本添加特殊格式，以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等。

标签名效果
strong加粗
em倾斜
ins下划线
del删除线
标签名效果
b加粗
i倾斜
u下划线
m删除线
  • 由于strong、em、ins、del标签自带强调含义（语义） 所以一般都用这些标签名

image.png

image.png

图像标签

作用：在网页中插入图片。
<img src = “图片的URL”>（单标签）
src用于指定图像的位置和名称（即图片的URL），是<img>的必须属性

  • 小技巧，VS Code中在<img src = “图片的URL”>输入图片URL时候输入./会触发提示 image.png

image.png

image.png 是的没错这就是小美

图像标签-属性

src就是一种属性

属性作用说明
alt替换文本图片无法显示的时候显示的文字
title提示文本鼠标悬停在图片上面的时候显示的文字
width图片的宽度值为数字，没有单位
height图片的高度值为数字，没有单位

由于实际工作时设置图片的宽度高度是靠CSS完成，所以后两个仅作了解

演示
alt： 由于alt作用是在图片无法显示时显示文字，所以我们在图片URL中添加一个数字1让其无法正常显示

此功能是为了在图片无法正常加载出来时，不影响网页正常内容 image.png

image.png

title

image.png

image.png width和height
由于浏览器等比例缩放，所以改变宽或高时，另一项属性也会改变

image.png image.png

  • 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

路径

  • 路径是指查找文件时，从起点到终点经历的路线。
  • 路径分类
    • 相对路径：从当前文件位置出发查找目标文件（多数使用）
    • 绝对路径：从盘符出发查找目标文件
  • /表示进入某个文件夹里边 -> 文件夹名字/
  • .表示当前文件所在文件夹 ->./
  • ..表示上一级文件夹 -> ../
  • 如果是上一级的上一级，就是....
    相对路径演示

image.png 有个华点，演示里小美的<img src="./小美1.jpg" alt="这是小美">中没有1，应为小美.jpg，写完才发现懒得重新截图了

效果 image.png 观众老爷们当然都是彭于晏啦~(≧▽≦)/~

绝对路径 - 从盘符出发查找目标文件

  • Windows电脑从盘符出发
  • Mac电脑从根目录（/）出发
    由于主包电脑是Windows，所以我们按Windows讲
    <img src="C:\Users\EVA\Desktop\lesson\前端\小美.jpg"> C表示C盘盘符，在此处\（反斜线）和/是一样的，都表示进入某个文件夹里面
  • Windows 默认是\，其它系统是/,建议统一写为/
    演示

image.png

image.png

image.png 另一种绝对路径

  • 图片并未下载到自己电脑-直接复制图片地址 image.png

image.png

image.png

  • 是的我们成功了，但在线网址可能会失效，所以推荐下载到本地使用

超链接标签（双标签）

  • 作用：点击跳转相应页面 <a href="https://www.baidu.com>跳转到百度</a> href属性值是跳转地址，是超链接的必须属性 书写时可以写字母a，然后直接回车，依靠提示自动补全

image.png 此时只有文字，由于没有链接无法跳转

image.png 补全链接后即可跳转

image.png

image.png

image.png 也可以在href后边填写本地文件的相对路径，让其跳转到本地文件

image.png

image.png

image.png 超链接内容在新窗口打开：在尖括号内添加target（注意用空格与前边分隔开）

image.png

image.png

image.png 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转（但是主包试了试好像空着不写也可以，效果是一样的）

音频标签（audio双标签）

<audio src="音频的URL"></audio>

属性作用特殊说明
src（必须属性）音频URL支持格式：MP3、Ogg、Wav
controls显示音频控制面板
loop循环播放
autoplay自动播放为了提升用户体验，浏览器一般会禁用自动播放功能

image.png 这样并不会显示出页面播放音乐的页面，由于为了提升用户体验，浏览器一般会禁用自动播放功能，所以要使用controls来显示音频控制面板

controls完整写法为controls="controls"

但在HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词（controls，loop，autoplay均是，但浏览器会禁用自动播放）

image.png image.png

视频标签（video双标签）

<video src="视频的 URL"><video>

属性作用特殊说明
src（必须属性）视频URL支持格式：mp4、WebM、Ogg
controls（有此才能显示出来）显示视频控制面板
loop循环播放
muted静音播放
autoplay自动播放（要配合muted才能实现）为了提升用户体验，浏览器支持在静音状态自动播放

上述属性的属性名和属性值均完全一样，可以简写为一个单词

具体使用方式参考音频标签（绝对不是因为两个很像我懒得写了U•ェ•*U）

以上就是HTML（上）的全部内容啦，敬请期待HTML（下）的讲解吧！

avatar
文章
阅读
粉丝