![]()
HTMl 中的 a 链接、列表、表格、表单元素常用属性
[toc]
![]()
1.a 链接元素常用属性和属性值
![]()
1.1 常用属性
在 a 标签中 <a href=""></a> 默认点击为在当前页打开
可在标签中添加target="_blank"使其点击 在新窗口打开
演示代码<a href="https://www.php.cn/" target="_blank">PHP中文网</a>
演示地址http://php.rc238.cn/0403/demo1.html#a
![]()
1.2 常用属性值
在 href 中填写不同的属性值，使网站完成不同的操作<a href=""></a>
|序号|演示值|示例|描述|
|-|-|-|-|
|01|1.zip|<a href="1.zip"></a>|若链接文件浏览器无法识别，则自动下载|
|02|tel:|<a href="tel:10086"></a>|点击调出拨打电话界面|
|03|mailto:|<a href="mailto:123456@qq.com"></a>|点击调出邮件发送终端|
|04|#|<a href="#top"></a>|点击跳转到当前 HTML 中 ID 为 top 的 div|
当然若你本地没有打电话软件、邮件发送终端，链接是无效的，因为他调用不到
关于第一个下载，默然下载文件名为当前文件名”1.zip”
添加download=""属性，可自定义下载文件名
演示代码<a href="1.zip" download="演示.zip">点击下载</a>
演示地址http://php.rc238.cn/0403/demo1.html#b
![]()
2.列表元素
![]()
列表分为无序列表、有序列表、自定义列表
![]()
2.1 无序列表
<ul> <li>草莓</li> <li>苹果</li> <li>牛奶</li></ul>
此为无序列表，用<ul></ul>标签
没有顺序，在网页中显示为
草莓
苹果
牛奶
![]()
2.2 有序列表
<ol> <li>草莓</li> <li>苹果</li> <li>牛奶</li></ol>
此为有序列表，用<ol></ol>标签
给文本加上顺序，在网页中显示为
1.草莓 2.苹果 3.牛奶
当然这里可以给<ol></ol>加个属性start=""
设置顺序起始数字，比如
<ol start="5"> <li>草莓</li> <li>苹果</li> <li>牛奶</li></ol>
那么，在网页中显示为
5.草莓 6.苹果 7.牛奶
![]()
2.3 自定义列表
<dl> <dt>HTML</dt> <dd>超文本标记语言</dd></dl>
他更像是名词解释，在网页中显示为
HTML
超文本标记语言
![]()
3.表格 常用标签、属性
演示地址http://php.rc238.cn/0403/demo1.html
<table border="1" cellpadding="5" cellspacing="0" width="500" align="center"> <!-- border="1" 给表格加边框cellpadding="5" 设置单元变与内容之间的空间 cellspacing="0" 设置单元格与单元格之间的空间 width="500" 设置表格宽度 align="center" 居中--> <colgroup bgcolor="lightpink"> <!--整列编辑 bgcolor背景颜色 span跨越 span="2"跨越两列 --> <col /> <col bgcolor="lightgreen" /> <col bgcolor="yellow" span="2" /> <col /> </colgroup> <caption style="font-size: 1.5rem;"> <!--font-size 给表格标题设置文字大小为系统文字的1.5倍--> 员工信息表 </caption> <!--给表格分区是为了后期css、js改变表格内容时方便--> <!--表头写入 thead 标签中--> <thead bgcolor="lightblue"> <tr> <th>部门</th> <th>ID</th> <th>姓名</th> <th>职务</th> <th>电话</th> </tr> </thead> <!--内容写入tbody中，可添加多个tbody--> <tbody> <tr> <td rowspan="3" align="center">开发部</td> <!--rowspan 为合并行 合并3行--> <td>101</td> <td>小王</td> <td>主管</td> <td>188456*****</td> </tr> <tr> <td>102</td> <td>小张</td> <td>程序员</td> <td>156321*****</td> </tr> <tr> <td>103</td> <td>小李</td> <td>实习生</td> <td>158654*****</td> </tr> </tbody> <tbody> <tr> <td rowspan="3" align="center">销售部</td> <td>104</td> <td>小马</td> <td>主管</td> <td>156321*****</td> </tr> <tr> <td>105</td> <td>小刘</td> <td>客服</td> <td>156789*****</td> </tr> <tr> <td>106</td> <td>小朱</td> <td>实习生</td> <td>188654*****</td> </tr> </tbody> <!--底部写入tfoot中--> <tfoot bgcolor="#c7b440;"> <tr> <td>备注：</td> <!--colspan 为合并列 合并4列--> <td colspan="4">所有员工离职必须提前三十天提交书面申请</td> </tr> </tfoot></table>
![]()
4.表单常用标签及属性
为了方便查看，我把标签及属性的解释全部注释在了代码中
演示地址http://php.rc238.cn/0403/demo2.html
<main> <h3>用户注册</h3> <form action=""> <!--创建表单--> <!--不同表单写入不同section中，方便后期查看修改，代码美观--> <section> <!--label中的for要跟input中的id关联，这样用户点击label是自动选中对应input--> <label for="username">用户名：</label> <input type="text" id="username" name="username" placeholder="不少于六位" maxlength="20" required autofocus /> <!-- type规定输入框格式： text:文本 password：密码 radio：单选框 checkbox：复选框 必须要有name属性，属性值为上传服务器是的变量名 placeholder：给输入框添加一个提示 maxlenth：当前输入框最多输入多少文字 required：规定当前输入框是不是必填项 autofocus：自动获取焦点到当前输入框 checked：为默认选中 checked autofocus required 均为布尔值，出现即为true/真 否则不要写--> </section> <section> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="不少于六位" size="20" required /> </section> <section> <label for="secret">性别:</label> <div> <!--当我们进行发送的时候，还少了一个值，单选按钮和复选按钮不是用户输入的，而是选择的，是预定义值，所以一定要有value属性，给个值，通常用数字1、2表示，但为了代码直观可以直接给id名--> <input type="radio" name="gender" id="male" value="male" /><label for="male" >男</label > <input type="radio" name="gender" id="female" value="female" /><label for="female" >女</label > <input type="radio" name="gender" id="secret" value="secret" checked /><label for="secret">保密</label> </div> </section> <section> <label for="programme">兴趣：</label> <div> <input type="checkbox" name="hobby[]" id="game" value="game" checked /><label for="game">游戏</label> <input type="checkbox" name="hobby[]" id="travel" value="travel" /><label for="trael">旅游</label> <input type="checkbox" name="hobby[]" id="shoot" value="shoot" /><label for="shoot" >摄影</label > <input type="checkbox" name="hobby[]" id="programme" value="programme" checked /><label for="programme">编程</label> </div> </section> </form></main>
