HTML列表、表格、表单、超链接、音视频标签、内嵌
HTML列表、表格、表单、超链接、音视频标签、内嵌
- 列表
- 1、无序列表
- 2、有序列表
- 3、无序有序列表嵌套练习
- 4、效果展示
- 表格
- 1、作用
- 2、表格标签
- 3、表格的常用属性
- 表单
- 1、用途
- 2、标签
- 3、注意事项
- 4、表格表单页面布局练习
- 5、效果展示
- 超链接
- 1、作用
- 2、标签
- 音频标签
- 视频标签
- 内嵌框架标签
列表
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>
HTML列表、表格、表单、超链接、音视频标签、内嵌相关推荐
- HTML 媒体、表单和音视频笔记
HTML 表单和音视频笔记 学习目标 HTML 区块内联 案例01:区块元素 案例02:内联元素 HTML 表单 案例03 案例04 总结 HTML 音视频 HTML 音视频 `` 元素 案例05 ` ...
- 定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
- HTML基本结构 标签 列表 表格 表单 form input 单选框radio 多选框checkbox 列表框select option 按钮button
文章目录 HTML HTML基本结构 网页的基本标签 标题标签 段落标签 换行标签 水平线 字体样式标签 HTML注释和特殊符号 图像标签 常见的图片格式 语法 案例 链接标签 页面间链接 语法 锚链 ...
- (18)C#传智:HTML,属性,标签,元素,body,Font,A,列表,表格,表单,Div,Span,框架
比较简单,无事的跳过,直接w3c.school 一.HTML简介 一个实例:右键查看源文件(标签,属性,内容...) HTML文档=网页 HTML超文本标记语言(Hyper ...
- html语法中表格命令具备哪些属性,html 语法介绍 标签及有关属性 列表 表格 表单...
1.HTML简介 HTML是用来做网页 HTML:Herp Text MarkUp Language 超文本标记语言 超文本:超:超链接 包含超链接的文本 标记语言: 标记:标签 语言:制作网页的语言 ...
- css文本,背景,动画和html列表,表格,表单总结
css文本标签的应用 文本 text-shadow文本阴影:1px 2px 3px color 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 第2个长度值用来设置对象的阴影垂直偏移值.可以为负 ...
- form表单的使用，iframe内嵌标签
一.form表单,表单名称使用name action 把当前表单中的数据提交到哪个程序去处理 后端功能接口 method 表单的提交方式常用的两种方式, get:可以缓存到浏览器中,有长度限制(204 ...
- HTML基础-表格、列表、表单
HTML进阶 哔哩哔哩视频链接:https://www.bilibili.com/video/BV14J4114768?p=30&share_source=copy_web 1.表格标签 1. ...
- HTML表格、列表、表单
学习目标: 学会表格的基本语法,了解表格的属性以及合并单元格: 学会三种列表的基本语法,了解三种列表的属性. 学习内容: 一.表格标签 表格的基本语法 <table> <tr> ...
最新文章
- Android Activity 和 ViewGroup中事件触发和传递机制
- 如何在VS一个工程里面测试不同代码？（创建不同项目，并将需要运行的项目设为启动项目）
- Ubuntu16.04下CUDA 9.0 + cuDNN v7.0 + tensorflow 1.6.0（GPU）环境搭建
- oracle中的cursor属性有哪些,Cursor语法及理解
- Python基础篇【第6篇】: Python模块subprocess
- JetBrains 开发者调查 - 编程语言趋势
- ipmi对于统一硬件管理的意义
- System.arraycopy和Arrays.copyOf的关系
- flask向html传函数,Flask----函数数据类型传参
- HTML+JS实现可编辑表格
- 超实用的JavaScript代码大全
- Windows Server 2012 MSDN原版 简体中文 版下载
- 如何使用浏览器网络监视工具进行黑客攻击
- Cocos2d-JS 中游戏背景音乐与音效
- .a文件和.lib文件的区别
- shell版本爬取NVD网站信息
- 常见的免费遥感卫星数据服务网站
- 带你走进开源阿卡信-v1.0
- @ComponentScan
- 三星支持android8.0,这些三星机型确认可以升级Android 8.0