美文网首页
2020-07-08 H5 笔记

2020-07-08 H5 笔记

作者: 林天霖TayLin | 来源:发表于2020-07-08 19:50 被阅读0次

锚点链接 / 锚点定位

例如
百度百科中点击某个链接
会跳转到当前页面相对应的部分去

<!-- HTML -->
<a href="#two"> 点击跳转到第二集</a>
<h3 id="two">第二集剧情介绍</h3>

显示特殊字符

<!-- HTML -->
  重点记住前三个即可
  空格 &nbsp;
  大于 &gt;
  小于 &lt;
  和号 &amp;
  人民币 &yen;
  版权 &copy;
  注册商标 &reg;
  摄氏度 &deg;
  正负号 &plusmn;
  乘号 &times;
  除号 &divide;

表格

表格结构

<tr></tr> 代表一行
<th></th> 代表表头,会自动居中加粗显示

<!-- HTML -->
<!-- align设置整个表格在页面中的对齐
  border设置表格单元格的边框,设1则有边框,不设置则无
  cellpadding规定单元格内的边缘与内容之间的距离,属性值是像素
  cellspacing规定单元格与单元格之间的空白,属性值是像素 -->
<table align="center/left/right" border="1/ " cellpadding="20" cellspacing="5">
<thead>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td></td> 
    <td></td> 
    <td></td>
  </tr>
</tbody>
</table>

合并单元格

在td中设置colspan="x"即可将x个同行单元格合并
在td中设置rowspan=“x”即可将x个同列单元格合并

<!-- HTML -->
<table border="1">
        <tr>
            <td>单1</td>
            <td>单1</td>
            <td colspan="3">横3</td>
        </tr>
        <tr>
            <td rowspan="3">竖3</td>
            <td>单1</td>
            <td>单1</td>
            <td>单1</td>
        </tr>
        <tr>
            <td>单1</td>
            <td colspan="2" rowspan="2">横2竖2</td>
        </tr>
        <tr>
            <td>单1</td>
        </tr>
    </table>

列表

无序列表

<!-- HTML -->
<ul>
        <li>apple</li>
        <li>banana</li>
        <li>orange</li>
</ul>

有序列表

<!-- HTML -->
    <ol>
        <li>啊</li>
        <li>是啊</li>
        <li>我呀</li>
    </ol>

自定义列表

<!-- HTML -->
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>抖音</dd>
        <dd>微信公众号</dd>
    </dl>
    <dl>
        <dt>联系我们</dt>
        <dd>电话</dd>
        <dd>邮箱</dd>
        <dd>地址</dd>
    </dl>
</dl>

表单

input

给input checked设置checked,则打开页面默认勾选
而input radio也可以斯通checked属性
给input设置maxlength可限制输入字数
<input type="file> 用于上传文件

label

设置了for属性之后,点击label也可以将焦点对到相对应的input之中

<!-- HTML -->
<label for="inputUserName">用户名</label>
<input type="text" id="inputUserName">

文本域

<!-- HTML -->
<textarea cols="50" row="5"></textarea>

cols设置一行50个字 row设置大小为5行

相关文章

网友评论

      本文标题:2020-07-08 H5 笔记

      本文链接:https://www.haomeiwen.com/subject/wnmccktx.html