HTMl 中的 a 链接、列表、表格、表单元素常用属性

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>