element

img

attribute：

  • src — 图片地址
  • alt — 图片加载失败时将display

img 是 self-closing 的元素

  1. <img src="https://www.your-image-source.com/your-image.jpg" alt='displayed if img loaded failed'>

anchor

attribute:

  • href — 链接地址(dead link is #)，或内部id

  • anchor text 将作为链接的代言人，可text，可其他element（例如img）

  • target — 以何种方式打开链接
    _blank：open in new window or tab
    _self：open in the same frame (default)

  1. <!-- 外部链接跳转 -->
  2. <a href="http://freecatphotoapp.com">Cat Photos</a>
  4. <!-- 内部跳转 -->
  5. <a href="#internal-jump">Jump to internal location</a>
  6. ...
  7. <h2 id="internal-jump">Internal</h2>
  9. <!-- 将图片等，作为anchor text部分，则可以将该对象作为链接代言人 -->
  10. <a href="www.google.com"><img src="https://bit.ly/fcc-relaxing-cat" alt="cute cat"></a>
  12. <a href="#google"><img src="https://bit.ly/fcc-relaxing-cat" alt="cute cat"></a>
  13. <footer id="google"></footer>

ul — Unordered List

  1. <ul>
  2.   <li>cat nip</li>
  3.   <li>laser pointers</li>
  4.   <li>lasagna</li>
  5. </ul>

Ordered List

  1. <ol>
  2.   <li>cat nip</li>
  3.   <li>laser pointers</li>
  4.   <li>lasagna</li>
  5. </ol>

input

attribute:

  • type — text | radio | checkbox | submit | date
  • name — 该input栏的名字
  • value — 默认填充值
  • placeholder (H5) — 提示符信息
  • required — single字段，表示必填
  • readonly — single字段，不可填充改写
  • disabled — single字段，不可改写，与readonly类似，但显示涂黑，明确标示不可填充改写
  • size — input框长度(请区别 允许填充长度)
  • maxlength — 最大允许填充长度
  • checked — 若type为radio或checkbox，则表示默认选择项
  1. <input type="text" name="input" placeholder="input the URL" size="20" maxlength="18" required>

input 是 self-closing 的元素

form

attribute:

  • action

button

attribute:

  • type
  • button text — the text on the button
  1. <button type="submit">Submit</button>
  2. <input type="submit" value="Submit">

label

The tag defines a label for a , , , , , , or

attribute:

  • for — element_id, 指定该label所绑定的 form element

Radio Button — 单选

label的for(element_id)绑定到input的id属性

type=”radio” 表示展示位可选项的空心点

所有input的name属性相同的项为一组，作为submit传给server的key

value作为submit传给server的value

id作为label绑定的标识符使用

通过input的属性checked作为默认选择项，返回 “input_name:input_value”给后端

  1. <form action="/action_page.php">
  3.     <input type="radio" name="gender" id="male" value="male">
  4.     <label for="male">Male</label><br>
  6.     <input type="radio" name="gender" id="female" value="female">
  7.     <label for="female">Female</label><br>
  9.     <input type="radio" name="gender" id="other" value="other">
  10.     <label for="other">Other</label><br><br>
  12.     <input type="submit" value="Submit">
  13. </form>

CheckBox — 多选

属性含义同Radio Button，只是input的type属性为”checkbox”

通过input的属性checked作为默认选择项

  1. <form action="/action_page.php">
  2.     <label for="h1"><input type="checkbox" id="h1" name="personality" value="h1">
  3.       h1</label><br>
  5.     <label for="h2"><input type="checkbox" id="h2" name="personality" value="h2">
  6.       h2</label><br>
  8.     <label for="h3"><input type="checkbox" id="h3" name="personality" value="h3">
  9.       h3</label><br>
  11.   <input type="submit" name="sb" value="Submit">
  12. </form>

strong

字体加粗

u

下划线

em

斜体

s

删除线

hr

水平线， self-closing

main

article

standalone content

section

主题相关分组，例如 一本书是 article， 则各章节可以认为是 section，如果

header

represents a container for introductory content or a set of navigational links.

nav

defines a set of navigation links.

audio

音频tag

支持属性 controls

  1. <audio id="meowClip" controls>
  2.   <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg" />
  3. </audio>

figure

figcaption element可以作为 figure 元素的直接子元素用以为figure的内容提供标题

fieldset 及 legend

fieldset，组合多个选项

legend，group related elements in a form

原始格局

仅使用 fieldset

使用了fieldset 及 legend

kbd

键盘键

  1. kbd {
  2.     background-color: #eee;
  3.     border-radius: 3px;
  4.     border: 1px solid #b4b4b4;
  5.     box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 2px 0 0 rgba(255,255,255,.7) inset;
  6.     color: #333;
  7.     display: inline-block;
  8.     font-family: consolas,"Liberation Mono",courier,monospace;
  9.     font-size: .85em;
  10.     font-weight: 700;
  11.     line-height: 1;
  12.     padding: 2px 4px;
  13.     white-space: nowrap;
  14. }

HTML5的 tags

video

全局属性

accesskey

specify a shortcut key to activate or bring focus to an element

tabindex

指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航 ，通常使用键，因此得名。

负值：”-x” 通常 "-1"，表示可聚焦，但不能通过访问

正值：”x” 按照由低到高顺序，依次通过 可聚焦访问

“0”：可以通过聚焦并访问，访问顺序是由其DOM位置决定的