html标签：表格、列表、图片、文字、表单、以及h5新增特性

最新推荐文章于 2022-10-27 15:21:53 发布

会给自己买_�

最新推荐文章于 2022-10-27 15:21:53 发布

阅读量1.1k

点赞数

文章标签：前端 html

本文链接：https://blog.youkuaiyun.com/qq_53787962/article/details/127039602

版权

本文详细介绍了HTML中的表格、列表、图片、文字、表单的基本用法，并着重讲解了HTML5中的新特性，包括语义化标签、新增的input类型、数据列表、fieldset、mark标记、多媒体标签以及度量衡和进度条。这些新特性为网页开发提供了更多功能和更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
一、表格
二、列表
三、图片
四、文字
五、表单
六、h5新增特性
- 1.语义化标签
- 2.表单新增input属性
- 3.datalist
- 4.filedset
- 5.mark标记标签
- 6.多媒体标签
- 7.度量衡/进度条
总结

前言

以下内容包括表格、列表、img、文字、表单以及h5新增特性

一、表格

table表格

border增加边框

cellspacing盒子与边框的距离

cellpadding改变盒子的内边框，改变表格的大小,单元格间隙

caption表格标题

表格结构：

thead表头

tboday表体

tfoot表尾

tr：table rower行

td ：table clower列

rowspan合并列，注释

colspan合并行，注释

<table border="1px" cellspacing="0" cellpadding="35px">
        <caption>购物车</caption>
        <tr>
            <!-- 表头td改为th -->
            <td rowspan="2">名称</td>
            <td colspan="2" style="text-align:center ;">日期</td>
            <!-- <td>日期</td> -->
            <td rowspan="2">小计</td>
        </tr>
        <tr>
            <!-- <td>名称</td> -->
            <td>重量</td>
            <td>单价</td>
            <!-- <td>小计</td> -->
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <!-- td该尾tf -->
        <td colspan="3" style="text-align: center;">总价</td>
        <!-- <td>总价</td> -->
        <!-- <td>总价</td> -->
        <td>价格</td>
        </tr>
    </table>

二、列表

ol--li有序列表

ul--li无序列表（常用）

dl--dd--dt自定义列表

<!-- 无序列表 -->
<ol style="list-style: none;">
    <li>我是1</li>
    <li>我是2</li>
    <li>我是3</li>
</ol>
<!-- 有序列表 -->
<ul>
    <li>我是1</li>
    <li>我是2</li>
    <li>我是3</li>
</ul>
<!-- 自定义列表 -->
<dl>
    <dd>tb1
        <dt>w1</dt>
        <dt>w2</dt>
        <dt>w3</dt>
    </dd>
    <dd>tb2</dd>
</dl>

三、图片

img图片标签
src:图片路径地址
alt：图片加载失败提示
width/height:只给一条属性时，另一条属性也会给相同值

<a href=""></a>
    <img src="../index/img/sn.png" alt="文本提示" width="200px">
    
    <a href="https://www.baidu.com">
    <img src="./../ED88461B707481C6A154D04E7555319A.png" alt="">
    </a>

<base href=".././111">
    <!-- base中herf:全局路径，会影响所有的路径地址 -->

四、文字

    <i>倾斜文字</i>
    <em>倾斜文字</em>

    <b>加粗文字</b>
    <strong>加粗文字</strong>

    <u>下划线文字</u>
    <ins>下划线文字</ins>
    
    <s>删除线文字</s>
    <del>删除线文字</del>

五、表单

form表单标签

action跳转地址url或接口

提交方式：post更安全,需询问情况 get更快，见人就发

    <!-- 表单 -->
    <form action="./1_表格.html">
        账户<input type="text" name="lufang">
        密码<input type="password" name="123456">

        <!-- label选中文字达到选择框功能(for绑定id) -->
        <label for="one">
            <input type="radio" name="1" id="one">变大
        </label>
        <input type="radio" name="1">变小

        <!--多选框-->
        <input type="checkbox">苹果
        <input type="checkbox">香蕉
        <input type="checkbox">西瓜

        <!-- 文件提交 -->
        <input type="file">

        <!-- 类似提交按钮 -->
        <input type="image">

        <!-- 普通按钮 -->
        <input type="button" value="按钮">

        <!-- 提交按钮 -->
        <input type="submit">

        <!-- 重置 -->
        <input type="reset">

        <!-- 下拉选择 -->
        <select>
            <option value="">成都</option>
            <option value="">重庆</option>
            <option value="">深圳</option>
        </select>

        <!-- textarea文本输入框中    resize是否支持下拉拖拽 -->
        <textarea name="" id="" cols="30" rows="10" style="resize:none;"></textarea>
    </form>

