java学习（五）——初识HTML

最新推荐文章于 2024-01-02 23:34:55 发布
最新推荐文章于 2024-01-02 23:34:55 发布
阅读量92 收藏
点赞数
分类专栏： java学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MAK_SL/article/details/115917802
版权

HTML5

初识HTML

HTML：Hyper Text Markup Language（超文本标记语言）

W3C :World Wide Web Consortium(万维网联盟)

W3C标准包括：

  • 结构化标准语言（HTML、XML）
  • 表现标准语言（CSS）
  • 行为标准（DOM、ECMAScript）

HTML基本结构
在这里插入图片描述

网页基本信息

<!-- DOCTYPE：告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>

<html lang="en">
<!-- head标签代表网页头部 -->
<head>
<!--  meta描述性标签，用来描述我们网页的一些信息  -->
<!--  meta一般用来做SEO  -->
    <meta charset="UTF-8">
    <meta name="keywords" content="学java，西部开源">
    <meta name="description" content="来这里学java">

    <!--  title网页标题  -->
    <title>我的第一个网页</title>
</head>

<!-- body标签代表网页主体 -->
<body>
Hello，world！
</body>
</html>

网页基本标签

标题标签

段落标签

换行标签

水平线标签

字体样式标签

注释和特殊符号标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>那年长街春意正浓</p>

<p>策马同游 烟雨如梦</p>

<p>檐下躲雨</p>

<p>望进一双深邃眼瞳</p>

<!--水平线标签-->
<hr/>

<!--换行标签-->
那年长街春意正浓<br/>

策马同游 烟雨如梦<br/>

檐下躲雨<br/>

望进一双深邃眼瞳<br/>

<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体： <strong>i love you</strong><br/>
斜体： <em>i love you</em>

<!--特殊符号-->
<br/>
空        格：
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：

<br/>
&gt;
<br/>
&lt;
<br>
&copy;版权所有shanliang


<!--
特殊符号记忆方式
&+   ；
查百度
-->


</body>
</html>

图像、超链接、网页布局

常见的图像格式：JPG、GIF、PNG、BMP

在这里插入图片描述

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>
<!--img学习
src：图片地址
    相对地址，绝对地址
     ../    --上一级目录

alt：图片名字（必填）

-->
<img src="../resources/image/photo_2.bmp" alt="狂神头像" title="Saber！">
</body>
</html>

链接标签

在这里插入图片描述

超链接：

  • 页面间链接
    • 从一个页面链接到另一个页面
  • 锚链接
  • 功能性链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<!--使用name作为标记-->
<a name="top">顶部</a>

<!--a标签
href：必填，表示要调到那个页面
target:表示窗口在那里打开
      _blank    在新标签中打开
      _self     在自己的标签打开
-->

<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到页面二</a>
<br/>
<!--图片超链接-->
<a href="1.我的第一个网页.html">
  <img src="../resources/image/photo_2.bmp" alt="狂神头像" title="Saber！">
</a>

<!--锚链接
1. 需要一个锚标记
2. 跳转到标记
-->
<a href="#top">回到顶部</a>

<a name="dowm">down</a>

<!--功能性标签
邮件链接：mailto
QQ链接
-->
<a href="mailto:1215156554@qq.com">点击联系我</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
  <img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="你好，点我获得java学习资料" title="你好，点我获得java学习资料"/>
</a>

</body>
</html>

行内元素和块元素

  • 块元素
    • 无论内容多少，该元素独占一行
    • （p、h1-h6）
  • 行内元素
    • 内容撑开宽度，左右都是行内元素，可以排在一行
    • （a、strong、em）

列表、表格、媒体元素

列表的分类：

  • 无序列表
  • 有序列表
  • 定义列表

表格

为什么使用表格

  1. ​简单通用
  2. ​结构稳定

基本结构

​1. 单元格
​2. 行
​3. 列
​4. 跨行、跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>

<!--表格table
行 tr  rows
列 td
-->
<table border="1px">
  <tr>
<!--    colspan 跨列-->
    <td colspan="3">1-1</td>
  </tr>
  <tr>
<!--    rowspan 跨行-->
  <td rowspan="2">2-1</td>
  <td>2-2</td>
  <td>2-3</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>

  </tr>
</table>

</body>
</html>

媒体元素

视频元素：video

音频元素：audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>

<!--音频和视频
src:资源路径
controls：控制条
autoplay：自动播放
-->
<video src="../resources/video/2.mp4" controls autoplay></video>

<audio src="../resources/audio/GEM.mp3" controls autoplay></audio>

</body>
</html>

页面结构分析

元素名描述
header标题头部区域的内容（用于页面或页面中的一块区域）
footer标记脚部区域的内容（用于整个页面或页面的一块区域）
sectionWeb页面中的一块区域
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内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

