JavaWeb:HTML

已于 2022-10-16 09:53:38 修改
阅读量68 收藏
点赞数
分类专栏： Java 文章标签： html
于 2022-07-04 21:53:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49762650/article/details/125609188
版权 
<html>
	<head></head>
		<title>这是我的第一个网页</title>
		<meta charaset="UTF-8">
	<body>
		<!--
		HELLO WORLD!<br/>你好！HTML!
		<p>这里是第一个段落</p>
		<p>这里是第二个段落</p>
		<img src = "D:\JavaWeb\day01\imgs\girl.jpg"/ width="57" height="73" alt="这里是一张图片"/>
		<h1>标题一</h1>
		<h2>标题二</h2>
		<h3>标题三</h3>
		<h4>标题四</h4>
		<h5>标题五</h5>
		<h6>标题六</h6>
		-->

		武林高手排行榜：
		<ol type="I" start="3">
			<li>扫地僧</li>
			<li>萧远山</li>
			<li>慕容博</li>
			<li>虚竹</li>
			<li>阿紫</li>
		</ol>

		武林大会人员名单:
		<ul type="circle">
			<li>乔峰</li>
			<li>阿朱</li>
			<li>马夫人</li>
			<li>白世镜</li>
		</ul>

		你是<b><i><u>喜欢</u></i></b>吃<b>甜</b>月饼还是<i>咸</i><u>月饼<u>？
		<br/>

		水分子的化学式：H<sub>2</sub>O <br/>
		氧气的化学式：<sup>O</sup>2 <br/>

		5&lt;10
		10&gt;5
		5&le;10
		10&ge;5
		注册商标&reg;
		版权符号&copy; <br/>

		<span>赵又廷</span>，夺妻之仇。<br/>

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

	</body>
</html>

1)html语言是解释型语言，不是编译型     浏览器是容错的

2)html页面中由一对标签组成：<html></html>        <html> 称之为 开始标签  </html>称之为 结束标签

3)title 表示网页的标题        4)可以在meta标签中设置编码方式

5)<br/>表示换行 。br标签是一个单标签。单标签：开始标签和结束标签是同一个，斜杠放在单词后面

6)p 表示段落标签

7)img 标签图片标签      src属性表示图片文件的路径     width和height表示图片的大小      alt表示图片的提示

8)路径的问题：   1. 相对路径      2. 绝对路径        9)h1~h6 : 标题标签

10)列表标签:
        - ol 有序列表       start 表示从*开始，type 显示的类型：A a I i 1(deafult)
        - ul 无序列表       type disc(default) , circle , square

11) u 下划线 b 粗体  i 斜体          12) 上标 sup   下标 sub

13) HTML中的实体： 小于号 &lt; 大于等于号 &ge; 版权 &copy;

14) span 不换行的块标记

15) a 表示超链接       href 链接的地址
        target:    _self 在本窗口打开      _blank 在一个新窗口打开
                      _parent 在父窗口打开       _top  在顶层窗口打开

16) div 层

<html>
	<head></head>
		<title>表格标签的学习</title>
		<meta charaset="UTF-8">
	<body>
		<table border="1" width="600" cellspacing="0" cellpadding="4">
			<tr align="center">
				<th>姓名</th>
				<th>门派</th>
				<th>成名绝技</th>
				<th>内功值</th>
			</tr>
			<tr align="center">
				<td>乔峰</td>
				<td>丐帮</td>
				<td>少林长拳</td>
				<td>5000</td>
			</tr>
			<tr align="center">
				<td>虚竹</td>
				<td>灵鹫宫</td>
				<td>北冥神功</td>
				<td>15000</td>
			</tr>
			<tr align="center">
				<td>扫地僧</td>
				<td>少林寺</td>
				<td>七十二绝技</td>
				<td>未知</td>
			</tr>
		</table>
		<hr/>
		<table border="1" cellspacing="0" cellpading="4" width="600">
			<tr>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<tr align="center">
				<td>苹果</td>
				<td rowspan="2">5</td>
				<td>20</td>
				<td>100</td>
				<td><img src="imgs\girl.jpg" width="24" height"24"/></td>
			</tr>
			<tr align="center">
				<td>菠萝</td>
				<td>15</td>
				<td>45</td>
				<td><img src="imgs\girl.jpg" width="24" height"24"/></td>
			</tr>
			<tr align="center">
				<td>西瓜</td>
				<td>6</td>
				<td>6</td>
				<td>36</td>
				<td><img src="imgs\girl.jpg" width="24" height"24"/></td>
			</tr>
			<tr align="center">
				<td>总计</td>
				<td colspan="4">181</td>
			</tr>
		</table>
	</body>
</html>

17) 表格    table    行        tr     列        td     表头列    th

