Day01.HTML5
2024-04-22 19:05:23
HTML5
一、HTML5和CSS的概述
应用场景:
HTML用于编写网页，我们日常中通过浏览器网络访问的网页大部分都是使用HTML编写。
通过鼠标右键查看网页源代码就能查看到具体的HTML代码。
网页内容组成:
HTML代码：主要用于编写页面
CSS代码：美化页面
JavaScript代码：网页动态效果
二、软件架构
目前市场上有两种流行的软件架构：
（一）C/S架构
C/S架构：Client/Server 客户端/服务器。要求用户安装一个客户端程序。
例如:cts、英雄联盟、代练通、卫生院和派出所的办公系统
原理图:
优点: 1、客户端承载了部分的数据交互、只有核心数据才会到达服务器在一定程度上减轻了服务器的压力2、客户端和服务器进行双层校验、安全系统数高3、个性化支持比较丰富
缺点:1、卸载不干净、容易造成系统垃圾久而久之会影响系统的性能2、升级和维护不方便、容易造成不好的用户体验3、安装复杂
（二）B/S架构（java开发方向）
B/S架构：Browser/Server 浏览器/服务器 。通过浏览器与服务器交互，不需要安装其他程序
原理图:
例如:京东、淘宝、网页游戏、cts排课系统、mis办公系统
优点:1、只要有网的情况下、通过浏览器就可以随时随地的预览和下载服务器中的资源2、升级和维护方便、可以做到无缝连接3、容易进行服务器集群、数据共享性强
缺点:1、在涉及到安全性方面设计成本是比较高的2、在个性化支持上较差3、数据计算都集中在服务器、在流量高峰的时候会造成服务器压力
（三）资源分类
资源分类分为:
静态资源 和 动态资源
1、静态资源
使用静态网页技术开发的资源(Html,CSS,JavaScript)
特点：所有用户访问，得到的结果是一样的。
如:文本，图片，音频，视频，Html,CSS,JavaScript都属于静态资源
如果用户请求的是静态资源，那么服务器会直接将静态资源响应给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源浏览器本身也是一个应用程序
演示效果:
如上图优就业的教学环境, 都是使用图片以及音频和视频的形式引入, 无法动态改变, 所以都是静态资源。
2、动态资源
是从资源的服务器里面的数据库拿出来的
使用动态网页技术发布的资源 特点：所有用户访问，1、得到的结果可能不一样、2、数据来自于数据库
举例：jsp/servlet,php,asp.net、ajax
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
演示效果:
如上图微博热搜榜, 会根据当前热门的话题访问量, 进行动态的改变排列顺序, 所以是动态资源。
三、HTML语言介绍
（一）什么是HTML
HTML:超文本标记语言
超文本:指的是一个范畴、它既具有普通文本的特征、还可以在里面描述一些超链接、视频、图片、等多媒体资源
标记:HTML语言是由标签进行组成
（二）HTML作用及版本
作用:做网页最基本的语言
使用标记标签来描述网页 需要运行在浏览器上(推荐使用谷歌、火狐)
四、HTML入门案例
（一）HTML基本语法
基本语法包含：标签和属性
1. 文件的后缀：html的后缀名是 .html(推荐使用) 或者 .htm
2. 标签由尖括号包围的关键词，比如 <html>
3. 标签分类：① 双边标签：如 <html></html> ② 单边标签：如 <meta charset='UTF-8' /> 通常情况下单标签是用来描述功能的<br /> <img /> <input />
4. 标签的嵌套：要正确嵌套
正确演示：<html><body></body></html>
错误演示：<html><body></html></body>
5. 标签不区分大小写（建议小写）
6. 在开始标签中可以定义属性，属性是以键值对的形式，值需要引号引起来
7. 标签名都是预定义好的，可以直接使用但不可以随便定义
8. 属性：开始标签中定义的键值对成为属性，如：<body bgcolor='red ></body>
（二）创建HTML文件
在本地的任意一个位置创建文本文档，将后缀名改成html或者htm
选择使用记事本或任何文本编辑工具打开文件
编写HTML标签
右键文件选择使用任意一个浏览器打开，开始你的HTML之旅吧！
HTML基本文档结构如下:
1. <!DOCTYPE >：声明文档类型是html5类型
2. html：html文档的根标签
3. head: 头标签，用于指定html一些属性和引入外部资源
4. title：标题标签，设置当前页面的标题
5. meta标签：指定当前页面的字符编码
6. body：主体标签，显示在页面中内容
7. 注释：<!-- 注释内容 --> 快捷键 alt+shift+a
（三）HTML编辑工具
网页开发工具有很多，可以使用记事本、Notepad++、EditPlus 等简易编辑工具，也可以使用现阶段比较流行的HBuilder、Webstorm(收费)、Sublime、VSCode等开发工具。为了统一环境，提高开发效率，要求学员统一使用VSCode，傻瓜式安装即可。
使用VSCode开发第一个页面
步骤:
1. 先创建一个文件当做项目的工作空间, 然后使用VSCode引入文件路径
2. 创建项目名
或者
3. 在项目下创建文件
4.安装使用默认浏览器插件, 然后右键执行
说明：
<!DOCTYPE html>这是一个HTML版本的声明，这个声明表示当前HTML版本为H5。
五、HTML常见标签
常见标签分类介绍：
文本标签、多媒体标签、列表标签、链接标签、表格标签、表单标签、架构标签、字符实体、无意义标签已经html5的语义标签
（一）标题标签
HTML提供<h>系列标签，这里的代表1-6，用于修饰标题，其中<h1>定义最大的标题，<h6>定义最小的标题。
标题标签： <h>
代码示例：
<!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><!-- 块级注释 alt+shift+ah标题标签: h1-h6:数字越大字体越小--><h1>艾欧尼亚</h1><h2>德玛西亚</h2><h3>祖安</h3><h4>峡谷之巅</h4><h5>黑色玫瑰</h5><h6>教育专区</h6>
</body>
</html>
运行效果：
（二）段落标签
<p> 段落标签，使得文本独立成段。
属性解析:
| 属性名 | 属性说明 |
|---|---|
| align | 段落对齐方式left左对齐（默认）center 居中right 右对齐 |
代码示例：
<!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><!-- p:段落标签align:对齐方式left:左对齐center:居中对齐 right:右对齐--><p align="center">最近娱乐圈爆出了不少渣男</p><p align="right">这个狗仔们辛苦了</p>
</body>
</html>
（三）文本格式化标签
文本格式化标签:
主要用于修饰文本内容的标签
<!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>
<!-- 字体标签fontcolor:字体颜色size:字号的大小 1-7 数字越大字号越大-->
<body><p>日照<font color="red" size="7">香炉</font>生紫烟,眼看烤鸭挂前川。</p> <p>飞流直下三千尺,一摸口袋没有纸。</p>
</body>
</html>
1、换行标签
<br/> 换行标签，是一个单标记标签，每次需要换行就添加一个<br/>标签，换几行加几个。
代码示例：
<!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>
<!-- 字体标签fontcolor:字体颜色size:字号的大小 1-7 数字越大字号越大-->
<body>日照<font color="red" size="3">香炉</font>生紫烟,眼看烤鸭挂前川。 <br>飞流直下三千尺,一摸口袋没有纸。
</body>
</html>
效果演示：
2、分割线标签
<hr/>标签在HTML页面中创建一条水平的分割线，用于定义内容的主题变化。
属性解析:
| 属性名 | 属性说明 |
|---|---|
| width | 定义水平线的长短单位是像素/百分比 |
| size | 定义水平线的粗细单位是像素/百分比 |
| color | 定义水平线的颜色颜色可以是英文单词：例如red,blue,yellow,pink颜色也可以是编码：#FF0000 |
代码示例：
<!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><!-- hr:分割线标签width:分割线的宽度size:分割线的高color:分割线的颜色align:对齐方式left:左对齐center:居中对齐 默认right:右对齐-->帅
<hr width="900px" align="left" size="7" color="red">将
</body>
</html>
运行效果：
3、加粗标签
<b> 、<strong>标签可以使字体加粗。
代码示例：
<!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><!-- strong | b 加粗区别:strong和b都可以对内容进行加粗、strong除了具有加粗的含义外、语气词也更加强烈点暗含强调和确切的意思通常用于关键字修饰--><strong>一遍</strong>二遍三四遍、五遍<b>六遍</b>七八遍。</body>
</html>
4、斜体标签
<em> 、<i>标签可以使字体倾斜。
代码示例：
<!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><!-- em | i区别:em除了具有倾斜效果外、还暗含强调和确切意思通常用于修饰关键字斜体-->停车<em>zuoai</em></em>风铃晚，<i>霜叶</i>红于二月花。
</body>
</html>
效果演示：
5、上标标签
上标标签:
在html中，sup标签是使用来定义上标文本的，所谓上标文本就是显示在当前文本的右上角，而且比当前文本更小的文本内容。
代码示例:
<!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><!-- sup:上标标签sub:下标标签-->2<sup>3</sup>=8 <br>绝句 <sub>杜甫</sub> <br>两只黄鹂鸣翠柳,一行白鹭上青天。<br>窗含西岭千秋雪,门泊东吴万里船。
</body>
</html>
8、居中标签
居中标签:
<center>标签用于将文本居中显示。
代码示例:
<!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><center><p>最近在监狱中忏悔</p><p>现在非常思念</p></center>
</body>
</html>
（四）优就业官网
代码示例：
<!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><center><h2>优就业简介</h2><hr><p><strong>优就业</strong>作为一家专注于<em>IT职业教育培训企业</em>，坚持以“纯善”作为企业发展的价值观基石，在创造商业价值的同时，更加注重对员工.对学员、<br>对社会的回馈。始终坚持以<font color="red" size="5">“成为一个能让员工快速成长并对人类社会发展有贡献的教育企<br>业”</font>奋斗目标。</p><p>自成立以来，不断通过慈善捐款、建立社会企业、资助贫困大学生、组织公益活动等多种形式履行企业的社会责任。优就业始终重视保<br>障员工基本权益，为员工提供业务水平、管理能力等多层次教育培训，真正践行企业对员工的关爱同时，优就业始终坚持“学员的事是重要的事<br>”这一服务理念，不断提升教学能力和服务水准，为学员提供更贴心的职业培训。先后通过成立社会工作服务中心;“阳光<br>伴你行”公益项目;西华大学助学金项目;汶川、玉树地震救助及捐款计划等多种形式履行企业的社会责任，成为国内较早的救灾型公益<br>
企业。</p><hr><p>北京中公教育科技有限公司 <br>Copyright1999-2020.All Rights Reserved京ICP证161188号 </p></center>
</body>
</html>
（五）HTML多媒体标签
1、HTML图片标签
在我们日常上网中大家会发现网站上会有很多的图片信息展示，这样会使整个网站所表达的意思更加明确，也让整个网站看着非常舒服，接下来带领大家学习如何在HTML中添加图片。
图片标签<img>
如果我们想要在HTML网页中展示图片，首先需要准备好图片，格式不限，jpg、png、gif 均可。
通常情况我们会将图片copy到项目的img文件夹下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O8SNreXV-1635051005265)(img\wps44.jpg)]
img标签的语法格式：
<img src=”” width=”” height=”” alt=”” title=”” />
属性解析：
| 属性名 | 属性说明 |
|---|---|
| src | 设置图片的引用路径，可以是相对路径或绝对路径1. 相对路径 ./ 当前目录 …/ 上一级目录 …/…/ 上上一级目录2. 绝对路径l 网络绝对路径：通过url地址加载资源 如：https://timgsa.baidu.com/timg?image/xx.pngl 磁盘绝对路径 需要通过本地访问该页面 如：D:\images\1.jpg |
| width | 设置图片的宽度，以像素为单位 |
| height | 设置图片的高度，以像素为单位 |
| title | 悬浮文字，当鼠标悬浮到图片上时的提示文字 |
| alt | 替代文本，由于某种原因图片无法显示时会使用替代文本替代图片内容。 |
代码示例：
<!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><!-- img:图片标签src:图片的路径width:图片的宽height:图片的高度alt:图片加载失败提示的信息title:图片悬浮提示的文字信息../返回上一级--><img title="this is my love" src="../img/1.gif" width="600px" height="600px" alt="小老弟由于网络原因图片加载失败">
</body>
</html>
2、HTML音频标签
<audio> 标签定义声音，比如音乐或其他音频流。
属性解析:
| 属性名 | 属性说明 |
|---|---|
| src | 要播放的音频的 URL |
| controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| loop | 如果出现该属性，则每当音频结束时重新开始播放 |
| muted | 规定视频输出应该被静音 |
代码示例：
<!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><!-- audio:音频标签src:mp3的路径contols:定义播放组件(只有这个属性才可以显示播放和暂停)loop:循环播放muted:静音--><audio src="../img/今天是你的生日，妈妈.mp3" controls loop muted></audio>
</body>
</html>
3、HTML视频标签
<video> 标签定义视频，比如电影片段或其他视频流。
属性解析:
| 属性名 | 属性说明 |
|---|---|
| src | 要播放的视频的 URL |
| controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| height | 设置视频播放器的高度 |
| width | 设置视频播放器的宽度 |
| loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放 |
| muted | 规定视频的音频输出应该被静音 |
代码示例：
<!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><!-- vedio:视频标签src:视频的路径controls:定义播放组件muted:静音loop:循环播放width:播放组件的宽height:播放组件的高--><video src="../img/006.mp4" controls loop muted width="1200px" height="450px"></video>
</body>
</html>
（六）HTML列表标签
无序列表:
<!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><!-- alt+shift+下 复制当前行内容ul:无序列表type:disc:实心圆 默认circle:空心圆square:方块li:列表项--><ul type="square"><li>孙悟空</li><li>猪八戒</li><li>老唐僧</li><li>沙和尚</li></ul>
</body>
</html>
有序列表：
<!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><!-- ol:有序列表type:1 默认 a A i Ili:列表项--><ol type="I"><li>孙悟空</li><li>猪八戒</li><li>老唐僧</li><li>沙和尚</li></ol>
</body>
</html>
自定义列表：
<!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><!-- dl:自定义列表dt:定义范围dd:该范围下具体的内容--><dl><dt>成人用品</dt><dd>***</dd><dd>****</dd><dd>***</dd></dl>
</body>
</html>
特别说明：
ul和ol标签都有type属性，可以用来设置列表项前面的项目符号类型。
属性解析:
| 属性名 | 属性说明 |
|---|---|
| type | 定义列表的符号类型。有序列表：取值：A、a 、I 、i 、1 等(默认type=“1”)无序列表：取值：disc 实心圆、square 方块 、circle 空心圆(默认type=“disc”) |
（七）超链接标签
超链接标签是在html页面中提供一种页面间跳转的方式。
语法结构：
<a href="" target="">热点文字或图片</a>
属性解析：
| 属性名 | 属性说明 |
|---|---|
| href | 访问目标的url地址（必填）地址取值:目标路径 |
| target | 定义打开页面的方式 ,常用的两种方式取值为：取值：_blank 在新的选项卡中打开_self 在本页面打开（默认） |
案例代码：
<!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><!-- a:超链接标签href:要跳转的地址 #:不跳转 javaScript:void(0) 阻止跳转target:打开方式_brank:在新窗口中打开目标资源_self:在当前窗口中打开目标资源 默认_top:回顶部--><a href="http://www.baidu.com" target="_brank">去百度</a> <br><a href="javaScript:void(0)">点我哦</a><br><a href="http://www.qq.com"><img src="../img/2.gif" width="100px" height="100px" alt=""></a><p><!-- sup:上标标签sub:下标标签-->2<sup>3</sup>=8 <br>绝句 <sub>杜甫</sub> <br>两只黄鹂鸣翠柳,一行白鹭上青天。<br>窗含西岭千秋雪,门泊东吴万里船。 </p><p><!-- sup:上标标签sub:下标标签-->2<sup>3</sup>=8 <br>绝句 <sub>杜甫</sub> <br>两只黄鹂鸣翠柳,一行白鹭上青天。<br>窗含西岭千秋雪,门泊东吴万里船。 </p><p><!-- sup:上标标签sub:下标标签-->2<sup>3</sup>=8 <br>绝句 <sub>杜甫</sub> <br>两只黄鹂鸣翠柳,一行白鹭上青天。<br>窗含西岭千秋雪,门泊东吴万里船。 </p><p><!-- sup:上标标签sub:下标标签-->2<sup>3</sup>=8 <br>绝句 <sub>杜甫</sub> <br>两只黄鹂鸣翠柳,一行白鹭上青天。<br>窗含西岭千秋雪,门泊东吴万里船。 </p><p><!-- sup:上标标签sub:下标标签-->2<sup>3</sup>=8 <br>绝句 <sub>杜甫</sub> <br>两只黄鹂鸣翠柳,一行白鹭上青天。<br>窗含西岭千秋雪,门泊东吴万里船。 </p><p><!-- sup:上标标签sub:下标标签-->2<sup>3</sup>=8 <br>绝句 <sub>杜甫</sub> <br>两只黄鹂鸣翠柳,一行白鹭上青天。<br>窗含西岭千秋雪,门泊东吴万里船。 </p><p><!-- sup:上标标签sub:下标标签-->2<sup>3</sup>=8 <br>绝句 <sub>杜甫</sub> <br>两只黄鹂鸣翠柳,一行白鹭上青天。<br>窗含西岭千秋雪,门泊东吴万里船。 </p><p><!-- sup:上标标签sub:下标标签-->2<sup>3</sup>=8 <br>绝句 <sub>杜甫</sub> <br>两只黄鹂鸣翠柳,一行白鹭上青天。<br>窗含西岭千秋雪,门泊东吴万里船。 </p><p><!-- sup:上标标签sub:下标标签-->2<sup>3</sup>=8 <br>绝句 <sub>杜甫</sub> <br>两只黄鹂鸣翠柳,一行白鹭上青天。<br>窗含西岭千秋雪,门泊东吴万里船。 </p><p><!-- sup:上标标签sub:下标标签-->2<sup>3</sup>=8 <br>绝句 <sub>杜甫</sub> <br>两只黄鹂鸣翠柳,一行白鹭上青天。<br>窗含西岭千秋雪,门泊东吴万里船。 </p><a href="#" target="_top">回顶部</a>
</body>
</html>
（八）HTML表格标签
1、案例介绍
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U5GqR8tU-1635051005271)(img\wps54.jpg)]
2、案例相关标签
2.1、表格标签
HTML中一个表格由<table>标签及一个或多个<tr>加若干<td>标签组成。
常用标签:
| 标签名 | 作用 |
|---|---|
| table | 父标签，相当于表格的容器 |
| tr | 用来定义行，写在标签内 |
| td | 用来定义列（单元格），写在 |
| th | 表格的列标题: 加粗，居中 |
| caption | 表格的标题 |
标签内
属性解析：
| 属性名 | 属性说明 | |||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| border | 表格边框的宽度(粗细) | |||||||||||||||||
| width | 表格的宽度 | |||||||||||||||||
| height | 表格的高度 | |||||||||||||||||
| align |
可以用在标签中，表示表格相对于整个浏览器窗口的居中对齐；也可用在或
|
案例代码1：定义3*2表格
<!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><!-- table:表格标签常用属性:border:表格的边框width:表格宽height:表格高cellspacing:单元格边框与表格边框的间距cellpadding:单元格中内容与单元格边框的间距bgcolor:背景色align:对齐方式tr:行标签td:单元格标签3行2列的标签--><table bgcolor="yellow" align="center" border="1px" width="700px" height="300px" cellspacing="0px" cellpadding="7px"><!-- 第一行 --><tr><td>第一行第一列</td><td>第一行第二列</td></tr><!-- 第二行 --><tr><td>第二行第一列</td><td>第二行第二列</td></tr><!-- 第三行 --><tr><td>第三行第一列</td><td>第三行第二列</td></tr></table>
</body>
</html>
效果演示：
案例代码2：定义3*2表格，合并行，合并列
<!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><!-- 定义3*2表格，合并行，合并列colspan:列合并rowspan:行合并--><table border="1px" width="700px" height="300px" cellspacing="0px"><tr><td rowspan="2">第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第二列</td></tr><tr><td colspan="2">第三行第一列</td></tr></table>
</body>
</html>
2.2、表头标签
用来定义<table>表格的表头信息，是<tr>的子标签，写在<th>标签中的内容会自动加粗。
（九）HTML表单标签
1、案例介绍
HTML 表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与Web服务器的交互。
表单是控件的容器，一个表单由form元素、表单控件和表单按钮三部分组成。
2、案例相关标签
2.1、表单标签
<form>是在页面中创建出一个表单，表单标签在HTML中是没有效果展示的，能展示的是表单中的各种标签。如果数据需要提交给服务器，负责收集数据的标签必须放在表单之中。
属性解析:
| 属性名 | 属性说明 |
|---|---|
| action | 数据提交的路径，指向数据提交的服务器地址 |
| method | 数据提交的方式，常用取值：get、post |
| enctype | 规定在发送到服务器之前应该如何对表单数据进行编码取值三种方式:1. application/x-www-form-urlencoded:默认的编码方式。但在用文本的传输和MP3等大型文件的时候，使用这种编码就显得效率低下(也就是说上传文本格式的文件)。2. multipart/form-data:指定传输数据为二进制类型，比如图片，mp3，文件。3. text/plain：纯文本的传输。空格转换为"+"号，但不对特殊字符编码。 |
代码示例：
2.2、输入域标签
<input>标签用于获取用户输入信息，通过指定type值达到搜集不同信息的目的。是我们在html中最常用的标签。
input属性：
| 属性名 | 属性说明 |
|---|---|
| id | 为当前组件提供一个唯一的标识 |
| type | 定义表单输入项input的组件类型 详见下一个表格type属性值说明 |
| name | 为当前组件提供一个名称服务器会根据当前的名称获取当前组件提供的数据 |
| value | 为当前组件设置值。value属性的设置策略：①文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以自由输入②单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有on |
| checked | 设置单选框/复选框的默认选中状态（全选、反选） |
| readonly | 设置该标签的参数值只读，用户无法手动更改。但是数据是可以正常提交 |
| disabled | 设置该标签不可用（禁用），参数值无法更改，且参数值也无法提交 |
| size | 组件的长度 |
| maxlength | 设置允许输入的最大的长度 |
| placeholder | 输入框的提示信息 |
input-type属性值说明:
| 属性值 | 说明 |
|---|---|
| text | 文本框(默认)，单行的输入字段，用户可在其中输入纯文本。 |
| password | 密码框。 内容为非明文 |
| radio | 单选框。 必须将其设置为同一组(name的名字必须相同) |
| checkbox | 复选框。 必须将其设置为同一组(name的名字必须相同) |
| file | 附件框。用于文件上传。 |
| hidden | 隐藏域。数据可以通过表单发送至服务器，但是浏览器不会显示。 |
| submit | 提交按钮。用于控制表单提交数据。name属性一般不用设置，设置value属性 将按钮起一个名字 |
| reset | 重置按钮。 用于将所有的 表单输入项恢复到 默认状态 |
| image | 图形提交按钮 |
| button | 普通按钮。 需要和JavaScript事件一起用 |
代码示例：
<!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> <!-- 输入域标签 input:根据type取值不同来达到收集不同的信息目的*** name:提交到web服务器中的键 *** value:用户输入的内容、提交到服务器的值 单选框 复选框必选 其他可选*** id:标识元素在整个网页中只有一个 可选 *** checked:单选框的复选框的默认选中*** placeholder:提示用户输入readonly:输入框只允许读不允许修改disabled:设置该标签不可用（禁用），参数值无法更改，且参数值也无法提交size:组件的长度maxlength:最大允许输入的字符个数minlength:最低允许输入的字符个数type:文本框:text密码框:password单选框:radio复选框:checkbox文件框:file日期框:date隐藏域:hidden按钮 普通按钮:button提交按钮:submit重置按钮:reset区别get:1、会将参数暴露在地址栏不安全2、携带的数据量最大不能超过2KB3、请求的效率高post:1、会将参数携带在请求体、相对安全2、携带的数据量大小没有限制3、请求的效率低--><!-- form元素 --><form action="/s1" method="post"><!-- 表单控件 -->用户名:<input id="username" placeholder="请输入用户名" type="text" name="username"><br>密码:<input id="password" placeholder="请输入密码" maxlength="6" minlength="3" size="20" type="password" name="password"><br>性别:<input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女">女<br>爱好:<input type="checkbox" checked name="hobby" value="吃">吃<input type="checkbox" name="hobby" value="喝">喝<input type="checkbox" name="hobby" value="嫖">嫖<input type="checkbox" name="hobby" value="赌">赌<br>头像:<input type="file" name="fileName"> <br>图片:<!-- <input type="image" name="photo" width="100px" height="100px" src="../img/4.jpg"> --> <img src="../img/4.jpg" width="100px" height="100px" alt=""><br>出生年月:<input type="date" name="birthday"><br><input type="hidden" name="method" value="register"><!-- 表单按钮 --><input type="button" value="普通按钮"> <input type="submit" value="提交"> <input type="reset" value="重置"> </form>
</body>
</html>
2.3、下拉列表标签
提供一个下拉列表框，让用户进行选择。 <select>
属性解析:
| 属性值 | 说明 |
|---|---|
| name | 下拉列表框的名字。 |
| 子标签 | 属性selected选中项、value为当前下拉项的值 |
| multiple | multiple 属性规定输入字段可选择多个值 |
代码示例：
<!-- 下拉项标签 select:下拉框multiple:允许多选 了解option:下拉项selected:默认选中-->家庭住址:<select name="province" multiple><option value="河南">河南</option><option value="河北">河北</option><option value="山东" selected>山东</option></select>省<select name="city"><option value="驻马店">驻马店</option><option value="石家庄">石家庄</option><option value="青岛">青岛</option></select>市<br>
2.4、文本域标签
属性解析:
| 属性值 | 说明 |
|---|---|
| cols | 设置文本域的列数 |
| rows | 设置文本域的行数 |
代码示例：
<!-- cols:可见的行数rols:可见的列数-->个人介绍:<textarea rows="5" cols="30" name="sdesc"></textarea><br>
效果演示：
2.5、按钮标签
代码示例：
<!-- 表单按钮 --><input type="button" value="普通按钮"> <input type="submit" value="提交"> <input type="reset" value="重置">
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>Document</title>
</head><body> <!-- 输入域标签 input:根据type取值不同来达到收集不同的信息目的*** name:提交到web服务器中的键 *** value:用户输入的内容、提交到服务器的值 单选框 复选框必选 其他可选*** id:标识元素在整个网页中只有一个 可选 *** checked:单选框的复选框的默认选中*** placeholder:提示用户输入readonly:输入框只允许读不允许修改disabled:设置该标签不可用（禁用），参数值无法更改，且参数值也无法提交size:组件的长度maxlength:最大允许输入的字符个数minlength:最低允许输入的字符个数type:文本框:text密码框:password单选框:radio复选框:checkbox文件框:file日期框:date隐藏域:hidden按钮 普通按钮:button提交按钮:submit重置按钮:reset区别get:1、会将参数暴露在地址栏不安全2、携带的数据量最大不能超过2KB3、请求的效率高post:1、会将参数携带在请求体、相对安全2、携带的数据量大小没有限制3、请求的效率低--><!-- form元素 --><form action="/s1" method="post"><!-- 表单控件 -->用户名:<input id="username" placeholder="请输入用户名" type="text" name="username"><br>密码:<input id="password" placeholder="请输入密码" maxlength="6" minlength="3" size="20" type="password" name="password"><br>性别:<input type="radio" name="sex" value="男" checked>男 <input type="radio" name="sex" value="女">女<br>爱好:<input type="checkbox" checked name="hobby" value="吃">吃<input type="checkbox" name="hobby" value="喝">喝<input type="checkbox" name="hobby" value="嫖">嫖<input type="checkbox" name="hobby" value="赌">赌<br>头像:<input type="file" name="fileName"> <br>图片:<!-- <input type="image" name="photo" width="100px" height="100px" src="../img/4.jpg"> --> <img src="../img/4.jpg" width="100px" height="100px" alt=""><br>出生年月:<input type="date" name="birthday"><br><input type="hidden" name="method" value="register"><!-- 下拉项标签 select:下拉框multiple:允许多选 了解option:下拉项selected:默认选中-->家庭住址:<select name="province" multiple><option value="河南">河南</option><option value="河北">河北</option><option value="山东" selected>山东</option></select>省<select name="city"><option value="驻马店">驻马店</option><option value="石家庄">石家庄</option><option value="青岛">青岛</option></select>市<br><!-- cols:可见的行数rols:可见的列数-->个人介绍:<textarea rows="5" cols="30" name="sdesc"></textarea><br><!-- 表单按钮 --><input type="button" value="普通按钮"> <input type="submit" value="提交"> <input type="reset" value="重置"> </form>
</body>
</html>
（十）HTML框架标签
1、案例介绍
在我们查看一些后台管理系统的时候经常见到如下布局，此布局采用了框架布局。
通过红色框体我们发现，整个页面被分成了三部分。
2、案例相关标签
2.1、框架标签
写法格式:
<frameset></frameset>
框架标签标签是在本页面内用多窗口将多个页面整合在一起的一个框架集。每一个页面都是独立的，需要用子标签<frame>来确定页面的位置。<frameset>通过行和列控制整体布局，用cols确定列数(垂直分割页面)，用rows确定行数(水平分割页面)。特别注意事项:
<frameset>标签与<body>标签不能同时共存
属性解析:
| 属性值 | 说明 |
|---|---|
| cols | 对页面进行列切割一般我们用百分比或者用像素确定比例，最后一个值用匹配剩余量单位：像素/百分比 |
| rows | 对页面进行行切割一般我们用百分比比或者用像素确定比例，最后一个值用匹配剩余量单位：像素/百分比 |
问题: 框架标签是否可以嵌套? 答: 可以
2.2、框架子标签
<frame>标签是<frameset>标签的子标签, 用于页面引入.
属性解析：
| 属性名 | 属性说明 |
|---|---|
| src | 指定页面的路径 |
| noresize | 框架分割后禁止调整 |
| name | 该框架的名称用于和a标签target连用 |
3、案例完整代码
top.html
<!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 style="background-color:pink"><center><h2>欢迎各位老板来到爽爽爽洗浴会所</h2></center>
</body>
</html>
left.html
<!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><dl><dt>会所特色</dt><dd><a href="按摩.html" target="main">按摩服务</a></dd><dd><a href="保肾.html" target="main">保肾服务</a></dd><dd><a href="推油.html" target="main">推油服务</a></dd></dl>
</body>
</html>
main.html
<!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>现在时间:2021-09-13 16:32:51 星期一
</body>
</html>
index.html
<!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><!-- frameSet:框架标签cols:垂直分割 15%,* 左侧占15%的宽度右侧占剩余宽度的所有 rows:水平分割 200px,* 上侧占200像素的高度、下测占剩余高度的所有frame:定义具体的页面src:页面具体地址name:页面标识 --><frameset rows="150px,*"><!-- 上页面 --><frame src="top.html"></frame><!-- 下页面 --><frameset cols="150px,*"> <!--左页面 --><frame src="left.html"></frame><!-- 右页面 --><frame src="main.html" name="main"></frame></frameset></frameset></html>
按摩.html
<!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><img src="../img/1.gif" width="200px" height="200px" alt=""><p>今天不养生,明天养医生。今天不保健、明天养医院</p>
</body>
</html>
保肾.html
<!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><img src="../img/3.gif" width="200px" height="200px" alt=""><p>保肾天天去,健康你我他</p>
</body>
</html>
推油.html
<!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><img src="../img/2.gif" width="200px" height="200px" alt=""><p>减少犯罪几率,关注男性健康</p>
</body>
</html>
（十一）实体字符
有些字符，像(<)这类的，对HTML来说是有特殊意义的，所以这些字符是不允许在文本中使用的。要在HTML中显示(<)这个字符，我们就必须使用实体字符。
实体字符表:
字符实体语法结构：
&实体名称;
常见的实体字符有：
空格： 小于符号：< 大于符号：> 双引号：" 版权符号：©
代码示例：
<!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><!-- 空格<小于号>大于号©商标"一个双引号-->测试 空格 <br>5<6<br>10>5<br>版权所有归老杜所有©<br>我是大"帅B"
</body>
</html>
（十二）Div和Span标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0MiP9GXY-1635051005285)(img\wps73.jpg)]
DIV是一个块级元素, 默认没有任何样式, 需要配合CSS一起使用才能发挥作用,用div+css可以制作出精美的网页;扩展: 介绍一个块级标签(行内标签): span(通常用于存放一些错误信息)
代码示例：
<!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> <!-- div:全称diversion 意味划分的意思，可以将网页划分为多个块状的区域、其本身没有任何形态、 我们可以给其作用边框和样式大小才可以凸显其形态、 里面可以写html代码配合css就可以将容器定位到网页中某快区域 div:是一个块级标签 块级标签特征 1、独占一行 2、设置大小有形态的变化 应用场景:做网页定位排版布局使用 span:是html中的一个行级标签,和div一样是充当一个容器 行级标签特征 1、不换行 2、设置大小没有任何变化 span:存放登录注册过程中错误提示信息 --> <div style="width: 500px;height: 200px;border: 1px solid;"> 用户名:<input type="text" name="username"> </div> <div style="width: 500px;height: 200px;border: 1px solid;"> 用户名:<input type="text" name="username"> </div> <span style="border: 1px solid; width: 500px; height: 500px;">我是span1</span> <span style="border: 1px solid; width: 500px; height: 500px;">我是span2</span></body></html>
总结:DIV是一个块级元素, 它包含的元素会自动换行, 单独占一行;Span是一个行内元素, 它包含的元素不会自动换行, 有多少内容就占多少空间;
（十三）HTML5新特性
什么是 HTML5？HTML5 是最新的 HTML 标准。HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。HTML5 拥有新的语义、图形以及多媒体元素。HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 语义标签，多媒体内容，更好的页面结构，更好的形式处理等
常见语义标签:
<header>：描述了文档的头部区域，于定义内容的介绍展示区域 <div id="head"></div><article>：定义元素规定独立的自包含内容。<div id="body"> </div> <footer>：述了文档的底部区域，一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。 <div id="foot"> </div>
代码示例:
<!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> <center> <header> <h2>优就业简介</h2> </header> <hr> <article> <p> <strong>优就业</strong>作为一家专注于<em>IT职业教育培训企业</em>，坚持以“纯善”作为企业发展的价值观基石，在创造商业价值的同时，更加注重对员工.对学员、<br> 对社会的回馈。始终坚持以<font color="red" size="5">“成为一个能让员工快速成长并对人类社会发展有贡献的教育企<br> 业”</font>奋斗目标。 </p> <p> 自成立以来，不断通过慈善捐款、建立社会企业、资助贫困大学生、组织公益活动等多种形式履行企业的社会责任。优就业始终重视保<br> 障员工基本权益，为员工提供业务水平、管理能力等多层次教育培训，真正践行企业对员工的关爱同时，优就业始终坚持“学员的事是重要的事<br> ”这一服务理念，不断提升教学能力和服务水准，为学员提供更贴心的职业培训。先后通过成立社会工作服务中心;“阳光<br> 伴你行”公益项目;西华大学助学金项目;汶川、玉树地震救助及捐款计划等多种形式履行企业的社会责任，成为国内较早的救灾型公益<br>企业。 </p> </article> <hr> <footer> <p> 北京中公教育科技有限公司 <br> Copyright1999-2020.All Rights Reserved京ICP证161188号 </p> </footer> </center></body></html>
Day01.HTML5相关推荐
- 模型auc指标_auc致命缺陷模型指标
模型auc指标 by John Elder, Ph.D., Founder & Chairman, Elder Research 作者:John Elder,博士,Elder Research ...
- HTML5 学习笔记day01
目录 1.什么是HTML 2.web标准的构成 3.HTML标签 HTML常用标签 1.什么是HTML 超文本(可以加入图片,声音,动画多媒体等内容)标记语言,并不是一种编程语言,而是一种标记语言.它 ...
- web前端零基础html5
一.摘抄 h1:标题标签 p:段落标签 br:换行标签 hr:水平线标签 b/strong:加粗 u/ins:下划线 i/em:倾 ...
- day01 HTMLCSS
day01 HTML&CSS 1. Web基本概念 1.1 服务器和客户端的概念 1.1.1 客户端的作用 与用户进行交互,用于接收用户的输入(操作).展示服务器端的数据以及向服务器传递数据 ...
- 前端复习之HTML5
HTML5 Day01: *概念: *HTML5之后,声明不在出现版本信息 *HTML5永远不可能离开JavaScript. *HTML5在移动端支持好于PC端 ...
- 一起学WEB HTML5 第1讲
前言 今天开始我们就要进行第2个阶段的学习啦,今天的学习内容一共有以下几个部分: HTML5 basic 所有网页的结构,数据都是用html5来搭建 Ajax异步的数据交互 ajax帮助我们异步连接服 ...
- 5天学会HTML及HTML5
目录 Day01 一.计算机基础 1.1 计算机 1.2 软件和硬件 1.3 软件 1.4 应用软件 1.5 服务端和客户端 1.6 C/S 结构和 B/S 结构 二. 代码编辑器和浏览器介 ...
- HTML5和CSS3
一.Doctype作用?HTML5为什么只需要些<!doctype html> <!doctype>声明位于html文档中的第一行,处于<html>标签之前,告知浏 ...
- HTML5和CSS3 WEB技术开发
HTML5和CSS3 WEB技术开发 B站视频参考:https://www.bilibili.com/video/BV1H44y1k7ze/ 课程目标: 使用HTML5进行网站布局 使用CSS3进行网 ...
最新文章
- R语言与数据分析（6）-R包的安装
- bind、call、apply
- 【数理知识】《数值分析》李庆扬老师-第5章-解线性方程组的直接方法
- 鸿蒙安卓哪个app好,可以放下对华为鸿蒙的担忧了，操作和EMUI相似，能兼容安卓APP - 区块网...
- delphi FillChar的用法（转）
- ubuntu触电（转）
- 【图像融合】基于matlab小波变换全聚焦图像融合【含Matlab源码 1372期】
- 深入理解Nacos源码注册中心之服务发现（订阅拉取）
- Android本地音乐播放器的制作
- 幼儿园趣味舞蹈课教案
- python中的“ --snip-- ”是什么
- 敬仰之情犹如滔滔江水。。。
- 微信点拼多多砍价显示服务器吃撑,微信狠起来自己人都打？最严外链规范实行，微视、拼多多砍价链接被限制！...
- 去除迅雷右侧资源信息栏和迅雷广告，以及迅雷的速度限制修改
- laravel 中 使用闭包查询 分开whereIn
- 机器人 零境交错吧_电击文库零境交错
- （java）leetcode122 买卖股票的最佳时机2 数组的多个谷底与峰值的求和
- linux如何删除文件
- Shapes布局-文字环绕动画
- 利用GDI+实现gif图像背景透明