web 前端入门

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

学习资料

1. 网站 w3school
2. 网站 MDN 开发者网络
3. 视频教程 慕课网
4. 互动教程 codeCademy

开发工具

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

从 Hello World 开始

    
    


    Hello World

标签

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

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

属性

其中 required="required" 为属性

Hello

其中 class="hello text" 为属性

注释

    
   
 Hello World 

常用的 HTML 标签

布局容器：

...

是一个块级元素，常用于组合其他 HTML 元素，本身无实在意义

标题：

~

是最大的标题，

是最小的标题。

This is a heading
This is a heading
This is a heading

段落：

content

超链接： Link text
图片：
表格：

  
Heading
  
Another Heading


  
row 1, cell 1
  
row 1, cell 2


  
row 2, cell 1
  
row 2, cell 2

无序列表：

  
Coffee
  
Milk

有序列表：

  
Coffee
  
Milk

表单：

  
  
  Male
  

  Female
  
 

了解DOM

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

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

例如，html 源码如下:

    

        

            
This is a title
            
 Hello 
        
        
 Hello 
    
    
 
 Let it go 
 

DOM 结构：

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

---

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