HTML列表、表格、表单、超链接、音视频标签、内嵌

最新推荐文章于 2024-08-05 22:35:13 发布
最新推荐文章于 2024-08-05 22:35:13 发布
阅读量923 收藏 11
点赞数 5
分类专栏： HTML学习 文章标签： html5 html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shao_xuan_/article/details/120593597
版权

HTML列表、表格、表单、超链接、音视频标签、内嵌

列表

1、无序列表

标签符号:<ul></ul>用于页面中没有顺序的列举项。
格式：<ul type='值'></ul>type属性设置标号的类型。值如下：

取值作用
disc实心圆点
circle空心圆点
square实心方块

2、有序列表

标签符合<ol></ol>用于说明页面中的某些成分，需要按特定的顺序排列。有序的每一项都有连续的编号。
格式：<ol type="值" start=""></ol>type设置标号的类型，start为起始顺序。值如下：

取值作用
1显示数字
A显示大写字母
a显示小写字母
Ⅰ显示大写罗马数字
i显示小写罗马数字

无序列表和有序列表之间可以相互嵌套：一个列表作为另一个列表的一部分，即多层列表。

3、无序有序列表嵌套练习

// 无序有序列表嵌套练习
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人喜好</title>
</head>
<body>
    <p>列表练习</p>
    <ol>
        <li>你更喜欢吃那种水果（）</li>
            <ol type="A">
               <li>草莓</li>
               <li>香蕉</li>
               <li>苹果</li>
               <li>西瓜</li>
            </ol>
        <li>你平时休闲经常去的地方是哪里（）</li>
        <ol type="A">
            <li>郊外</li>
            <li>商城</li>
            <li>公园</li>
            <li>酒吧</li>
         </ol>
        <li>你认为容易吸引你的人是哪类（）</li>
        <ol type="A">
            <li>有才气的人</li>
            <li>依赖你的人</li>
            <li>善良的人</li>
            <li>优雅的人</li>
         </ol>
        <li>如果你可以成为一种动物，你希望可以成为哪种（）</li>
        <ol type="A">
            <li>猫</li>
            <li>狗</li>
            <li>猴子</li>
            <li>小鸟</li>
         </ol>
        <li>你最向往的生活是（）</li>
        <ol type="A">
            <li>面朝大海，春暖花开</li>
            <li>采菊东篱下，悠然见南山</li>
            <li>空调WiFi西瓜，晚上有鱼有虾</li>
            <li>职场达人</li>
         </ol>
        <li>你喜欢的电影类型（）</li>
        <ol type="A">
            <li>动作剧</li>
            <li>喜剧</li>
            <li>爱情</li>
            <li>都一般，没有最喜欢的</li>
         </ol>
    </ol>
</body>
</html>

4、效果展示

在这里插入图片描述

表格

1、作用

（1）用来布局：内容比较整齐时使用
（2）作为信息管理页面的控件使用

2、表格标签

标签名作用
<table></table>定义一个表格
<thead></thead>语义标签，表示表格的头部
<tbody></tbody>语义标签，表示表格的主体部分
<tr></tr>表示表格的行，一个tr表示一行
<th></th>表示列头，文字会自动加粗，居中
<td></td>表示表格中的单元格
<caption></caption>表示表格的标题

3、表格的常用属性

1)跨列(合并列)：一个单元格占据多列,在中添加属性colspan,该属性的值为占据的列数。

2)跨行(合并行)：一个单元格占据多行,在中添加属性rowspan,该属性的值为占据的行数

3）表格的边框属性：border,用来设置边框线的粗细。

4）表格的填充属性：cellpadding,表示的是单元格的内容和单元格边框之间的距离。

5）单元格的间距属性：cellspacing,表示的是单元格之间的距离。

6）<table border='1' align='left' bgcolor='red' background='url'>border=‘边框线的宽度’ align是’表格在页面中的对齐方式’ ，bgcolor是’表格的背景色’ ， background’背景图片’

