【HTML】HTML 基础

已注销
116 阅读5分钟

HTML 基础

目标：掌握标签解百纳语法，能够独立布局文章页

核心技术点

  • 网页组成
  • 排版标签
  • 多媒体标签及属性

标签语法

HTML 超文本标记语言 ————Hyper Text 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键）
  • 兄弟关系（并列关系）：兄弟标签换行要对齐

注释

概念：注释是对代码和解释器的说明，能够提高程序的可读性，方便理解、查找代码。注释不会在浏览器中显示。

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

<!-- 我是 HTML 注释 -->

标题标签

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

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

显示特点：

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

工作经验:

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

段落标签

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

<p>段落</p>

显示特点：

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

换行和水平线

  • 换行：br
  • 水平线：hr
<br>
<hr>

文本格式化标签

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

<strong>需要加粗的字体</strong>或者<b>需要加粗的字体</b>
<em>需要倾斜的字体</em>或者<i>需要倾斜的字体</i>
<ins>需要下划线的字体</ins>或者<u>需要下划线的字体</u>
<del>需要删除线的字体</del>或者<s>需要删除线的字体</s>

提示：strong、em、ins、del 标签自带强调含义（语义）

图像标签

作用：在网页中插入图片

<img  src="图片的 URL">

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

图像属性

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

属性语法

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

路径

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

  • 相对路径：从当前文件位置出发查找目标文件

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

    • Windows 电脑从盘符出发
    • Mac 电脑从根目录出发

相对路径

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

特殊符号：

  • /  表示进入某个文件夹里面 → 文件夹名/
  • **. ** 表示当前文件所在文件夹 → ./
  • … 表示当前文件的上一级文件夹 → ../

绝对路径

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

<img  src="C:\……">

提示

  1. Windows 默认是 \ ，其他系统是 /，建议统一写为 /
  2. 特殊的绝对路径 → 文件的在线网址：www.baidu.com "，应用场景：网页底部友情链接

超链接标签

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

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

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

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

拓展：开发初期，不确定跳转地址，则 href 属性值写为  # ，表示空链接，页面不会跳转，在当前页面刷新一次。

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

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

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

音频

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

常用属性

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

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

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

视频

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

常用属性

属性作用特殊说明
src（必须属性）视频 URL支持格式：MP4、WebM、Ogg
controls显示视频控制面板
loop循环播放
muted静音播放
autoplay自动播放为了提升用户体验，浏览器一般会禁用自动播放功能
<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
<video src="视频的 URL" controls loop muted autoplay></video>
avatar
文章
阅读
粉丝