web 前端入门

2016-11-07 本文已影响227人码可波罗

一切从零开始，最基础的前端入门知识！
开发一个网页所需要的最少的知识，剩下的，在实践中学习，在动手中积累！

学习资料

网站 w3school
网站 MDN 开发者网络
视频教程慕课网
互动教程 codeCademy

开发工具

编辑器 sublimeText VSCode webStorm
在线编辑器 codePen
chrome 开发者工具 devTools 文档

从 Hello World 开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    Hello World
</body>
</html>

标签

由尖括号包围的关键词，如 <body>
开始标签 <body> 结束标签 </body>
也有元素不能包含其他元素，没有结束标签，如 <img src="test.jpg">
常用标签： body, div, h1~h6, p, span, strong, em ul, li, input, button, a, talbe, img ....

标签实在太多，不一一列举，可以通过 w3school 查询标签查询

属性

<input required="required"> 其中 required="required" 为属性
<p class="hello text"> Hello </p> 其中 class="hello text" 为属性

注释

<body>
    <!-- This is comment text -->
   <p> Hello World </p>
</body>

常用的 HTML 标签

布局容器： <div> ... </div> 是一个块级元素，常用于组合其他 HTML 元素，本身无实在意义

标题：<h1> ~ <h6> <h1> 是最大的标题， <h6> 是最小的标题。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

段落：<p> content </p>
超链接： <a href="http://xxx. com">Link text</a>
图片：<img src="ghost.gif" alt="The ghost">
表格：

<table>
<tr>
  <th>Heading</th>
  <th>Another Heading</th>
</tr>
<tr>
  <td>row 1, cell 1</td>
  <td>row 1, cell 2</td>
</tr>
<tr>
  <td>row 2, cell 1</td>
  <td>row 2, cell 2</td>
</tr>
</table>

无序列表：

<ul>
  <li>Coffee</li>
  <li>Milk</li>
</ul>

有序列表：

<ol>
  <li>Coffee</li>
  <li>Milk</li>
</ol>

表单：

<form action="action_page.php">
  <input type="text" name="firstname" value="Mickey">
  <input type="text" name="lastname" value="Mouse">
  <input type="radio" name="sex" value="male" checked>Male
  <br>
  <input type="radio" name="sex" value="female">Female
  <input type="submit" value="Submit"></fieldset>
</form>

了解DOM

什么是 DOM ？
DOM: Document Object Model, 文档对象模型。

是 HTML 和 XML 文档的编程接口；
对文档的结构化的表述；

例如，html 源码如下:

<body>
    <div class="section">
        <div class="nav content-header">
            <h1 class="nav-item title">This is a title</h1>
            <p> Hello </p>
        </div>
        <p> Hello </p>
    </div>
    <div> <p> Let it go </p> </div>
</body>

DOM 结构：

body   
│
└───div
│   │   p
│   │
│   └───div
│       │   h1
│       │   p
│   
└───div
    │   p

接下来，请看下一篇博客 css 基础介绍