Free Code Camp 学习笔记

HTML

  1. HyperText Markup Language: a kind of language that used to describe the structure of a webpage.
  2. <h1>, <h2>, <h3> tags that set the size of chars. h1 > h2…
  3. <main>, <header>, <article>, <section>,<nav>, <footer> those are H5 tags, make the html easier to read.
  4. <p> paragraph, <br> line break
  5. comment start: <!--; comment end:-->
  6. <img src=“url” alt=“brief_intro”> alt主要用于屏幕读取,为需要这类服务的人群提供方便
  7. <a href=“url”>anchor/description</a> *** url can be external or internal, if it’s an internal anchor, we will first have the id of the location that we want to link to. For example : <h2 id= “id_name”>abc</h2> <a href= “id_name”>link_to_abc</a> *** if we change the “url” to “#” it becomes a dead link, not going anywhere. 重点:href 只是指向一个锚点,这个href可以是一个外部链接,可以是一个内部的url连接,也可以是一个“id”,如果要跳转到内部的id的话,要使用“#”,href= “#id_that_jump_to”,由此可以判断出id要具有唯一性。
  8. <a href= “google.com” ><img src = “https://bit.ly/fcc-relaxing-cat”></a> *** now the image is a link
  9. <ul> unordered list <ol> ordered list both can nest <li>
  10. <input type= “text” (add “required” here can make it a must fill in slot)placeholder= “this is the place holder”> input is self closing, can have a place holder too.
  11. <form> form 用于提交数据,当user按下submit,所有input采集到的信息将会发回到指定的url,(应该是以json模式?)this is a very important element, it’s in charge to submiting/matching info to the server. For example: <form action= “/url_to_submit”><input type= “text”><form>, this line is actually submitting the input data to the /url_to_submit.
  12. <button type= “submit”>BUTTON NAME</button> ??? what does type = “submit” do? 是不是说type是submit的按钮有提交的功能,就会向服务器的某个url发送信息。
  13. <label for= “input_id”><input id = “input_id” type = “radio” name = “shared_name_of_the_radio_group”></label> *** remember if we want to have a bunch of radio inputs that you can only choose one from, you will have to give them the same name. It is considered best practice to explicitly define the relationship between a checkbox input and its corresponding label by setting the for attribute on the label element to match the id attribute of the associated input element. 好像这种for=“ID”语句只是一种约定俗成的方式,没有什么具体的意义,在ROR中看到过,好像也是这样写的。
  14. form十分有用,form 的action就是指定form提交后传递到哪个位置,也就是存到什么地方,或者是和谁有什么互动这类的事。FORM是连接前后端的关键,提交一个表格之后,它会以特定的格式传递信息,比如,下面三个checkbox用的是同一个name,那么在user选择了lazy这个选项之后,form submit传递的信息就应该是 personality=lazy,所以value和name这两个东西是用来传递信息的,如果不给value一个特定的值的话,它传递的是一个“on”,在很多时候无意义,所以要特别注意value这个值。
  1. checked: 用于预先选定某个radio或者是checkbox,只需要加一个checked就可以,???如果想多选怎么办?
  2. div: division,就是一块内容, div的应用可能在css和js中更有体现,div和section,span有什么区别???
  3. 整体结构
<!DOCTYPE html>
<html>
<head>
<title>
</head>
<body>
<h1>Hello World</h1>
<div>
<p>testing skills
<a href="google.com"><img src="/url_to_pic" alt="description"></a>
<form action="url_to_submit">
<label for="input_id">
<input id="input_id" name="shared_name" type="radio">RADIO SELECTION</label>
<!-- input type can also be text/checkbox, can have specifications like "required" "checked" "placeholder=" -->
<button type="submit">SUBMIT</button>
</form>
</div>
</body>
</html>

Designer transforming into a developer