HTML之6个问题

问题

1. HTML 中的行内元素有什么特点，有哪些元素是行内元素？
2. HTML 中的块级元素有什么特点，有哪些元素是块级元素？
3. 行内元素和块级元素有什么区别，思考：有什么方法可以让行内元素和块级元素互变？
4. 思考上文中的学习目标中，掌握的各种元素分别对应什么？如：标题 ---> h1~h6
5. 表格有哪些重要属性，分别的值和作用是什么？
6. 表单有哪些类型，适用哪些场景？

解答

1.行内元素

• 特点：　　
  与其他行内元素并排
  不能设置宽高，默认的宽度就是文字的宽度
  内联元素只能容纳文本或者其他内联元素

行内元素有a,br,code,em,i,img,input,label,q,span,strong,textarea,var等，具体信息在第4问中列举出来。

2.块级元素

• 特点：
  霸占一行，不能与其他任何元素并列。
  能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。
  它可以容纳内联元素和其他块元素

块级元素有address ,blockquote,div, form,h1~6, hr,ul,ol,p,table等，具体信息在第4问中列举出来。

3. 行级元素和块级元素的区别及转换

• 区别：
  （1）块级元素可以设置宽高，行级元素不能设置宽高（只能根据文字来设置，比较特殊的是img\input是可以设置宽高）；
  （2）块级元素是独占一行，行级元素不行；

• 转化
  如果要使他们相互转化，则可以使用display属性。
  display：block可以使行级元素转化成块级元素
  display：inline，inline-block可以使块级元素转化成行级元素。

4.行内元素和块级元素具体元素

5.表格的构成

表格有以下5个元素构成table、tbody、tr、th、td
<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
<tbody>…</tbody>：表格的具体内容
<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
<th>…</th>：表格的头部的一个单元格，表格表头。

表格中列的个数，取决于一行中数据单元格的个数。

6.表单的属性

还有一种下拉列表框，一般在选择项过多的时候，为了节省空间而采取的策略，语句如下：

<label>爱好</label>
  <select>
    <option value="音乐">音乐</option>
    <option value="书法">书法</option>
    <option value="运动">运动</option>
  </select>

细节说明：

• 单选框和复选框里面的checked，代表默认选中状态。
• 同一个类型的单选名称（name）要设置成一定的，不然就没有单选的效果了。
• Label for，把单选里面的每一个选项都用id唯一编号，当点击和id相同编号的label的时候，也可以选中此选项。

<lable for="id">male</label>
<input type="radio" name="gender" id="male"/>

• Hidden的理解
  Hidden是和表单一起传上去的，但是用户看不见。
  可以用在识别博客的id上，以便数据库更新。还可以用在网络安全上，通过设计密钥一起传到服务器，看是否是正确的表单。恩，还有可以在页面上有多个form表单的情况下，通过hidden传的信息识别是哪一个butten触发的。
• 按照w3c的标准，元素应该是闭合的，像input这种没有内容的空元素，建议在后面加上“/”