table中有如下属性（虽然已经淘汰，但是最好了解一下）
    - border：表格边框的粗细         - width:表格的宽度
    - cellspacing：单元格间距        - cellpadding：单元格填充

tr中有一个属性： align -> center , left , right                   rowspan : 行合并        colspan : 列合并

<html>
	<head></head>
		<title>表单标签的学习</title>
		<meta charaset="UTF-8">
	<body>
		<form action="demo04.html" method="post">
			昵称：<input type="text" name="nickName" value="请输入你的昵称"/><br/>
			密码：<input type="password" name="pwd"/><br/>
			性别：<input type="radio" name="gender" value="male"/>男
				  <input type="radio" name="gender" value="female" checked/>女<br/>
		    爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球
				  <input type="checkbox" name="hobby" value="football" checked/>足球
				  <input type="checkbox" name="hobby" value="earth" checked/>地球<br/>
		    星座：<select name="star">
					<option value="1">白羊座</option>
					<option value="2" selected>金牛座</option>
					<option value="3">双子座</option>
					<option value="4">天蝎座</option>
					<option value="5">天秤座</option>
				  </select><br/>
		    备注：<textarea name="remark" rows="4" cols="50"></textarea><br/>
			<input type="submit" value="注 册"/>
			<input type="reset" value="重 置"/>
			<input type="button" value="这是一个普通按钮"/>
		</form>
	</body>
</html>
<html>
	<head></head>
		<title>表单标签的学习</title>
		<meta charaset="UTF-8">
	<body>
		<h1><font color='red'>注册成功</font></h1>
	</body>
</html>

18) 表单    form

19) input type="text" 表示文本框 ， 其中 name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的
    input type="password" 表示密码框
    input type="radio" 表示单选按钮。需要注意的是，name属性值保持一致，这样才会有互斥的效果;可以通过checked属性设置默认选中的项
    input type="checkbox" 表示复选框。name属性值建议保持一致，这样将来我们服务器端获取值的时候获取的是一个数组
    select 表示下拉列表。每一个选项是option，其中value属性是发送给服务器的值 , selected表示默认选中的项
    textarea 表示多行文本框（或者称之为文本域）,它的value值就是开始结束标签之间的内容
    input type="submit" 表示提交按钮
    input type="reset" 表示重置按钮
    input type="button" 表示普通按钮

<html>
	<head></head>
	<frameset rows="20%,*"><!-- frameborder="no" -->
		<frame src="frames/top.html"/>
		<frameset cols="15%,*">
			<frame src="frames/left.html"/>
			<frameset rows="80%,*">
				<frame src="frames/main.html">/
				<frame src="frames/bottom.html"/>
			</frameset>
		</frameset>
	</frameset>
</html>

frameset 表示页面框架 ， 这个标签已经淘汰，了解，不需要掌握
frame表示框架中的具体页面引用

<html>
	<head>
	<meta charaset="UTF-8">
	</head>
	<body>
		这里是demo06页面的内容！！
		<iframe src="frames/top.html"/>
	</body>
</html>

iframe  在一个页面嵌入一个子页面

总结：
1.HTML是解释型的文本标记语言，不区分大小写
2.html,head,title,meta,body,br,p,hr,div,table,form,u,i,b,sup,sub,&nbsp;,span,ul,ol,li,tr,td,th,h1-h6,a,input,select,textarea,img
2-1. html , head , title , meta , body , br , ul , ol , h1-h6 , a , img , &nbsp;, p , div , span
2-2. table tr , th , td 
2-3. form(action='' , method='post') input type='text,pasword,radio,checkbox,submit,button,reset"   <select> , <textarea>

