java中html类型 html java代码

转载

网络安全守护先锋 2023-11-22 11:57:47

文章标签 java中html类型 java 前端 html 表单 文章分类 Java 后端开发

作者：小罗のdiary

📖主要内容

💦💦💦💦💦💦💦💦💦💦💦
💦💦主要是要了解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文件的文本标记

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

✨代码及其结果展示

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

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

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

<br>

<center><h1>写作三要素</h1>	</center>
<ol>								  <b class="one">有序列表标记</b>
<h2><li>是什么？</h2>					  <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>				  <b class="one">标题标记</b>
<th align="center" valign="middle">表头</th>	  <b class="one">表头标记</b>
<tr>								  <b class="one">行标记</b>
	<td align="center" valign="middle">第一行第一列</td>	  <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>
		男 
		<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>
 								<!-- 下拉菜单标记 -->
多行列表框:
<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>