html代码实现表格_印象笔记表格怎么调整宽度

2022-09-22 16:38:52 浏览数 (1)

大家好，又见面了，我是你们的朋友全栈君。

学习更多建议菜鸟教程

Target使用

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像,视频</title>
</head>
<body>
<img src="srcimageli.webp" width="300px"/>
<video controls autoplay>
    <source src="srcimagevedio.avi">
    <source src="srcimagevedio.mp4">
    <source src="srcimagevedio.webm">
</video>
<a name="target"></a>
<p>
    憨憨仲倩
</p>
</body>
</html>
代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<a href="Test.html#target">礼物</a>
</body>
</html>

Link的使用

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="srccssindex.css">
</head>
<body>
<div calss="head">头部</div>
<div calss="mid">
    <div class="mid-col">左部</div>
    <div class="mid-col">中部</div>
    <div class="mid-col">右部</div>
</div>
<div id="test" class="foot">底部</div>
</body>
</html>
代码语言：javascript复制
*{
    margin: 0;
    padding: 0;
}
div{
    height: 100px;
    border: 1px solid slateblue;
}
.mid-col{
    float: left;
    width: 33%;
}
#test{
    color: coral;
}

表格表单

一、列表 带数字排序的列表：有序列表 带圆点的列表：无序列表 什么都不带的列表：定义列表 二、表格 三、表单

快捷将表格：

table>(tr>th*n) (tr>td*n)*

<ul><li></li></ul> <ol><li></li></ul> <dl><dt></dt><dl> <form action=”#” method=”get”> <p><input type=”类型” name=”自己随便写，最好和类型对应” ></p> type类型有：text,password,submit,reset,radio(圆框)，checkbox(方框) <form class=”a” action=”#” method=”get”> <p><span>用户名：<input type=”text” name=”username”></span></p> <p><span>密码：<input type=”password” name=”pwd”></span></p> <p><input type=”submit” value=”登录就送998″> &nbsp; <input type=”reset”></p> <p>请选择职业<input type=”radio” name=”job” value=”teacher”>教师 <input type=”radio” name=”job” value=”student”>学生 <input type=”radio” name=”job” value=”developer”>程序员 <input type=”radio” name=”job” value=”other”>其他</p> 文本框：<p><textarea name=”feedback” id=”” cols=”30″ rows=”10″> </textarea></p> 下拉选择用select <p><select name=”province”> <option value=””>请选择省份</option> <option value=”beijing” >北京</option> <option value=”shanghai”>上海</option> <option value=”nanjing”>南京</option> </select></p>

时间： <p><input type=”datetime-local” name=”datetime-local”></p> 选择数字并且可以限定最大值最小值： <p><input type=”number” name=”num” value=”1″ min=”0″ max=”10″></p> 文本： <p><input type=”range” value=”30″ min=”1″ max=”10″></p> 上传文件：<p><input type=”file” name=”as”></p> 点击图片： <p><input type=”image” src=”image/tubiao1.webp” width=”100px” height=”100px” οnclick=”javascript:alert(‘我是个图片’)”> <input type=”image” src=”image/tubiao.webp” width=”100px” height=”100px” οnclick=”javascript:confirm(‘我是个图片’)”></p>

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul>li{
            list-style-type:georgian;
        }
    </style>
</head>
<body>
<!--无序列表-->
<ul>
    <li><a href="#">能有新闻?</a></li>
    <li>真没有</li>
    <li>你猜有没有</li>
    <li>嘿，还真没有</li>
</ul>
<!--有序列表-->
<ol>
    <li>哈哈</li>
    <li>呵呵</li>
    <li>喂喂</li>
    <li>嗯嗯</li>
</ol>
<!--定义列表-->
<dl>
    <dt>亚斯莫拉</dt>
    <dt>哟西</dt>
    <dt>哈嘿</dt>
</dl>
</body>
</html>
代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
            table.a{
                border:1px solid dodgerblue;}

    </style>
</head>
<table border="3px">
    <tr>
        <!--th代表表头-->
    <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
  <tr>
      <!--tr代表行-->
      <td>03</td>
      <!--td代表普通单元格-->
      <td>张三</td>
      <td>20</td>
  </tr>
</table>

<table class='a' border="1px">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>23</td>
        <td>男</td>
    </tr>
    <tr>
        <td>范梦园</td>
        <td>22</td>
        <td>男</td>
    </tr>
</table>
</body>
</html>
代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <style>
        form.a{
            margin: 1px;
            text-align: center;
            padding:50px;
            font-weight: bold;
            font-size: 20px;
        }
        span{
            border:1px darkcyan;
        }
body{
    background-image: url("image/zhi.jpg" ) ;
    background-repeat: repeat;
    background-position: 1px,1px;
}
    </style>
</head>
<body>
<form class="a" action="#" method="get">
    <p><span>用户名：<input type="text" name="username"></span></p>
    <p><span>密码：<input type="password" name="pwd"></span></p>
    <p><input type="submit" value="登录就送998"> &nbsp;
    <input type="reset"></p>
  <p>请选择职业<input type="radio" name="job" value="teacher">教师
  <input type="radio" name="job" value="student">学生
  <input type="radio" name="job" value="developer">程序员
  <input type="radio" name="job" value="other">其他</p>
<!--checked表示默认，同名的只能单选，不同名可一起选-->
    <p>请选择爱好<input type="checkbox" name="hobbies" value="basketball">篮球
        <input type="checkbox" name="hobbies" value="swimming">游泳
        <input type="checkbox" name="hobbies" value="run">跑步
    </p>
    <p><select name="province">
        <option value="">请选择省份</option>
        <option value="beijing" >北京</option>
        <option value="shanghai">上海</option>
        <option value="nanjing">南京</option>
    </select></p>
    <!--selected表示默认，加在value值后-->
    <p><textarea name="feedback" id="" cols="30" rows="10"></textarea></p>
<p><input type="datetime-local" name="datetime-local"></p>
    <p><input type="number" name="num" value="1" min="0" max="10"></p>
    <p><input type="range" value="30" min="1" max="10"></p>
    <p><input type="file" name="as"></p>
    <p><input type="image" src="image/tubiao1.webp" width="100px" height="100px"
              onclick="javascript:alert('我是个图片')">
<input type="image" src="image/tubiao.webp" width="100px" height="100px"
    onclick="javascript:confirm('我是个图片')"></p>

</form>
<form>
    <p><input type="image" src="image/tubiao1.webp" width="100px" height="100px"></p>
</form>
</body>
</html>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/169636.html原文链接：https://javaforall.cn

java javascript jquery http html

0 人点赞