[ 前端与 HTML | 青训营笔记]

coder_huang
78 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

学习前传

  • 前端概览
    • 什么是前端
    • 前端的技术栈
    • 前端的边界
    • 前端的关注点
  • HTML
    • HTML 简介
    • 常用标签
    • HTML 语义化

学习简介

介绍 HTML 的概念、语义化和常用的 HTML 标签。

HTML是什么

  • HyperText: 图片, 标签, 音视频
  • Markup Language: 标签, 属性键值

HTML语法

  • 不区分大小写(推荐小写)
  • 空标签可以不闭合或者加/闭合(<input>,<img />)
  • 属性值用双引号闭合
  • 部分标签属性值可以省略(required, readonly…)

HTML语义化

  • 开发者:方便修改与维护
  • 浏览器:展示页面
  • 搜索引擎:提取关键词, 排序
  • 屏幕阅读器

学习完之后对HTML的复习

  • 列表:

    • 有序列表

      <ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ol>

    • 无序列表

      <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

    • 定义列表(注意,支持多对多)

      <dl>
  <dt>1</dt>
  <dd>2</dd>
  <dt>3</dt>
  <dd>4</dd>
  <dd>5</dd>
  <dt>6</dt>
  <dt>7</dt>
  <dd>8</dd>
</dl>

  • <!doctype html>: 指明HTML版本(不写的话浏览器按照老版本标准(兼容模式)执行)

  • <html>根标签

  • <head>存放元数据

  • <body>需要呈现的内容

  • 标题: <h1/>-<h6/>默认样式从大到小

  • 多媒体: <img/>,<audio></auduio>,<video></video>

    • alt: 不被加载的时候的替换内容(不被加载的情况包括: 加载失败, 用户开启省流模式)

    • 音视频自动播放属性:

      • autoplay: 如果用户之前访问过这个域名, 还手动播放该域名下的视频过才会自动播放
      • controls: 规定浏览器应该为视频提供播放控件
      • muted: 静音播放

    • 音视频自动播放属性:

      • 视频静音(通过加上 muted 属性)或音量设置为 0
      • 用户与网站进行了交互(通过点击, 敲击, 按键等)
      • 站点已被列入浏览器白名单;
      • 浏览器确定用户频繁使用媒体, 自动加入白名单或者通过首选项或其他用户界面功能手动发生
      • 自动播放功能策略授予了<iframe>及其文档自动播放支持.
      • 用户已将该站点添加到其移动设备的主屏幕或在桌面设备上安装了 PWA.

  • 链接:<a href="" target="" />最重要的两个属性是href与target

总结

第一天青训营学习完后，发现html的知识还是比较容易忘记，又重新的进行了回顾和学习，收获了很多。

avatar
文章
阅读
粉丝