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/
- 打开新页面:
<a href="路径"></a>
- 执行js代码:
<a href="JavaScript:console.log(999)">打印</a>
- 页面锚点:
定义锚点:
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元素注意事项
- 表单提交方式-至少6种
常用:method的属性值-get(显示提交) / post(隐式提交)
- 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>
- 下拉框的分组操作:
<select>
<optgroup label="刺客">
<option>兰陵王</option>
<option>孙悟空</option>
</optgroup>
<optgroup label="射手">
<option>鲁班</option>
<option>李元芳</option>
</optgroup>
</select>
- 常用表单控件的布尔属性:
disable 禁用 表单元素蒙上一个灰白的色调
readonly 只读 作用在输入框
autofocus 自动聚焦 作用在输入框
selected 选中 作用在option上
checked 选中:一般用于选框
multiple 下拉框可多选
- 按钮的类型:
- 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>