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
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){
}