前言：这是我参与「第四届青训营 」笔记创作活动的的第1天

关于笔记忘了发表这件事 -_-

前端

什么是前端、前端应该注意哪些问题

什么是前端

• 解决GUI人机交互问题
• 跨终端
  1. PC/移动互联网
  2. 客户端/小程序
  3. VR/AR等
• Web技术栈
  1. HTML（内容）
  2. CSS（样式）
  3. JavaScript（行为）

前端应该注意哪些问题

功能、性能、美观、兼容、安全、体验、无障碍等等

HTML

定义 + DOM树 + 语法 + 标签

定义

超文本标记语言：HyperText Markup Language

超文本：图片，标题，链接，表格

标记语言：标签

DOM树

一棵节点树中的所有节点彼此都是有关系的。  除文档节点(document对象)之外的每个节点都有父节点。节点间的关系可以用

语法

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

标签

• 标题 h1~h6 段落 p
• 注释

    <!-- 这是注释 -->

• 列表 list
  • ol-li （有序）
  • ul-li （无序）
  • dl-dt-dd （定义列表;dt属性;不加前缀空格;dd属性值:加前缀空格。关系:一对一,一对多。）
• 链接 anchor

    <a href="www.baidu.com">百度</a>                      <!-- 当前页面打开 -->
    <a href="www.baidu.com" target="_blank">百度</a>      <!-- 空白页打开 -->

• 图片、音频、视频

    <img width="600" src="/images/图片.jpg" alt="图片">
    <audio src="/audios/音频.mp3" controls></audio>
    <video width="600" rc="/videos/视频.mp4"  controls></video>

    src：属性
    alt：载失败提示信息
    controls：浏览器默认播放控件

• 输入 input

    属性button/data/mail/hidden/number/sbumit/text
    
  

• 文本类标签

  1. 引用块：blockquote
  2. 预格式化文本：pre
  3. 代码块：code

• 页面划分的语义化标签：（最好只有一个main标签）