Udemy - The Web Developer Bootcamp - HTML Basics

定义：
HTML is not a programming language; it is a markup language that defines the structure of your content.

例如，粗体b ，标题h1 ，分段p

MDN : important resource for html, css, js

书写方法：

• 用sublime, 文件名应以.html为后缀

• 可以直接双击，默认chrome打开，也可把文件拖至sublime打开

• 固定格式：
  !DOCTYPE html

疑问：1. b 和 strong有什么区别？显示出来好像都是字体加粗？

DIV 用法

• 在div内的内容会被group到一起，并加一个背景，背景需要用CSS来style，自动paragraph成新的一行

SPAN

inline container

attributes

• images :

         img src(代表source)="网址，或同一磁盘下的图片"
         img width="数字代表宽度“ src="url"
  

• Links: (a href=“url”)Link Test(/a)
  eg. (a href=“http://www.google.com”)Click me to go to Google(/a)
  不会另起一行
  也可以link到另一个html文件

Table

• (table)
  (thead)
  (tr) 代表一行
  (td)(/td) 代表一行里的每个元素 each cell
  (td)(/td)
  (/tr)

  (tbody)
  (tr) 代表一行
  (th)name(/th) 代表表头 table head

   (/tr)
  

  (/table)

• (thead) (/thead) (tbody)(/tbody)

• 当需要同时修改多个地方时，按住command ，然后一次点击需要修改的地方，然后可以同步修改。

Forms

• (form action="" method="")
  action: the URL to send form data to , send之后，再次打开action里面的URL，原始URL后面会加上form里输入的信息，password除外
  method: the type of HTTP request eg: get
  (/form)

• (input type="")
  eg: text date color file email password MDN上有所有的type类型
  (button) (/button)

• (input type=“text” placeholder=“username”)
  placeholder ：还没输入时，显示在框里的浅灰色内容

Form Tag

• (form) (/form) 会让里面的内容自动成为一个整体
• (input name="" type=“test” placeholder"uesername")
  name: 给输入的信息命名，方便以后retrieve

Label

• 可以在form外层嵌套一个(label) (/label)，用来说明填入方框的东西

• 或者
  label for=“username”) username: /label
  input id:“username” type=“text” placeholder=“username”

  for 和 id 后面命名的名称须一致

Required

• 在input语句 最后 加上required
• type 是email 时，输入内容会自动check是否为email格式

Dropdown and radio button

form
label for=dogs) dogs: /label
input name=petchoice id=dogs type=radio value=dogs

label for=cats) cats: /label
input name=petchoice id=cats type=radio value=cats

• 在两个input里面都加了相同的name，用户就只能二选一
• value 的定义保证选择的信息发送到指定URL后包含选择的具体内容

Select (下拉框）

select name=color →保证选择的信息发送后有名字
option AAA /option 下拉框里的选项
option BBB /option
/select

• option value=happy) 😃 /option → 把表情符合定义为一个Word
• textarea name=“paragraph” row=10 cols=50 → 定义输入框的大小