Day01：HTML 基础-优快云博客

本文链接：https://blog.youkuaiyun.com/EmulateStep/article/details/139004148

今日目标：掌握标签基本语法，能够独立布局文章页。

一、标签语法

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

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

二、标签结构

标签要成对出现，中间包裹内容
<>里面放标签名
结束标签比开始标签多一个斜杠 /
标签分类：双标签和单标签

<strong>需要加粗的文字</strong>
<br>
<hr>

在这里插入图片描述

三、HTML 骨架

html: 整个网页
head：网页头部，用来存放给浏览器看的信息，例如 CSS
- title：网页标题
body：网页主体，用来存放给用户看的信息，例如图片、文字

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

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

四、标签的关系

作用：明确标签的书写位置，让代码格式更整齐

父子关系（嵌套关系）：子级标签换行且缩进（Tab键）

<html>
  <head><head>
<html>

兄弟关系（并列关系）：兄弟标签换行要对齐

<html>
  <head></head>
  <body></body>
<html>

提示：代码缩进：Tab，反向缩进：shift + Tab

五、注释

概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。

注释不会再浏览器中显示。

在 VS Code 中，添加 / 删除注释的快捷键：Ctrl或Command + /。

六、标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

显示特点：

文字加粗
h1 - h6，字号逐渐减小
独占一行，会进行换行

经验习惯

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

七、段落标签

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

<p>新闻段落、文章段落、产品描述信息等等</p>

显示特点：

独占一行，会进行换行
段落之间存在间隙

八、换行和水平线

换行：br
水平线：hr

<br>
<hr>

九、文本格式化标签

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

标签名	效果
strong	加粗
em	倾斜
ins	下划线
del	~~删除线~~

b	加粗
i	倾斜
u	下划线
s	~~删除线~~

提示：strong、em、ins、del 标签自带强调含义（语义），建议开发中使用这些标签。

十、图像标签

作用：在网页中插入图片。

<img  src="图片的 URL">

属性语法

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

在这里插入图片描述

图像属性

属性	作用	说明
src(必须)	图片链接	要进行显示的图片链接
alt	替换文本	图片无法显示的时候显示文字
title	提示文本	鼠标悬停在图片上时显示的文字
width	图片的宽度	值为数字，没有单位
height	图片的高度	值为数字，没有单位

十一、路径

概念：路径指的是查找文件时，从起点到终点经历的路线。
路径分类：

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

相对路径

查找方式：从当前文件位置出发查找目标文件。

特殊符号：

/ 表示进入某个文件夹里面，例如：文件夹名/
. 表示当前文件所在文件夹，例如：./
.. 表示当前文件的上一级文件夹，例如：../

绝对路径

查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（ / ）出发。

提示

Windows 默认是 \ ，也支持 / ，其他系统（Mac、Linux）只支持 /，建议统一写为 / 。
特殊的绝对路径，图片的在线网址，比如：https://profile-avatar.csdnimg.cn/076216234e294e5eb41ff6fc462f7787_emulatestep.jpg!1，也可以作为 src 的属性值。

十二、超链接标签

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

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

<!-- 跳转到本地文件：相对路径查找 --> 
<!-- target="_blank" 新窗口跳转页面 --> 
<a href="./Day01：HTML基础.html" target="_blank">跳转到01-标签的写法</a>

<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转，也不会报错 -->
<a href="#">空链接</a>

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

开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，点击跳转时，页面不会跳转，而是刷新当前页面。

超链接默认是在当前窗口跳转页面，添加 target=“_blank” 实现新窗口打开页面.

十三、音频

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

常用属性

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

拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。

<!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
<audio src="./media/music.mp3" controls loop autoplay></audio>

十四、视频

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

常用属性

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

<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
<video src="./media/vue.mp4" controls loop muted autoplay></video>

在这里插入图片描述

乾坤未定，你我皆是黑马