美文网首页
HTML之6个问题

HTML之6个问题

作者: whisper330 | 来源:发表于2019-11-26 14:40 被阅读0次

问题

  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个元素构成tabletbodytrthtd
<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这种没有内容的空元素,建议在后面加上“/”

相关文章

网友评论

      本文标题:HTML之6个问题

      本文链接:https://www.haomeiwen.com/subject/njhewctx.html