Java零基础教学文档第四篇:HTML_CSS_JavaScript(2)

【HTML】
【主要内容】WEB:

1.Web前端简介

2.创建第一个前端项目

3.相关标签详解

4.表格标签详解

5.表单标签详解

6.框架和实体字符

【学习目标】
在这里插入图片描述

1. Web前端简介

1.1 为什么要学习Web前端?
目前软件的形式分两种一种是C(client)/S(server)架构,另一种是B(browser)/S(server)架构:

l C/S架构(Client/Server,客户端/服务器模式)

l B/S架构(Browser/Server,浏览器/服务器模式)

那么,要想在浏览器中展示数据,必然涉及到Web前端的知识。因此,Web前端也成为目前软件工程师必须要掌握的基本技能!

1.2 Web前端需要学习那些知识
一个网站由多个网页组成,每个网页又由HTML、CSS和JavaScript组成!

l HTML :结构, 决定网页的结构和内容(“是什么”)

l CSS :表现(样式) , 设定网页的表现样式(“什么样子”)

l JavaScript:行为, 控制网页的行为(“做什么”)

开发一个网页,就如同修建一个房子。先把房子的结构建好(HTML),例如房子有几层高、每层有几间房间。房子建好之后给房子装修(CSS),例如给窗户安装窗帘、往地板铺设漂亮的瓷砖。装修完毕之后,当夜幕降临的时候,我们要开灯(JavaScript),这样屋子就能够看得见了。

1.3 常见浏览器介绍
既然学习web前端开发,那么就少不了跟浏览器打交道,那么我们该选用什么类型的浏览器呢?

您可能用过一下浏览器:w3c:HTML、css、javascript、jquery
在这里插入图片描述

当然我们更推荐使用以下浏览器:
在这里插入图片描述

为什么推荐使用以上的浏览器呢?这个得从浏览器的内核说起,浏览器按内核划分为:
一、Gecko内核:前缀为 -moz- ,代表产品火狐浏览器

二、Webkit内核:前缀为 -webkit- ,代表产品chrome浏览器、safari浏览器、360极速、世界之窗、猎豹等。

三、Trident内核:前缀为 -ms- ,也称IE内核,代表产品IE浏览器。

四、Presto内核:前缀为 -o-,代表作品Opera浏览器

1.4 浏览器与服务器的交互过程
HTML语言被称为互联网的三大基石之一(其余两大基石分别为:HTTP协议、URL),它解决了如何以丰富的效果展示数据内容的问题。互联网中,数据是在服务器和浏览器之间互相传送和执行。

三大基石分别解决了如下问题:

l HTTP协议:解决了服务器和浏览器之间数据如何传送、传送格式的问题,实现了分布式的信息共享。

l URL协议:解决了众多服务器中资源定位问题。从而让浏览器可以访问不同的服务器资源,实现了全球信息的精确定位。

l HTML语言:解决了数据在浏览器中如何丰富多彩的展示,及如何合理标示信息的问题。
在这里插入图片描述

2. HTML发展史

2.1 HTML的简介
HTML(Hyper Text Markup Language)中文译为“超文本标记语言”,主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。HTML不是一种编程语言,而是一种标记语言,它提供了许多标记,如段落标记、标题标记、超链接标记、图片标记等,网页中需要定义什么内容,就用相应的HTML标记描述即可。

  1. <标签名 [属性名=”属性值”]> [内容]</标签名>

  2. <标签名 [属性名=”属性值”] />

HTML之所以称为超文本标记语言,不仅是因为他通过标记描述网页内容,同时也由于文本中包含了所谓的“超级链接”点。通过超链接将网站与网页以及各种网页元素链接起来,构成了丰富多彩的Web页面。

2.2 HTML发展历程
HTML5开发主要是由以下3个组织负责和实施,HTML5是HTML的第五次重大修改。

l W3C:World Wide Web Consortium万维网联盟,负责发布HTML5规范。

l WHATWG:由Apple、Mozilla、Google和Opera等浏览器厂商人员组成,成立于2004年,致力于开发HTML和Web应用API。

l IETF:因特网工程任务组,负责开发Internet协议,HTML5定义的新API锁依赖的WebSocket协议,正式由它负责开发。

HTML发展历程:
在这里插入图片描述

HTML1.0 超文本标记语言(第一版) 在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准)

HTML2.0 1995年11月作为RFC 1866发布,在RFC2854于2000年6月发布之后被宣布已经过时。

HTML3.2 1996年1月14日,W3C推荐标准。

HTML4.0 1997年12月18日,W3C推荐标准。

HTML4.01: 1999年12月24日,W3C推荐标准。

XHTML1.0 发布于2000年1月26日,是W3C推荐标准,后经过修订于2002年8月1日重新发布。

XHTML1.1 于2001年5月31日发布。

HTML5.0 2014年10月28日,万维网联盟宣布,经过接近8年的努力,标准规范终于制定完成。

