前端与HTML | 青训营笔记

GinYue
327 阅读2分钟

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

本堂课主要讲解的重点内容

  • 前端工作的定义
  • 前端技术栈拆解与分析
  • HTML 作用解析
  • HTML 语义化

对讲解的部分知识点进行介绍

1、HTML

HTML(HyperText Markup Language)，超文本标记语言，包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。 而当浏览器通过按照特定的规则将标签和内容渲染出来后，就是我们常见的网页了。

2、常见HTML标签

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

  • <html>：根标签

  • <head>：存放元数据

  • <body>：需要呈现的内容

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

  • 列表：主要有【有序列表】、【无序列表】、【定义列表】

<ol>
  <li>有序列表1</li>
  <li>有序列表2</li>
  <li>有序列表3</li>
</ol>

<ul>
  <li>无序列表1</li>
  <li>无序列表2</li>
  <li>无序列表3</li>
</ul>

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

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

    alt: 不被加载的时候的替换内容（不被加载的情况包括: 加载失败、 用户开启省流模式）

    音视频自动播放属性:

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

    注意： img 标签 的 alt 属性需要写上内容，这样可以优化网站的 SEO

  • header nav main footer：用于版块划分

    例如页头👇：

      <header></header>
  <nav></nav>

    例如主体👇：

      main

    例如一些与内容相关但不属于主体内容的(信息推荐, 广告):

      aside

    例如页尾👇：

      footer

个人总结

一天下来还是蛮有收获的，复习了html的一些标签还又熟悉了一次它的概念。

一天的上课内容如上，对于这个文章排版和使用还不是很习惯orz 不知道怎么才能做得更好看了泪目，感觉好简陋，争取之后熟悉了写好看一些吧！！！

avatar
文章
阅读
粉丝