HTML学习笔记（黑马程序员）一

最新推荐文章于 2024-07-25 22:24:14 发布

前端学习ing_

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量806

点赞数 21

文章标签：学习笔记 html 前端

本文链接：https://blog.csdn.net/qq_56982044/article/details/134573637

版权

学习内容：开发环境、标签之文字排版、图片、链接、音视频

一、开发环境

在哪里写HTML代码？（VScode）哪里看效果？（google）

VS code基本使用

打开文件夹任意文件夹--拖拽到vs code空白处
安装插件扩展-搜索插件-安装-重启VS code
- 汉化菜单插件：Chinese
- 打开网页插件：open in browser
- 设置默认浏览器：控制面板-默认程序-设置默认程序

二、HTML

HTML超文本标记语言

超文本：链接
标记：也叫标签，带尖括号的文本

标签语法

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

<strong>一起学前端</strong>

拓展：

双标签：成对出现的标签
单标签：只有开始标签，没有结束标签（<br>:换行，<hr>:水平线）

<strong>一起学前端</strong>
<hr>

如何判断是单标签还是双标签？包裹内容的就是双标签，HTML中大多数都是双标签

HTML基本骨架

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页主体
    </body>
</html>

html：整个网页
head：网页头部，存放给浏览器看的代码，例如CSS
body：网页主体，存放给用户看的代码，例如图片、文字

HTML文件（.html）中，!（英文）配合Enter/Tab键可以快速生成骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

标签的关系

作用：明确代码的书写位置

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

注释：注释标签用来在源文档中插入注释，注释不会再浏览器中显示；

在VS code中添加/删除注释的快捷键:ctrl+/

标题标签

标签名：h1-h6（双标签）

显示特点：

文字加粗
字号逐渐减小
独占一行

h1标签在一个网页中只能用一次，用来放新闻标题或网页的logo，h2到h6没有使用次数的限制

段落标签

一般用在新闻段落、文章段落。产品描述信息等等。

标签名：p（双标签）

显示特点：

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

换行与水平线标签

换行：<br>单标签

水平线：<hr>单标签

文本格式化标签（工作中一般用左边）

图像标签-基本使用

作用：在网页中插入图片

<img src="./images/壁纸.jpg">

src用于指定图像的位置和名称，是img的必须属性

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

浏览器缩放是等比例缩放

路径

路径是查找文件时，从起点到终点经历的路线

路径分类：

相对路径：从当前文件位置出发查找目标文件
绝对路径：从盘符出发查找目标文件
- Windows电脑从盘符出发
- Mac电脑从根目录出发

如果图片不在自己电脑上，复制图片的链接，然后src写网址就可以

超链接

作用：点击跳转到其他页面

<a href="https://www.baidu.com">跳转到百度</a>

href属性值是跳转地址，是超链接的必须属性。

target="_blank"属性可以打开新标签页，保存原标签页

开发前期，不知道超链接跳转地址，href属性值写#，表示空链接，不会跳转

音频标签

<audio src=""></audio>

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

视频标签

<video src=""></video>

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