Html(弱语言:不区分大小写、后缀名随意(.html、.htm、.HTML、.HTM、.HtMl)、写错不报错)—>xhtml—>xml

2.3 XHTML和HTML的区别
XHTML是HTML向XML的一个过渡语言,在最初W3C组织希望把HTML变成更为严谨的标记语言(比如XML),但HTML的已经应用的太为广泛,全部换掉不太现实。因此产生了XHTML这样一种过度形式。它比HTML更严谨,基本标签都还是沿用了HTML,但废除了“表现层”的标签,同时要求标签的严格嵌套,标签结束等等。

3. IDE环境安装配置

3.1 IDE环境介绍
IDE是"集成开发环境"的英文缩写。我们都知道网上的页面是编程人员写出来的,用什么写的呢?
答案:用编码工具或IDE集成开发环境。

3.2 编码工具
辅助程序员编写源代码的工具,它类似word,我们写文档会打开word文档来编写。写代码也一样,需要借助工具来开发。

常见的编码工具有:记事本、sublime Text、notepad++
在这里插入图片描述

3.3 IDE集成开发环境
用于提供程序开发环境的应用软件,一般包括代码编辑器、编译器、调试器和图形用户界面工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。

它和单纯的编码工具不同,它不仅包含了编辑器,还有分析、编译等功能。它集成了一系列软件开发所需的功能,所以称为“集成开发环境”。

常见前端IDE有:VS-CODE、WebStorm、HBuilder、Dreamweaver
在这里插入图片描述

https://code.visualstudio.com/ --免费

https://www.jetbrains.com/webstorm/download/ --收费可破解

https://www.dcloud.io/ --免费 国产的

https://www.adobe.com/cn/products/dreamweaver.html 收费可破解

https://www.jetbrains.com/idea/ 收费,也就是我们学习JAVA的开发工具–我们就使用这个

3.4 我们使用哪种工具来开发?
推荐使用WebStorm、sublimeText和HBuilder、IDEA,它们四款都是非常好用的开发工具,但在前期强制要求使用IDEA,我们需要对一种开发环境非常熟悉,IDEA从普及程度、认可程度无疑都是最好的选择,后期熟练后可以随意使用喜欢的开发工具。

我们来比较一下这三款非常流行的软件

3.4.1 VS-Code
Visual Studio Code(国内一般都不喊全名,都是简称 VS Code),是一个由微软开发,同时支持 Windows 、 Linux 和 macOS 操作系统的开放代码编辑器。

以前的前端开发者讨论使用什么软件写代码的时候,讨论最火热的是webstormsublim哪个好,自从巨硬强力退出 vscode 以后,sublim 已经被干到七零八碎了。

vscode 支持内置了 Git 版本控制,同时也具有开发环境功能,例如代码补全、代码片段和代码重构等;

也支持用户个性化配置,例如改变主题颜色、键盘快捷方式等各种属性和参数;

同时还在编辑器中内置了扩展程序管理的功能(这个是一个大杀器,一定要多用,有很多效率插件)

vscode 是一个带 GUI 的代码编辑器,也就是只能完成简单的代码编辑功能,并不是一个集成开发环境/IDE(但是我感觉和IDE也差不多了)。

3.4.2 sublime Text
小巧的编码工具,你可以把它当作电脑中的记事本来使用,假如它并不能满足你的需要,你可以另外给它添加各种插件,来扩展它。优点是体积小,打开速度快。

3.4.3 HBuilder
国内优秀的前端开发工具,代码提示完善,编码会很快,但体积比较大186M,sublimeText只有5M左右,并且在功能方面不如webstorm。

3.4.4 WebStorm
WebStorm是前端开发的必备利器,JavaScript开发的不二之选。代码补全包含了所有流行的库,比如JQuery, YUI, Prototype等,html和js的提示不在话下。

3.5 IDEA下创建静态项目
3.5.1 新建项目
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.5.2 新建HTML页面
在这里插入图片描述

4. 第一个HTML程序

HTML文件是普通的文本文件,只是文件扩展名为:.html或者.htm或者.HTML或者.HTM。下面我们开始创建我们的第一个HTML程序。
在这里插入图片描述

定义 HTML 文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其它元素要包裹在它里面,标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的第一个HTML页面</title>
</head>
<body><p>body元素的内容会显示在浏览器中。</p><p>title元素的内容会显示在浏览器的标题栏中。</p>
</body>
</html>

运行
在这里插入图片描述

4.1 head标签

标签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分:

、、、</link></meta>

应该把 标签放在文档的开始处,紧跟在 后面,并处于 标签之前。文档的头部经常会包含一些 标签,用来告诉浏览器关于文档的附加信息。

4.2 title标签

<head><meta charset="UTF-8"><title>我的第一个HTML页面</title>
</head>

1.可定义文档的标题。

2.它显示在浏览器窗口的标题栏或状态栏上。

3.当把文档加入用户的收藏夹或书签列表时,标题将成为该文档的默认名称。

