怎么获取自动生成的tbody中的tr标签的属性值_HTML常用标签

最新推荐文章于 2022-10-13 10:45:17 发布

weixin_39553757

最新推荐文章于 2022-10-13 10:45:17 发布

阅读量1.4k

点赞数

文章标签：怎么获取自动生成的tbody中的tr标签的属性值

a标签的用法：

a标签主要有href，target，download，rel=noopener四个属性，主要有跳转外部页面，跳转内部锚点和跳转到邮箱或电话等作用

download：下载网页

href：后面添加网址

href的取值

1.网址：推荐使用第三种方式，它会自动选择适用https，还是http

   1. <a href="https://google.com">超链接</a>
   2. <a href="http://google.com">超链接</a>
   3. <a href="//google.com">超链接</a>     无协议的网址

2.路径：

<a href="/a/b/c.html">c.html</a>
<a href="a/b/c.html">c.html</a>

3.伪协议：

<a href="javascript:;">空的伪协议</a>   -----一般用来做点击无任何反应的标签
<a href="mailto:xxxxxxx@qq.com">发邮件</a>
<a href="tel:12345678">打电话给我</a>

4.锚点：

<p id="aaa"></p>
<a href="#aaa"></a>

target：指定在哪个窗口打开链接，默认有_blank,_self,_top,_parent四个属性值

<a href="//baidu.com" target="blank">baidu </a>    -----新窗口打开
<a href="//baidu.com" target="_self">baidu </a>    -----在当前页面加载（默认）
<a href="//baidu.com" target="_top">baidu </a>    -----在当前页面所有iframe最上面的窗口加载
<a href="//baidu.com" target="_self">baidu </a>    -----在当前连接所在的iframe上一层加载
<a href="//baidu.com" target="xxx">baidu </a>    -----如果有窗口就叫xxx没有创建一个叫xxx

table标签

相关的标签：

thead：表头

tbody：表格内容

tfoot：表尾

tr：表格中的行

td：表格的主体内容

th：表格内的表头单元格

border-spacing：控制border之间的距离

border-collapse：合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td,
        th {
            border: 1px solid red;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th></th>
                <th>张三</th>
                <th>李四</th>
                <th>王五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>语文</th>
                <td>66</td>
                <td>77</td>
                <td>88</td>
            </tr>
            <tr>
                <th>数学</th>
                <td>33</td>
                <td>22</td>
                <td>11</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总分</th>
                <td>99</td>
                <td>99</td>
                <td>99</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

img 标签

作用：发出一个get请求，展示一张图片

属性：

height，width：图片设置宽高，最好不要同时设置宽高让图片变形

alt：图片加载失败显示

src：图片地址

事件：

onload/onerror：可用于用户体验的优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="4.jpg" id="xxx" alt="松鼠" width="100px">
    <script>
        xxx.onload = function () {
            console.log("图片加载成功");
        }
        xxx.onerror = function () {
            console.log("图片加载失败");
            xxx.src = "img/404.jpg";
        }
    </script>
</body>
</html>

响应式：给图片设置max-width：100%属性

form标签

作用：发送get或者post请求，然后刷新页面

input标签：input的工作方式相当程度取决于type的属性值

输入框：

<input type="text" value="请输入用户名" />

密码框：

<input type="password" />

单选框（checked默认）：

<input type="radio" name="sex">男
<input type="radio" checked name="sex">女

复选框（checked默认选中）：

<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">足球
<input type="checkbox" checked name="hobby">排球

表单提交按钮：

<input type="submit" value="提交按钮">

重置按钮（将表单所有内容重置为默认值）：

<input type="reset" value="重置按钮">

没有默认行为的按钮：

<input type="button" value="确认按钮">

让用户选择文件的控件：

<input type="file" />
<input type="file" multiple />    -----可以多选

多行纯文本编辑控件：

<textarea name="" id="" cols="30" rows="10">

提供选项菜单的控件：

<select name="" id="">
    <option value="">上海</option>
    <option value="">北京</option>
    <option value="" selected>广州</option>
</select>

weixin_39553757

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