HTML基础

文章目录

  • HTML 基础
    • 标签结构
    • HTML骨架
    • 标签的关系
    • 注释
    • 标题标签
    • 段落标签
    • 换行和水平线
    • 文本格式化标签
    • 图像标签
      • 图像属性
      • 属性语法
    • 路径
      • 相对路径
      • 绝对路径
    • 超链接标签
    • 音频
    • 视频

HTML 基础

HTML的意思就是超文本标记语言(HyperText Markup Language),这里的超文本的意思就是多媒体内容,有文本、图片、音视频等内容,这里的标记就是使用代码的形式,使用尖括号的标签进行标记的意思,例如

HTML基础_第1张图片

标签结构

  • 标签要成对出现,中间包裹内容
  • <>里面放英文字母(标签名)
  • 结束标签比开始标签多 /
  • 标签分类:双标签和单标签
<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键)

    1680255766672.png

  • 兄弟关系(并列关系):兄弟标签换行要对齐

    1680255775150.png

注释

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

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

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


标题标签

<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/b 加粗
em/i 倾斜
ins/u 下划线
del/s 删除线

strong、em、ins、del 标签自带强调含义(语义),比较常用

图像标签

作用:在网页中插入图片

<img  src="图片的 URL">

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

图像属性

属性 作用 说明
alt 替换文本 图片无法显示时的文字
title 提示文本 悬停时的提示文字
width 图片宽度 数值,无单位
height 图片高度 数值,无单位

这里的宽度和高度我们一般不在这里设置,等到我们学习CSS时会深入了解

属性语法

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

HTML基础_第2张图片

路径

概念:路径指的是查找文件时,从起点终点经历的路线

路径分类:

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

相对路径

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

特殊符号:

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

绝对路径

查找方式:Windows 电脑从盘符出发;Mac 电脑从根目录(/)出发

<img  src="C:\images\mao.jpg">

超链接标签

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

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

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

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

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

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

 
 
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法a>


<a href="#">空链接a>

音频

<audio src="音频的 URL">audio>
属性 作用 说明
src 音频源 MP3、Ogg、wav
controls 显示音频控制面板 默认禁用
loop 循环播放 默认禁用
autoplay 自动播放 默认禁用

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


<audio src="./media/music.mp3" controls loop autoplay>audio>

视频

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

常用属性

属性 作用 说明
src 视频源 MP4、WebM、Ogg
controls 视频控制面板
loop 循环播放
muted 静音播放
autoplay 自动播放 支持静音的自动播放

<video src="./media/vue.mp4" controls loop muted autoplay>video>

你可能感兴趣的:(HTML,html,前端,html5)