360前端星计划day1
前端
技能列表:
- 语言:html、css、js、php
- 行业标准:dom、es2015、http、json、xml
- 框架:react、angular、jquery、vue、lodash
- 兼容性:ie浏览器、css3新特性、html5新特性、es2015、移动端版本
- 编程思想:函数式编程、面向对象、设计模式
- 调试:浏览器调试工具、fiddler
- 前端工程:npm、webpack、postcss
- 安全性:xss、csrf、加密解密、编码解码
- 性能:优化规则、开发者工具、浏览器原理
- 团队协作:git/svn、编码规范、文档管理
- 通用技能:沟通、学习、自我管理
- 交互/设计
前端的边界
Node、electron、react native、web rtc、webgl、webassembly
HTML
是什么
超文本:图、标题、链接、表格 标记语言:使用特定标记表示
组成
- 开始标签+内容+结束标签 (有时可以省略结束标签)
- 可以在开始标签上设置属性 属性名=属性值
!doctype
:指明html的版本和渲染模式
<html>根
<head></head>元数据
<body></body>页面内容
</html>
Dom树
Document-html-head/body-各种节点
Html语法
- 标签和属性不区分大小写,推荐小写
- 空标签可以不闭合,比如
input
、meta
- 属性值推荐双引号包裹
- 某些属性值可以省略,比如
required
、readonly
- 标题
h1
-h6
- 列表 有序列表
ol
无序列表ul
定义列表(key-value)dl
dt
(要描述的标题)dd
(对应的描述)dt
可一对多dd
- 链接
a
- 多媒体:图片
img
、音频audio
、视频video
,controls
属性渲染默认的进度条 - 控件
input
的type
设置类型(range
、number
、date
)textarea
多行文本input
-checkbox
多选input
-radio
单选select
-option
下拉选择框input
-list
属性和datalist
进行关联,option
作为用户输入时候的提示
- 文本标签
- 引用:
blockquote
长引用cite
短引用q
引号 code
:代码pre-code
多行代码strong
重要em
突出
- 引用:
- 内容划分
header
、main
、aside
侧边栏、article
、footer
语义化
html
中的元素、属性和属性值都拥有某些含义,开发者应该遵循语义来编写html
,比如列表用ol
还是ul
,比如lang
属性表示语言
为什么要语义化?
使用html的角色:
- 开发者:修改、维护页面,
- 浏览器:展示页面,
- 搜索引擎:提取关键词、排序,
- 屏幕阅读器:给盲人读页面的内容
语义化的好处:
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
- 根据传达内容,而不是样式决定使用哪个标签,比如标题不用32px的p而是用h1
怎么做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码