【前端基础】3、HTML的常用元素(h、p、img、a、iframe、div、span)、不常用元素(strong、i、code、br)

HTML结构

一个HTML包含以下部分:

  • 文档类型声明
  • html元素
    1. head元素
    2. body元素

例(CSDN):

一、文档类型声明

HTML最一方的文档称为:文档类型声明,用于声明文档类型。即:<!DOCTYPE html>

<!DOCTYPE html> 的作用:

  • HTML文档声明,用于告诉浏览器是HTML5页面。
  • 让浏览器用HTML5的标准去解析。
  • 必须放在最最前面,不可以省略。否则可能有兼容性问题。

二、html元素

1、 <html>元素

表示一个HTML 文档的根(顶级元素),也成为根元素。

其他元素必须是这个元素的后代。

2、一般都会加一个 lang属性

lang属性的作用:

  • 定义当前HTML文档的语言
  • 帮助语音合成工具确定要使用的发音。
  • 帮助翻译工具确定要使用的翻译规则。

常用lang属性的规则:

  • lang="zh-CN":表示这个HTML文档的语言是中文。
  • lang="en":表示这个HTML文档的语言是英文。

例(CSDN):

三、head元素

1、 <head>元素

规定文档的配置信息(也成为元数据),包括文档的标题,引用的文档样式、脚本信息等等。

  • 元数据:描述数据的数据,可以理解为整个页面的配置。

常见的设置:

  • title元素
    设置网页的标题。
  • meta元素
    设置网页的编码。即:<meta charset=utf-8">,一般都是utf-8编码。
    meta元素是用来让机器识别元数据的。
    ⭐有各种元素类型。例如name & content可以指定元数据的名称(这部分对 SEO 非常有用)等等。

例(CSDN):

四、body元素

body元素里面的内容是 在浏览器窗口中看到的东西,也就是网页的具体内容和结果。

五、常用元素

h元素

  • h:即heading,标题。
    作用:将一些重要文字作为标题。
  • <h1><h6>:六种不同级别。
    <h1>级别最高,<h6>级别最低。

h元素通常和SEO优化有关。

p元素

  • p:即paragraph,段落。
    作用:表示文本的一个段落的时候使用。
  • 多个段落之间会存在间距。

img元素

  • 作用:将图片嵌入文档。告诉浏览器显示图片。

  • <img>常见的两个属性:

    1. src属性:
      是必须的。

      包含你想嵌入图片的路径。

    2. alt属性

      不是强制的。有两个作用:

      ①如果图片加载失败(图片地址错误或者图片不存在),那么会显示这段文本。

      ②屏幕阅读器会都这段文字给使用者,指导这张图的含义。

    3. 其他属性也都可以,例如:width属性

  • 图片的路径src

    1. 网络图片:给一个网络的URL就行。很简单。
    2. 本地图片:己电脑上的图片。
      本地图片的地址分两种:
      ①绝对路径(几乎不用)
      从电脑的本目录开始一直找到资源路径。
      ②相对路径
      对于当前文件而言的一个路径。
      .:代表当前文件夹,可省略。
      ..:代表上一层的文件夹,可省略。
    3. 注意路径分割都是/
html 复制代码
<img src="./../images/test.jpg" alt="">
  • img支持的图片格式

a元素

  • 作用:需要跳转到某个链接的时候使用a元素。

  • <a>元素:定义超链接,用于打开新的URL

  • <a>元素两个,常见的属性:

    1. href属性
      指定要打开的URL。
      也可以是一个本地地址。
    2. target属性
      指定在何处显示链接的资源。
      _self:在当前窗口 打开。
      _blank:在新的窗口 打开。
      _parent:在父窗口 打开。(单独使用没效果,需要和iframe元素配合使用。)
      _top:在最顶层窗口 打开。(单独使用没效果,需要和iframe元素配合使用。)
  • a元素:设置锚点链接

    1. 作用:跳到网页的某个位置。(例如:目录跳转)
    2. 具体步骤:
      ①在要跳的的元素上定义一个id属性
      ②定义a元素,让他的href指向对应的id
  • a元素:设置图片链接

    1. 作用:点击某个图片,跳转到指定链接。
    2. 具体步骤:
      ①定义a元素,它的内容放一个img元素。(也就是img元素就是a元素的内容。)
      ②指定href,设置想跳转的地址。

iframe元素

在一个HTML文档中嵌入另一个HTML文档。

div元素

  • div元素:就是一个容器 ,或者说盒子 。用来包裹内容
  • 作用:
    div包裹的内容在不同行 显示。包裹的这部分是一个整体。
    ②把网页分割成多个独立的部分。

span元素

  • span元素:就是一个容器 ,或者说盒子 。用来包裹内容
  • 作用:
    span包裹的内容在同一行显示。包裹的这部分和普通文本没区别。
    ②用于区分特殊文本和普通文本,主要用来显示关键字。

六、不常用元素

strong元素

  • 作用:内容加粗,强调。
    通常都是用css来完成。

i元素

  • 作用:内容倾斜。
    通常都是用css来完成。

code元素

  • 作用:用于显示代码

br元素

  • 作用:换行
相关推荐
薄雾晚晴7 分钟前
Rspack 实战:用 SWC Loader 搞定 JS 兼容(支持 IE 11 + 现代浏览器,兼顾构建速度)
前端·vue.js
恋猫de小郭15 分钟前
Flutter 官方 LLM 动态 UI 库 flutter_genui 发布,让 App UI 自己生成 UI
android·前端·flutter
kymjs张涛38 分钟前
零一开源|前沿技术周刊 #15
前端·javascript·面试
reacx40 分钟前
# 第三章:状态管理架构设计 - 从 Zustand 到 React Query 的完整实践
前端
古夕41 分钟前
Vue3 + vue-query 的重复请求问题解决记录
前端·javascript·vue.js
不知名程序员第二部41 分钟前
前端-业务-架构
前端·javascript·代码规范
Bug生产工厂41 分钟前
React支付组件设计与封装:从基础组件到企业级解决方案
前端·react.js·typescript
小喷友42 分钟前
阶段三:进阶(Rust 高级特性)
前端·rust
华仔啊42 分钟前
面试官:请解释一下 JS 的 this 指向。别慌,看完这篇让你对答如流!
前端·javascript
Strayer42 分钟前
Tauri2.0打包构建报错
前端