百度前端技术学院，第一阶段学习笔记

任务1：零基础HTML编码

HTML <lable> 标签

• 所有主流浏览器都支持 <label> 标签。
  Safari 2 或更早的版本不支持 <label> 标签。
• <label> 标签为 input 元素定义标注（标记）。
  label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
  <label> 标签的 for 属性应当与相关元素的 id 属性相同。
• 标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为 <label> 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。

显式的联系：
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSn" />

隐式的联系：
<label>Date of Birth: <input type="text" name="DofB" /></label>

第一个标记是以显式形式将文本 “Social Security Number:” 和表单的社会安全号码的文本输入控件 (“SocSecNum”) 联系起来，它的 for 属性的值和控件的 id 一样，都是 SSN。第二个标记 (“Date of Birth:”) 不需要 for 属性，它的相关控件也不需要 id 属性，它们是通过在 <label> 标签中放入 <input> 标签来隐式地连接起来的。

HTML <img> 标签

• <img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
• <img> 标签有两个必需的属性：src 属性 和 alt 属性。

HTML <input> 标签

• 在 HTML 中创建单选按钮。

<form>
男性：
<input type="radio" checked="checked" name="Sex" value="male" />
<br />
女性：
<input type="radio" name="Sex" value="female" />
</form>

• 在 HTML 页中创建文本框。用户可以选中或取消选取复选框。

<form>
我喜欢自行车：
<input type="checkbox" name="Bike">
<br />
我喜欢汽车：
<input type="checkbox" name="Car">
</form>

• 在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

• tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
  tr—table row
  th—table head
  td—table data
  th与td的区别：用th定义的单元格中的字体会加粗。