零基础入门JAVAweb——前端开发html篇

已于 2022-04-27 12:19:49 修改
阅读量1.9k 收藏 25
点赞数 6
分类专栏： javaweb 文章标签： java 前端
于 2022-04-27 12:18:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57209839/article/details/124442321
版权

🧑作者简介

📮首页：​​​​​​小罗のdiary的博客_CSDN博客-单片机原理,java基本常识领域博主

🕴职业：👨‍🎓在校大学生

😍爱好：📝写博客，🎧听歌，🔌学习单片机，💻java，🏃跑步

🏆擅长：单片机的基本原理，java基本原理

🎉🎉欢迎来首页阅读我的博客🎉🎉

📖主要内容

💦💦💦💦💦💦💦💦💦💦💦

💦💦主要是要了解html文件的基本结💦💦

💦💦，然后对每个标记进行解读，代💦💦

💦💦码编写，结果演示，简单且有效💦💦

💦💦的理解html代码，这为以后java💦💦

💦💦💦💦web打下坚实的基础💦💦💦💦

💦💦💦💦💦💦💦💦💦💦💦

📋目录

❤️一、html文件的基本结构

✨1.html标记

✨2.head标记

✨3.titile标记

✨4.body标记

✨5.html的基本结构代码

❤️二、html文件的文本标记

✨代码及其结果展示

🖼（1）换行模块

🖼（2）标题模块

🖼（3）居中模块

🖼（4）无序列表模块

🖼（5）有序列表模块

🖼（6）行内和块标记模块

🖼（7）表格模块

🖼（8）表单模块 

🖼（9）下拉菜单模块

🖼（10）文本域模块 

🖼（11）超连接模块

🖼（12）图片模块

👇👇开始学习👇👇

❤️一、html文件的基本结构

💨html主要由四部分组成，每个部分都不可或缺，这四个部分类似于我们人的身体。

✨1.html标记

该标记是html的主体部分，他相当于我们人的基本架构，所以说他是整个html文件的开头，以</html>结尾

✨2.head标记

该标记是html文件的头标记,存放文件信息,例如:CSS样式代码，类似于我们人体的大脑部分，看不见，摸不着

✨3.titile标记

该标记的标题标记，一般在<head>中

✨4.body标记

是html文件的主体标记，页面内容都在该标记中，相当于我们人体的四肢，执行大脑的指令

✨5.html的基本结构代码

<html>
    <head>
        脑部
        <title>页面标题</title>
    </head>
    <body>
        执行大脑指令
    </body>
</html>

❤️二、html文件的文本标记

  1. 🎈<br>换行标记,该标记是一个单独标记
  2. 🎈<p>段落标记,前后空1行
  3. 🎈<hx>标题标记,x为数字1,2,3,4,5,6共6个等级
  4. 🎈<span>行内标记
  5. 🎈<div>块标记
  6. 🎈<center>居中标记
  7. 🎈<ul>无序列表标记,<li>为列表项
  8. 🎈<ol>有序列表标记,<li>为列表项
  9. 🎈<span>行内区域标记
  10. 🎈<div>块区域标记
  11. 🎈<table>表格标记
    1. 💎<caption>表格标题标记
    2. 💎<th>表头标记
    3. 💎<tr>行标记
    4. 💎<td>列标记
  12. 🎈<from>表单标记,💎<input>表单输入标记
  13. 🎈<select>下拉菜单标记,💎<option>列表添加内容标记
  14. 🎈<textarea>文本域标记
  15. 🎈<a>超链接标记
  16. 🎈<img>图像标记

✨代码及其结果展示

<html>
<head>								<!-- html文件的头标记 -->								
<title>网页前端基础html篇</title>		<!-- 页面的标题 --> 
<style>
	.one{
		color:red;
	}
</style>		 
</head>
<body>								<!-- html文件的主体标记 --> 
<b>登高</b>							&nbsp; <b class="one">加粗标记</b>
<br>风急天高猿啸哀，处清沙白鸟飞回。			&nbsp; <b class="one">换行标记</b>
<br>无边落木萧萧下，不禁长江滚滚来。
<br>万里悲秋常作客，百年多病独徘徊。
<br>艰难苦恨繁霜鬓，潦倒新停浊酒杯。

