前端与 HTML | 青训营笔记

zhang_galaxy
324 阅读2分钟

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

课程重点

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

前端定义

  • 解决GUI人机交互问题
  • 跨终端
    • PC/移动端浏览器
    • 客户端、小程序
    • VR/AR
  • Web技术栈

前端技术栈

  • JavaScript(行为)
  • CSS(样式)
  • HTML(内容)

HTML含义

超文本标记语言：HyperText Markup Language HyperText:图片、标题、链接、表格 Markup Language:<h1>文章标题</h1>

DOM树

graph LR
Ddocument -->html-->head & body 

graph LR
head -->meta & title 

graph LR
body -->h1 & p

HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略，比如required、readonly

常用标签

h1~h6 标题
有序列表（ol）、无序列表（ul）和定义列表（dl）
超链接标签 a
图片标签img 视频标签video 音频标签audio
输入标签 input
长引用标签（blockquote） 短引用标签（cite和q）代码标签（code）强调标签（em和strong）

内容划分

  • header头部区域 包含nav
  • main 主体区域 包含article
  • aside侧边栏区域 包含常用功能区
  • footer底部区域 包含备案信息等
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  <main>
    <article>
      <h1>标题</h1>
      <p>内容</p>
    </article>
    <article>
      <h1>标题</h1>
      <p>内容</p>
    </article>
  </main>
  <aside>侧边栏</aside>
  <footer>底部</footer>
</body>
</html>

语义化是什么？

HTML中的元素、属性及属性值都拥有某些含义 开发者应该遵循语义来编写HTML 有序列表用ol;无序列表用ul lang属性表示内容所使用的语言

语义化好处

代码可读性 可维护性 搜索引擎优化 提升无障碍性

如何做到语义化

解每个标签和属性的含义 思考什么标签最适合描述这个内容 不使用可视化工具生成代码

HTML要传达内容，而不是样式，行内样式要做的尽量不写
avatar
文章
阅读
粉丝