前端与 HTML | 青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第1天.今天主要了解了什么是前端和HTML, 并对HTML标签有了初步的认识.

什么是前端

• 前端要解决的根本问题是图形界面下的人机交互问题
• 前端工程师是使用web技术栈解决多端图形界面用户交互问题的工程师

前端技术栈

• 前端关注点:

  • 功能
  • 美观
  • 无障碍:适用于所有人群
  • 安全
  • 性能:速度,动画流畅,用户体验
  • 兼容性:各种设备都能使用
  • 体验

• 前端的边界

  • nodejs开发服务器端的应用
  • electron开发客户端的应用
  • reactnative P2P
  • webRTC,webGL等等

HTML(hypertext markup language)

HTML也就是超文本标记语言.

• hypertext 超文本: 包含图片,标题,链接,表格等.
• markup language 标记语言: 用一个开始标签和结束标签来表示一个内容/格式.也可以通过标签来表示属性.

常用标签

• html 根元素,所有内容都在html标签里面
• head标签 : 页面元数据, 不直接呈现给用户
• body标签 : 呈现给用户的内容

HTML 作用解析

把HTML代码转化为一个DOM树

HTML语法

HTML语法需要注意的地方如上图所示, 下面是一些常用的标签.

列表

有序列表 ol, 无序列表 ul, 属性名-属性值列表 dl(定义列表), dt(属性名), dd(属性值)

链接

a标签, 属性 : href, 用来保存引用链接.

多媒体元素

img, audio, video

属性: src,资源链接; alt,替代性文本.

输入

input标签 具有以下属性:

• placeholder 占位符, 用户没有输入内容时显示的内容
• type="range" 滑动范围
• type="number" 可以指定输入数字及其范围
• type="date" 日期输入框
• type="radio" 单选框 只能选一个
• list属性 可以提示用户选择范围,快速输入, 通过datalist-option来进行提示.

textarea标签 可以输入多行内容

select标签 下拉选择, 选项写在option标签里面

引用标签

blockquote标签 长引用, 显示为段落缩进

site标签 短引用, 一般为引用的标题等, 显示为斜体

q标签 短引用, 一般为具体引用内容, 双引号

code标签 单行代码用p标签包裹, 多行用pre标签包裹

强调标签

strong 表示重要, 紧急的东西 加粗

em 表示预期的强调, 斜体

内容划分的标签

header 页头, 可以放logo,导航等内容

main 一般页面里只有一个

aside 相关内容,但不属于本页面的内容

article 文章正文,可以有多个,也可以没有

footer 页尾, 参考链接,版权信息等内容

HTML语义化

• 语义是指HTML中元素, 属性及属性值拥有的含义

• 语义化的好处:

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

• 要知道, HTML是传递内容的 ! !