HTML与前端

83

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语法

  • 标签和属性不区分大小写,推荐小写
  • 空标签可以不闭合,比如inputmeta
  • 属性值推荐双引号包裹
  • 某些属性值可以省略,比如requiredreadonly
  • 标题h1-h6
  • 列表 有序列表ol 无序列表ul 定义列表(key-value)dl dt(要描述的标题)dd(对应的描述)dt可一对多dd
  • 链接a
  • 多媒体:图片img、音频audio、视频video,controls属性渲染默认的进度条
  • 控件
    • inputtype设置类型(rangenumberdate
    • textarea多行文本
    • input-checkbox 多选
    • input-radio 单选
    • select-option下拉选择框
    • input-list属性和datalist进行关联,option作为用户输入时候的提示
  • 文本标签
    • 引用:blockquote长引用 cite短引用 q引号
    • code:代码 pre-code多行代码
    • strong重要 em突出
  • 内容划分 headermainaside侧边栏、articlefooter

语义化

html中的元素、属性和属性值都拥有某些含义,开发者应该遵循语义来编写html,比如列表用ol还是ul,比如lang属性表示语言

为什么要语义化?

使用html的角色:

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

语义化的好处:

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性
  • 根据传达内容,而不是样式决定使用哪个标签,比如标题不用32px的p而是用h1

怎么做到语义化

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