前端学习路线（1）——HTML、CSS、JavaScript基本语法

HTML、CSS、JavaScript基本语法

1. w3school官方教程

• 可按照知识点选择阅读（实在找不到自行百度了解）

• 必须注意所有代码的缩进格式，变量名起名（最低要求）

• 链接：HTML教程 CSS教程 JavaScript教程

• HTML参考知识点

  1. HTML是标记语言 (Hyper Text Markup Language)
  2. 双标签与单标签（为啥会有单双之分？）
  3. 浏览器解析页面过程
  4. HTML文档是一棵DOM树（（子、父、兄弟）节点、元素节点、文本节点）
  5. 必须熟悉的标签：html head body title div p h1~6 span table tr th td img br a form input
  6. HTML语义化：如b和strong，i和em，article，header，footer
  7. HTML属性：id class type src title alt href value
  8. 表单及表单元素（action method text radio checkbox select submit reset button textarea）

• CSS参考知识点

  1. 盒子模型
  2. 基本格式语法
  3. CSS选择器（注意尽量用class选择器，掌握使用元素选择器[elementname]、id选择器[#idname]、class选择器[.classname]、后代元素选择器[selector selector]、交集选择器[selector, selector]、并集选择器[selectorselector]）
  4. CSS属性及其属性值：width height text-align color background font text-decoration position top right bottom left border padding margin display overflow z-index cursor float line-height
  5. CSS伪类和伪元素：before after hover（重点）
  6. 注意百分比的属性值是相对于谁的
  7. 注意简写属性和具体的属性：如background background-color background-image background-size background-position
  8. padding border margin
  9. position top bottom left right
  10. float overflow clear
  11. CSS的四种导入方式

• JavaScript参考知识点

  1. 基本数据类型及其初始化和基本方法
  2. 数据类型之间相互转换，格式化
  3. 基本语法（if for while function new switch）
  4. DOM元素基本操作（选择，创建，添加，属性获取和设置）
  5. 了解BOM属性（特别是history和location）
  6. 事件的绑定（监听），委托（代理），取消默认行为，阻止冒泡与捕获
  7. 导入外部js文件

2. 练习

1. 将本页面的文章部分做出来（不懂可以调出开发者工具查看是怎样的架构）。
2. 使用CSS实现各种居中（文本水平居中，单行文本垂直居中，多行文本垂直居中，块级元素水平垂直居中，表格水平垂直居中）（注意固定高度宽度和不定高度宽度）。
3. 做出一个表单，里面有单行文本框，多行文本框，密码框，单选框，多选框，下拉框，提交按钮，要求用js控制检查表单里面的填写信息是否完整（规则自定，比如限制字数，联合选择（选一个的同时另一个也被选上），预判（选择一个项后，后面的选项只能选择其中的某些项，如选择了类别，后面具体选项要跟着改变）等等），有能力的话去实现模拟表单元素，自由地变成自己想要的样式（样式不是作用于基本的表单元素上），表单提交的时候取消提交行为并检查数据，在控制台输出数据（可参考注册的表单）。