行级标签

xiaoxiao2021-02-28  15

行级标签

行级标签,按行逐一显示

span 范围 img 图片 a 超链接 label 标记(当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上) em 强调 倾斜 i 倾斜 strong 强调 加粗 b 加粗 s 删除线 u 下划线 big 放大 small 缩小

范围标签 <span></span>

<p> 笔记本电脑<span style="font-size: 50px;color: red">1</span>元起 </p>

笔记本电脑1元起

span标签没有任何默认样式

规范:

标签名和属性名必须小写html标签必须关闭属性值必须用用引号括起来标签必须正确嵌套

超链接<a></a>

<a href="" target="" rel=""> xxx </a> 超链接分类 页面间链接锚链接功能性链接

页面间链接

<!--外部页面跳转--> <a href="https://www.baidu.com/" target="_blank">百度</a> <!--本地页面链接--> <a href="Demo13.html" target="_self">Demo13</a>

百度 Demo13

href: 指定页面跳转的路径target: 页面打开的位置 _self: 当前页面打开_blank: 在新页面打开

锚链接

<!--Demo15.html--> <a href="#top"><button style="position: fixed;height:100px;width:100px;bottom: 30px;right: 30px">↑回顶部</button></a> <div style="background-color: dodgerblue;text-align: center"> <a name="top">顶部</a><!--锚点--> </div> <div style="height: 2000px;background-color: beige"> </div> <div style="background-color: dodgerblue;text-align: center"> <a name="bottom">底部</a><!--锚点--> </div> <!--从外部跳转至Demo15.html的锚点--> <a href="Demo15.html#bottom">Demo15底部</a>

功能性链接

<a href="tencent://message/?uin=1761713585">给QQ1761713585发信息</a> <a href="mailto://1761713585@qq.com">给1761713585@qq.com发邮件</a>

图片标签 <img/>

<img src="" alt=""/> 属性 src 图片路径alt 加载失败时的提示信息width 宽度height 高度align 对齐方式border 边框

表格标签 <table>

<table border="1"> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> <tr> <td>手机充值</td> <td>IP卡</td> <td>网游</td> </tr> <tr> <td>移动</td> <td>联通</td> <td>魔兽</td> </tr> </table> 标题1标题2标题3手机充值IP卡网游移动联通魔兽 <table>标签属性

border 规定表格边框的宽度 cellspacing 规定单元格之间的空白 cellpadding 规定单元边沿与其内容之间的空白 width 规定表格的宽度 height 规定表格的高度 align 表格的对齐方式 bgcolor 背景色 background 背景图片 bordercolor 边框颜色

<tr><td>标签的属性

width 行或单元格的宽度 height 高度 bgcolor 背景颜色 align 内部内容的水平对齐方式 valign 垂直方向的对齐方式 nowrap 规定表格单元格中的内容不换行

行的对齐方式有:align和valign

align:left/center/rightvalign:top/middle/bottom/baseline(与基线对齐)表格的属性和单元格的属性相同的情况下,单元格属性优先(就近原则)

表格跨行跨列

<table border="1" width="200"> <tr> <td colspan="3" align="center">学生成绩</td> </tr> <tr> <td rowspan="2">张三</td> <td>语文</td> <td>98</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> <tr> <td rowspan="2">李四</td> <td>语文</td> <td>88</td> </tr> <tr> <td>数学</td> <td>26</td> </tr> </table> 学生成绩张三语文98数学95李四语文88数学26 colspan 横向跨列rowspan 纵向跨行

了解一下: <caption></caption> <tbody></tbody> <thead></thead> <tfoot></tfoot> <colgrounp></colgrounp>

表单 <form>

<form action="" method="get/post"> </form> action:表单提交的地址 method:用来指定数据传递到服务端的基本方法 get:传递的数据会拼接到url后面 优点:简单,快速 缺点:暴露敏感信息,数据传输量有限 post:传递的数据会隐藏起来,放在请求体。 优点:数据传输量大,信息保密性好 缺点:相比get请求,速度慢一些

常用表单控件

文本框 <input type="text"> 密码框 <input type="password"> 单选按钮 <input type="radio" name="r1" value="1">男 <input type="radio" name="r1" value="2">女 多选按钮 <input type="checkbox"> 上传文件 <input type="file"> 提交按钮 <input type="submit> 按钮 <input type="button"> 重置按钮 <input type="reset"> 图片提交按钮 <input type="image"> 隐藏域 <input type="hidden"> 文本域 <textarea cols="30" rows="10"> <textarea> 下拉列表 <select> <option>选项1</option> <option>选项2</option> <option>选项3</option> </select>

表单外框及标题

外框 fieldset 标题 legend

元素顺序

tabindex

H5中的新表单控件

数字、日期、邮箱、电话、url的输入框以及滑动块等

H5中的新属性

autocomplete :自动完成功能(自动补全),属性值:on 开启,off 关闭autofocus :自动获得焦点form :所属表单required :必填pattern :验证input的模式placeholder :提示
form属性
<form id="form1" action="a.html" method="get"> …… </form> <input type="text" form="form1" name="t1"> form 属性规定输入域所属的一个或多个表单form 属性适用于所有 标签的类型form 属性必须引用所属表单的 id
转载请注明原文地址: https://www.6miu.com/read-450096.html

最新回复(0)