JavaEE-v4.0-HTML-授课
1 HTML快速入门
1.1 网页的介绍
网络世界已经跟我们息息相关，当我们打开一个网站，首先映入眼帘的就是一个个华丽多彩的网页。这些网页，不仅呈现着基本的内容，还具备优雅的布局和丰富的动态效果，这一切都是如何做到的呢？前端入门课程，为您一层层的揭开网页的面纱。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J8ZEkSj9-1656942768123)(assets/1572518651467.png)]
- 网页的构成
- HTML：用来制作网页基础内容和基本结构。
- CSS：用来制作网页美化效果。
- JavaScript：用来制作网页动态效果。
1.2 HTML的介绍
1.2.1 HTML的介绍
HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它是一种用来告知浏览器如何组织页面的标记语言。
-
所谓
超文本Hypertext，比普通文本更强大，是指连接单个或者多个网站间的网页的链接。我们通过链接，就能访问互联网中的内容。 -
所谓
标记Markup，就是标签，标记，是用来注明文本，图片等内容，以便于在浏览器中显示，例如<head>,<body>等。
- HTML发展简史【了解】
- HTML 1.0在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）
- HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
- HTML 3.2——1997年1月14日，W3C推荐标准
- HTML 4.0——1997年12月18日，W3C推荐标准
- HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
- HTML5 —— 2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。是目前最为流行的版本，提供了很多标签新特性，现代大多数浏览器已经具备了 HTML5的支持。
- 离线HTML官方文档：今天资料中的“W3School包含H5.chm”
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aTz56Qz1-1656942768125)(assets/1572846317149.png)]
w3c是万维网联盟（World Wide Web Consortium，W3C），又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯-李，负责制定web相关标准的制定。
1.2.2 HTML的组成
HTML页面由一系列的元素（elements） 组成，而元素是使用标签创建的。
1）标签
-
标签可以用于设置文本样式、图片样式、超链接样式等等。用**< >**表示
-
例如：
<h1>今天是个好日子</h1>-
在HTML中，
<h1>标签表示标题，那么，我们可以使用开始标签和结束标签包围文本内容，这样其中的内容就以标题的形式显示了。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g4YdqmHc-1656942768126)(assets/1572572630907.png)]
-
显示效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jIeSniB1-1656942768127)(assets/1572572990011.png)]
-
2）属性
- HTML标签可以拥有属性，属性可以为标签提供更多的信息
- 属性只能添加到开始标签中。格式为：属性名=属性值
- 例如：align 属性，代表对齐方式。我们可以在开始标签中添加该属性，就能让内容在不同位置显示了
<h1 align="center">今天是个好日子!!!</h1>
- 在HTML标签中，
align属性表示水平对齐方式，我们可以赋值为center表示 居中 。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1eLA6qbZ-1656942768127)(assets/1572576044902.png)]
- 显示效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-80Y7QNib-1656942768128)(assets/1572576525870.png)]
1.3 入门案例
-
案例效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0ObzOM2v-1656942768128)(img/html入门案例.png)]
1.3.1 初始页面
1）创建一个标准的初始化页面
-
右键点击创建新页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hoVYd6f4-1656942768129)(assets/1572585599853.png)]
-
自定义文件名字，比如index
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1jj7hB5s-1656942768129)(assets/1572585678711.png)]
-
点击ok，页面创建成功。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LMHhPAF0-1656942768129)(assets/1572585787377.png)]
2）页面说明
-
<!DOCTYPE html>: 声明文档类型。规定了HTML页面必须遵从的良好规则，从HTML5后，<!DOCTYPE html>是最短的有效的文档声明。文字作为了解资料
很久以前，早期的HTML(大约1991年2月)，文档类型声明类似于链接，能自动检测错误和其他有用的东西。使用如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">然而现在没有人再这样写，需要保证每一个东西都正常工作已成为历史。
-
<html>：这个标签包裹了整个完整的页面，是一个根元素（顶级元素）。其他所有元素必须是此元素的后代，每篇HTML文档只有一个根元素。 -
<head>：这个标签是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。以后的章节能学到更多关于<head>元素的内容。目前主要了解两个标签：<meta charset="utf-8">：这个标签是页面的元数据信息，设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容，能够避免页面乱码问题。<title>：这个标签定义文档标题，位置出现在浏览器标签上，而不是页面正文中。在收藏页面时，它可用来描述页面。
-
<body>：包含了文档内容，你访问页面时所有显示在页面上的文本，图片，音频，游戏等等。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZYuVDFrP-1656942768130)(assets/1572577371312.png)]
1.3.2 案例实现
-
在初始化页面的
<body>标签中，加入一对<h1>标签<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>01-入门案例</title> </head> <body> <h1></h1> </body> </html> -
在一对
<h1>标签中，编写文本内容，并且添加属性align="center"居中对齐<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>01-入门案例</title> </head> <body> <h1 align="center">这是我们第一个HTML入门案例</h1> </body> </html> -
打开浏览器查看，效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MhiTMZ6v-1656942768130)(img/html入门案例.png)]
1.4 概念小结
-
HTML是一种标记语言，用来组织页面，使用元素和属性。
-
这个元素的组成部分有：
- 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素
- 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围，表示元素从这里开始或者开始起作用
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠，这表示着元素的结尾
- 内容（Content）：元素的内容，本例中就是所输入的文本本身
- 属性（Attribute）：标签的附加信息
-
在学习HTML时，要抓住两个方面：
- 掌握标签所代表的含义。
- 掌握在标签中加入的属性的含义。
2 基本语法
2.1 HTML注释
-
什么是注释：注释是用于解释说明程序的
-
注释的格式：
-
注释的特点：被注释掉的标签，不会被浏览器解析
-
比如：
<p>我在注释外！</p> <!-- <p>我在注释内！</p> --> -
案例：02-基本语法-注释.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注释</title> </head> <body> <!--这是注释的内容，不会被浏览器解析--> <!--<h1>一级标题</h1>--> </body> </html>
2.2 HTMl标签
-
标签的分类
- 开始和结束标签（双标签）：
<h1></h1> <u></u> - 自闭和标签（单标签）：
<br/> <hr/>
- 开始和结束标签（双标签）：
-
标签的嵌套
-
正确的嵌套格式：
<h1><u>文本</u></h1> -
错误的嵌套格式：
<h1><u>文本</h1></u> -
说明：h1包含u，那么u的开始和结束都需要在h1中
-
补充：
- 大部分标签都是可以相互嵌套
- ul/ol只能嵌套li
- 单标签无法嵌套其他标签，行内标签无法嵌套块级标签
- 还有一些其他嵌套规则：https://zhidao.baidu.com/question/1951829110951989468.html
-
-
块级元素和行内元素
- 块级元素：在页面中以块的形式展现，自己独占一行，后面的内容会自动换行，例如
<p> <hr> <div> - 行内元素：在页面中以行的形式展现，不会换行。例如
<b> <i> <u> <span> - 注意：一个块级元素不会被嵌套进行内元素中，但可以嵌套在其它块级元素中。
- 块级元素：在页面中以块的形式展现，自己独占一行，后面的内容会自动换行，例如
-
div和span
<div>：是一个通用的内容容器，没有特殊语义。一般用来对其它元素进行分组，用于样式化相关的需求<span>：是一个通用的行内容器，没有特殊语义。一般被用来编织元素以达到某种样。<div>和<span>标签核心作用是布局页面
-
案例：03-基本语法-标签规范.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签</title> </head> <body> <!-- 标签分类 开始和结束标签 自闭和标签 --> <h1>一级标题</h1> <br/> <hr/> <!--标签的嵌套--> <h2><u>二级标题</u></h2> <!--块级元素和行内元素--> <div>第一个div</div> <div>第二个div</div> <span>第一个span</span> <span>第二个span</span> </body> </html>
2.3 关于属性
-
什么是属性
- 属性可以提供一些额外的信息，这些信息不会直接显示在内容中，但可以改变标签的样式或提供数据使用
-
定义格式：属性名=“属性值”
-
属性的规范
- 同一个标签中属性的名称必须唯一
- 不区分大小写，建议使用小写
- 属性值可以使用单引号或双引号括起来，建议使用双引号
-
常用属性：
属性名 作用 class 定义元素类名，用来选择和访问特定的元素 id 定义元素唯一标识符，在整个文档中必须是唯一的 name 定义元素名称，可以用于提交服务器的表单字段 value 定义在元素内显示的默认值 style 定义CSS样式，这些样式会覆盖之前设置的样式（第一天简单了解，第二天主要内容） -
案例：04-基本语法-属性.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性</title> </head> <body> <div class="cls">第一个div</div> <div class="cls">第二个div</div> <div id="d1">第三个div</div> <div id="d2">第四个div</div> <div style="background-color: red">第五个div</div> </body> </html>
2.4 特殊字符
-
什么是特殊字符
- 在 html 中，像< > ” ’ 空格 & 都是特殊字符，它们是语法本身的一部分
- 那么你如何将这些字符包含进你的文本中呢
-
常用特殊字符表示
原义字符 等价字符引用 < <> >" "’ '& &空格 - lt：less than ，小于
- gt：greater than，大于
- quot：quotation，引用
- amp ： ampersand [ˈæmpəsænd]，&符号
- nbsp：no-break space，不换行空格 ***
-
案例：05-基本语法-特殊字符.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>特殊字符</title> </head> <body> 本网站有 最终解释权 <br/> 本网站有 最终解释权 </body> </html>- 注意：
- HTML只识别一个空格，所以我们需要通过$npsp;来代替
- HTML不识别回车换行，我们一般通过标签
<br>来代替
3 HTML案例-新闻文本
重点讲解：
- div布局的基本方式
- 文本标签的基本使用
文本结构的页面基本是由标题和段落构成的，内容结构化会使读者的阅读体验更轻松。
3.1 案例效果
显示新闻文本：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WYfeCdgP-1656942768130)(img/新闻文本案例.png)]
3.2 案例分析
首先需要进行页面的布局，然后再填充文本样式（所有的网页都是这个思路）
3.2.1 div样式布局
文本由几部分构成，我们可以使用div将页面分割布局
先来了解一下，使用div如何进行简单的布局
在head标签中，通过style标签加入样式
- 基本格式：
格式:
<style>
标签名{
属性名:属性值;
}
</style>
- 多个属性名格式：
<style>
标签名{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
</style>
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式演示</title> <style> div{ /*显示边框：1像素粗，实线，黑色*/ border: 1px solid black; /*宽度 占屏幕的60%*/ width: 60%; /*高度 500像素*/ height: 500px; /*边框外边距：auto自动的意思，可以达到居中效果*/ margin: auto; } </style> </head> <body> <div>第一个div</div> </body> </html> -
效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HO6AbioZ-1656942768131)(assets/1573193872947.png)]
div的多样式：（复合属性：几个属性一起书写）
一个属性名可以含有多个值，同时设置多样式。
格式:
<style>
标签名{
属性名:属性值1 属性值2 属性值3;
}
</style>
【提示】
为了布局方便，我们通常可以先设置边框的样式，进行布局。结束后，再去掉边框，直观展示完整界面。
3.2.2 文本标签
- 案例中有很多文本，所以需要用到很多文本标签
- 使用文本内容标签可以设置文字基本样式
| 标签名 | 作用 |
|---|---|
| p | 表示文本的一个段落 |
| h | 表示文档标题，<h1>–<h6> ，呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低 |
| hr | 表示段落级元素之间的主题转换，一般显示为水平线(这个其实不算是文本标签) |
| li | 表示列表里的条目。 |
| ul | 表示一个无序列表，可含多个元素，无编号显示。 |
| ol | 表示一个有序列表，通常渲染为有带编号的列表 |
| em | 表示文本着重，一般用斜体显示 |
| strong | 表示文本重要，一般用粗体显示 |
| font | 表示字体，可以设置样式（已过时） |
| i | 表示斜体 |
| b | 表示加粗文本 |
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本标签演示</title> </head> <body> <!-- 段落标签：<p> --> <p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。</p> <p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:</p> <!-- 标题标签：<h1> ~ <h6> --> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <!-- 水平线标签：<hr/> 属性： size-大小 color-颜色 --> <hr size="4" color="red"/> <!-- 无序列表：<ul> 属性：type-列表样式(disc实心圆、circle空心圆、square实心方块) 列表项：<li> --> <ul type="circle"> <li>javaEE</li> <li>HTML</li> </ul> <!-- 有序列表：<ol> 属性：type-列表样式(1数字、A或a字母、I或i罗马字符) start-起始位置 列表项：<li> --> <ol type="1" start="10"> <!--编号从10开始--> <li>传智播客</li> <li>黑马程序员</li> </ol> <!-- 斜体标签：<i> <em> --> <i>我倾斜了</i> <em>我倾斜了</em> <br/> <!-- 加粗标签：<strong> <b> --> <strong>加粗文本</strong> <b>加粗文本</b> <br/> <!-- 文字标签：<font> 属性： size-大小 color-颜色 --> <font size="5" color="yellow">这是一段文字</font> </body> </html> -
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XhfPrBuz-1656942768131)(img/文本标签案例.png)]
3.3 使用标签
- 简单布局，使用div标签。
- 文本样式，使用基本文本标签。
3.4 实现步骤
-
创建html文件
-
使用div标签划分区域（标题，作者，副标题，正文），设置div样式（宽度60%，外边距自动）
-
编辑正文
- 使用h1标签加入标题
- 使用em标签加入作者信息
- 使用hr标签加入分割线
- 使用h3标签加入副标题
- 使用p标签加入正文
- 使用ol标签，li标签加入列表信息
- 使用strong标签，加入文字强调效果
-
案例代码： （案例的文字可以复制）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新闻文本</title> <style> div{ /*宽度 60%*/ width: 60%; /*外边距*/ margin: auto; } </style> </head> <body> <!--标题--> <div> <h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1> </div> <!--作者信息--> <div> <i><font size="2" color="gray">作者：itheima 2088-08-08</font></i> <hr/> </div> <!--副标题--> <div> <h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h3> </div> <!--正文内容--> <div> <p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。</p> <p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别: <ol> <li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。</li> <li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大</li> <li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆</li> </ol> </p> <p>说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。</p> <p><b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯</p> <p><b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。</p> <p><b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？</p> <p>随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？</p> </div> </body> </html>
4 HTML案例-头条页面
4.1 案例效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ijNh3uFF-1656942768132)(assets/anli2.jpg)]
4.2 案例分析
4.2.1 div布局的进阶
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TeuCr0hT-1656942768132)(assets/1572917008322.png)]
-
先对界面进行布局，然后填充内容（文本，图片，超链接）
-
想要将div布局成案例效果，首先需要对多个div进行区分，再分别设置每一个div自身的效果。
-
布局分析如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bRnYx5Dl-1656942768132)(img/头条界面分析.png)]
-
顶部登陆注册，导航条，底部超链接，都是一个div可以搞定
-
但是中间的三大块是站一行的，我们如果想用div，那如何将三个div放到一行呢？利用浮动
-
接下来我们学习给div设置类样式，和添加浮动
1）div的class值（给div添加类样式）
- 案例：01案例二：样式演示.html
- 首先编写五个个div，设置边框样式
<style>
/*给div标签添加边框*/
div{ border: 1px solid red;}
</style>
<!--顶部登陆注册-->
<div>top</div>
<!--导航条-->
<div>navibar</div>
<!--左侧图片-->
<div class="left">left</div>
<!--中间正文-->
<div class="center">center</div>
<!--右侧广告图片-->
<div class="right">right</div>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pVYUkrsV-1656942768133)(img/头条01.png)]
-
发现通过div设置的样式都是一致的，无法个性化布局。如何区分不同的div呢？
-
使用class的值，格式：
.class值{
属性名:属性值;
}
<标签名 class="class值">
提示: class是自定义的值
- 所以，使用class属性值，可以帮助我们区分div，更加精确的设置标签的样式
- 那接下来我们来给left，center和right添加class类样式，设置浮动
2）浮动布局和清除
- 主体部分分为三列，而div是独占一行的，所以想要使用div布局，就还需要加入
浮动属性。
-
浮动概念
-
float：指定一个元素应沿其容器的左侧或右侧放置，允许文本或者内联元素（行内元素）环绕它，该元素从网页的正常流动中移除，其他部分保持正常文档流顺序
-
格式：
<!-- 加入浮动 --> float：none；不浮动 float：left；左浮动 float：right；右浮动 <!-- 清除浮动 --> clear：both；清除两侧浮动，此元素不再受浮动元素布局影响
-
- 案例：继续刚刚的案例，分别给三个div添加class类样式
- 添加class属性
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
- 定义class类样式
.left{
width: 20%;
float: left;
height: 500px;
}
.center{
width: 59%;
float: left;
height: 500px;
}
.right{
width: 20%;
float: left;
height: 500px;
}
- 加入
footer部分
.footer{
border: 5px solid blue;
}
<div class="footer">footer</div>
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dxHcECOv-1656942768133)(img/头条02.png)]
发现蓝框footer的div，延续正常文档流布局，摆放在navibar的下方，与浮动元素重叠。想要清除浮动影响，所以要设置清除浮动属性clear。
.footer{
/*清除浮动效果*/
clear: both;
/*文本对齐方式: left,center,right
之前学习的align:center，是标签的属性，不是css样式
*/
text-align: center;
border: 5px solid blue;
}
<div class="footer">footer</div>
-
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4TiaPZTe-1656942768133)(img/头条03.png)]
4.2.2 图片标签
- 案例中还会使用图片，我们来研究一下图片
| 标签名 | 作用 | 备注 |
|---|---|---|
| img | 可以显示一张图片(本地或网络) | src属性，这是一个必需的属性，表示图片的地址。 |
- 其他属性：
| 属性名 | 作用 | 备注 |
|---|---|---|
| title | 鼠标悬停（hover）时显示文本。 | |
| alt | 图形不显示时的替换文本。 | |
| height | 图像的高度。 | |
| width | 图像的宽度。 |
-
案例：02案例二：图片标签演示.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片标签演示</title> </head> <body> <!-- 图片标签：<img> 属性： src-图片的路径 title-鼠标悬浮时显示的内容 alt-图片找不到时显示的内容 width-图片的宽度 height-图片的高度 --> <img src="../img/ad1.jpg" title="广告" alt="图片找不到啦" width="150px" height="150px"/> </body> </html> -
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wP8yhfTr-1656942768134)(img/图片标签.png)]
4.2.3 超链接
- 案例中还会使用到超链接，我们来学习一下
| 标签名 | 作用 | 备注 |
|---|---|---|
| a | 表示超链接。 | href属性，表示超链接指向的URL地址。 |
| 属性名 | 作用 |
|---|---|
| target | 页面的打开方式(_self当前页 _blank新标签页)。 |
- 去掉下划线：根据某些样式的布局需求，去除下划线更为美观
a {
text-decoration:none; // none 表示不显示
}
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超链接标签演示</title> <style> a{ /*去掉超链接的下划线*/ text-decoration: none; /*超链接的颜色*/ color: black; } /*鼠标悬浮的样式控制*/ a:hover{ color: red; } </style> </head> <body> <!-- 超链接标签：<a> 属性： href-跳转的地址 target-跳转的方式(_self当前页面、_blank新标签页) --> <a href="01案例二：样式演示.html" target="_blank">点我跳转到样式演示</a> <br/> <a href="http://www.itcast.cn" target="_blank">传智播客</a> <br/> <a href="http://www.itheima.com" target="_self">黑马程序员</a> <br/> <a href="http://www.itheima.com" target="_blank"><img src="../img/itheima.png" width="150px" height="50px"/></a> </body> </html> -
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-puhG7hFM-1656942768134)(img/超链接标签.png)]
4.3 实现步骤
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1zbDUgdR-1656942768134)(img/头条步骤.png)]
4.3.1 准备工作
-
新建html：04案例二：头条页面.html
-
界面结构：其实就是给“01案例二：样式演示.html”，拿过来，给left，center，right的高度去掉了，后边我们填充过内容，自然就有高度了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式演示</title> <style> /*给div标签添加边框*/ div { border: 1px solid red; } /*左侧图片的div样式*/ .left { width: 20%; float: left; } /*中间正文的div样式*/ .center { width: 59%; float: left; } /*右侧广告图片的div样式*/ .right { width: 20%; float: left; } /*底部超链接的div样式*/ .footer { /*清除浮动效果*/ clear: both; /*文本对齐方式*/ text-align: center; /*背景颜色*/ background: blue; } </style> </head> <body> <!--顶部登陆注册--> <div>top</div> <!--导航条--> <div>navibar</div> <!--左侧图片--> <div class="left">left</div> <!--中间正文--> <div class="center">center</div> <!--右侧广告图片--> <div class="right">right</div> <!--底部页脚超链接--> <div class="footer">footer</div> </body> </html> -
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YTca9V13-1656942768135)(img/头条结构.png)]
4.3.2 实现顶部条
- 修改top那个div如下：（图片从当天 “资料\img” 目录下拿）
<div class="top_bar">
<img src="../img/j1.png">
</div>
- 样式代码
img{
width: 100%;
}
- 效果如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-29Ba8HoD-1656942768135)(img/头条04.png)]
4.3.3 实现导航条
- 修改导航条div如下：
<div class="nav_bar">
<img src="../img/j2.png" width="100%">
</div>
<!-- 加入分割线 -->
<hr size="1"/>
- 效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b4CcSTLm-1656942768135)(img/头条05.png)]
###4.3.4 实现左部分享
- 修改left那个div如下：
<div class="left">
<img src="../img/j3.png" />
</div>
- 效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3UTzO1NR-1656942768136)(img/头条06.png)]
4.3.5 实现中部正文
- 修改center那个div，将之前的“03-新闻文本案例.html”的body里素有的内容copy过来即可（也可从下述代码copy）
<!--标题-->
<div>
<h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1>
</div>
<!--作者信息-->
<div>
<i><font size="2" color="gray">作者：itheima 2088-08-08</font></i>
<hr/>
</div>
<!--副标题-->
<div>
<h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h3>
</div>
<!--正文内容-->
<div>
<p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。</p>
<p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:
<ol>
<li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。</li>
<li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大</li>
<li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆</li>
</ol>
</p>
<p>说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。</p>
<p><b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯</p>
<p><b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。</p>
<p><b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？</p>
<p>随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？</p>
</div>
-
添加图片
#ol下添加 <img src="../img/1.jpg" width="100%"/> # 二、芝麻分600以上福利之信用免押。 下添加 <img src="../img/2.jpg" width="100%"/> -
效果：效果图比较长，截图是往下拉了点截的（能看到两张图片即可）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TkQUOGnU-1656942768136)(img/头条07.png)]
4.3.6 实现右侧广告
- 修改right那个div如下：
<div class="right">
<img src="../img/ad1.jpg" width="100%"/>
<img src="../img/ad2.jpg" width="100%"/>
<img src="../img/ad3.jpg" width="100%"/>
<img src="../img/ad1.jpg" width="100%"/>
<img src="../img/ad2.jpg" width="100%"/>
<img src="../img/ad3.jpg" width="100%"/>
</div>
- 效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7KbXWGFk-1656942768136)(img/头条08.png)]
4.3.7 实现底部页脚
- 修改footer那个div如下：
<div class="footer">
<a href="#">关于黑马</a>
<a href="#">帮助中心</a>
<a href="#">开放平台</a>
<a href="#">诚聘英才</a>
<a href="#">联系我们</a>
<a href="#">法律声明</a>
<a href="#">隐私政策</a>
<a href="#">知识产权</a>
<a href="#">廉政举报</a>
</div>
- 样式代码
/*去除div的样式*/
/*div{
border: 1px solid red;
}*/
/*修改中间宽度为60% （去掉边框之后，左中右宽度加起来应该是百分百才对）*/
.center{
width: 60%;
float: left;
}
/*超链接的样式控制*/
a{
color: white;
text-decoration: none;
}
- 底部效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bl2t9mvo-1656942768137)(img/头条09.png)]
-
最终效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8G8I05EE-1656942768137)(img/头条最终效果.png)]
5 HTML案例-注册页面
5.1 案例效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r09oXj0J-1656942768137)(assets/1573530051845.png)]
5.2 案例分析
- 首先进行页面布局，然后填充内容（表单）
- 这个案例需要用到表单和背景图片，我们先来学习一下
5.2.1 背景图片
-
设置背景的格式：
背景色: background-color: black; 背景图: background-image: url("../img/bg.png"); 也可以使用background复合属性： background: black url("../img/bg.png") no-repeat; #可以同时设置背景颜色和背景图片 #但是如果想同时看到背景图片和背景颜色，需要有两点 # 1. 背景图片不能与标签一样大 # 2. 背景图片需要设置no-repeat，不重复 -
案例：新建案例三文件夹，然后新建html：01案例三：样式演示.html
-
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<style>
body{
/*添加背景图片*/
background: url("../img/bg.png");
}
</style>
</head>
<body>
</body>
</html>
-
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FwD7idQ6-1656942768138)(img/背景图片.png)]
-
补充：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图片</title> <style> div { /*添加背景图片*/ width: 500px; height: 600px; background: black url("../img/ad1.jpg") no-repeat; } </style> </head> <body> <div></div> </body> </html>
5.2.2 表单标签
- 表单标签介绍
| 标签名 | 作用 | 备注 |
|---|---|---|
| form | 表示表单，是用来收集用户输入信息并向 Web 服务器提交的一个容器 |
- 举例
<form >
//表单元素
</form>
- 表单的属性
| 属性名 | 作用 | 备注 |
|---|---|---|
| action | 处理此表单信息的Web服务器的URL地址 | 没有url，写# |
| method | 提交此表单信息到Web服务器的方式 | 可能的值有get和post，默认为get |
| autocomplete | 自动补全，指示表单元素是否能够拥有一个默认值，配合input标签使用 | 值为on，off |
- 举例：
<!-- 一个简单的表单，会发送一个 GET 请求 -->
<form action="/web/login" method="get">
</form>
<!-- 一个简单的表单，发送 POST 请求 -->
<form action="/web/reg" method="post">
</form>
- GET与POST说明：
post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。表单数据不会显示在地址栏中，数据封装在请求体中，安全。长度没有限制。
get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的URI中，并以 ‘?’ 作为分隔符，然后这样得到的 URI 再发送给服务器。表单数据会显示在地址栏中，不安全。地址栏的url长度有限制。
GET方式举例：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tsJKbgxm-1656942768138)(assets/1573034215181.png)]
- GET与POST对比：
| 地址栏可见 | 数据安全 | 数据大小 | |
|---|---|---|---|
| GET | 可见 | 不安全 | 有限制（取决于浏览器） |
| POST | 不可见 | 相对安全 | 无限制 |
-
案例：02案例三：表单标签演示.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签的演示</title> </head> <body> <!-- 表单标签：<form> 属性： action-提交的路径 method-提交的方式(get和post) autocomplete-记录补全(on和off) input：type='text'文本框，name是给input起名字 button type='submit' 提交按钮，点击之后会提交表单 如果是get请求方式，会将表单中带name的表单标签以?拼接到url后 拼接格式： url?name=value&name2=value2 如果是post请求方式，会将表单中namde的表单标签放入请求体中（不拼接到url） --> <!--get方式的表单--> <form action="#" method="get" autocomplete="off"> 用户名：<input type="text" name="username"/> <button type="submit">提交</button> </form> <!--post方式的表单--> <form action="#" method="post" autocomplete="off"> 用户名：<input type="text" name="username"/> <button type="submit">提交</button> </form> </body> </html> -
autocomplete为on时的效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uGpqgMDm-1656942768139)(img/auto.png)]
-
get提交，url效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B5JFEW7q-1656942768139)(img/get提交.png)]
5.2.3 表单项标签入门
-
表单项标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f6bBWy7i-1656942768139)(img/表单项标签.png)]
-
案例：03案例三：表单项标签演示.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单项标签</title>
</head>
<body>
<!--
表单项标签：<label> 表单元素说明
属性：for属性，属性值必须和表单项标签id属性值一致
表单项标签：<input> 多种类型数据
属性：
type-数据类型
id-唯一标识
name-提交服务器的标识
value-默认的数据值
placeholder-默认的提示信息
required-是否必须
按钮标签：<button>
属性：
type-按钮的类型(submit提交、reset重置、button普通按钮)
-->
<form action="#" method="get" autocomplete="off">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" value="" placeholder=" 请在此处输入用户名" required/>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
</body>
</html>
5.2.4 关于属性值
1）NAME和VALUE属性
| 属性名 | 作用 |
|---|---|
| name | <input>的名字，在提交整个表单数据时，可以用于区分属于不同<input>的值 |
| value | 这个<input>元素当前的值，允许用户通过页面输入 |
使用方式：
以name属性值作为键，value属性值作为值，构成键值对提交到服务器，多个键值对浏览器使用&进行分隔。
举例：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dn5LbSDI-1656942768139)(assets/1573087321222.png)]
2）TYPE属性
-
基本的文本属性
属性值 作用 备注 text 单行文本字段 password 单行文本字段，值被遮盖 email 用于编辑 e-mail 的字段，可以对e-mail地址进行简单校验 HTML5 举例：
<form action="#" method="get"> <label for="username">Username:</label> <input type="text" id="username" name="username"> <br/> <label for="password">Password:</label> <input type="password" id="password" name="password"><br/> <label for="email">Email: </label> <input type="email" id="email" name="email"><br/> <button type="submit"> login</button> </form>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dYFTqFuG-1656942768140)(assets/1573089370881.png)]
-
单选多选属性
属性值 作用 radio 单选按钮。 1. 在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值；一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。 2. 必须使用 value 属性定义此控件被提交时的值。 3. 使用checked 必须指示控件是否缺省被选择。 checkbox 复选框。 1. 必须使用 value 属性定义此控件被提交时的值。 2. 使用 checked 属性指示控件是否被选择。 3. 选中多个值时，所有的值会构成一个数组而提交到Web服务器 举例：
<form action="#" method="get"> <label for="gender">性别:</label> <input type="radio" id="gender" name="gender" value="boy"/>男 <input type="radio" name="gender" value="girl" checked="checked"/>女 <hr/> <label for="hobby">爱好: </label> <input type="checkbox" id="hobby" name="hobby" value="sport"/> 体育 <input type="checkbox" name="hobby" value="tech"/> 科技 <input type="checkbox" name="hobby" value="fun" /> 娱乐 <input type="checkbox" name="hobby" value="video" checked="checked"/> 短视频 </form>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-chxDdDlu-1656942768140)(assets/1573090505218.png)]
-
按钮属性
属性值 作用 button 无行为按钮，用于结合JavaScript实现自定义动态效果 submit 提交按钮，用于提交表单数据。 reset 重置按钮，用于将表单中内容恢复为默认值。 image 图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。 -
HTML5新增的type值
属性值 作用 备注 date HTML5 用于输入日期的控件 年，月，日，不包括时间 time HTML5 用于输入时间的控件 不含时区 datetime-local HTML5 用于输入日期时间的控件 不包含时区 number HTML5 用于输入浮点数的控件 range HTML5 用于输入不精确值控件 max-规定最大值
min-规定最小值
step-规定步进值
value-规定默认值search HTML5 用于输入搜索字符串的单行文本字段 可以点击 x清除内容tel HTML5 用于输入电话号码的控件 url HTML5 用于编辑URL的字段 可以校验URL地址格式
-
| 属性值 | 作用 | 备注 |
|---|---|---|
| file | 此控件可以让用户选择文件，用于文件上传。 | 使用 accept 属性可以定义控件可以选择的文件类型。 |
| hidden | 此控件用户在页面上不可见，但它的值会被提交到服务器，用于传递隐藏值 |
-
button标签的type属性
属性值 作用 备注 submit 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。 同 <input type="submit"/>reset 此按钮重置所有组件为初始值。 同 <input type="reset"/>button 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。 同 <input type="button"/>
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>type属性演示</title> </head> <body> <!-- type属性 <input type="text"/> 普通文本输入框 <input type="password"/> 密码输入框 <input type="email"/> 邮箱输入框 <input type="radio"/> 单选框。必须有相同的name属性值，value属性真实提交的数据，checked属性默认选中 <input type="checkbox"/> 多选框。必须有相同的name属性值，value属性真实提交的数据，checked属性默认选中 <input type="date"/> 日期框 <input type="time"/> 时间框 <input type="datetime-local"/> 本地日期时间框 <input type="number"/> 数字框 <input type="range"/> 滚动条数值框 min-最小值 max-最大值 step-步进值 <input type="search"/> 可清除文本框 <input type="tel"/> 电话框 <input type="url"/> 网址框 <input type="file"/> 文件上传框 <input type="hidden"/> 隐藏域 value属性设置实际提交的值 --> <form action="#" method="get" autocomplete="off"> <label for="username">用户名：</label> <input type="text" id="username" name="username"/> <br/> <label for="password">密码：</label> <input type="password" id="password" name="password"/> <br/> <label for="email">邮箱：</label> <input type="email" id="email" name="email"/> <br/> <label for="gender">性别：</label> <input type="radio" id="gender" name="gender" value="men"/>男 <input type="radio" name="gender" value="women"/>女 <input type="radio" name="gender" value="other"/>其他<br/> <label for="hobby">爱好：</label> <input type="checkbox" id="hobby" name="hobby" value="music" checked/>音乐 <input type="checkbox" name="hobby" value="game"/>游戏 <br/> <label for="birthday">生日：</label> <input type="date" id="birthday" name="birthday"/> <br/> <label for="time">当前时间：</label> <input type="time" id="time" name="time"/> <br/> <label for="insert">注册时间：</label> <input type="datetime-local" id="insert" name="insert"/> <br/> <label for="age">年龄：</label> <input type="number" id="age" name="age"/> <br/> <label for="range">心情值(1~10)：</label> <input type="range" id="range" name="range" min="1" max="10" step="1"/> <br/> <label for="search">可全部清除文本：</label> <input type="search" id="search" name="search"/> <br/> <label for="tel">电话：</label> <input type="tel" id="tel" name="tel"/> <br/> <label for="url">个人网站：</label> <input type="url" id="url" name="url"/> <br/> <label for="file">文件上传：</label> <input type="file" id="file" name="file"/> <br/> <label for="hidden">隐藏信息：</label> <input type="hidden" id="hidden" name="hidden" value="itheima"/> <br/> <button type="submit">提交</button> <button type="reset">重置</button> </form> </body> </html>
5.2.5 其他常用表单项标签
| 标签名 | 作用 | 备注 |
|---|---|---|
| **select ** | 表单的控件，下拉选项菜单 | 与option配合实用 |
| optgroup | option的分组标签 | 与option配合实用 |
| **option ** | select的子标签，表示一个选项 | |
| textarea | 表示多行纯文本编辑控件 | rows表示行高度， cols表示列宽度 |
| fieldset | 用来对表单中的控制元素进行分组(也包括 label 元素) | |
| legend | 用于表示它的fieldset内容的标题。 | fieldset 的子元素 |
select举例：
<label for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
<!--
select的name属性值与option的value属性值,构成键值对,提交到Web服务器
-->
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xgLlt3zC-1656942768140)(assets/1573109125538.png)]
textarea举例：
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Sk2KHJX-1656942768141)(assets/1573109422288.png)]
fieldset举例：
<form action="#" method="post">
<fieldset>
<legend>是否同意</legend>
<input type="radio" id="radio_y" name="agree" value="y">
<label for="radio_y">同意</label>
<input type="radio" id="radio_n" name="agree" value="n">
<label for="radio_n">不同意</label>
</fieldset>
</form>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4U2iHX0o-1656942768141)(assets/1573109738841.png)]
-
视频中案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>其他常用表单项标签演示</title> </head> <body> <!-- 下拉列表标签：<select> 列表项标签：<option> 列表项分组标签：<optgroup> 属性：label设置分组名称 文本域标签：<textarea> 属性： rows-行数 cols-列数 --> <form action="#" method="get" autocomplete="off"> 所在城市：<select name="city"> <option>---请选择城市---</option> <optgroup label="直辖市"> <option>北京</option> <option>上海</option> </optgroup> <optgroup label="省会市"> <option>杭州</option> <option>武汉</option> </optgroup> </select> <br/> 个人介绍：<textarea name="desc" rows="5" cols="20"></textarea> <button type="submit">提交</button> <button type="reset">重置</button> </form> </body> </html>
5.4 实现步骤
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jl9dSg65-1656942768141)(img/注册步骤.png)]
-
案例：06案例三：注册页面.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> body{ background: url("../img/bg.png"); } .center{ /*背景颜色*/ background: white; /*宽度*/ width: 400px; /*文本对齐方式*/ text-align: center; /*外边距*/ margin: auto; } </style> </head> <body> <!--顶部-公司图标--> <div> <img src="../img/logo.png"/> </div> <!--中间-注册信息--> <div class="center"> <div>注册详情</div> <hr/> <!--表单标签--> <form action="#" method="get" autocomplete="off"> <div> <label for="username">姓名：</label> <input type="text" id="username" name="username" value="" placeholder=" 在此输入姓名" required/> </div> <div> <label for="password">密码：</label> <input type="password" id="password" name="password" value="" placeholder=" 在此输入密码" required/> </div> <div> <label for="email">邮箱：</label> <input type="email" id="email" name="email" value="" placeholder=" 在此输入邮箱" required/> </div> <div> <label for="tel">手机：</label> <input type="tel" id="tel" name="tel" value="" placeholder=" 在此输入手机" required/> </div> <hr/> <div> <label for="gender">性别：</label> <input type="radio" id="gender" name="gender" value="men"/>男 <input type="radio" name="gender" value="women"/>女 </div> <div> <label for="hobby">爱好：</label> <input type="checkbox" id="hobby" name="hobby" value="music"/>音乐 <input type="checkbox" name="hobby" value="movie"/>电影 <input type="checkbox" name="hobby" value="game"/>游戏 </div> <div> <label for="birthday">出生日期：</label> <input type="date" id="birthday" name="birthday" value=""/> </div> <div> <label for="city">所在城市：</label> <select id="city" name="city"> <option>---请选择所在城市---</option> <optgroup label="直辖市"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </optgroup> <optgroup label="省会市"> <option>西安</option> <option>杭州</option> <option>郑州</option> <option>武汉</option> </optgroup> </select> </div> <hr/> <div> <label for="desc">个性签名：</label> <textarea id="desc" name="desc" rows="5" cols="40" placeholder=" 请写下您的与众不同"></textarea> </div> <hr/> <button type="submit">注册</button> <button type="reset">重置</button> </form> </div> </body> </html>
扫一扫
1036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
