对应[星月教你做网站]视频P5-P9

5. Html5表格元素

表格三大元素 < table>, < tr>一行， < td>一个单元格

td 单元格居左
th 用在表的第一行，单元格内字体加粗且居中
thead 表头
tbody 表内容
tfoot 表脚

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建表格</title>
</head>
<body>
<table border="1px"><!--边框属性，是个1px（像素）大小的边框，不建议用border元素-->
    <thead>
    <tr>
        <th>用户名</th>
        <th>性别</th>
        <th>密码</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>Admin</td>
        <td>男</td>
        <td>123</td>
    </tr>
    <tr>
        <td>魔法学院</td>
        <td>男</td>
        <td>123</td>
    </tr>
    <tr>
        <td>星星</td>
        <td>男</td>
        <td>123</td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <td>用户名</td>
        <td>性别</td>
        <td>密码</td>
    </tr>
    </tfoot>
</table>

<br><!--换行，下面为单元格合并-->
<table border="1px">
    <tr>
        <th rowspan="2">aaaaa</th><!--合并第1、2行的首个单元格，其实是扩展的意思-->
        <th>aaaaa</th>
        <th>aaaaa</th>
        <th>aaaaa</th>
    </tr>

    <tr>

        <td colspan="2">aaaaa</td><!--合并第二行的两个列单元格-->
        <td>aaaaa</td>
    </tr>

    <tr>
        <td>aaaaa</td>
        <td>aaaaa</td>
        <td>aaaaa</td>
        <td>aaaaa</td>
    </tr>
</table>
</body>
</html>

运行结果

6. Html5列表元素

< ol> 有序列表

   属性：type(设置样式)， reversed(降序)

< ul> 无序列表
< li> 表示列表中的项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建列表</title>
</head>
<body>
<ol>
    <li>处理图像</li>
    <ol type="a"><!--将以下内容设置为处理图像的二级标题，做法:再新建一个有序列表-->
    <li>插入图片</li>
    <li>提取文本</li>
    <li>随便输</li>
    <li>多打几个字</li>
    <li>就这样吧</li>
    </ol>
</ol>

<ol reversed><!--reversed元素，没有值-->
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ol>

<ol type="A"><!--列表标号，支持type有数字，大小写字母、罗马数字-->
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ol>

<ul><!--无序标签-->
    <li>a</li>
    <li>a</li>
    <li>a</li>
</ul>
</body>
</html>

输出结果

7、表单(form)元素上

表单：HTML中获取用户输入的手段（即用户能进行输入的文本框，如登录账号密码，搜索引擎搜索输入）

关键表单元素：

< form>:创建一个表单，属性包含method, action
< input>:用于搜集用户信息，必须在form里面，包含属性Type（input元素的类型）, Name…

具体元素介绍：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建表单</title>
</head>
<body>
<form>
    <input><!--一个单行的文本框，默认type=text-->
    <input type="text">
    <input type="text" value="魔法学院"><!--value即占位符，默认填充一个值到文本框里-->
    <input type="text" placeholder="输入密码"><!--placeholder，不占文本框内的位置，字体变暗，给一个提示-->
    <input type="text" placeholder="输入maxlength" maxlength="8"><!--最大能输入字符个数为8,若要限制最小长度只能用javascript-->
    <br><br><!--换行符，两行-->
    <input type="text" placeholder="输入密码" size="50"><!--单行文本框延长，一次能显示出来50个字符-->
    <br><br>
    <input type="text" value="输入密码" readonly><!--只读，文本框里不能写东西进去-->
    <br><br>
    <input type="password" placeholder="密码"><!--password上传到服务器是明文，显示出来是可以保密的点-->

<!--    多行文本框-->
<!--    row即设置文本框的区域大小有20行，同样是个拓宽区域的功能-->
    <textarea rows="20" >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</textarea>
</form>
</body>
</html>

8、表单元素中

<form>
    <input type="button" value="按钮">
    <button>按钮2</button><!--js合作并且作为绑定事件的-->
    <input type="submit" value="提交"><!--提交表单，即提交到服务器-->
</form>

在这里插入图片描述

讨论以下几个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建表单2</title>
</head>
<body>
<form>
<!--    按钮属性-->
    <input type="button" value="按钮">
    <button>按钮2</button><!--js合作并且作为绑定事件的-->
    <input type="submit" value="提交"><!--提交表单，即提交到服务器，涉及php-->

    <br><br>
<!--    range型input元素，一个可滑动的进度条-->
    <input type="range" min="-100" max="500" step="100"><!--用ie浏览器才能显示最小最大值范围-->
<!--    step是每次滑动的距离，即只能整百地显示和滑动，value是滑动片的初始位置，默认在正中间（平均值）-->
    <input type="range" min="-100" max="500" step="100" value="-100">
<!--    文本框只能输数字（手动）,value为先设置一个框内默认值-->
    <input type="number" min="-100" max="100"  value="0"><!--min,max限制数字变化范围-->

    <!--    checkbox型input元素，一个方形勾选框，只有勾了才上传到服务器-->
    <input type="checkbox">选择

    <!--    checkbox型input元素，一个圆形点选框，选中不可取消-->
   <input type="radio">选择2
<!--    实现三选一的一个示例,使用属性name实现-->
    <br>
    程序员中最帅的一个是谁
    <br>
<!--    checked即默认点选，使得初始有选项被选中，保证有值提交-->
    <input type="radio" name="a" checked>小明
    <input type="radio" name="a">张三
    <input type="radio" name="a">小月

    <br><br>
<!--    生成选项列表select和数据列表datalist-->
    你最喜欢吃的水果？
    <select>
        <option>苹果</option>
        <option>葡萄</option>
        <option>桃子</option>
    </select>
<!--    datalist需文本框才能实现，设置一个id,引导进文本框，也可手动输值-->
    <input type="text" list="datalist1">
    <datalist id="datalist1">
        <option>苹果</option>
        <option>葡萄</option>
        <option>桃子</option>
    </datalist>

</form>

</body>
</html>

输出：
ie浏览器在这里插入图片描述

9、表单元素下

用input元素获取有规定格式的字符串
用input元素上传文件
| 属性 |作用 |
|Multiple|一次允许上传多个文件|
| Required |必须上传一个文件 |

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建表单3</title>
</head>
<body>
<form>
    <input type="email"><!--能判断输入数据是否符合email格式-->
    <input type="tel">
    <input type="url">

    <br>
    <input type="date"><!--获取时间-->
<!--    获取颜色值-->
    <input type="color">
    <input type="search"><!--获取搜索用词,就是一个文本框-->
    <br>
<!-- 生成隐藏的数据项,不显示，提交表单时依旧存在 -->
    <input type="hidden" value="123">
    <br>
<!--    生成图像按钮,设置长宽均为80x80-->
    <input type="image" src="pic.jpg" width="80px">
<!--    上传文件-->
    <input type="file">
</form>

</body>
</html>

显示：
在这里插入图片描述

csdn_09

发布了6 篇原创文章 · 获赞 0 · 访问量 103

私信关注

HTML学习笔记三

5. Html5表格元素

6. Html5列表元素

7、表单(form)元素上

8、表单元素中

9、表单元素下

猜你喜欢