哈哈泡的茶
关注
专栏目录
JavaWeb:JavaWeb
05-02
JSP是一种动态网页技术，它允许将静态内容（HTML、CSS、JavaScript）与动态Java代码混合在一起。JSP页面在服务器端被转换为Servlet，然后编译执行。JSP标签、脚本元素和EL（Expression Language）是其主要组成部分...
JavaWeb:JavaWeb的一些代码
03-25
在JavaWeb开发中，HTML常与CSS（Cascading Style Sheets）和JavaScript一起使用，形成前端三剑客，构建用户交互界面。HTML标签如`<html>`, `<head>`, `<body>`, `<form>`等用于创建页面布局，而`<input>`、`<button>...
JavaWeb：HTML/CSS 实现静态动态实时进度条
浩栋的博客
05-05 3978
JavaWeb：HTML/CSS 实现静态动态实时进度条 HTML实现静态动态实时进度条 HTML5 原生提供了两个标签<meter>和<progress>来实现进度条。 <meter>和<progress>的区别是： 1、<meter>：用来显示已知范围的标量值或者分数值 2、<progress>：用来显示一项任务的完成进度，通常情况下，该元素都显示为一个进度条 <meter>标签代码： <me...
JavaWeb：HTML如何实现点击超级链接打开一个新窗口
浩栋的博客
05-10 6689
JavaWeb：HTML如何实现点击超级链接打开一个新窗口。解决办法：增加：target=“_blank” 属性就可以让新页面在另一个窗口打开。一般情况下，我们只添加href链接的话，在前端点击超级链接会在本窗口中打开链接。
JavaWeb：实现购物商城（课程设计完整版）
热门推荐
m0_63512120的博客
02-19 3万+
基于javaweb实现的网上购物商城，实现了一些基础功能，供大家参考学习，也可以当做课程设计，在文章结尾附有源代码和素材让大家使用。原创作品，大家可以在评论区指出问题哟，我们共同学习！
JavaWeb：JavaWeb技术架构演进
栗筝i的博客
11-18 3611
Java Web，是用 Java 技术来解决相关web互联网领域的技术栈。web 包括：web 服务端和 web 客户端两部分。Java 在客户端的应用有 Java Applet，不过使用得很少，Java 在服务器端的应用非常的丰富，比如 Servlet，JSP、第三方框架等等。Java 技术对 Web 领域的发展注入了强大的动力。 本篇内容包括：JavaWeb 简介、JavaWeb 技术架构演进的各个阶段，即 JavaWeb-Servlet 阶段，JavaWeb-MVC 阶段（SSM/SSH）以及 Ja
JavaWeb：用户信息管理系统总结
Z2658172512的博客
05-27 3559
当当当当~~~~欢迎大家阅读，今天我们总结用户信息管理系统的流程 该系统主要分为两部分，一部分是简单功能（增删改查）的基础实现； 一部分是复杂功能删除选中，分页查询，复杂条件查询的实现； 简单功能 一：登录 (一)：登录界面 (1):html登录界面 (2)：html代码 <body> <div class="container" style="width: 400px;"> <h3 style="text-align: cent...
JavaWeb: 获取年份，日月，星期
qq_50906590的博客
09-12 794
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.Date"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head&gt.
JavaWeb：增 删 改 查
weixin_64920050的博客
09-19 630
【代码】JavaWeb：增 删 改 查。
JavaWeb系列一: HTML
你好, 我在学java的博客
03-01 1105
html入门
Java学习篇——JavaWeb：JavaScript
zhang19971014的博客
04-06 2万+
作用：负责给页面做动态效果。 有什么用 ————语言特点：弱类型。let name=“ss” let age=15 name可以等于16不报错。 ————脚本语言：不需要编译解析直接执行。 ————基于面向对象开发。 ————只能访问浏览器的网站：安全性强。 ————交互性强：直接嵌入html页面中。 怎么用：如何在html中使用js语言 内联：在标签事件属性后面的，事件触发时执行。 在标签上添加// 内部：用 script标签 外部：新建javaScript ...
Educoder/头歌JAVA——JavaWeb：JSP入门
舟舟的博客
12-08 6703
因为普通的静态HTML页面并不能满足我们实际生产环境的需求，我们要想构建一个真正强大的Web应用，你还需要一些帮手，这就是JAVA、Servlet和JSP。 本课程介绍如何搭建JavaWeb开发环境，JSP的执行流程，以及JSP的声明、程序脚本、注释和内容表达式，带领你系统的了解JSP的基础知识。
Java_JavaWeb:JavaWeb
03-31
在JavaWeb开发中，HTML（超文本标记语言）是基础，它定义了网页的结构。在这个Java_JavaWeb项目中，我们很可能会看到如何将Java与HTML结合，以实现服务器端的功能。 首先，我们需要理解JavaWeb开发的基础架构。它...
JavaWeb:JavaWeb UFJF
05-09
2. **JSP (JavaServer Pages)**: JSP是HTML代码和Java代码的结合，它允许开发者在HTML页面中嵌入Java代码，简化了视图层的开发。了解JSP指令（page、include、taglib）、脚本元素（声明、脚本let、表达式）以及EL...
javaweb:javaweb的程序
03-24
JSP（JavaServer Pages）则是一种动态网页技术，将HTML代码与Java代码混合编写，方便展示动态内容。JSP最终会被编译成Servlet执行。 2. **MVC模式**：在JavaWeb开发中，Model-View-Controller（MVC）设计模式广泛...
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1235
title>充电效果
HTML 学习指南：从入门到精通
英英的博客
07-09 417
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 257
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。
html&css基础
antyuki的博客
07-09 767
/
javaWeb开发技术HMLPPT课件.ppt
11-24
"这是一份关于JavaWeb开发技术的HTML框架部分的PPT课件，主要介绍了如何创建和设置HTML框架，以及与之相关的各种属性和技巧。" 在Web开发中，HTML框架（Frames）是一种将一个网页分成多个独立显示区域的技术，允许...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值