前端与HTML|青训营笔记

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

前端

什么是前端

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

前端技术栈

• Javascript（行为）
• css（样式）
• HTML（内容）

前端应该关注哪些方面

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

前端边界

开发环境

浏览器：

• IE/Edge
• CHrome
• Firefox
• Safari 编辑器
• VSCode
• Vim
• WebStorm

HTML

HyperText Markup Language

语法

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

<h1>字体排印学</h1>
<h2>历史</h2>
<p>活字的雏形或可追溯至公元前两千年前后美
索不达米亚文明的乌鲁克和拉尔萨，砖块上面不
均匀的印花被视作有可能是活字思想雏形。</p>
<h3>印刷体源流</h3>
<p>中国在唐代就已经出现雕版印刷术，公元868
年的《金刚经》是现存最古老的印刷品之一，使用
的技术即是木雕版印刷。</p>
<h2>应用</h2>
<p>...</p>

链接

  字节跳动官网
</a>

<a href="https://www.bytedance.com/" target="_blank">
  字节跳动官网
</a>

输入

<input type="range">

<input type="number" min="1" max="10">

<input type="date" min="2018-02-10">

<textarea>Hey</textarea>

语义化

语义化是什么

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

HTML的使用者

• 开发者：修改，维护页面
• 浏览器：展示页面
• 搜索引擎：提取关键词，排序
• 屏幕阅读器：给盲人读页面内容

好处

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

如何做到语义化

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