<h1>写作三要素</h1>						&nbsp; <b class="one">标题标记</b>
<h2>是什么？</h2>
<p>是什么，也可译为提出问题，一般为作文开头</p>	&nbsp; <b class="one">段落标记</b>
<h2>为什么？</h2>	
<p>为什么，也可译为分析问题，一般为作文正文部分</p>
<h2>怎么办？</h2>
<p>怎么办，也可译为解决问题，一般为作文正文或结尾部分</p>

<center><h1>写作三要素</h1>	</center>	&nbsp; <b class="one">居中标记</b>
<center><h2>是什么？</h2></center>
<center><p>是什么，也可译为提出问题，一般为作文开头</p></center>	
<center><h2>为什么？</h2></center>	
<center><p>为什么，也可译为分析问题，一般为作文正文部分</p></center>
<center><h2>怎么办？</h2></center>
<center><p>怎么办，也可译为解决问题，一般为作文正文或结尾部分</p></center>

<br>

<center><h1>写作三要素</h1>	</center>
<ul>								&nbsp; <b class="one">无序列表标记</b>
<h2><li>是什么？</h2>					&nbsp; <b class="one">列表标记</b>
<p>是什么，也可译为提出问题，一般为作文开头</p>	
<h2><li>为什么？</h2>	
<p>为什么，也可译为分析问题，一般为作文正文部分</p>
<h2><li>怎么办？</h2>
<p>怎么办，也可译为解决问题，一般为作文正文或结尾部分</p>
</ul>

<br>

<center><h1>写作三要素</h1>	</center>
<ol>								&nbsp; <b class="one">有序列表标记</b>
<h2><li>是什么？</h2>					&nbsp; <b class="one">列表标记</b>
<p>是什么，也可译为提出问题，一般为作文开头</p>	
<h2><li>为什么？</h2>	
<p>为什么，也可译为分析问题，一般为作文正文部分</p>
<h2><li>怎么办？</h2>
<p>怎么办，也可译为解决问题，一般为作文正文或结尾部分</p>
</ol>
 
<br>
									<b class="one">注：行内标记作用范围比块标记小</b>
									<b class="one">行内标记</b><br>
<span>行内标记效果</span>				<b class="one">块标记</b>
<div>块标记效果</div> 					

<br>

<table>								<b class="one">表格标记</b>
<caption>表格</caption>				&nbsp; <b class="one">标题标记</b>
<th align="center" valign="middle">表头</th>	&nbsp; <b class="one">表头标记</b>
<tr>								&nbsp; <b class="one">行标记</b>
	<td align="center" valign="middle">第一行第一列</td>	&nbsp; <b class="one">列标记</b>
	<td align="center" valign="middle">第一行第二列</td>
</tr>
<tr>
	<td align="center" valign="middle">第二行第一列</td>
	<td align="center" valign="middle">第二行第二列</td>
</tr>
</table>

<br>
														<b class="one">表单标记</b><br>
<form action="index.jsp"name="信息输入界面"method="post">	
		姓名:<input name="name"type="text"id="Name"maxlength="20">
<br>	学号:<input name="id"type="text"id="Id"maxlength="20">
<br>	性别:<input name="sex"type="radio"class="noborder"value="男"checked>
		男&nbsp;
		<input name="sex"type="radio"class="noborder"value="女"checked>
		女
<br>	喜欢的科目:<input name="chinese"type="checkbox"id="Chinese"value="语文">
		语文									<!-- 表单输入标记 -->
			<input name="math"type="checkbox"id="Math"value="数学">
		数学	
			<input name="chinese"type="checkbox"id="Chinese"value="英语">
		英语
<br>		<input name="Submit"type="submit"class="grey"value="保存">
			<input name="Reset"type="reset"class="black"value="取消">
		<input name="Image"type="image"src="2.jpg">
</form>

<br>
									<b class="one">下拉菜单标记</b><br>
下拉列表框:
<select name="下拉框">				
<option>第一个框</option>
<option>第二个框</option>
<option>第三个框</option>
</select>
&nbsp;								<!-- 下拉菜单标记 -->
多行列表框:
<select name="多行列表框"size="3">
<option>第一个框</option>
<option>第二个框</option>
<option>第三个框</option>
</select>

<br>
									 <b class="one">文本域标记</b><br>
<textarea name="textarea"cols="40"rows="5"wrap="hard">
		登高							