表单练习

<form action="">
    <span style="font-size: 30px;">注册新用户</span>
    <span>我已经注册，现在登录</span>
    <hr><br>
    <input type="text" placeholder="验证码" autofocus="" required="">
    <input type="image"><br>
    <input type="text" placeholder="手机号" autofocus="" required="">
    <input type="button" value="获取验证码"><br>
    <input type="text" placeholder="手机验证码" size="33" autofocus="" required=""><br>
    <input type="text" placeholder="设置密码" size="33" autofocus="" required=""><br>
    <input type="text" placeholder="再次输入密码" size="33" autofocus="" required=""><br>
    <input type="checkbox" required="">请阅读
    <a href="../2_特殊字符.html" style="color: red;">VANCL客诚品服务条款</a><br>
    <input type="button" value="立即注册" width="50" height="15">
</form>

六、h5新增特性

h5新增特性：语义化标签、表单新增input属性、数据列表datalist、filedset、mark标记标签、多媒体标签、度量衡meter/progress进度条

h5：写网页、游戏、小程序、app、多终端

1.语义化标签

语义化标签，类似于div

    <header>头部</header>
    <nav>导航栏</nav>
    <aside>侧边</aside>
    <footer>底部</footer>
    <section>区域</section>
    <article>文章</article>

2.新增input type属性

<form action="./2_特殊字符.html">
        <!-- 新增input type属性值 -->
        自由拖动滑块<input type="range">
        年月日 <input type="date">
        取色器<input type="color">
        搜索框<input type="search">
        url<input type="url">
        数字<input type="number">
        时分<input type="time">
        年月<input type="month">
        星期<input type="week">
        邮箱<input type="email">
        显示<input type="show">
        隐藏<input type="hidden">
        多文件上传<input type="text" multiple="">
        <input type="text" placeholder="用户提示文字输入" autofocus="默认输入框" size="10">
       
        <!-- autocomplete首先需要提交按钮,表单必须给name值,表示记录之前输入的信息,完成自动输入功能 -->
        自动完成记录<input type="autocomplete">
        必填框<input type="required">
        快速获取焦点<input type="accesskey">
        禁止<input type="disabled">
       
    </form>

3.数据列表datalist

<!-- datalist定义选项列表与Input结合使用 -->
<input type="text" list="课程">
<datalist id="课程">
    <option value=" ">语文</option>
    <option value=" ">数学</option>
    <option value=" ">英语</option>
</datalist>

4.fieldset

<!-- fieldset可将表单内的相关元素分组打包,与legend搭配使用 -->
<fieldset>
    <!-- 外边框的标题 -->
    <legend>登录页面</legend>
    用户名<input type="text"><br><br>
    密码<input type="password">
</fieldset>

5.mark标记

<!-- mark标签用于定义带有记号的文本,在需要突出显示文本时可使用 -->
    Lorem ipsum <mark>dolor</mark> sit amet, consectetur adipisicing elit. Dolor error quos ut tempora porro at sapiente
    laboriosam neque? Quas laudantium porro laboriosam velit quibusdam reiciendis possimus. Accusantium, mollitia! Est,
    magni?

6.多媒体标签

    <embed src="" type="" width="" height="">

    <!-- source元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件，播放音频MP3 -->
    <source src="" type=""></source>

    <audio src="">您的浏览器不支持h5</audio>


    <!-- video元素提供播放/暂停和音量控件来控制视频,播放视频Mp4 -->
    <video src="" width="" height=""></video>

video常见属性:

autopaly自动播放

controls播放控件

muted静音

loop重新播放

preload预先加载视频

poter加载等待画面

7.度量衡

meter:定义度量衡,仅用于已知最大值和最小值的度量。

比如:磁盘使用情况,查询结果的相关性等.不能当作进度条使用

当值处于最小值和最大值之间时值显示绿色

当值小于最小值时不显示,当值大于最大值时显示绿色全满

当值处于最低值和最高值之间时值显示绿色,当值低于最低值或高于最高值时显示橙色

注意:IE浏览器不支持meter

progress:定义运行中的任务进度,与JavaScript结合使用,不能作为度量值使用

    <meter min="4" max="10" value="9" low="6" high="8"></meter>

总结

以上就是今天要讲的内容。