一切从零开始，最基础的前端入门知识！
开发一个网页所需要的最少的知识，剩下的，在实践中学习，在动手中积累！
学习资料
- 网站 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 基础介绍
网友评论