HTML-标签-表单
HTML
HTML的介绍:
html:超文本标记语言
超文本:比普通文本更强大
标记:就是标签.可以使用一系列的标签,将网络上的文档格式统一,是分散的资源连接为一个逻辑整体.
html的组成:
html页面是由一系类的元素组成的,而元素是通过标签创建出来的
1.标签
标签可以用于设置文本样式,图片样式,超链接样式等等.用<>表示
2.属性
标签中还可以拥有属性,属性可以为标签提供更多的信息.
属性只能添加到开始标签中.格式为:属性名=属性值
组成部分:
元素:(Element)开始标签,结束标签与内容相结合,便是一个完整的元素
开始标签(Opening tag):包含元素的名称,被左右尖括号所包围.表示元素从这里开始或者开始起作用.
结束标签(Closing tag):与开始标签相似,知识其在元素名之前包含了一个斜杠.这表示着元素的结尾
内容(Content):元素的内容,
属性(Attribute):标签的附加信息
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-入门案例title>
head>
<body>
<h1 align="center">这是我的第一个HTML入门案例h1>
body>
html>
html的注释
html的标签:
1.标签的分类
开始和结束的标签:
<h1>h1> 开始
<u>u> 文本加下划线
自闭和标签:
<br/> 换行
<hr/> 水平分割线
2.标签的嵌套
正确的嵌套格式:
<h1><u>文本u>h1>
错误的嵌套格式:
3.块级元素和行内元素:
块级元素:在页面中以块的形式展现,自己独占一行,后面的内容会自动换行
<p><hr><div>
行内元素:在页面中以行的形式展现,不会换行.
4.div和span
div:是一个通用的内容容器,没有特殊语义.一班用来对其它元素进行分组,用于样式化的相关需求.
span:是一个通用的行内容器,没有特殊语义.一班用来编织元素以到达某种样式.
html的属性:
属性是可以提供一些额外的信息,这些信息不回直接显示在内容中.但可以改变标签的样式或提供数据使用.
定义格式:属性名 = 属性值
属性的规范:
同一个标签中属性的名称必须唯一
不区分大小写,建议使用小写
属性值可以使用单引号或双引号括起来,建议使用双引号.
常用的属性:
class:定义元素的类名,用来选择和访问特定的元素
id:定义元素的唯一标识,在整个文档中必须是唯一的
name:定义元素的名称,一班用于表单数据提交到服务器
value:定义在元素内显示的默认值,一班常用于表单标签中
style:定义元素的css样式
特殊字符:
| 原义字符 | 等价字符引用 |
|---|---|
| < | &It; |
| > | > |
| " | " |
| ’ | ' |
| & | & |
| 空格 |
div样式布局:
基本格式：
格式:
多个属性名格式：
<style>
标签名{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
style>
div的多样式：
一个属性名可以含有多个值，同时设置多样式。
格式:
<style>
标签名{
属性名:属性值1 属性值2 属性值3;
}
style>
【提示】
为了布局方便，我们通常可以先设置边框的样式，进行布局。结束后，再去掉边框，直观展示完整界面。
文本标签:
| 标签名 | 作用 |
|---|---|
| p | 表示文本的一个段落 |
| h | 表示文档标题， |
| hr | 表示段落级元素之间的主题转换，一般显示为水平线 |
| li | 表示列表里的条目。 |
| ul | 表示一个无序列表，可含多个元素，无编号显示。 |
| ol | 表示一个有序列表，通常渲染为有带编号的列表 |
| em | 表示文本着重，一般用斜体显示 |
| strong | 表示文本重要，一般用粗体显示 |
| font | 表示字体，可以设置样式（已过时） |
| i | 表示斜体 |
| b | 表示加粗文本 |
重点演示li的不换行效果：
li{ display: inline; // 内联样式,有宽度,无高度}
li{ display: inline-block; // 内联样式,有宽度,有高度}
3.3 使用标签
- 简单布局，使用div标签。
- 文本样式，使用基本文本标签。
3.4 实现步骤
- 创建初始页面。
- 使用div标签划分区域（标题，作者，副标题，正文），设置div样式。
- 编辑正文。
- 使用h1标签加入标题。
- 使用em标签加入作者信息。
- 使用hr标签加入分割线。
- 使用h3标签加入副标题。
- 使用p标签加入正文。
- 使用ol标签，li标签加入列表信息。
- 使用strong标签，加入文字强调效果。
4 HTML案例-头条页面
想要将div布局成案例效果，首先需要对多个div进行区分，再分别设置每一个div自身的效果。
1）div的class值
首先编写三个div，设置边框样式
<style>
div{ border: 1px solid blue;}
style>
<div >leftdiv>
<div >centerdiv>
<div>rightdiv>
发现通过div设置的样式都是一致的，无法个性化布局。如何区分不同的div呢？
使用class的值，格式：
.class值{
属性名:属性值;
}
<标签名 class="class值">
提示: class是自定义的值
所以，使用class属性值，可以帮助我们区分div，更加精确的设置标签的样式。
2）浮动布局和清除
主体部分分为三列，而div是独占一行的，所以想要使用div布局，就还需要加入浮动 属性。
-
概念
float：指定一个元素应沿其容器的左侧或右侧放置，允许文本或者内联元素环绕它，该元素从网页的正常流动中移除，其他部分保持正常文档流顺序。
格式：
float：none；不浮动 float：left；左浮动 float：right；右浮动 clear：both；清除两侧浮动，此元素不再收浮动元素布局影响。
- 加入三部分div
<div class="left">leftdiv>
<div class="center">centerdiv>
<div class="right">rightdiv>
- 浮动布局
.left{
width: 20%;
float: left;
}
.center{
width: 59%;
float: left;
}
.right{
width: 20%;
float: left;
}
至此完成左中右三部分的布局。
- 加入
footer部分
.footer{
border: 5px solid blue;
}
<div class="footer">footerdiv>
发现蓝色footer的div，延续正常文档流布局，摆放在navbar的下方，与浮动元素重叠。想要清除浮动影响，所以要设置清除浮动属性clear。
.footer{
border: 5px solid blue;
clear: both;
}
<div class="footer">footerdiv>
- 设置
center
增加center 高度，完成基本的布局效果。
.center{
width: 59%;
float: left;
height: 600px;
}
4.2.2 设置背景
-
设置背景的格式：
背景色: background-color: black; 背景图: background-image: url("../img/bg.png");
请设置如下布局，效果如下
代码实现
<style>
div{
height: 666px;
background-color: gray;
}
/*左侧分享*/
.left {
width: 10%;
float: left;
}
/*中间文本*/
.center {
width: 80%;/*最后去除边框宽度恢复为60%*/
float: left;
background-image: url("../img/star.gif");
}
/*右侧广告*/
.right {
width: 10%;
float: left;
}
style>
<div class="left">div>
<div class="center">div>
<div class="right">div>
4.2.3 图片标签
| 标签名 | 作用 | 备注 |
|---|---|---|
| img | 可以显示一张图片(本地或网络) | src属性，这是一个必需的属性，表示图片的地址。 |
其他属性：
| 属性名 | 作用 | 备注 |
|---|---|---|
| title | 鼠标悬停（hover）时显示文本。 | |
| alt | 图形不显示时的替换文本。 | |
| height | 图像的高度。 | |
| width | 图像的宽度。 |
4.2.4 超链接
| 标签名 | 作用 | 备注 |
|---|---|---|
| a | 表示超链接。 | href属性，表示超链接指向的URL地址。 |
| 属性名 | 作用 |
|---|---|
| target | 页面的打开方式(_self当前页 _blank新标签页)。 |
去掉下划线
根据某些样式的布局需求，去除下划线更为美观。
a {
text-decoration:none; // none 表示不显示
}
4.3 使用标签
- 使用div标签，设置布局，背景和浮动等。
- 基本文本标签
- 图片标签
- 超链接标签
4.4 实现步骤
- 创建初始页面，拷贝图片等素材。
- 整体布局。
- 实现顶部条（图片）。
- 实现导航条（图片）。
- 实现左侧分享区域（图片）。
- 实现中间正文区域（文本+图片）。
- 实现右侧广告区域（图片）。
- 实现底部页脚（链接）。
4.5.2 实现顶部条
HTML代码
<div class="top_bar">
<img src="../img/j1.png">
div>
样式代码
img{
width: 100%;
}
4.5.3 实现导航条
HTML代码
<div class="nav_bar">
<img src="../img/j2.png" width="100%">
div>
<hr size="1"/>
样式代码
hr {
color: lightgrey;
size: 1px;
}
###4.5.4 实现左部分享
HTML代码
<div class="left">
<img src="../img/j3.png" />
div>
4.5.5 实现中部正文
HTML代码
<div class="center">
<div >
<h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？h1>
div>
<div>
<font color="gray" size="2"> <em> 作者 2019-11-11 11:11:11em>font> <br/>
<hr/>
div>
<div>
<h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？h3>
div>
<div>
<p>
这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。
p>
<p>
支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、
车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系 下的产品多多，我们对比以下几个产品看看区别:
<ol type="1">
<li>
蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。
li>
<li>
微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大
li>
<li>
蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆
li>
ol>
<img src="../img/1.jpg" />
p>
<p>
说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当
我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。
p>
<p>
<strong>一、芝麻分600以上福利之信用购。strong>
网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯
p>
<p>
<strong>二、芝麻分600以上福利之信用免押。strong>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。
p>
<img src="../img/2.jpg" />
<p>
<strong> 三、芝麻分600以上福利之国际驾照。strong>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？
p>
<p>
随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？
p>
div>
div>
样式代码
.center {
width: 60%; /*最后去除边框宽度恢复为60%*/
float: left;
}
4.5.6 实现右侧广告
HTML代码
<div class="right">
<div class="right_ad">
<img src="../img/ad1.jpg" >
div>
<div class="right_ad">
<img src="../img/ad2.jpg" >
div>
<div class="right_ad">
<img src="../img/ad3.jpg" >
div>
<div class="right_ad">
<img src="../img/ad1.jpg" >
div>
<div class="right_ad">
<img src="../img/ad2.jpg" >
div>
<div class="right_ad">
<img src="../img/ad3.jpg" >
div>
div>
4.5.7 实现底部页脚
HTML代码
<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>
样式代码
.footer {
clear: both;
background-color: cornflowerblue;
text-align: center;
}
a{
text-decoration: none;
color: white;
}
5 HTML案例-登录页面
5.1 案例效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RX9Tp3R1-1600048967907)(E:/java课件/JavaWeb/JavaWeb/03-前端/day01_html/讲义/assets/1573530051845.png)]
5.2 案例分析
5.2.1 表单标签
| 标签名 | 作用 | 备注 |
|---|---|---|
| form | 表示表单，是用来收集用户输入信息并向 Web 服务器提交的一个容器 |
举例：
<form >
//表单元素
form>
表单的属性
| 属性名 | 作用 | 备注 |
|---|---|---|
| action | 处理此表单信息的Web服务器的URL地址 | |
| method | 提交此表单信息到Web服务器的方式 | 可能的值有get和post，默认为get |
| autocomplete | 自动补全，指示表单元素是否能够拥有一个默认值，配合input标签使用 | HTML5 |
举例：
<form action="/web/login" method="get">
form>
<form action="/web/reg" method="post">
form>
GET与POST说明：
post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。
get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的URI中，并以 ‘?’ 作为分隔符，然后这样得到的 URI 再发送给服务器。
GET与POST对比：
| 地址栏可见 | 数据安全 | 数据大小 | |
|---|---|---|---|
| GET | 可见 | 不安全 | 有限制（取决于浏览器） |
| POST | 不可见 | 相对安全 | 无限制 |
5.2.2 表单元素入门
表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。
| 标签名 | 作用 | 备注 |
|---|---|---|
| **label ** | 表单元素的说明，配合表单元素使用 | for属性值为相关表单元素的id属性值 |
| input | 表单中输入控件，多种输入类型，用于接受来自用户数据 | type属性值决定输入类型 |
| button | 页面中可点击的按钮，可以配合表单进行提交 | type属性值决定按钮类型 |
1）简单的文本输入框
-
label标签：表单的说明。
- for属性值：匹配input标签的id属性值
-
input标签：输入控件。
- type属性：表示输入类型，text值为普通文本框
- id属性：表示标签唯一标识
- name属性：表示标签名称
- value属性：表示标签数据值
代码实现：
<form action="" method="post">
<label for="username">Username:label>
<input type="text" id="username" name="username" value="tom">
form>
2）提交用户名的表单
- button标签：表示按钮。
- type属性：表示按钮类型，submit值为提交按钮。
<form action="" method="post">
<label for="username">Username:label>
<input type="text" id="username" name="username" value="tom">
<button type="submit" >loginbutton>
form>
5.2.3 关于属性值
1）NAME和VALUE属性
| 属性名 | 作用 |
|---|---|
| name | |
| value | 这个 |
使用方式：
以name属性值作为键，value属性值作为值，构成键值对提交到服务器，多个键值对浏览器使用&进行分隔。
2）TYPE属性
-
input标签的type属性
【建议】
这是今天的重点讲解内容，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"> loginbutton> form>-
单选多选属性
属性值 作用 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> -
按钮属性
属性值 作用 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 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。 同 reset 此按钮重置所有组件为初始值。 同 />button 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。 同
3）HTML5新增属性
| 属性名 | 作用 | 备注 |
|---|---|---|
| placeholder | 提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。 | 仅适用于当type 属性为text, search, tel, url or email时; 否则会被忽略。 |
| required | 这个属性指定用户在提交表单之前必须为该元素填充值 | 1. 布尔属性，可省略属性值表示true 2. 当type属性是hidden,image或者button类型时不可使用 |
| autocomplete | 自动补全，规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。 | 1. 开启为on，关闭为off 2. 可以设置指定的字段为off，关闭自动补全 |
5.2.4 更多表单元素
| 标签名 | 作用 | 备注 |
|---|---|---|
| **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">Dogoption>
<option value="cat">Catoption>
<option value="hamster">Hamsteroption>
<option value="parrot">Parrotoption>
<option value="spider">Spideroption>
<option value="goldfish">Goldfishoption>
select>
textarea举例：
<textarea name="textarea" rows="10" cols="50">Write something heretextarea>
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>
5.3 使用标签
- 简单布局，使用div标签
- 基本文本标签
- 表单标签
- 图片标签
5.4 实现步骤
- 设置背景图。
- 基本上下两部分布局。
- 实现上部（图片）
- 实现下部（表单）
- 实现页面跳转，从案例2跳转到案例3。
ter">Hamster
Parrot
Spider
Goldfish
[外链图片转存中...(img-oCe3wMR8-1600048967922)]
**textarea举例：**
```html
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>
5.3 使用标签
- 简单布局，使用div标签
- 基本文本标签
- 表单标签
- 图片标签
5.4 实现步骤
- 设置背景图。
- 基本上下两部分布局。
- 实现上部（图片）
- 实现下部（表单）
- 实现页面跳转，从案例2跳转到案例3。