菜单 搜索
首页 前端知识 一文搞定前端HTML5——列表、表格、媒体元素与表单

一文搞定前端HTML5——列表、表格、媒体元素与表单

2024-08-14 22:08:52 前端知识 前端哥 910 262 我要收藏

文章目录

  • HTML5基础
    • 概念
    • 基本结构及网页基本信息
    • 基本标签
    • 特殊符号
    • 图像标签
    • 链接标签
    • 行内元素和块元素
  • 列表、表格与媒体元素
    • 列表
    • 表格
    • 媒体元素
    • 结构元素
    • 内联框架
  • 表单
    • 语法
    • 元素
    • 表单验证

HTML5基础

概念

HTML

Hyper Text Markup Language（超文本标记语言）

超文本包括：文字、图片、音频、视频、动画等

2013-5-6 HTML5

HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用HTML5的力度。

优势

  • 世界知名浏览器厂商对HTML5的支持：微软、Google、苹果、Opera、Mozilla
  • 市场的需求
  • 跨平台

W3C

World Wide Web Consortium（万维网联盟）

成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

  • http://www.w3.org/
  • http://www.chinaw3c.org/

包括

  • 结构化标准语言（XHTML 、XML）
  • 表现标准语言（CSS）
  • 行为标准（DOM、ECMAScript）

基本结构及网页基本信息

<!DOCTYPE html>
<!-- 声明规范 -->
<html>
    <head lang="en">
        <!-- head 网页头部 -->
        <meta charset="utf-8"/>
        <title>标题</title>
        成对标签分别叫开放标签和闭合标签
    </head>
    <body>
        <hr/>
        空元素，/表示关闭空元素
        <!-- body 主体部分 -->
    </body>
</html>
复制

<meta>标签

<meta charset="UTF-8"/>
<meta charset="gb2312"/>
<!-- charset 网页字符编码
	gb2312：包含全部中文字符
	utf-8：包含全世界所有国家需要用到的字符
	页面编码应与页面文件保存时的编码一致
-->
<meta name="keywords" content="鸿卓乐学，IT培训" />
<!-- name="keywords" 搜索关键字 -->
<meta name="description" content="鸿卓乐学是国内最大的……" />
<!-- name="description" 内容描述 -->
复制

基本标签

基本标签写法
标题标签<h1>…</h1>/<h6>…</h6>
段落标签<p>…</p>
换行标签<br/>
水平线标签<hr/>
字体样式标签–加粗<strong>…</strong>
字体样式标签–斜体<em>…</em>
字体样式标签–删除<del>…</del>

特殊符号

特殊符号字符实体
空格&nbsp;
大于号(>)&gt;
小于号(<)&lt;
引号(")&quot;
版权符号@&copy;

图像标签

常见图像格式

  • JPG
  • GIF
  • PNG(受浏览器兼容性的限制)
  • BMP
<img src="path" alt="text" title="text"  width="x"  height="y" />
<!-- src 图像地址(必选)
	alt 图像的替代文字 图片错误时显示
	title 鼠标悬停提示文字
	width & height 图像宽高
-->
复制

内部路径

  • 相对路径（图像与文件的相对位置）
  • 绝对路径（从根目录开始）

外部路径（需要带http）

链接标签

<a href="path" target="目标窗口位置">链接文本(文本超链接)或图像(图像超链接)</a>
<!-- href 链接路径
	target 链接在哪个窗口打开
		_self：默认，当前窗口或框架打开
		_blank：新窗口或标签页打开
-->
复制

常用的超链接用法及应用场景

页面间链接：从一个页面链接到另外一个页面(网站导航菜单、新闻列表、商品列表)

锚链接：从一个页面的甲位置跳转到本页面或另一个页面的乙位置

<a name="marker">创建跳转标记---乙位置</a>
<a href="#marker">创建跳转链接---甲位置</a>
复制

功能性链接(电子邮件、QQ、MSN)

<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>
 
<a href="tencent://message/?uin=QQ号&Site=&Menu=yes" class="icon icon-qq first">打开qq聊天页面(需好友)</a>
<a href="tencent://message/?Menu=yes&uin=QQ号& Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45">强制打开临时会话</a>
复制

行内元素和块元素

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…)
块元素：无论内容多少，该元素独占一行（p、h1-h6…）
复制

列表、表格与媒体元素

列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

分类

  • 有序列表
  • 无序列表
  • 定义列表
<!-- 声明无序列表 -->
<ul>
    <!-- 声明列表项 -->
	<li>范冰冰演藏族女孩</li>
	<li>撞死两个人后自拍</li>
	<li>诗隆甜蜜出游</li>
	<li>一线城市楼市退烧</li>
