表格，表单，HTML5新增标签和属性

最新推荐文章于 2022-12-04 22:35:55 发布

海伦•

最新推荐文章于 2022-12-04 22:35:55 发布

阅读量722

点赞数

分类专栏： ==========前端========= HTML5

本文链接：https://blog.csdn.net/qq_42794545/article/details/88812382

版权

==========前端========= 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

HTML5

3 篇文章 0 订阅

订阅专栏

1.表格：不是用来布局的而是用来处理数据的

标签 table

<caption>text</caption> 标题
<thead>tr th </thead> 表头
<tbody>tr td </tbody> 表格

属性

border 边框
cellspacing 边框间距
cellpadding 数据与边框间距
width table的宽度
hight table的高度
align 行位置 center left right

合并单元格

rowspan 跨行合并，合并列
colspan 跨列合并，合并行

实战代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格</title>
</head>
<body>
    <table border="1" cellspacing = "0" cellpadding = "30" width = "500" hight = "80" align = "center">
        <thead>
            <tr>
                <th>姓名</th><!-- 表头· -->
                <th>电话</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td><!-- 表内数据 -->
                <td>18832837838</td>
                <td>23</td>
            </tr>
            <tr>
                <td>小华</td>
                <td>13382773773</td>
                <td>12</td>
            </tr>
        </tbody>
</body>
</html>

2.表单（重点）

表单控件

input 单控件

可以通过type 属性来控制包括：text，passworld，radio，checkbox，button，submit,image,file

value:默认赋初始值，其中只有image初始值用src

name：通过name来指明表单视为同一组

checked：可以为一组默认勾选结果

maxlength：最多输入位数

lable标签

只需将input给包裹，就可以增强用户体验，当点击到当行就会自动锁定到当行文本框

如果有多个文本框，可以通过for = “”配合id来进行锁定当行指定的文本框

textarea双控件

与input不同，他可以换行，比如留言板就用textarea

select下拉菜单

option ：选项

selected = ”selected”：默认选中项

form 表单域

action：传送到的地址

method：方法，post（常用），get

name：哪个表单

实战代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单</title>
</head>
<body>
       <h4>教学综合信息服务平台</h4> 
<!-- 文本 -->
       <form action="dem.php" method="POST" name="demo"></form>
        <!-- <img src="http://jwxt.hbnu.edu.cn/zftal-ui-v5-1.0.2/assets/images/login_bg_pic.jpg"><br> -->
        <b> 用户注册</b><br>
        <label>学号<input type="text" value="" maxlength="8"/></label><br>
        <label>密码<input type="password" value=""/></label><br><!-- 密码 -->
        <label><textarea>请输入留言</textarea></label>

<!-- 单复选框 -->
        <p>性别<input type="radio"/ checked = "checked" name="sex">女<input type="radio" name="sex"/>男</p>
        <p>爱好<input type="checkbox" name="hobby"/>足球<input type="checkbox"  name="hobby"/>排球<input type="checkbox"  name="hobby"/>网球</p>
        
<!-- 下拉框 -->
        <p>籍贯</p>
        <select selected="selected">
            <option>北京</option>
            <option>武汉</option>
            <option>广东</option>
            <option>上海</option>
        </select>
        <br>
<!-- 按钮组 -->
        <label><input type="image" src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg" width="100" height="30"/></label><br>  
        <label><input type="submit" /></label>
        <label><input type="reset" value="重置"/></label><br/>
        <label><input type="file"/></label><br><!-- 文件 -->
        </form><!-- 表单域 -->

</body>
</html>

3.HTML5新增标签和属性

新增标签

header 定义页面的头部
nav 定义导航栏，链接的部分
footer 定义页面的底部标签
artical 定义文章
section 定义文章的小区域
aside 定义侧边栏

datalist元素

内部使用option。与select的option相似。比select更加友好，有提示功能。

与input的list = “id” 与datalist的id结合使用

fieldset标签

有分组打包，与legend标题配合一起使用

新增input 表单

email
tel
number
url
search
range 滑块
time
date
month
week
color

属性

placeholder 占位符

autofocus 自动获得焦点

multiple 实现多文件上传

altocomplete 自动记录完成要求有提交按钮，要有name值

可以= “on” 开，可以 = “off” 关

required 不能为空

acceskey 光标定位键设置 =“s”。alt + s 则可以定位光标

实战代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增标签和属性</title>
</head>
<body>
    <form action="dem.php" method="POST" name="form1">
      <fieldset >
          <legend>学生档案</legend>
          <label>姓名<input type="text" placeholder="请输入姓名" required autocomplete name="s" altofocus/></label><br><br/>
          <label>手机号<input type="tel" required/></label><br/><br/>
          <label>邮箱<input type="email"/></label><br/><br/>
          <label>所属学院<input/ list="class" placeholder="请选择学院" required></label><br/><br/>
          <datalist id="class"> 
              <option>java学院</option>
              <option>软件学院</option>
              <option>PHP学院</option>
              <option>计科学院</option>
          </datalist>
          <label>出生日期<input type="date"/></label><br/><br/>
          <label>成绩<input type="number" maxlength="3"/></label><br/><br/>
          <label>毕业时间<input type="date"/></label><br/><br/>
          <input type="reset"/><input type="submit"/>
      </fieldset>

    </form>
</body>
</html>

视频和音频播放

在网络上分享时复制html网址
<audio src = "" autoplay controls loop = "2">
<vedio src = "" autoplay controls >

实战代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频和音频</title>
</head>
<body>
    <!-- <audio src="D:\VsCode编写文档\COOD\.vscode\Deorro - Bootie In Your Face (No Rock Drop) (Radio Edit).mp3" autoplay controls  loop="2"></audio> -->
    <embed width="500" height="300" src="http://www.aipai.com/c49/OjgmJSIqJC1qJWQgKg/playerOut.swf" quality="high" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"/>
    <br/><br/>
    <audio  autoplay = "autoplay" controls>
        <source src="..\Deorro - Bootie In Your Face (No Rock Drop) (Radio Edit).mp3" />
        <source src="..\Deorro - Bootie In Your Face (No Rock Drop) (Radio Edit).ogg" />
        您的浏览器不支持播放音频
    </audio><br/><br/>
    <video autoplay="autoplay" controls width="500",height="300">
        <!-- <source src="..\01-蓝桥杯介绍.avi"/> -->
        <source src="..\2017-Java-B题0简要说明.mp4"/>
        <source src="..\2017-Java-B题0简要说明.ogg"/>
        您的浏览器不支持播放音频

    </video>
</body>
</html>