7）(3)<tr align='left' bgcolor='red' background='url'></tr>align=‘行的对齐方式’ bgcolor=‘行的背景色’ background=‘背景图片’

表单

1、用途

（1）用户注册
（2）收集信息
（3）信息反馈–调查问卷
（4）搜索引擎

2、标签

标签及表单控件作用
<form></form>表单标签，所有的表单控件必须放在该标签下
<input type='text'单行输入文本框
<input type='password'密码框
<input type='reset' value='按钮上显示的文字'/>重置按钮：,若没有value属性,按钮上默认显示’重置’ 只有放在中才有效
<input type='submit'/>提交按钮：将表单数据提交给action指定的URL
<input type='radio' name='控件的名称' checked/>单选按钮，属性’checked’表示选中
<input type='checkbox' />复选框
<input type='number' />数字
<input type='date' />日期选择框
<input type='time' />时间选择框
<input type='hidden' />隐藏控件
select下拉列表控件
option与select连用，表示下拉项
textarea文本区,可以输入多行、多列数据
<button type='按钮的类型'></button>按钮控件
<button type='button'></button>普通按钮,不含默认的动作(功能)
<button type='reset'></button>重置按钮,重置表单控件
<button type='submit'></button>提交按钮,将表单控件的值提交给远程服务器
<lable></lable>用于显示文本

3、注意事项

(1)所有的表单控件(标签)都可以有id属性,id的属性值不能重复

(2)所有的表单控件都有value属性,value属性的值会提交给远程服务器

(3)所有的表单控件都有name属性,在后台可以通过name属性值找到对应的标签

(4)disabled属性表示input是否可用(置灰)

(5)readonly属性表示input的值是只读的

(6)单行文本输入框()的属性placeholder起提示的作用

(7)required属性表示input是必须要输入的

(8)maxlength属性表示input输入的最大长度

(9)tabIndex属性用于设置表单控件的tab顺序

(10)title属性用来设置鼠标经过时的提示文字

4、表格表单页面布局练习