</ul>
复制

无序列表的特性

  • 没有顺序，每个<li>标签独占一行（块元素）
  • 默认<li>标签项前面有个实心小圆点
  • 一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
<!-- 声明有序列表 -->
<ol>
    <!-- 声明列表项 -->
	<li>范冰冰演藏族女孩</li>
	<li>撞死两个人后自拍</li>
	<li>诗隆甜蜜出游</li>
	<li>一线城市楼市退烧</li>
</ol>
复制

有序列表的特性

  • 有顺序，每个<li>标签独占一行（块元素）
  • 默认<li>标签项前面有顺序标记
  • 一般用于排序类型的列表，如试卷、问卷选项等
<!-- 声明定义列表 -->
<dl>
    <!-- 声明列表项 -->
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>桃子</dd>
    <dd>李子</dd>
</dl>
复制

定义列表的特性

  • 没有顺序，每个<dt>标签、<dd>标签独占一行，默认没有标记
  • 一般用于一个标题下有一个或多个列表项的情况

在这里插入图片描述

类型说明项目符号
无序列表以<ul>标签来实现
以<li>标签实现列表项		无序列表中的每项都是平级的，
没有级别之分，
且列表中的内容一般都是相对简单的标题性质的网页内容
有序列表以<ol>标签来实现
以<li>标签实现列表项		有序列表ol li一般用于显示带有顺序编号的特定场合
定义列表以<dl>标签来实现
以<dt>标签实现列表项
以<dd>标签定义内容		定义列表一般适用于带有标题和标题解释性内容的场合

表格

表格常用于结构一致的数据，例如学员成绩表、购物网站上购物车中的列表信息等

学生基本信息表
<table>
    <tr>
        <td rowspan="2">学号</td>
        <td colspan="3">个人信息</td>
        <td colspan="2">入学信息</td>
    </tr>
    <!-- colspan="n" 跨n列 
		rowspan="n" 跨n行
	-->
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>班级</td>
        <td>入学年月</td>
    </tr>
    <tr>
        <td>001</td>
        <td>小王</td>
        <td>男</td>
        <td>23</td>
        <td>20020922</td>
        <td>2000年9月</td>
    </tr>
    <tr>......</tr>
</table>
<!-- 
align 内容水平居中(left左，center居中，right右)
valign 内容垂直居中(top上，center居中，bottom下)
-->
复制

在这里插入图片描述

html5新标准
<table>
    <thead>
        <tr><th></th></tr>
    </thead>
    <tbody>
    	<tr><td></td></tr>
    </tbody>
    <tfoot>
    	<tr><td></td></tr>
    </tfoot>
</table>
复制

媒体元素

如何实现在网页上播放视频和音频？

  • 第三方自主开发的播放器
  • Flash
  • HTML5媒体元素 (视频元素video 音频元素audio)

视频元素

<video src="视频路径"  controls></video>
<!-- src 指定要播放的视频文件的路径
	controls 提供播放、暂停和音量的控件
-->
复制
<video loop muted controls autoplay >
    <source src="img/1.avi" />
    <source src="img/3.webm" type="video/webm" />
    <source src="img/2.mp4" type="video/mp4" />
</video>
<!-- 1.属性值等于属性名时 可简写
	 2.type 可省略-->
复制
  • loop 循环播放
  • muted autoplay 自动播放
  • controls 底部播放组件

音频元素

<audio src="音频路径" controls></audio >
<!-- src 指定要播放的音频文件的路径
	controls 提供播放、暂停和音量的控件
-->
复制
<audio controls>
    <source src="music/music.mp3" type="audio/mpeg"/>
    <source src="music/music.ogg" type="audio/ogg"/>
</audio>
复制

结构元素

元素名描 述
header标题头部区域的内容（用于页面或页面中的一块区域）
footer标记脚部区域的内容（用于整个页面或页面的一块区域）
sectionWeb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用（常用于侧边栏）
nav导航类辅助内容
<header><h2>网页头部</h2> </header>
<section><h2>网页主体部分</h2></section>
<footer><h2>网页底部</h2></footer>
复制

内联框架

<iframe src="path" 
        name="mainFrame" 
        scrolling="no"
        frameborder="0" 
        width="800"
        height="500"
        src="http://www.taobao.com/"></iframe>
<!-- src 引用页面地址
	 name 框架标识名
	 scrolling 是否显示滚动条
	 frameborder 边框线