4.title写和你网页相关的关键词有利于SEO优化。

4.3 meta标签
元素可提供有关页面的元信息(meta-information),用来向浏览器或搜索引擎描述页面,比如文档的描述和关键词,它只可以放在head中,属于元信息标签。

常见的meta有:

keywords(关键字) keywords用来告诉搜索引擎你网页的关键字是什么

<meta name="keywords" content="武汉JAVA培训,武汉java培训机构">

description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。

<meta name="description" content="动力节点专业IT培训机构,一家只教java的培训机构">

服务器发送文件类型,在HTML5中被精简为了以下代码:

<meta charset="UTF-8">

4.4 link标签

link标签定义文档与外部资源的关系,最常见的用途是链接样式表。

<link rel="stylesheet" type="text/css" href="/html/csstest.css">

link标签我们在学习第二章CSS的时候再细讲。

4.5 script标签
标签用于定义客户端脚本,比如 JavaScript。script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。

通过src引入外部脚本

<script src="/JS/jquery.min.js"></script>

在script标签中写脚本

<script>// 需要执行的代码
</script>

4.6 style标签

style标签用于为 HTML 文档定义样式信息,在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。

script标签我们在学习第二章JavaScript的时候再细讲。

<style>/* 需要执行的代码 */
</style>

一个完整的网页,分三部分:结构、样式、行为。而我们学习的html主要用来写页面的结构,css用来写页面的样式,javascript规定行为。

4.7 body标签
body 元素定义文档的主体,所有用户可直接看到的元素都在这里。

4.7.1 background属性
background 规定文档的背景图像。

<body background="img/tly.jpg"><!--别的标签-->
</body>

4.7.2 bgcolor属性
bgcolor规定文档的背景颜色。

<body bgcolor="yellow"><!--别的标签-->
</body>

background和bgcolor是可以一起设置的,但它以background为准,两个都加上后刷新页面,可以看到背景色。

4.8 !-- 注释 –
注释用于在源代码中插入注释,注释不会显示在浏览器中。这样做有助于在以后的时间对代码的编辑,当编写了大量代码时尤其有用。

<body><!--这是一段注释,注释不会在浏览器中显示--><p>这是一段普通的段落。</p>
</body>

单行注释快捷键:Ctrl+/

多行注释快捷键:Ctrl+Shift+/

5.HTML基础标签

在这里插入图片描述

5.1 br标签和hr标签
5.1.1 br标签
它是换行标签,也是自闭合标签(意味着它没有结束标签,因此这是错误的:
)。

示例:在这个段落中包含很多行,可以用
为段落分行。

<body><p>春眠不觉晓,<br>处处闻啼鸟。<br>夜来风雨声,<br>花落知多少。<br></p>
</body>

5.1.2 hr标签

在 HTML 页面中创建一条水平线,可以在视觉上将文档分隔成各个部分。

hr标签可以设置align属性、width属性、size属性,width属性指定水平线的宽度,size属性指定高度。

<body><p>我是一个段落</p><hr align="center" size="3px" width="90%"><p>我又是一个段落</p>
</body>

5.2 标题标签
h1 到 h6 标签可定义标题。

h1定义最大的标题,h6 定义最小的标题。

<body><h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>
</body>

由于 h 元素拥有确切的语义,因此不要利用标题标签来改变字体的大小。相反,我们应当使用层叠样式表(CSS)来达到漂亮的显示效果。
在这里插入图片描述

h标签拥有align属性,它有如下几个常用值

使用align属性让标题居中:

<body><h1 align="center">标题</h1>
</body>

5.3 段落标签

p标签定义段落

<body><p>我是一个段落</p>
</body>

注意:浏览器会忽略了源代码中的排版,省略了多余的空格和换行,只保留一个空格。

<body><p>春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。</p>
</body>

p元素也可以使用align属性,align是通用属性,块元素都可以使用。

5.4 pre标签
被包围在 pre 元素中的文本通常会保留空格和换行符。

pre 标签的一个常用应用就是用来表示计算机的源码。

<body><pre>春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。</pre>
</body>

5.5 格式标签

5.5.1 b标签
呈现粗体文本效果。它属于字体样式元素,并不反对使用这些标签,但是如果只是希望通过这些标签改变文本的样式,建议使用样式表。

<body><p>这是普通文本<b>这是粗体文本</b>这是普通文本</p>
</body>

5.5.2 del标签 s
定义被删除文本,用它包含的内容会显示一道中划线。它属于字体样式元素,并不反对使用这些标签,但是如果只是希望通过这些标签改变文本的样式,建议使用样式表。

<body><del>这是以一段被删除的文本</del><p>也可<del>嵌套</del>使用</p>
</body>

5.5.3 标签
用它包裹的内容是告诉浏览器要强调的内容,用em包裹的这段文字用斜体来显示。在文本中加入强调也需要有技巧,如果强调太多,有些重要的短语就会被漏掉;如果强调太少,就无法真正突出重要的部分。