// 表格表单页面布局练习
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <form action="#" method="GET">
    <table>
        <tr>
            <th colspan="8" width="800" align="left"><font color="purple">绑定MSN/QQ账号（找到MSN/QQ上的朋友一起玩，或当他们加入关系时，第一时间通知您)</font></th>
        </tr>
        <tr>
            <th width="200" align="right">
                <label>账号类型</label>
            </th>
            <th width="100">
                <select>
                    <option value="请选择类型">请选择类型</option>
                    <option value="MSN">MSN</option>
                    <option value="QQ ">QQ</option>
                </select>
            </th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <th width="100" align="right">
                <label>MSN账号</label>
            </th>
            <th>
                <input type="text">
            </th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <th width="100" align="right">
                <label>MSN密码</label>
            </th>
            <th width="100">
                <input type="password">
            </th>
           
        </tr>
        </table>
        <hr>
    <table>
        <tr>
            <th width="800" colspan="8" align="left"><font color="purple">创建您的雅虎邮箱</font></th>
        </tr>
        <tr>
            <th width="200" align="right">
                <label>选择您的雅虎邮箱：</label>
            </th>
            <th width="100">
                <input type="text">
            </th>
            <th width="200">
                @
                <select>
                    <option value="请选择类型">请选择邮箱类型</option>
                    <option value="MSN">yahoo.cn</option>
                    <option value="QQ ">QQ.cn</option>
                </select>
            </th>
            <th width="100">
            </th>
            
        </tr>
        <tr>
            <th width="100" align="right">
                <label>密码：</label>
            </th>
            <th width="100">
                <input type="passward">
            </th>
            
        </tr>
        <tr>
            <th width="200" align="right">
                <label>再次输入密码：</label>
            </th>
            <th width="100">
                <input type="passward">
            </th>
            
        </tr>
        <tr>
            <th width="100" align="right">
                <label>真实姓名：</label>
            </th>
            <th width="100">
                <input type="text">
            </th>
            
        </tr>
        <tr>
            <th width="100" align="right">
                <label>性别：</label>
            </th>
            <th width="100">
                <input type="radio" name="sex" id="S1">
                <label for="S1">男</label>
            </th>
            <th width="100">
                <input type="radio" name="sex" id=S2 >
                <label for="S2">女</label>
            </th>
           
        </tr>
        <tr>
            <th width="100" align="right">
                <label>居住城市：</label>
            </th>
            <th width="100">
                <select>
                    <option value="请选择省">请选择省</option>
                    <option value="陕西">陕西</option>
                    <option value="山西">山西</option>
                </select>
            </th>
            <th width="100">
                <select>
                    <option value="请选择市">请选择市</option>
                    <option value="汉中">汉中</option>
                    <option value="西安">西安</option>
                </select>
            </th>
            
        </tr>
        <tr>
            <th width="100" align="right">
                <label>隐私设置</label>
            </th>
            <th width="100">
                <select>
                    <option value="请选择谁可以访问">请选择谁可以访问</option>
                    <option value="仅好友可见">仅好友可见</option>
                    <option value="任何人">任何人</option>
                </select>
            </th>
           
        </tr>
    </table>
    <hr>
    <table>
        <tr>
            <th colspan="8" width="800" align="left"><font color="purple">密码保护信息（以下信息用于取回密码以及处理其他账户问题，请您慎重填写并牢记)</font></th>
        </tr>
        <tr>
            <th width="200" align="right">
                <label>
                    密码保护问题：
                </label>
            </th>
            <th width="100">
             <select>
                <option value="请选择一个问题">请选择一个问题</option>
                <option value="你喜欢的电影类型">你喜欢的电影类型</option>
                <option value="你平时休闲经常去的地方是哪里">你平时休闲经常去的地方是哪里</option>
              </select>
            </th>
        </tr>
        <tr>
            <th width="100" align="right">
                <label>答案：</label>
            </th>
            <th width="100">
                <input type="text">
            </th>
            
        </tr>
        <tr>
            <th width="100 " align="right">
                <label>生日：</label>
            </th>
            <th width="200">
                <input type="text">
                年
            </th>
            <th width="200">
            
                <select>
                    <option value="请选择月">请选择月份</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                月
            </th>
            <th width="200">
                <input type="text">
                日
            </th>
            <th width="100">
                <input type="checkbox" id="chk1" checked>
               <label for="chk1">保密年龄</label>
            </th>
            <th width="100">
               
            </th>
            <th width="100"></th>
            <th width="100">
                
            </th>
        </tr>
        <tr>
            <th width="100" align="right">
                <label>备用邮箱：</label>
            </th>
            <th width="100">
                <input type="text">
            </th>
           
        </tr>
    </table>
        <hr>
        <table>
            <tr>
                <th width="800" colspan="8" align="left"><font color="purple">注册校验</font></th>
            </tr>
            <tr>
                <th width="200" align="right">
                    <label>
                        输入校验码：
                    </label>
                </th>
                <th width="200">
                    <input type="text">
                </th>
                <th></th>
            <th></th>
            <th>看不清，换一张！</th>
            
            </tr>
        </table>
   </form>
</body>
</html>

5、效果展示

在这里插入图片描述

超链接

1、作用

当用户点击文字、图像、视频等页面元素时，页面会发生跳转。我们叫这些页面元素为超链接。

2、标签

<a></a>中属性作用
‘href’值是要跳转的页面的地址,通常用’#'表示空链接
‘target’新页面打开的方式,取值有’_self’和’_blank’
‘_self’表示在原窗口打开页面,是’target’属性的默认值
‘_blank’表示在新窗口中打开页面

如何通过超链接实现’锚点’,提高页面的检索速度

    第一步：在'锚点'位置给标签添加id属性
	
	第二步：在超链接位置中<a>标签的href属性值为'#id名'

音频标签

