「青训营」前端与 HTML

这节课介绍了前端的概念、技术栈以及关于 HTML 的概念、语法、常用标签、语义化等知识。这里简要总结一下。

前端

什么是前端？

前端解决的是图形界面下的人机交互问题。

前端工程师是使用 Web 技术栈解决多端图形用户界面交互问题的工程师。

前端技术栈？

HTML，CSS，JavaScript 运行在浏览器中，浏览器通过网络协议与服务器进行通信。

HTML

HTML 是什么？

浏览器会将 HTML 代码解析成 DOM 树。

HTML 语法

HTML 标签

• 标题 h1 ~ h6

• 列表

  • 有序列表 ol、li
  • 无序列表 ul、li
  • 定义列表 dl、dt、dd

• 链接 a (anchor) 属性 target="_blank" 将链接新窗口打开

• 多媒体

  • 图片 img 属性 alt 用于在特殊情况下替换图片
  • 音频 audio 属性 controls 用于显示默认播放控件
  • 视频 video 属性 controls 用于显示默认播放控件

• 输入

  • input 输入

    • type 的属性值有 range, number, date, radio, checkbox, select, radio

    • list 属性可以为用户提示输入的选项，结合 datalist 标签使用

  • textarea 长输入

  • select 下拉选择

• 引用

  • 长引用 blockquote 属性 cite 表示引用的出处
  • 短引用 cite 表示引用的名字或章节
  • 引用 q 表示引用的内容
  • 代码 code 用等宽字体展示代码，结合 pre 标签展示多行代码

• 强调

  • strong 表示内容严重紧急
  • em 表示语气重要

  <p>投资之前，我们需要做<strong>风险评估</strong></p>
  <p>猫<em>是</em>可爱的动物</p>
  

内容划分

语义化是什么？

语义是指 HTML 中元素、属性和属性值都拥有某些含义。

浏览器的翻译功能需要用到 lang 属性更精确地识别页面的语言。

谁在使用我们写的 HTML

语义化的好处

传达内容，而不是样式

<p style="font-size: 32px">前端工程师的自我修养</p>
<h1>前端工程师的自我修养</h1>

上面两个标签都可以显示同样的内容，但是更推荐使用下面一个。

如何做到语义化