<body><p>我是一个<em>好人</em></p>
</body>

5.5.4 i标签
签显示斜体文本效果。它的显示和em显示的一样,不过它对于浏览器来说没有强调的意思,建议使用样式表。

<body><em>我想强调此处的文字</em><i>虽然也是斜体字,但这里是i标签</i>
</body>

5.5.5 strong标签
和em 标签一样,用于强调文本,但它强调的程度更强一些。strong 和 em,一个是斜体显示,一个正常加粗显示。


```c
<body><p>我是一个 <strong>好人</strong></p>
</body>

5.5.6 u 标签
为文本添加下划线,尽量避免为文本加下划线。

<body><u>我自带下划线</u>
</body>

5.5.7 sup标签和sub 标签
sup标签:定义上标文本。

sub 标签:定义下标文本。

<body><!--(a-b)²=-2ab+-->(a-b)<sup>2</sup>=a<sup>2</sup>-2ab+b<sup>2</sup>下标测试<sub>这是下标</sub>
</body>

5.6 img 标签
向网页中嵌入一幅图像。 标签有两个必需的属性:src 属性 和 alt 属性。

alt属性:如果无法显示图像,浏览器将显示替代文本。

src属性:它的值是图像文件的 URL,也就是引用该图像的文件的的绝对路径或相对路径。

title属性:鼠标放上时显示的提示文字。

width属性:设置图像的宽。如果只设置宽度属性,则高度会等比例缩放。

height属性:设置图像的高。如果只设置高度属性,则宽度会等比例缩放。

<body><img src="img/bg.jpg" alt="图片下载失败" title="美女" width="200px">
</body>

5.7 a 标签

a标签定义超链接,用于从一张页面链接到另一张页面。
a标签最重要的属性是 href 属性,它指向需要跳转网页的地址。

<body><a href="http://www.baidu.com">百度一下</a>
</body>

target属性:规定在何处打开链接文档。

<body><p>在当前浏览器窗口打开连接:</p><a href="http://www.taobao.com/">淘宝购物</a><p>在新的浏览器窗口打开链接:</p><a target="_blank" href="http://www.baidu.com">百度一下</a>
</body>

name 属性:属性规定锚(anchor)的名称。

<body><!--创建指向该锚的链接--><a target="#tips">查看详情</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><!--在文档中对锚进行命名--><a name="tips">我就是详情,哈哈</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

【随堂练习】

1、将图像作为链接。

5.8 span标签和div标签
5.8.1 标签
它用来组合文档中的行内元素,以便通过层叠样式表(CSS)来格式化它们。
如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异,和标签相比,它没有任何的特殊含义。

<body><span>这是span标签</span>这不是span标签
</body>

单纯是就内容来说,只加span标签和未加span标签两者并没差异,但加了它后写样式时选择器更方便选取。

注意:span标签和我们前面学习的h1标签和p标签不同,span标签不是单独占一行,对于不是独占一行的元素,我们称之为行内元素。

5.8.2 div标签
可定义文档中的分区或节,标签可以把文档分割为独立的、不同的部分,它可以作为元素的组织工具。div和h1和p标签相比,它没有任何的特殊含义。

<body><div><span>我是被div标签包裹的span标签</span></div>
</body>

注意:div标签和我们前面学习的h1标签和p>标签一样,div标签单独占一行,对于独占一行的元素,我们称之为块元素。

5.9 列表
5.9.1 无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记,无序列表没有顺序。

无序列表始于 ul标签,每个列表项始于

  • <body><h1>知名手机厂商:</h1><ul><li>华为</li><li>小米</li><li>三星</li><li>苹果</li></ul>
    </body>
    

    改变项目符号,在ul上加type属性,值有以下4个可选择

    type=“disc” 默认黑色圆点

    type=“circle” 空心圆点

    type=“square” 方块

    type=“none” 取消默认样式

    <body><h1>经典电影系列:</h1><ul type="square"><li><a href="#">《警察故事》</a></li><li><a href="#">《速度与激情》</a></li><li><a href="#">《复仇者联盟》</a></li><li><a href="#">《战狼》</a>></li></ul>
    </body>
    

    5.9.2 有序列表
    有序列表也是一列项目,列表项目使用数字进行标记,有序列表是有顺序的。

    有序列表始于

    1. 标签,每个列表项始于
    2. 标签。

    <body><h1>2020年手机销售排名:</h1><ol><li>三星</li><li>苹果</li><li>华为</li><li>小米</li></ol>
    </body>
    

    无序列表可以换项目符号,有序列表也可以换类型,在ol标签中添加type属性即可。

    数字列表 默认即是数字列表

    字母列表 type=“A” type=“a”

    罗马字母列表 type=“I” type=“i”

    <body><h1>2020年手机销售排名:</h1><ol type="A"><li>华为</li><li>三星</li><li>苹果</li><li>小米</li></ol>
    </body>
    

    6.HTML表格标签

    表格是一种组织整理数据的手段,在HTML当中表格使用table 标签来定义。每个表格均有若干行(由tr 标签定义),每行被分割为若干单元格(由 td 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

    <body><table><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr></table>
    </body>
    

    6.1 表格边框属性

    如果不定义边框属性,表格将不显示边框,但是大多数时候,我们希望显示边框。

    我们可以在在table标签中添加border属性,border的属性值可以直接位数字,省略单位像素(px)。

    <body><!--设置table的边框的宽度为1px,表格居中显示--><table border="1px" align="center"><!--设置每一行的高度为40px,内容显示居中。--><tr height="40px" align="center"><!--设置每一列的宽度为120px--><td width="120px">1-1</td><td width="120px">1-2</td><td width="120px">1-3</td></tr><tr height="40x" align="center"><td>2-1</td><td>2-2</td><td>2-3</td></tr><tr height="40x" align="center"><td>3-1</td><td>3-2</td><td>3-3</td></tr></table>
    </body>
    

    以上代码在Chrome浏览器中显示的效果为:
    在这里插入图片描述

    那么我们该怎么取消table表格中的双层边框呢?我们可以把cellspacing的属性的值设置为0。

    cellspacing是表格里单元格之间的距离; cellpadding是表格里单元格内的空白部分;

    <body><!--cellspacing属性的值设置为0,两根线合称为一根线--><!--cellpadding属性设置文字内容和边框的距离--><table border="1px" align="center" cellpadding="10" cellspacing="0"><tr height="40px"><td>1-1</td><td>1-2</td><td>1-3</td></tr><tr height="40px"><td>2-1</td><td>2-2</td><td>2-3</td></tr><tr height="40x"><td>3-1</td><td>3-2</td><td>3-3</td></tr></table>
    </body>
    

    以上代码在Chrome浏览器中显示的效果为:
    在这里插入图片描述

    6.2 表格的表头
    表格的表头使用 th 标签进行定义。

    大多数浏览器会把表头显示为粗体居中的文本:

    <body><table align="center" border="1" cellspacing="0"><tr align="center" height="40px"><!--设置表格的表头--><th width="70px">演员</th><th width="90px">代表作</th></tr><tr align="center" height="40px"><td>成龙</td><td>警察故事</td></tr><tr align="center" height="40px"><td>周星驰</td><td>大话西游</td></tr><tr align="center" height="40px"><td>李连杰</td><td>少林寺</td></tr></table>
    </body>
    

    以上代码在Chrome浏览器中显示的效果为:
    在这里插入图片描述

    6.3 表格的标题
    在table标签中添加caption标签。

    <body><table align="center" border="1" cellspacing="0"><!--给表格设置标题--><caption>优秀男演员代表作</caption><tr align="center" height="40px"><!--设置表格的表头--><th width="70px">演员</th><th width="90px">代表作</th></tr><tr align="center" height="40px"><td>成龙</td><td>警察故事</td></tr><tr align="center" height="40px"><td>周星驰</td><td>大话西游</td></tr><tr align="center" height="40px"><td>李连杰</td><td>少林寺</td></tr></table>
    </body>
    

    6.4 表格跨行跨列

    在td或th标签中添加colspan属性实现跨列操作。

    <body><table border="1" align="center" cellspacing="0" cellpadding="10"><caption>横跨两列的单元格</caption><tr height="35px"><th>姓名</th><!--添加colspan属性,实现跨两列单元格--><th colspan="2">手机号</th></tr><tr height="35px"><td>周安德</td><td>18911111210</td><td>18911111210</td></tr><tr height="35px"  align="center"><td>谭健</td><td>18911111210</td><td>18911111210</td></tr></table>
    </body>
    

    以上代码在Chrome浏览器中显示的效果为:
    在这里插入图片描述

    在或标签中添加rowspan属性实现跨行操作。

    <body><table align="center" border="1" cellspacing="0" cellpadding="10"><caption>横跨两行的单元格:</caption><tr><th>姓名</th><td align="center">周安德</td><td align="center">谭健</td></tr><tr><!--添加rowspan属性,实现跨两行单元格--><th rowspan="2">手机号</th><td>18911111210</td><td>18911111210</td></tr><tr><td>18911111210</td><td>18911111210</td></tr></table>
    </body>
    

    以上代码在Chrome浏览器中显示的效果为:
    在这里插入图片描述

    7.HTML表单标签

    HTML 表单用于搜集不同类型的用户输入。

    一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮。

    7.1 表单标签集合
    在这里插入图片描述

    <!--https://www.baidu.com/?uName=%E5%BC%A0%E4%B8%89&pwd=123456&gender=0&hobby=smoking&hobby=codeform标签:表单标签,为input、select、textarea标签的容器action属性:指定提交数据的地址,请求地址method属性:指定请求方式1)get:会将参数信息在地址栏后面显示出来;传递的数据大小有限只有几十kb2)post:会将参数隐藏传递;传递数据大小无上限input标签:文本输入框name属性: 为当前标签取一个名字,取值可以重复,名字可以包含数字、字母,不能以数字作为开头value属性:保存标签中定义或者输入的值type属性:指定文本输入框的类型,取值有: text(文本输入框)password(密码框)radio(单选框)checkbox(复选框)file(文件上传)、    hidden、submit、resetreadonly属性:只读,用户只能看,不能编辑,数据会提交给后台disabled属性: 禁用,灰色显示,当点击登录按钮时,数据不会提交给后台radio与checkbox具有: checked属性,可以做默认值选择,取值与属性名一样file具有:multiple,代表多选,取值与属性名一样-->
    

    7.2 表单标签
    HTML 表单用于收集用户输入,表单使用 标签创建。表单可包含文本字段、复选框、单选框、提交按钮等等。

    块级标签:独占一行很霸道。div、h1~h6、p

    行级标签:一行顺着写,写满才换行。a、img、span

    注意:form元素是块级元素,其前后会产生折行。

    <body><form>form elements</form>
    </body>
    

    7.2.1 form表单的属性
    action=“url”:请求地址,指定form表单向何处发送数据。

    name=“login”:作用是给表单起名,为了便于我们操作。

    enctype =“string”:规定在发送表单数据之前,如何对表单数据进行编码。通常在使用文件上传时,我们会enctype=“multipart/form-data”,以二进制传输。

    method =“get/post”:指定表单以何种方式发送到指定的服务器程序,该属性定义浏览器将表单中的数据提交给服务器处理程序的方式。关于method的取值,最常用的是get和post。默认为get

    Get请求:会将name属性值作为key,value属性值作为实际内容,在地址栏后面显示出来;传送给后台的数据最大只有几十KB

    Post请求:会将name属性值作为key,value属性值作为实际内容,传送数据给后台时会隐藏数据;

    传递的数据量无上限

    7.3 表单域
    要提交数据的表单域必须加name属性。不然,该表单域的数据不会提交到服务器上。

    7.3.1 input标签
    input用于收集用户信息,根据不同的类型(type)显示不同的形式。input是空标签,它没有结束标签,在开始标签中结束。

    元素根据不同的type属性,可以变化为多种形态。

    元素设置name属性,用于网络请求时提交对应输入的字段。

    type=“text” 文本框

    定义单行的输入字段,用户可在其中输入文本。它是一个单行文本框,input的默认类型即是text类型。

    <body><form action="https://www.baidu.com">用户名:<input  name="userName" type="text"></form>
    </body>
    

    type=“password” 密码框

    类型为password时,它用于收集用户输入的密码,在你输入时,浏览器会把输入的内容以符号来代替。

    <body><form action="https://www.baidu.com">密码:<input  name="passworld" type="password"></form>
    </body>
    

    文本框和密码框都可以添加placeholder属性,用于设置输入字段预期值的提示信息。该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

    type=“radio” 单选框

    类型为radio时,用于定义单选按钮,name属性值相同的input单选框只能有一个被选中。

    checked=“checked” 设置默认选中的单选框。
    value="1"是提交到服务器时给后台程序员们看的。

    <body><form action="https://www.baidu.com">性别:男 <input name="sex" checked="checked" type="radio" value="1"><input name="sex" type="radio" value="2"></form>
    </body>
    

    type=“checkbox” 复选框

    类型为checkbox时,用于定义复选按钮,复选框允许用户在一定数目的选择中选取一个或多个选项。

    <body><form action="https://www.baidu.com">兴趣爱好:篮球 <input type="checkbox" name="like1" value="1" checked>足球 <input type="checkbox" name="like2" value="2">游泳 <input type="checkbox" name="like3" value="3">跑步 <input type="checkbox" name="like4" value="4"></form>
    </body>
    

    type=“file” 文件上传

    类型为file时,默认为单文件上传。

    multiple=“multiple” 设置为多文件上传。

    <body><form action="https://www.baidu.com"><input type="file" name="file" multiple="multiple"></form>
    </body>
    

    type=“hidden” 隐藏字段

    隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值,它们的值也可以由 JavaScript 进行修改。

    <body><form action="https://www.baidu.com"><input type="hidden" name="hidden" value="123"></form>
    </body>
    

    7.3.2 select下拉列表
    元素定义下拉列表,元素定义待选择的选项。列表通常会把首个选项显示为被选选项,通过添加 selected 属性来定义预定义选项。

    <body><form action="https://www.baidu.com">选择您喜欢的水果:<select name="select"><option value="apple">苹果</option><option value="banana">香蕉</option><!--榴莲设置为选中状态--><option selected value="durian">榴莲</option></select></form>
    </body>
    

    单选按钮、复选框默认选中用:checked属性。

    下拉列表使用:selected属性。

    使用size属性设置下拉列表展开,使用multiple属性设置多选。

    <body><form action="https://www.baidu.com"><select name="select" size="4" multiple id=""><option value="1">重庆</option><option value="2">武汉</option><option value="3">北京</option><option value="4">上海</option></select><input type="submit" value="提交"></form>
    </body>
    

    7.3.3 textarea>文本域
    textarea>元素定义多行输入字段(文本域)

    cols:规定文本区内的可见宽度。

    rows:规定文本区内的可见行数。

    <body><form action="https://www.baidu.com"><textarea name="text" cols="50" rows="10"></textarea></form>
    </body>
    

    文本域可以添加placeholder属性,用于设置输入字段预期值的提示信息。

    7.4 表单按钮
    type=“reset” 重置按钮

    重置按钮会清除表单中的所有数据。

    value="重置"设置重置按钮上显示的文字。

    <body><form action="https://www.baidu.com">用户名:<input name="userName" type="text">性别:男 <input name="sex" checked="checked" type="radio" value="1"><input name="sex" type="radio" value="2"><input type="reset" value="重置"></form>
    </body>
    

    type=“submit” 提交按钮

    type=“submit” 定义提交按钮。提交按钮用于向服务器发送表单数据,数据会发送到表单的 action 属性中指定的页面。

    value="提交"设置提交按钮上显示的文字。

    <body><form action="https://www.baidu.com">用户名:<input name="userName" type="text">性别:男 <input name="sex" checked="checked" type="radio" value="1"><input name="sex" type="radio" value="2"><input type="submit" value="提交"></form>
    </body>
    

    type=“button” 普通按钮

    button类型的只是一个普通的按钮,而submit有一个提交的作用,在没有加js代码的情况下,button只是个装饰。

    <body><form action="https://www.baidu.com"><input type="button" value="普通按钮"></form>
    </body>
    

    type=“image” 提交按钮

    image类型的input也是具有一个提交的作用,不同的是可以指定一幅图片来作为按钮,不提倡使用image,因为它有时候会提交两次。

    <body><form action="https://www.baidu.com"><input type="image" src="img/bg.jpg"></form>
    </body>
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/623798.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows10 Docker Desktop安装

一、简介 Docker Desktop是Docker公司推出的一款桌面应用程序&#xff0c;它提供了一个用户友好的界面&#xff0c;方便开发人员在本地环境中使用容器技术。 容器是一种轻量级的虚拟化技术&#xff0c;可以将应用程序和其依赖项打包在一起&#xff0c;形成一个独立、可移植的…

Linux学习之网络编程1(纯理论)

写在前面 刚刚更新完Linux系统编程&#xff0c;特别推荐大家去看的Linux系统编程&#xff0c;总共44个小时&#xff0c;老师讲的非常好&#xff0c;我是十天肝完的&#xff0c;每天大概看20集&#xff0c;每天还要以写blog的形式来写笔记来总结一下&#xff0c;虽然这十天有点…

适用于Mac电脑的 iOS 设备管理器选 iTunes 还是iMazing?

mac上有没有好用的ios设备管理器&#xff1f; 因为工作的关系&#xff0c;一共使用3部苹果手机&#xff0c;资料很杂很多也很乱&#xff0c;想整理也不知道从何下手&#xff0c;有人推荐【iTunes】&#xff0c;有人推荐【iMazing】&#xff0c;该如何选择呢&#xff1f; 一、i…

架构师 - 架构师是做什么的 - 学习总结

架构师核心定义 架构师是什么 架构师是业务和技术之间的桥梁 架构师的核心职责是消除不确定性、和降低复杂性 架构设计环 架构师的三个核心能力 架构师的三个关键思维 架构师主要职责 架构设计 Vs 方案设计 架构设计前期 主要任务 澄清不确定性 明确利益干系人的诉求消除冲…

2024.1.13力扣每日一题——构造限制重复的字符串

2024.1.13 题目来源我的题解方法一 计数模拟 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2182 我的题解 方法一 计数模拟 因为字符串s由小写字母构成&#xff0c;因此使用一个int[26]的数组保存每个字符的数量&#xff0c;然后从最大的字符开始构造结果字符串sb&…

段码液晶显示屏模块 背光控制的坑

玩的这个模块做测试&#xff0c;它的引脚有以下的介绍&#xff0c;商家提供了些资料&#xff0c;但没原理图。 led引脚想当然的接个IO输出口&#xff0c;但怎么输出0或1都不能控制背光 然后仔细研究了上面的电路&#xff0c;才发现LED是直接连接着VCC的 总结是这个背光要控制的…

曲线生成 | 图解贝塞尔曲线生成原理(附ROS C++/Python/Matlab仿真)

目录 0 专栏介绍1 贝塞尔曲线的应用2 图解贝塞尔曲线3 贝塞尔曲线的性质4 算法仿真4.1 ROS C仿真4.2 Python仿真4.3 Matlab仿真 0 专栏介绍 &#x1f525;附C/Python/Matlab全套代码&#x1f525;课程设计、毕业设计、创新竞赛必备&#xff01;详细介绍全局规划(图搜索、采样法…

全包了 功能超级强大的linux管理平台1panel部署教程

目录 先看下效果 1.1panel是什么 2.安装教程 2.1下载安装包 2.2解压 2.3安装 3.查看 3.1初始化并登录 3.2容器管理页面&#xff0c;可以启动 重启 创建容器 ​编辑 3.3应用商店 意见安装常用应用 ​编辑 3.4可视化任务管理 3.5网站管理 3.6数据库管理 ​编辑 3…

iOS UIViewContentMode 不同效果图文对比

一. iOS提供了的ContentMode有如下几种 其中默认mode是UIViewContentModeScaleToFill typedef NS_ENUM(NSInteger, UIViewContentMode) {UIViewContentModeScaleToFill,UIViewContentModeScaleAspectFit, // contents scaled to fit with fixed aspect. remainder is tr…

Python教程44:海龟画图turtle画卡塔尔世界杯吉祥物

---------------turtle源码集合--------------- Python教程42&#xff1a;海龟画图turtle画海绵宝宝 Python教程41&#xff1a;海龟画图turtle画蜡笔小新 Python教程40&#xff1a;使用turtle画一只杰瑞 Python教程39&#xff1a;使用turtle画美国队长盾牌 Python教程38&a…

领域驱动设计解决汉诺塔问题-文风批评(1)

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 以下文章内容纯属虚构&#xff0c;用来批评某些领域驱动设计文风。后续将挑一些近期的文章作为例子来批评。 ********** 领域驱动设计是革命性的创新&#xff0c;是划时代的洞见。领…

OpenCV-Python(40):光流算法

目标 光流的概念以及Lucas-Kanade 光流法使用函数cv2.calcOpticalFlowPyrLK() 对图像中的特征点进行跟踪 光流 介绍 由于目标对象或者摄像机的移动造成的图像对象在连续两帧图像中的移动被称为光流。它是一个2D 向量场&#xff0c;可以用来显示一个点从第一帧图像到第二帧图像…

CLion、IDEA设置编码为utf-8,防乱码

其实只要是JetBrains的软件都是通用的&#xff0c;下面以IDEA为例 1.设置项目文件编码 2.设置控制台的字符编码

bash shell基础命令

1.shell启动 shell提供了对Linux系统的交互式访问&#xff0c;通常在用户登录终端时启动。系统启动的shell程序取决于用户账户的配置。 /etc/passwd/文件包含了所有用户的基本信息配置&#xff0c; $ cat /etc/passwd root:x:0:0:root:/root:/bin/bash ...例如上述root账户信…

【外汇天眼】误入假冒Ctrl Investments无法出金,投资者:太相信网友了!

在当下这个互联网迅速发展的时代&#xff0c;各类交友类APP成为人们拓展社交圈的新渠道。一方面这样的交友软件在满足了用户基础的社交要求&#xff0c;另一方面网络世界所交往的朋友能给用户带来的神秘感和新鲜感&#xff0c;所以导致一部分年轻人离不开这些交友软件。然而&am…

Python 两种多值参数

有时可能需要一个函数中处理的参数的个数是不确定的&#xff0c;就需要使用多值参数 参数名前加上*&#xff0c;代表可以接收元组参数名前加上**&#xff0c;代表可以接收字典 代码&#xff1a; def demo(*args, **kwargs):print(args)print(kwargs)demo(1, 2, 3, 4, 5, nam…

两个数组的交集 II

题目链接 两个数组的交集 II 题目描述 注意点 返回结果中每个元素出现的次数&#xff0c;应与元素在两个数组中都出现的次数一致&#xff08;如果出现次数不一致&#xff0c;则考虑取较小值&#xff09;可以不考虑输出结果的顺序 解答思路 使用哈希表存储nums1中的元素及出…

“语言服务40人论坛2023年年会”在北京举行

为充分发挥区域合作优势&#xff0c;深度推进翻译专业学位研究生培养模式和路径建设&#xff0c;提升翻译人才培养质量&#xff0c;推动京津冀地区教育协同发展&#xff0c;为中国高质量发展提供语言服务智慧和方案&#xff0c;1月13日至14日&#xff0c;“语言服务40人论坛202…

2.IHRM人力资源 - 登录

一、登录页结构与表单开发 我们要实现的登录界面 目前的登录界面 1.1 登录页结构 复制下面的代码到views/login/index.vue页面下 <template><div class"login-container"><div class"logo"/><div class"form"><h1&…

CANFD数据记录仪在新能源汽车复杂路测下的应用

CANFD数据记录仪在新能源汽车复杂路测下的应用 汽车制造商在生产预批量阶段的耐久性测试中,为了检测潜在故障,必须让车辆在严酷的路况和环境下接受测试。为确保能回溯故障发生的现场情况,我们需要对测试数据精准记录与储存。这些数据是新车型优化迭代的关键,也是确保产品质量的…