-->
<a href="http://www.baidu.com" target="mainFrame">百度</a>
<a href="http://www.taobao.com" target="mainFrame">淘宝</a>
<!-- 注意:target属性值与iframe的name属性要一致 a标签的href会将iframe标签中的src替代 -->
复制

表单

语法

<form  method="post" action="">
   <p>  名字：<input name="name" type="text" >  </p>
   <p>  密码：<input name="pass" type="password" >  </p>
   <p>
      <input type="submit" name="Button" value="提交"/>
      <input type="reset" name="Reset" value="重填"/> 
   </p>
</form>
<!-- 
action 请求地址
method 请求方式
	get  查询
	post 增删改 登录
在实际网页开发中通常采用post方式提交表单数据 -->
复制
属性说明
type指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name指定表单元素的名称
value元素的初始值。type 为 radio时必须指定一个值
size指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlengthtype为text 或 password 时，输入的最大字符数
checkedtype为radio或checkbox时，指定按钮是否是被选中

元素

文本框

<input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />
复制

密码框

<input  type="password "  name="pass"  size="20" />
复制

单选按钮

<input name="gen" type="radio" value="男"  checked  />男
<input name="gen" type="radio" value="女" />女
<!-- checked 选按钮选中状态
     name属性一组要一致-->
复制

复选框

<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
<!-- checked 复选框选中状态
	 name属性一组要一致-->
复制

列表框

<select name="列表名称" size="行数">
	<option value="选项的值" selected>…</option >
	<option value="选项的值">…</option >
</select>
<!-- size 显示的行数(不常用) -->
复制

按钮

<input  type="reset" name="butReset" value="reset重置按钮">
<input  type="submit" name="butSubmit" value="submit提交按钮">
<input  type="button" name="butButton" value="button普通按钮"/>
 
<!-- 图片按钮 -->
<input  type="image"  src="images/login.gif" />
 
<!-- 常用button 标签按钮 -->
<button>提交</button>
复制

多行文本域 | 文本框

<textarea  name="showText"  cols="x"  rows="y">文本内容</textarea>
<!-- cols 显示的列数
	 rows 显示的行数-->
复制

文件域

<form action="" method="post" enctype="multipart/form-data">
  <p><input type="file" name="files" />
  <input type="submit" name="upload" value="上传" /></p>
</form>
<!-- enctype="multipart/form-data" 表单编码属性-->
复制

邮箱 (H5新-不常用)

<p>邮箱:<input type="email"  name="email"/></p>
<input type="submit"/>
<!-- 会自动验证Email地址格式是否正确 -->
复制

网址 (H5新-不常用)

<p>请输入你的网址:<input type="url"  name="userUrl"/></p>
<input type="submit"/>
<!-- 会自动验证URL地址格式是否正确 -->
复制

数字

<p>请输入数字:<input type="number"  name="num" min="0" max="100" step="10"/></p>
<input type="submit"/>
<!-- min&max 允许的最小/最大值
	step 合法的数字间隔
-->
复制

滑块

<p>请输入数字:<input type="range"  name="range1" min="0" max="10" step="2"/></p>
<input type="submit"/>
<!-- 无自带数值 需使用js设置 较鸡肋 -->
复制

搜索框

<p>请输入搜索的关键词:<input type="search"  name="sousuo"/></p>
<input type="submit"/>
复制

表单的高级应用

  • 隐藏域
  • 只读
  • 禁用（常用，可作用于所有组件）
  • 标注
<!-- 隐藏域 -->
<input type="hidden" value="666" name="userid">
<!-- 只读 -->
<input name="name" type="text" value="张三"  readonly>
<!-- 禁用 -->
<input type="submit "  disabled   value="保存" >
<!-- W3C HTML5标准中，规定对于布尔类型的属性，属性值可以省略 -->
 
<!-- 标注 -->
<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>
<!-- 
- 增强鼠标的可用性
- 自动将焦点转移到与该标注相关的表单元素上
-->
复制

表单验证

好处

  • 减轻服务器的压力
  • 保证数据的可行性和安全性

表单的初级验证

placeholder

  • input类型的文本框提供一种提示（hint）
  • 可以描述文本框期待用户输入何种内容
  • 提示语默认显示，当文本框中输入内容时提示语消失
  • 适合于input标签：text、search、url、email和password等类型
<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>
复制

required

  • 规定文本框填写内容不能为空，否则不允许用户提交表单
  • 适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型
<input type="text" name="username"  required/>
复制

pattern

  • 用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
<input type="text" name="tel"  required pattern="^1[358]\d{9}" />
<!-- 验证规则，正则表达式 -->
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/15625.html
标签
多媒体标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！