HTML--(table/p/a/form及表单控件元素)的特性分析

HTML某些元素的特性分析

一、table元素水平居中问题

table元素使用中，发现可以不给定宽度直接使用margin: auto;可使元素水平居中显示

<style>
     table{
         border: 1px solid black;
         margin: 0 auto;
     }
 </style>
<table>
     <tr>
         <td>111</td>
         <td>222</td>
     </tr>
 </table>

通过控制台发现table的默认样式可发现其display属性值为table:

二、p元素的嵌套

• p元素内部不可嵌套块级元素的操作

    <style>
        i{
            display: block;
        }
        div{
            display: inline;
            display: inline-block;
        }
        b{
            display: inline-block;
        }
    </style>
  <P>Lorem <i>猪猪侠</i> ipsum dolor, sit <strong>小呆呆</strong> amet
  <b>迷糊老师</b> consectetur <div>超人强</div> adipisicing elit.  Tempore, tempora!</P>

分析：
p元素内部嵌套块级元素会使块级元素后面的内容都被分割开。
！这里的块级元素是浏览器默认的，不受样式的影响；若在嵌套块级元素后面继续嵌套行级元素，则这个行级元素以及块级元素后面的内容都被分割开。

三、a链接的作用

• 路径：

  站内资源-相对路径
  ./xxx.yy或xxx.yy 本目录下查找文件；
  …/xxx.yy 上一级目录查找文件。
  站外资源-绝对路径
  协议名://主机名:端口号/路径
  例如：https://www.baidu.com/

1. 打开新页面：

<a href="路径"></a>

2. 执行js代码：

<a href="JavaScript:console.log(999)">打印</a>

3. 页面锚点：

定义锚点：
1.利用a元素name属性值=“锚点名”
2.利用其它元素id属性值=“锚点名”
使用锚点：
利用a链接的href属性值="#锚点名"
地图案例：

<a href="JavaScript:alert('没找到')"><img src="./map.jpg" usemap="#chMap"/></a>
    <map name="chMap">
        <area shape="circle" coords="118,135,50" href="#" alt="新疆省">
        <area shape="circle" coords="418,70,30" href="#" alt="黑龙江省">
        <area shape="rect" coords="218,235,280,280" href="#" alt="四川省">
    </map>

实现效果：点击新疆、黑龙江、四川可以在该区域进行跳转，若选中其它区域则弹框提示未找到
4. 发送邮件
5. 拨号

四、form元素注意事项

1. 表单提交方式-至少6种

常用：method的属性值-get(显示提交) / post(隐式提交)

2. input选框操作：

1）点击文字选中选框：
input的id属性值==label的for属性值

<label for="ch_1"><input type="checkbox" id="ch_1">李元芳</label>

2）多个单选框组实现单选功能：
多个单选框设置相同的name属性值

 <p>
     <input type="radio" name="onlyCh">
     <input type="radio" name="onlyCh">
     <input type="radio" name="onlyCh">
 </p>

3. 下拉框的分组操作：

<select>
      <optgroup label="刺客">
          <option>兰陵王</option>
          <option>孙悟空</option>
      </optgroup>
      <optgroup label="射手">
          <option>鲁班</option>
          <option>李元芳</option>
      </optgroup>
  </select>

4. 常用表单控件的布尔属性：

disable 禁用 表单元素蒙上一个灰白的色调
readonly 只读 作用在输入框
autofocus 自动聚焦 作用在输入框
selected 选中 作用在option上
checked 选中：一般用于选框
multiple 下拉框可多选

5. 按钮的类型：

• input:

  <!-- 普通按钮，无功能 -->
  <input type="button" value="put-btn">
  <!-- 提交按钮，将form数据提交到服务端 -->
  <input type="submit" value="put-sub">
  <!-- 重置按钮，复原表单元素 -->
  <input type="reset" value="put-res">
  <!-- 区别于submit，当表单的method属性值为GET时，
  除正常请求URL外还可以让点击的位置距图片左顶点的坐标作为参数出现在URL里 -->
  <input type="image" value="put-img" src="./zzx.jpg">
  

• button: button按钮相对于input内容更丰富，按钮可以是图片或文字

  <!-- type默认值:IE button,其他浏览器为submit -->
  <button type="button">btn-btn</button>
  <!-- 具有提交表单功能 -->
  <button type="submit">btn-sub</button>
  <!-- 重置 -->
  <button type="reset">btn-res</button>