The Web Developer Bootcamp-前端学习笔记-CSDN博客

本文介绍了前端开发的基础知识，包括HTML的骨架作用、CSS的美化功能以及BootStrap的使用。HTML是网页的基础，CSS通过选择器对HTML元素进行装饰，而BootStrap提供了一套响应式布局和组件。文章还提到了JavaScript和JQuery在交互中的重要性，并讲解了DOM的概念。重点讲解了div和span元素、常用HTML元素、CSS样式表的内外部引用、表单的get和post方法、input类型的属性以及注释的写法。此外，还讨论了如何利用attributes如name、id和class进行页面定制。

The Web Developer Bootcamp-前端

前端

前端

The Web Developer BootCamp 使用到的相关前端技术，html，css，Jquery，Bootstrap,Javascript

HTML

HTML(Hypertext Markup Language),对于制作网页而言，html相当于网页的骨架，类似于英语中的名词，一个有意义的句子一定是有名词来让别人知道你想表达什么，一个网页则需要一个充满名词的骨架，来告诉别人你想展示的内容，纯html文本只是你想要展示的内容的堆砌。在后续的过程中，会使用CSS来进行界面的优化，CSS就相当于英语中的形容词。去让网站更加好看。

详细的网站教程：https://developer.mozilla.org/en-US/docs/Web/HTML，包含一些更基本的知识和全部的tag内容

下面是一些基本的语法

General Form（html的一般表达形式）
<tagName> Some Content </tagName>
Basic Type（一个完整的网页所需要的代码）

<!DOCTYPE html>
<html>
<head>//头部文件，会放置引用，title等
<!-- Our metadata goes here -->
  <title></title>
</head>
<body>//具体展现的内容

<!-- Our content goes here -->

</body>
</html>

Comments，html语言所使用的注释方法

<!-- This is a comment.  It doesn't do anything! -->

下面是我觉得重要的一些内容，其他的可查阅上方的网站链接

1.Div 和 Span

Div 通常用于段落的区分，使用情况多于Span，在使用CSS时可用来区分各个组块，使各个组块模块化，Span可用在段落内，不会另起一行。Div在Bootstrap中很常用。

2.一些重要且常用的Elements
order list, unorder list
form, button(与Submit区别), input(text,password)
select(option)

3.<style></style>，用来写少量CSS(放在Head)

4.<link rel="stylesheet" href="bootstrap.css"> 用来引用写在外部的CSS文件。（放在Head）

5.<script src=" "></script>用来引用外部的JavaScript文件。（放在Head）

6.<form action="" method=""></form>
method = “get” 获取信息
method = “Post" 提交信息
在server端会根据不同的method进行不同的操作。
eg:

router.post("/", middleware.isLoggedIn, function(req, res){})
router.get("/", function(req, res){})

获取的URL一样，不同的method对应不同的操作。

在form里填写了相关input之后，用get会在URL里看到数据

7.<input type="">
text button submit radio password…
required
οnsubmit=”（JavaScript function）“ 写在form里做格式检查

8.Attributes
name:可重复
id:unique
class: could be utilized by bootstrap, CSS to do the decorate.

DOM

Document Object Model
DOM

CSS

Cascading style sheets, 作用于html文本，相当于英语中的形容词，装饰页面。
基本形式包含两个部分，选择器+声明
selector {declaration1; declaration2; … declarationN }

Selector

1.ELement

li{
}

2.class

.hello{
}

3.id

#name{
}

4.Descendent

ul li a{
}

5.Adjacent

h4 + ul{

6.Attribute

a[href=""]{
}
input[type=""]{
}

7.nth

li:nth-of-type(3){
}

The Web Developer Bootcamp-前端 学习笔记

The Web Developer Bootcamp-前端

前端

HTML

下面是一些基本的语法

下面是我觉得重要的一些内容，其他的可查阅上方的网站链接

DOM

CSS

Selector

BootStrap

Javascript

JQuery

The Web Developer Bootcamp-前端学习笔记