风急天高猿啸哀，处清沙白鸟飞回。			
无边落木萧萧下，不禁长江滚滚来。
万里悲秋常作客，百年多病独徘徊。
艰难苦恨繁霜鬓，潦倒新停浊酒杯。	
</textarea>

<br>
									<b class="one">超链接标记</b><br>
<a href="index.jsp">跳转界面</a>		 

<br>
									<b class="one">图片标记</b><br>
<img src="2.jpg"width="200"weight="500">
</body>
</html>

🖼（1）换行模块

37fd3a0ca66b458d97f2b62aa43417d4.png

🖼（2）标题模块

53e0ce5fe5fa4dc588282251f0848923.png

🖼（3）居中模块

a69a0bbc2d1e4f0ab3972237b15ecc47.png

🖼（4）无序列表模块

f1ce4ae42dc64212845ea65063bd64d4.png

🖼（5）有序列表模块

d71207a19d3048b6b49a90677dbfe4e0.png

🖼（6）行内和块标记模块

551f9692cd8749c48a7b55db2ad47ed2.png

🖼（7）表格模块

509abad4846d4e77be9417fef057564e.png

🖼（8）表单模块 

7f394ec89fef427c91cb64ca0552c35f.png

🖼（9）下拉菜单模块

af083155a29a42388f94aee2a8c7be28.png

🖼（10）文本域模块 

6b9428dc11a34d4ab91c5ca1f82ec2dc.png

🖼（11）超连接模块

6e6630cab9484d28b784c169fa4c110c.png

🖼（12）图片模块

3dd04f54c4454b87ae96c6d7bdbd87ed.png

相信大家到这里应该已经读完了吧！😁😁

觉得写得好的话点个赞再走呗！😊😊

3ffc9a992fb044318b2485bf547c4592.gif