<audio src="url"></audio>
音频标签属性作用
‘controls’表示的是标签带有控制按钮
‘autoplay’表示是否可以进行自动播放
‘loop’表示循环播放
‘src’表示音频文件的地址
‘preload’页面加载时音频也加载,并预备播放,若使用了’autoplay’属性则该属性被忽略

视频标签

<video src="url" ></video>
视频标签属性作用
‘src’表示视频文件的url
‘controls’表示标签带有播放控制的按钮
‘autoplay’表示是否可以进行自动播放
‘poster’表示在视频文件下载时显示的图片
‘loop’表示循环播放
‘height’表示视频播放器的高度
‘width’表示播放器的宽度

内嵌框架标签

作用：将页面显示在指定的位置。
语法：<iframe src="002.html" frameborder="1" name="if" height="600" width="400"></iframe>

努力做一只合格的前端攻城狮
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML（三）——表单、超链接
zg0601的博客
10-05 1818
HTML（三）——表单、超链接
html 超链接之锚点
weixin_43956958的博客
12-21 5856
文章目录不跨页锚点跨页锚点添加css样式链接到的页面在新打开的页面显示 锚点就是定位器 不跨页锚点 <a herf="#one">点我跳转第一章 </a> 跨页锚点 <a herf="要跳转的页面名称.html#one">点我跳转第一章 </a> 添加css样式 设置字体颜色为黑色 去掉点击链接以后的下划线 设置字体大小为xx-large <a href="#" id="test">超链接</a> <style&g
html选择列表样式,HTML CSS笔记列表与表格
weixin_42476987的博客
06-03 384
加粗:b strong换行:安全换行倾斜:i em删除:s del下划线:u ins小号字体:小号上标:1下标:2添加双引号:双引号引用标题:引用标题ppp×××背景黑色字体mark时间 日期2018-04-26超链接target="_self _blank _parent _search _top"锚点第一章第二章第三章一章用name或者id二章3章分组元素：p div(通用分组) blockq...
HTML--简述、常用标签、列表标签、表单、表格标签、实体字符、块元素和行内元素
小白小白从不日别的博客
03-26 881
一、简述 HTML：超文本标记语言 超：代表超链接 超文本：指的是通过一系列的超链接，将不同空间里面的资源链接在一起，形成一个网状的可相互连接的结构。可以传递文字、图片、视频、音频等等。浏览器发送一次请求，服务器就可以响应多个资源。 标记（也称为标签）：例如<html></html> 其中第一个标签是开始标签，第二个标签是结束标签 <font color="red" size="5"> 通俗理解：在记事本当中，用标记写出来的一种计算机标记语言。 注意： HTML中所有的
HTML5 标签列表
allway2的博客
02-07 270
List of HTML5 Tags/Elements - Tutorial Republichttps://www.tutorialrepublic.com/html-reference/html5-tags.php 以下部分包含属于最新 HTML5 和 XHTML 1.1 规范的标准标记的完整列表。所有标签都按字母顺序列出。 标签 描述 <a> 定义超链接。 <abbr> 定义较长单词或短语的缩写形式。 <acronym> 过
html钟css怎么选择表格,HTML CSS笔记列表与表格
weixin_28725949的博客
06-08 131
加粗:b strong换行:安全换行倾斜:i em删除:s del下划线:u ins小号字体:小号上标:1下标:2添加双引号:双引号引用标题:引用标题ppp×××背景黑色字体mark时间 日期2018-04-26超链接target="_self _blank _parent _search _top"锚点第一章第二章第三章一章用name或者id二章3章分组元素：p div(通用分组) blockq...
javaweb:1.HTML基础标签&样式
qq_61338849的博客
08-03 131
VSCode!-》基础结构标签。
Web 前端学习之 HTML 的标签
程序员小白的博客
09-22 461
HTML 的标签1. 文本样式标签2. 文本格式化标签3. 滚动标签4.列表标签4.1 无序列表4.2 有序列表5. 超链接与锚点链接标签5.1 超链接5.2 锚点链接6. 图像标签结束语 1. 文本样式标签 网页文本及段落的控制，与 Word 是不同的；多种多样的文字效果可使网页变得更加绚丽，为此 HTML 提供了文本样式标签 <font>，用来控制网页中文的字体、字号和颜色； 基本语法格式如下所示: <font 属性=”属性值” >文本内容</font> 标签常用的
基础的html标签,Html基础标签
weixin_27188815的博客
06-19 75
视频与音频标签 Controls : 控制面板显示(显示播放按钮)Poster : 海报(未播放前显示的画面)Autoplay : 是否自动播放(true 是，false否)Width : 宽度设置Height : 高度设置 图像标签标签 img alt ：当图片显示不出出来进行描述说明title ：当图片悬停在图片上的提示信息水平线标签 hr： 列表标签1． 有序列表 ol li： 2． ...
JavaScript 和 HTML5 Canvas实现图像绘制与处理
weixin_65793170的博客
07-31 1135
JavaScript 和 HTML5 的 canvas 元素提供了强大的图形和图像处理功能，使得开发者能够在网页上创建动态和交互式的视觉体验。这里我们将探讨如何使用 canvas 和 JavaScript 来处理图像加载，并在其上进行图像绘制。我们将实现一个简单的示例，演示图像加载完成后的基本绘制过程，并在此基础上扩展一些更高级的功能。记录一下
前端HTML总结
最新发布
m0_54066656的博客
08-05 598
前端笔记，HTML标签详解。
HTML-09.表单项标签
程小白的博客
08-05 168
【代码】HTML-09.表单项标签。
HTML-04.新浪新闻-标题-超链接
程小白的博客
08-02 220
【代码】HTML-04.新浪新闻-标题-超链接。
前端面试宝典【HTML篇】【5】
BDawn的专栏
08-05 39
form标签用于定义 HTML 表单，它用于收集用户输入的数据。而input 标签则是表单中最常用的元素之一，用于创建各种类型的输入控件。 template 标签是 HTML5 中引入的一个新元素，用于定义文档中的不可见模板。这些模板可以被脚本动态地克隆并插入到文档的可见部分中，从而实现动态内容的快速构建。
【日常记录-JS】HTML动态加载JS脚本
zhaoyaxuan001的博客
08-05 112
从外部系统跳到落地页，并将验签相关参数通过url参数传入落地页。由于后台对所有请求均增加了验签校验，导致js静态文件获取失败。由于HTML本身是静态的，动态加载JS文件，需要通过脚本来实现；
前端面试宝典【HTML篇】【6】
BDawn的专栏
08-05 153
canvas标签是 HTML5 中引入的一个新元素，它提供了一个矩形区域，可以在其中绘制图形或图像。canvas 本身并不具备绘图能力，它只是一个容器，所有的绘图工作都需要通过 JavaScript 来完成。 svg标签是用于定义可缩放矢量图形 (Scalable Vector Graphics, SVG) 的容器。SVG 是一种基于 XML 的图形格式，它允许开发者创建高质量的矢量图形，这些图形可以无限放大而不失真。SVG 图形不仅支持静态图像，还支持动画和交互式图形。
HTML-03.新浪新闻-标题-样式2
程小白的博客
08-02 355
【代码】HTML-新浪新闻-标题样式2。
原神升级计划数据表：4个倒计时可以修改提示信息和时间，可以点击等级、命座、天赋、备注进行修改。
lulei5153的博客
08-05 131
原神升级计划数据表：4个倒计时可以修改提示信息和时间，可以点击等级、命座、天赋、备注进行修改。
HTML标签学习指南：列表、表格、表单和语义化标签
本文将详细介绍HTML基础标签的学习，包括列表标签、表格标签、表单标签、语义化标签和字符实体等。 一、列表标签 列表标签是HTML中用于定义列表的标签，包括有序列表、无序列表和自定义列表。列表标签的应用场景...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力做一只合格的前端攻城狮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值