<!--iframe内联框架
src：地址
w-h：宽度高度
name：框架标识名
-->
<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="1000" height="800"></iframe>
<a href="https://www.bilibili.com" target="hello">点击跳转</a>

</body>
</html>

表单及表单应用

在这里插入图片描述
在这里插入图片描述

表单应用：

  • 只读：readonly
  • 禁用：disable
  • 隐藏：hidden

表单初级验证

为什么需要表达验证：减轻服务器压力；保证数据安全性

常用方式：

  • placeholder：提示信息
  • required：非空判断，必填项
  • pattern：正则表达式验证
MAK_SL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java学习ing——初识文件
04-14
NULL 博文链接：https://xiaoyjj.iteye.com/blog/1739446
Java知识点——反射初识以及基本API
12-22
1.1 Java文件和.class文件的关系 Java文件 Java文件中包含代码的所有内容，类，接口，成员变量，成员方法… .class字节码文件 .java文件 通过 javac编译工具生成对应的.class字节码文件 使用JDK中提供的反编译工具，...
Java学习日记004————初识CSS
fatdragoncat的博客
01-16 134
我是Fat Loong Cat 目前正在读大四。本文主要是记录我在学习Java中的一些知识点以及老师传授的重点内容。所有内容仅代表个人观点，如有错漏，欢迎斧正。 在学习CSS之前，我们首先要去了解一下什么是CSS。 一、关于CSS 一）CSS的含义 CSS是 Cascading Style Sheets（中文翻译为层叠样式表）的缩写，表现为HTML或XHTML文件样式的计算机语言。包括对字体、颜色、边距、高度、宽度、背景图片的设定。是一种标准的样式表语言，用于描述网页的表示，即布局和格式。 二
Java学习点滴——初识Java
weixin_33738578的博客
04-12 94
基于《Java编程思想》第四版 前言 “程序就是算法加数据结构”，而算法就是控制语句加操作符，编写一个程序就是使用控制语句加操作符去操作数据结构，因此我从Java的控制语句、操作符以及如何组织数据结构开始入手。因为有C/C++的基础，所以不免会以对比的方式去理解Java。 控制语句 除了没有goto，Java的控制流程的关键字和C++是一样的，很好理解。不过Java中的break和continue...
Java学习之路——初识Java
JunLeon的博客
09-16 344
Java语言概述 JunLeon——go big or go home 什么是程序? 程序：计算机执行某些操作或解决某个问题而编写的一系列有序指令的集合。 Java历史 Java历史重大事件 1990 sun公司启动绿色计划 1992 创建oak（橡树）语言 -> Java 1994 gosling参加硅谷大会演示Java功能，震惊世界 1995 sun正式发布Java第一个版本 2009 甲骨文公司宣布收购sun公司 2001 发布Java7 2014 发布Java8
web前端学习（一）——初识HTML5
胜天半子祁同伟
12-16 8863
web前端学习（一）——初识HTML5
JavaScript学习之旅——初识
无方少年游
01-02 1072
在几年前，博主有意学习前端相关的内容，诸如Vue等相关的框架，所以也就想了解一下关于Html、CSS、JavaScript 等相关内容，但是没有实战的地方，随之放弃。时至今日，鸿蒙系统上线，看到用的语言是基于TypeScript(自认为)伸伸懒腰，时间又不早了（bgm：北京时间23:33)以上就是今天学习梳理的内容，简单的对JS有一个基础的认知和运行时的学习，诸君大可一眼扫过，不必过于纠结，都是一些很基础的东西~再会~
Java学习历程(1)——初识Java
Chiaki的博客
01-21 126
初识Java jdk-8安装以及环境变量配置 Dos基本命令 1. mkdir 创建文件夹 2. dir 查看某个目录下的子目录 3. cls 清屏 4. D: （盘符名：进入盘符） 5. cd change directory切换目录（进入） 6. cd .. 返回上一级目录 7. rd 删除文件夹 8. del 文件名 删除一个文件 编译与运行 java命令 c\javac hello.java 编译文件 c\java hello 运行文件 jdk与jre与jvm J
JAVA WEB篇1——初识JAVAWEB
qq_43842093的博客
09-06 261
JAVA WEB篇1——初始JAVAWEB JavaWeb主要指使用Java语言进行动态Web资源开发技术的统称，是解决相关Web互联网领域的技术总和 1、Http协议 HTTP协议（HyperText Transfer Protocol，超文本传输协议）是由W3C（万维网联盟）组织制定 的一种应用层协议，是用来规范浏览器与Web服务器之间如何通讯的数据格式，主要涉及浏览器 的发请求格式和服务器的响应格式 HTTP协议通常承载于TCP协议之上，而承载于TLS或SSL协议层之上的协议就是常说的HTTPS协
从零开始的Java笔记——初识Java
qq_40509784的博客
05-22 147
从零开始的Java笔记（day1） 很久没有上csdn的博客论坛了，因为很多的原因，现在疫情在家办公，各种私事接踵而至，由于大学的Java课程因某位老师的不重视，学的并不是很好，想了想还是多多提升自己的能力才是王道，所以看作零基础开始入门学习！这将会是一个长篇序列文章，一直编辑到可以自己对该语言有一定的理解为止！ 说明：本文章的day天数并非博主按照实际操作天数进行创作，而是根据内容多少进行分类，因此可能存在一天创作多篇文章的可能性，希望阅读者不要过多计较，如果对您有所帮助，那将会是我的荣幸 本次笔记的重
JAVA—— HTML
weixin_50594210的博客
09-20 1941
文章目录1 HTML入门1.1 初识HTML1.1.1 概述1.1.2 HTML的组成1）标签2）属性1.2 入门案例1.2.1 初始页面1）创建一个标准的初始化页面2）页面说明1.2.2 案例实现1.3 总结2 基本语法2.1 **关于注释**2.2 关于标签2.2.1 空元素2.2.2 嵌套元素2.2.3 块级和行内1）概念2）div和span2.3 关于属性2.4 特殊字符2.5 总结3 HTML案例-新闻文本3.1 案例效果3.2 案例分析3.2.1 div样式布局3.2.2 文本标签3.3 使用标
初识java,用springBoot学习java
08-28
初识java,用springBoot学习java
java第五章初识面向对象
12-26
java第五章初识面向对象
Docker——初识和安装
01-07
什么是Docker Docker 是一个开源的应用容器引擎，基于 Go 语言 并遵从 Apache2.0 协议开源。 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也...
基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip
05-31
【优质项目推荐】 1、项目代码均经过严格本地测试，运行OK，确保功能稳定后才上传平台。可放心下载并立即投入使用，若遇到任何使用问题，随时欢迎私信反馈与沟通，博主会第一时间回复。 2、项目适用于计算机相关专业（如计科、信息安全、数据科学、人工智能、通信、物联网、自动化、电子信息等）的在校学生、专业教师，或企业员工，小白入门等都适用。 3、该项目不仅具有很高的学习借鉴价值，对于初学者来说，也是入门进阶的绝佳选择；当然也可以直接用于 毕设、课设、期末大作业或项目初期立项演示等。 3、开放创新：如果您有一定基础，且热爱探索钻研，可以在此代码基础上二次开发，进行修改、扩展，创造出属于自己的独特应用。 欢迎下载使用优质资源！欢迎借鉴使用，并欢迎学习交流，共同探索编程的无穷魅力！ 基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip 基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip 基于业务逻辑生成特征变量python实现源码+数据集+超详细注释.zip
六一儿童节快乐！（六一儿童节庆祝代码）Vue开发
最新发布
05-31
六一儿童节快乐！（六一儿童节庆祝代码）Vue开发 like Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and fixes files npm run lint Customize configuration
uniapp聊天工具源码.zip
05-31
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
NX二次开发uc1603 函数介绍
05-31
NX二次开发uc1603 函数介绍，Ufun提供了一系列丰富的 API 函数，可以帮助用户实现自动化、定制化和扩展 NX 软件的功能。无论您是从事机械设计、制造、模具设计、逆向工程、CAE 分析等领域的专业人士，还是希望提高工作效率的普通用户，NX 二次开发 Ufun 都可以帮助您实现更高效的工作流程。函数覆盖了 NX 软件的各个方面，包括但不限于建模、装配、制图、编程、仿真等。这些 API 函数可以帮助用户轻松地实现自动化、定制化和扩展 NX 软件的功能。例如，用户可以通过 Ufun 编写脚本，自动化完成重复性的设计任务，提高设计效率；或者开发定制化的功能，满足特定的业务需求。语法简单易懂，易于学习和使用。用户可以快速上手并开发出符合自己需求的 NX 功能。本资源内容 提供了丰富的中英文帮助文档，可以帮助用户快速了解和使用 Ufun 的功能。用户可以通过资源中的提示，学习如何使用 Ufun 的 API 函数，以及如何实现特定的功能。
spark从入门到放弃——初识spark（一）
03-16
非常感谢您的提问。以下是我对“spark从入门到放弃——初识spark（一）”的回答： “spark从入门到放弃”是一个非常有趣的话题，而“初识spark（一）”则是其中的第一篇文章。在这篇文章中，作者主要介绍了Spark的基本概念和特点，包括Spark的分布式计算模型、RDD（弹性分布式数据集）的概念和特点、Spark的运行模式等等。此外，作者还介绍了如何在本地环境中安装和配置Spark，并给出了一些简单的示例代码，帮助读者更好地理解Spark的基本用法和操作方法。 总的来说，这篇文章对于初学者来说非常有帮助，可以帮助读者快速入门Spark，并了解其基本概念和特点。如果您对Spark感兴趣，我建议您可以继续阅读“spark从入门到放弃”系列文章，深入了解Spark的更多知识和应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值