前端三剑客--HTML（为后端小伙伴扫盲前端而撰写）

最新推荐文章于 2023-05-07 09:20:53 发布

郭贼不是我的菜

最新推荐文章于 2023-05-07 09:20:53 发布

阅读量279

点赞数 1

分类专栏： javaWeb 文章标签： html java html5 前端后端

本文链接：https://blog.csdn.net/zSoaring/article/details/111591894

版权

javaWeb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

本篇博客主要是针对后端开发的小伙伴们对前端的扫盲性学习，了解前端更利于编写后端接口，从而使整体项目编写更加流畅，若是专业前端人士，跪请批评指正。

怎么学习HTML

第一点：所见即所得，我觉得这句话对于前端的理解非常重要。
第二点：学会查看浏览器开发者工具。
查看网页源代码(鼠标点击右键）：
在这里插入图片描述
通过开发者工具理解前端代码：

初识HTML

HTML：Hyper Text Markup Language（超文本标记语言），是一种标识性的语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源链接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图标与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。

W3C：（World Wide Web Consortium万维网联盟）其标准包括：结构化标准语言(HTML、XML)，表现标准语言（CSS），行为标准（DOM、ECMAScript）。

IDEA中创建HTML文件：

$C:\Users\高飞\AppData\Roaming\Typora\typora-user-images\image-20201222151524928.png$

如何打开创建好html网页：

在这里插入图片描述

如果没有配置，则按一下步骤进行配置：

在这里插入图片描述

在这里插入图片描述
基本格式：

解释说明：

在这里插入图片描述
自闭和标签：指标签不用成对出现，meta标签就是一个自闭和标签

注：meta标签是描述性标签，它用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等，在上图中表示编码格式为UTF-8格式。

网页标签

基本标签

标题标签：

在这里插入图片描述

段落标签：

在这里插入图片描述

换行标签：

在这里插入图片描述

水平线标签：
在这里插入图片描述

粗体与斜体：

在这里插入图片描述

注释与特殊符号：
在这里插入图片描述

在这里插入图片描述

图像标签

在这里插入图片描述

图像地址，可以写绝对路径，也可以写相对路径。一般我们会在resources目录下创建image专门存放图片，这样就可以使用相对路径了。"…/“代表上一级目录，那么从上面我们写的html文件方式来看，图片相对路径就为”…/resources/image/图片名."如果路径填写错误，则会显示alt内容。src为必填，其他都为选填，当然还有一些其他功能可以自己在IDEA中尝试，空格之后会有提示。

链接标签

在这里插入图片描述

链接标签可以使网页之间联系起来，比方说从一个页面点击某个图片或文字可以跳转到另一个网页。常用值中_self为从自身页面打开， _blank表示从新页面打开。

<!-- 页面间链接 -->
<a href="MyFirstHtml.html" target="_blank">点击我跳转到第一个页面</a>
<a href="http://www.baidu.com" target="_self">点击我跳转到百度</a>
<br>
<!-- 不仅可以将文字作为点击的对象，还是图片。
<a href="MyFirstHtml.html">
    <img src="../resources/1.png">
</a>

锚链接也是链接标签的一种使用方式，它可以通过定位标记跳转到指定页面的指定位置。比方说我们经常看到的返回顶部。

<!--锚链接 -->
<!--1.需要一个锚标记 -->
<a name="top">顶部</a>
<!-- 2.跳转到标记 -->
<a href="#top">回到顶部</a>
如果#之前没有写链接即代表跳转到自身页面的某个标记
<a name="down"></a>
<a href="Test01.html#down">跳转</a>

标签分类

在HTML中，标签分为：

文本级标签：如p，span，a，b，i，u，em
容器级标签：div，h标题系列，li，dt，dd

在CSS中，标签可分为：

行内元素：与其他行内元素可以并排，例如除p之外，所有的文本级标签，都是行内元素。
块元素：所有的容器级标签，都是块级元素，以及p标签。

注：p是个文本级标签，但却是个块元素。

列表标签

列表分为：无序列表、有序列表、定义列表。

在这里插入图片描述

表格标签

表格总是随处可见，其简单通用，结构稳定。基本结构有：单元格、行、列、跨行和跨列。标签为table，行为tr，列为td，默认的表格是无边框的，如果想要有边框可以在table标签里加border，跨行是加rowspan，跨行是加colspan。下面我画一个图，然后用代码实现。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<table border="1px">
    <tr>
        <!--colspan跨列-->
        <td colspan="3">学习新思想，争做新青年</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td rowspan="2">5</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
</body>
</html>

媒体标签

视频标签:

<video str="../resources/video/视频名" controls autoplay></video>
controls是控制视频播放，如果没有则不显示视频。
autoplay是自动播放，可以不加

音频标签：

<audio str="../resources/video/视频名" controls autoplay></audio>

页面结构分析

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

日常生活中我们总是浏览很多网页，其实不难看出，所有的网页都好像是类似的，有导航栏，头部，主体，尾部等等，结构体系非常明显，这样可以使我们在写页面的时候，也变得相对容易起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<header>
    <h2>网页头部</h2>
</header>
<section>
    <h2>网页主体</h2>
</section>
<footer>
    <h2>网页脚部</h2>
</footer>
</body>
</html>

iframe内联框架

在这里插入图片描述

iframe:内联框架标签，用于在网页中任意的位置嵌入另一个网页。其实，在哔哩哔哩我们就能找到，当我们观看哔哩哔哩视频分享时就可以观察到页面里的视频就是使用了iframe。

复制这里的嵌入代码到我们自己的HTML文件中，就可以直接看到。接下来自己写一个。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内联框架</title>
</head>
<body>
    如果不设置高度和宽度，那么显示出来会非常小
<iframe src="http://www.baidu.com" frameborder="0" 
        width="1000px" height="800px"></iframe>
</body>
</html>

表单（重点）

初识表单

表单（form）是用来收集不同类型的用户输入的，表单内包含了各种各样的表单元素，例如：文本域、下拉列表、单选框、复选框等等。在平时我们在网页上的登录操作，其实就是表单提交，我们可以看到用户名输入框、密码输入框、登录按钮、注册按钮等等。接下来我们来看一下表单的格式。

在这里插入图片描述

这就是一个简单的用户登录表单。这里要着重强调一下get与post两种提交方式的区别。

在这里插入图片描述

注：这里涉及到有关于HTTP的一些知识，我们不做过多解释，等后面发表关于HTTP博客时，大家可以看一下。

表单内容

刚才我们说到表单是用来收集不同用户输入的，input标签就是一个输入标签，可以在input标签中添加属性、元素来达成我们的需求。

属性	说明
type	指定元素类型。text(文本框)、password(密码框)、checkbox(多选框)、radio(单选框）、submit(提交按钮）、reset(重置按钮)、file(上传文件)、hidden(隐藏）、image(图片按钮)和button，默认为text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。
maxlength	type为text或password时，输入的最大字符串
checked	type为radio或checkbox，指定按钮是否被选中

注：我们数据传输的形式是以键值对传输，所以name其实在实际项目编写中也是必不可少的一项，例如我们提交了用户名和密码（get和post区别图片）时，get请求中URL里username=asd&password=asd，post请求中username:asd,password:asd。

实战最为重要：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
<!--表单form
action：表单提交的位置，请求处理地址。
method：post，get提交方式
-->

<form action="MyFirstHtml.html" method="post">
    <!--文本输入框：input type="text"-->
    <p>用户名:<input type="text" name="username"></p>
    <p>密码:<input type="password" name="password" ></p>

    <!--radio为单选框，如果有多个则通过name将其设置为一个组-->
    <p>
        <!--value:单选框的值，name表示组-->
        性别:
        <!--checked表示默认选中-->
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
    </p>

    <!--多选框：input type="checkbox"-->
    <p>
        爱好：
        <input type="checkbox" value="eat" name="hobby">吃饭
        <input type="checkbox" value="sleep" name="hobby" checked>睡觉
        <input type="checkbox" value="chat" name="hobby">聊天
    </p>

    <!--按钮-->
    <p>
        按钮：
        <!--自定义按钮，可以通过自己实现的一些功能来完成需求-->
        <input type="button" name="btn1" value="点击变长">
        <!--图片按钮，也可以跟submit一样点击提交-->
        <input type="image" src="../resources/1.png">
    </p>

    <!--下拉框，列表框-->
    <p>
        国家：
        <select name="列表名称" >
            <!--可以通过-->
            <option value="China">中国</option>
            <option value="US">美国</option>
            <option value="Japan">日本</option>
            <!--selected表示默认选中-->
            <option value="Switzerland" selected>瑞士</option>
        </select>
    </p>

    <!--文本域 textarea cols表示显示列数 rows表示显示行数-->
    <p>
        反馈：
        <textarea name="textarea" cols="30" rows="10">文本内容</textarea>
    </p>

    <!--文件域 -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
    <p>
        <!--提交按钮-->
        <input type="submit" value="注册">
        <!--重置按钮-->
        <input type="reset">
    </p>
</form>
</body>
</html>

当然input中的type还有很多元素，并且有些可以达到验证的功能，例如我们平时填写邮箱格式错误时会提示报错。

邮箱验证type=“email”
URL验证type=“url”
数字验证type=“number”,max=“最大值”,min=“最小值”,step=“变化步数”
滑块，type=“range”,max=“最大值”,min=“最小值”,step=“变化步数”
搜索框，type=“search”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单验证</title>
</head>
<body>
    <!--邮箱验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
    <!--URL验证-->
    <p>URL：
        <input type="url" name="url">
    </p>
    <!--数字验证-->
    <p>
        商品数量：
        <input type="number" name="num" max="100" min="0" step="1">
    </p>

    <!--滑块-->
    <p>
        音量：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>

    <!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>
</body>
</html>

这里在说明几个个比较有用的属性。

隐藏域–hidden

例子：直接把p标签内所有内容都隐藏了
<p hidden>用户名：
    <input type="text" name="username" >
</p>

只读–readonly

例子：
<p>
    <input type="text" name="username" value="只能读" readonly>
</p>

禁用–disable

<p>URL：
        <input type="url" name="url" disabled>
    </p>

提示信息–placeholder，必填–required

输入用户名时提示请输入用户名，并且不能为空

<p>用户名:
    <input type="text" name="username" placeholder="请输入用户名" required>
</p>

郭贼不是我的菜

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录