小罗のdiary
关注
  • 6
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webdemo:javaweb教材
03-24
webdemo:javaweb教材源码
java web前端开发_了解web前端开发！
weixin_36448964的博客
02-21 374
原标题：了解web前端开发！黑马先锋：www.heimaxf.com想学习好web前端开发这门课程，首先肯定是要了解web前端是做什么的？有什么样的功能，我们才能更好地学好这门课程，那么今天小编就给大家讲解一下web前端。web前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码...
JavaWeb(前端)
m0_55794883的博客
02-12 477
javaweb:HTML,CSS,JavaScript
JavaWeb开发 —— 前端工程化
hdakj22的博客
04-12 854
前后端分离开发、工具YApi、前端工程化的环境准备：vue-cli 以及Vue项目创建、Vue项目开发流程
java web 前端技术_JavaWeb:前端开发基础
weixin_28881575的博客
02-15 454
JavaWeb:前端开发基础内联元素和块级元素说明：联元素和块级元素都是html中的范畴，块元素和内联元素的主要差异是块元素是从新的一行开始。而内联元素一般显示在一行上。但是可以通过css的display属性将内联元素改变为块元素，(display：block) 也可以将块元素改变为内联元素(display：in-line)。内联元素的特点：1、和其他元素都在一行上；2、高度、行高和顶以及底边距都...
Javaweb前端——HTML常用标签.pdf
04-09
Javaweb前端——HTML常用标签.pdf
零基础学JavaWeb开发：JSPServletStrutsSpringHibernateAjax
07-22
资源名称：零基础学Java Web 开发：JSP Servlet Struts Spring Hibernate Ajax内容简介：本书分为3篇共17章。其中，第1～12章是基础篇，介绍了Java Web开发中必不可少的各种基础知识；第13～16章是进阶篇，主要讲解...
零基础 java入门 javaweb 框架
09-25
零基础jiava入门，零基础便可掌握javaSE所有相关核心内容，这是一个课件部分截图，还有javaWeb，框架等课件，如果有需要的朋友们，可以给我发私信
JavaWeb开发入门第一篇必备知识讲解
09-02
JavaWeb开发入门第一篇主要内容介绍的是必备知识、基础知识、搭建JavaWeb应用开发环境，感兴趣的小伙伴们可以参考一下
JavaWeb开发教程——入门与提高篇
05-07
JavaWeb开发教程——入门与提高篇JavaWeb开发教程——入门与提高篇JavaWeb开发教程——入门与提高篇JavaWeb开发教程——入门与提高篇
java-前端页面模板
03-04
本模板未使用任何前端框架，简单易上手。简单修改后即可满足基本需求。登录、查询展示等功能页面都有。
JavaWeb技术及应用—教材贯穿项目静态页面
12-06
JavaWeb技术及应用—教材贯穿项目静态页面（青软实训）
零基础入门JAVAweb——前端开发JavaScript基本介绍篇
m0_57209839的博客
04-30 3192
🧑作者简介 📮首页：​​​​​​小罗のdiary的博客_CSDN博客-单片机原理,java基本常识领域博主 🕴职业：👨‍🎓在校大学生 😍爱好：📝写博客，🎧听歌，🔌学习单片机，💻java，🏃跑步 🏆擅长：单片机的基本原理，java基本原理 🎉🎉欢迎来首页阅读我的博客🎉🎉 📖主要内容 💦💦💦💦💦💦💦💦💦💦💦 💦💦了解JavaScript是什么语言，该语💦💦 💦💦言的特点，和java的区别，使用方💦💦 💦💦式，了解Ajax，了解并使用jquery💦💦 💦💦💦💦💦💦💦💦💦💦💦 ❤
java web前端开发技术_JavaWeb前端开发知识总结(javaScript)
weixin_42361175的博客
02-24 489
JavaWeb前端开发知识总结(JavaScript)1. JavaScript技术1.1 JavaScript概述1.一个轻量级的脚本语言;2.嵌入到HTML去执行;3.执行顺序由上往下;一定注意:在使用DOM操作HTML标签,要保证HTML标签已经加载到内存中.window.onload = function(){ } // 入口函数,当页面加载完成后会调用该函数JavaScript组成:Ja...
java web前端开发技术_浅谈Web前端开发主要掌握的三门技术
weixin_35615591的博客
02-24 844
这几年，随着互联网的飞速发展，大量怀有梦想的朋友涌入了IT行业，但是非常有经验的人却很少，出于大部分人对web前端技术的不了解，web前端开发工程师也是近几年的新兴职业，在大家都不是有很清晰的概念的时候，那么今天我就给大家简单介绍一下web前端开发。Web前端开发主要需掌握如下三门技术：HTML：HTML是一种用来制作网页的超文本标记语言，比如我们查看网页源代码看到的各个等。值得注意的是，HTML...
关于在java页面里写前端片段。
weixin_44227650的博客
02-11 722
关于在java页面里写前端片段 可以按照以下方法进行编写 ： out.println("<br><br><br><input type='button' class='bu' value='关闭' οnclick='window.close();'/></center>");
手把手搭建一个完整的javaweb项目(适合新手)
热门推荐
贾世鑫的博客
06-23 47万+
手把手搭建一个完整的javaweb项目 本案例使用Servlet+jsp制作,用MyEclipse和Mysql数据库进行搭建，详细介绍了搭建过程及知识点。 下载地址：http://download.csdn.net/detail/qq_23994787/9904842点击下载 主要功能有： 1.用户注册 2.用户登录 3.用户列表展示 4.用户信息修改 5.用户信息删除 ...
1.1 Java HTML前端网页
m0_53879048的博客
02-22 773
1. 网页基本信息 Hyper Text Markup Language (超文本标记语言) W3C 的标准包括 ： 结构化标准语言（HTML、XML) 表现标准语言（CSS） 行为标准（DOM、ECMAScript） （1、1.1 ） <!-- DOCTYPE : 告诉浏览器，我们要使用什么规范 --> <!DOCTYPE html> ​ <html lang="en"> <!-- head 代表网页的头部--&g...
java web教材,JavaWeb轻量级框架项目化教程（高等院校计算机教育系列教材）
weixin_33158887的博客
03-20 280
目录第1章 Java Web软件安装与开发环境搭建 11.1 安装和配置JDK 8 11.2 安装与配置Tomcat 8 41.3 MySQL数据库的安装与配置 61.4 MyEclipse 2015的安装与配置 131.5 创建Java Web工程digital 18小结 21思考与练习 21第2章 电子商城项目简介与设计 222.1 项目分析与功能设计 222.2 系统分析...
JavaWeb——HTTP
最新发布
10-07
JavaWeb中的HTTP指的是在JavaWeb开发中使用的超文本传输协议(HTTP)。HTTP是一种简单的请求-响应协议，通常在TCP/IP协议上运行。它通过客户端和服务器之间的交互来传输文本和超文本数据，如HTML、图片、音乐、视频等...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小罗のdiary

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值