前端八股文——HTML

强是倔强的强
203 阅读3分钟

HTML是一种告诉浏览器如何组织页面的标记语言。

image.png

块级元素和内联元素

  • 块级元素：display: block;
    块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。
  • 内联元素：diasplay: inline;
    内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行

空元素

不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：元素<img>是用来在元素<img>所在位置插入一张指定的图片。 <img src="../../">

解析html文档

<!DOCTYPE html> // 文档类型声明
<html lang="zh-CN"> // 根元素
  <head> // 容器，放一些需要包含在文档里，却不需要展示的东西。css样式、字符集等
    <meta charset="utf-8"> // 设置文档使用的字符集
    <meta name="lzq" content="描述"> // 添加作者和描述
    <link rel="icon" href="favicon.ico" type="image/my-icon"> // 自定义图标
    <link rel="stylesheet" href="my-css-file.css"> // 样式文件
    <title>我的测试站点</title> // 页面标题
  </head>
  <body> // 显示在页面上的内容
    <p>这是我的页面</p>
    
    <script src="my-js-file.js" defer></script> // 引入JS文件，一般放在body最下面。
  </body>
</html>
元数据：<mate> 元素
  • 指定字符集<meta charset="utf-8">
  • 添加作者和描述<meta name="lzq" content="描述"> 描述内容会被用于搜索引擎的展示。
自定义图标 favicon

在特定的场合（浏览器的收藏，或书签列表）中显示。
<link rel="icon" href="favicon.ico" type="image/my-icon">

引入样式文件和JS脚本
  • 样式文件<link rel="stylesheet" href="my-css-file.css">
    rel="stylesheet" 表示这是样式文件
    href="my-css-file.css" 文件路径
  • JS脚本<script src="my-js-file.js" defer></script>

defer和async
1、不带defer和async属性<script src="my-js-file.js"></script> 同步加载、立即执行
2、带defer<script src="my-js-file.js" defer></script> 异步加载、文档解析完成后执行
3、带async<script src="my-js-file.js" async></script> 异步加载、加载完成后立即执行

为文档设置语言环境

<html lang="zh-CN">
用于优化搜索引擎或保障视障人士阅读。

超链接<a>标签

超链接使我们的文档能够链接到任何其他文档或资源，也可以链接到文档指定部分。几乎任何网络内容都可以转换为链接，点击超链接跳转至另一个网址（URL）

备注：  URL 可以指向 HTML 文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。如果浏览器不知道如何显示或处理文件，它会询问你是否要打开文件（需要选择合适的本地应用来打开或处理文件）或下载文件（以后处理它）。

<a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a>
href属性：超文本引用或目标

多媒体

图片 <img>

<img src="dinosaur.jpg">

  • src 路径
  • alt 备选文本，当图片无法显示时展示
  • width 宽度
  • height 高度

图片对内容有意义时，应该使用html图片。如果没有意义，只是单纯的展示，使用css背景图片。

音频audio和视频<vido>
<video src="rabbit320.webm" controls>
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="aaa.mp4">此链接</a>观看</p>
</video>
  • src 资源路径
  • control 是否可控。提供控制视频/音频的回放等功能
  • width/height 音频没有
  • autoplay 自动播放
  • loop 循环播放
  • muted 静音
  • poster 指向一个图片地址，播放前展示 音频没有
  • preload 预加载。"none"不预加载 、 "auto"页面加载完成后加载媒体、metadata只预加载元数据
// 提供多个视频源
<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

// 重播api
const mediaElem = document.getElementById("my-media-element");
mediaElem.load();

嵌入 <iframe>

<iframe>允许你将其他web文档嵌入到当前文档。

<iframe 
    src="lzqtxwd.cn"
    width="100%"
    height="500"
    frameborder="0"
    allowfullscreen 
    sandbox
>
    <p> 
          <a href="lzqtxwd.cn">
                不支持iframe，点击访问
          </a> 
    </p>
</iframe>

  • src 嵌入到文档路径

  • allowfullscreen 是否支持全屏

  • frameborder 0不显示边框，1显示边框，默认

  • width/height

  • sandbox 提高安全设置

avatar
文章
阅读
粉丝