前端知识点，请罗列清楚，并且携带代码

前端知识点比较广泛，以下是一些常见的知识点及相应的代码示例：

1. HTML基础

- 标签语义化

<header>
  <h1>这是网站标题</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">关于我们</a></li>
    </ul>
  </nav>
</header>

- 表单实现

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">密码：</label>
  <input type="password" id="password" name="password"><br>

  <input type="submit" value="提交">
</form>

2. CSS基础

- 盒模型

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 20px;
}

- 布局

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

3. JavaScript基础

- 数据类型

let str = 'hello world';
let num = 123;
let bool = true;
let arr = [1, 2, 3];
let obj = { name: '张三', age: 18 };
let func = function() {
  console.log('这是一个函数');
}

- 条件语句

let score = 80;

if (score >= 90) {
  console.log('优秀');
} else if (score >= 80) {
  console.log('良好');
} else if (score >= 60) {
  console.log('及格');
} else {
  console.log('不及格');
}

以上仅是一些基础知识点和代码示例，前端涉及的知识点非常广泛，需要不断学习和实践。