前端与HTML|青训营笔记

来到人间看海
56 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天。 前端基础班第一节：本节介绍了前端是什么、要解决的问题和技术栈等。本节也介绍了 HTML 的概念、语义化和常用的 HTML 标签。

一.什么是前端

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

二.前端技术栈

image.png

三.前端应该关注哪些方面

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

四.前端的边界

image.png

五.什么是HTML

HyperText Markup Language

1.DOM树

image.png

2.HTML语法

（1）标题h1-h6

（2）列表

（3）链接（<a></a>）

（4）图片(<img/>)、音频(<audio></audio>)、视频(<video></video>)

（5）输入

  •    `<input type="text"/>`

  •    `<textarea></textarea>`

（6）选择

  • 多选 <input type="checkbox"/>
  • 单选 <input type="radio"/>
  • 下拉列表 <select><option></option></select>

（7）文本类标签

blockquote、cite、code、strong、em

（8）内容划分

header、nav、main、article、aside、footer

六.什么是语义化

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

七.如何做到语义化

avatar
文章
阅读
粉丝