JavaWeb之HTML

最新推荐文章于 2022-09-12 10:30:42 发布
最新推荐文章于 2022-09-12 10:30:42 发布
阅读量196 收藏
点赞数 3
分类专栏： JavaWeb 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57840282/article/details/120019482
版权

文章目录


照着网上乱抄抄罢了
特别鸣谢l菜鸟教程和lzd歌歌的教程

HTML基本格式

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
html5不必像python注意缩进，压缩后都是一行
基本格式：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是网址标题</title>
</head>
<body>

 <!--  网页控件元素，类似按钮/图片/文章什么的都写在这里  -->   

</body>
</html>

简单介绍下各个部分：
<!doctype html> 这段开头代码的意思是声明本文件为HTML5文档
html5中大小写区分不严格，小写也可
< html > 元素是 HTML 页面的根元素
< head > 元素是头部的意思
< meta charset = “UTF-8”> 编辑中文网站没有这个会出现一堆乱码
< title > 文档标题
< body > 元素包含了可见的页面内容

HTML 分级标题

< h1 > 一级标题 ,数字依次往后，级数向后递减

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

res：
在这里插入图片描述

HTML 段落

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

在这里插入图片描述

HTML 链接

<a href = "https://blog.csdn.net/m0_57840282?spm=1000.2115.3001.5343"  > 这是一个链接</a>

HTML 图像

文档和图片放在同一个文件夹比较方便emm
格式

<img src = "smile.png" alt = "smile" />

其中 loading默认是eager ， 立即加载图像，不管它是否在可视视口（visible viewport）之外。
另外一个是lazy，延迟加载图像，直到它和视口接近到一个计算得到的距离，由浏览器定义。
src： 要显示的图像的 URL。
alt：当用户无法查看图像时（可能由于网速太慢、错误的 src 属性、或者用户使用的是屏幕阅读器），alt 属性为图像提供了替代的文本。
width 宽度。
height 高度。
border="1"边框，一个像素边框宽度

HTML 元素

开始标签元素结束标签
<p>这是一个段落</p>
<h1>这是个标题<h1>
<a href = "www" >这是个链接</a>
<br/>换行
<hr/>水平线
<!--注释-->

在开始标签中添加斜杠，比如 <br/>，是关闭空元素的正确方法
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
字体大小：

    <font size = "6">6号字体的大小</font>
    <br/>
    <font size = "5">5号字体大小</font>

在这里插入图片描述

HTML 文本格式化


<b>这是粗体</b><br/><br/>
<i>这是斜体</i><br/><br/>
<code>电脑自动输出</code> <br/><br/>
<sub>下标</sub> 和 <sup>上标</sup><br/><br/>
<small>小号</small><br/><br/>
<ins>插入字</ins><br/><br/>
<del>定义删除字</del><br/><br/>

在这里插入图片描述
字体
<font>``</font>
size 修改字体大小
color 颜色
face 修改字体

列表

无序列表

<ul><!-- type = "none"-->
    
    <li>A</li>
    
    <li>B</li>
    
    <li>C</li>
    
    <li>D</li>

</ul>

在这里插入图片描述
<ul>后面加 type = "none" 去掉圆点

有序列表

<ol>
    
    <li>A</li>
    
    <li>B</li>
    
    <li>C</li>
    
    <li>D</li>

</ol>

在这里插入图片描述

表格

<table>   <!-- 表示表格标签 -->
    <tr> <!-- 行标签-->
        <td>   <!-- <th> 表示表头标签，加粗了的td罢了-->
           (1.1) 
        </td>
        <td>
            (1.2)
        </td>
        <td>
            (1.3)
        </td>
    </tr>
    <tr>
        <td>
            (2.1)
        </td>
        <td>
            (2.2)
        </td>
        <td>
            (2.3)
        </td>
    </tr>
    <tr>
        <td>
            (3.1)
        </td>
        <td>
            (3.2)
        </td>
        <td>
            (3.3)
        </td>
    </tr>
</table>

在这里插入图片描述
同样表格也能加width height border
cellspacing="num"单元格间距

iframe 内嵌窗口

在页面里加载一个新的小窗口

<iframe src=".-html" width="" height="" name ="abc">
    
</iframe>

iframe标签配合a标签使用 ， 当iframe 的 name属性和 a标签的target属性值相同时，就可以将a标签的链接加到iframe里面

<iframe src=".-html" width="" height="" name ="aa">
  
</iframe>
<a herf = ".html" target = "aa"></a>

input标签

name:那么name属性的值你可以设置为name=“password” 如果填的是性别，那么name属性的值则可以设为name="sex"或者设为gender
button 定义可点击按钮
checkbox复选框 (多选)
color
date
datetime
email定义用于e-mail地址字段，提交时会验证。
file 上传文件
hidden定义隐藏字段
password 定义密码字段
radio 单选项
reset 重置按钮
search 搜索字段
submit 定义提交字段
tel 电话
text 文本
url 输入url字段
value :
对于 “button”、“reset”、“submit” 类型 - 定义按钮上的文本
对于 “text”、“password”、“hidden” 类型 - 定义输入字段的初始（默认）值
对于 “checkbox”、“radio”、“image” 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。
还有很多 这里就不一一补充

表单

<form action="test.php" method="get">
    <h1 align="center">表单格式化</h1>
    <table align="center" border = "1">
        <tr>
            <td>
                用户名<input name = "username" type="text" >
            </td>
        </tr>
        <tr>
            <td>
                密码 <input type="password" maxlength="num" name="pwd">
            </td>
        <tr>
            <td>
                性别:<input name = "sex" value = "1" type = "radio" >男
                <input name = "sex" value = "0" type = "radio" checked = "checked">女
            </td>
        </tr>
        <tr>
            <td>
                爱好<input name = "hobby" value="lol" type = "checkbox" /> lol
                    <input name = "hobby"  value="apex" type = "checkbox"/> apex
                    <input name = "hobby"  value="lushi" type="checkbox"/> lushyi
            </td>
        </tr>
        <tr>
            <td>
                出生年<select name="year">
                    <option value="2000"> 2000</option>
                    <option value="2001"> 2001</option>
                    <option value="2002">2002</option>
                    
                </select>
            </td>
        <tr>
            <td>
                出生月<select name = "month">
                <option value="01"> 01</option>
                <option value="02"> 02</option>
                <option value="03">03</option>
                <option value="04"> 04</option>
                <option value="05"> 05</option>
                <option value="06">06</option>
                <option value="07"> 07</option>
                <option value="08"> 08</option>
                <option value="09">09</option>
                <option value="10"> 10</option>
                <option value="11"> 11</option>
                <option value="12">12</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>
                <input type="reset" value="重置"> 
            </td>
        </tr>
        <tr>
            <td>
                <input type="file" >
            </td>
        </tr>
        <tr>
            <td>
                <input type = "submit" value = "提交">
            </td>
        </tr>
    </table>
    
</form>

output 在 表单的使用

<output name="名称" for="element_id">默认内容</output>

output相关属性

for：定义输出域相关的一个或多个元素，以空格隔开。

form：定义输入字段所属的一个或多个表单，以空格隔开。

name：定义对象的唯一名称（表单提交时使用）。=

output在form实现简单的整数加法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>output的使用</title>
</head>

<body style="background-color:blanchedalmond">
    <h3>output的使用</h3>
    <form oninput="x.value = parseInt(a.value) + parseInt(b.value)">
        <input id = "a" value="0" type="number"> + 
        <input id="b" value="0" type="number"> = 
        <output name="x" for="a b">0</output>
    </form>
</body>
</html>
Gsding
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Javaweb第二章之HTML编程语言（含两道面试题）
m0_49364743的博客
11-23 571
1介绍<head> 这里面是设置基础参数信息 </head> <body> 控制浏览器将接收的数据以指定的形式在窗口进行展示 </body> 5控制浏览器起发送请求的请求地址 （1）可以通过超链接标签命令 格式 <a href="http://www.baidu.com?name="mike"&password="admin" ">这儿写的是超链接的名字</br>(同事超链接标签也是一个双目标签) ...
JavaWeb开发 JavaWeb理解以及初进前端语言：HTML
qq_41537102的博客
05-12 279
详解JavaWeb体系，以及前端语言：html与css1、JavaWeb的概念以及C/S与B/S体系结构1.1 C/S体系结构说明1.2 B/S体系结构说明2、Web应用程序的工作原理2.1 静态Web项目2.2 动态Web项目3、网页的组成部分4.HTML介绍4.1 html文件结构分析4.2 html标签介绍 随着Java语言在编程语言中越来越被推崇，Java在网站和企业级应用的开发上应用越来普遍，Java Web开发已经成为 Java 企业级解决方案中不可或缺的重要组成部分。 1、
【JavaWeb习笔记】DAY01——HTML页面
m0_62106729的博客
06-29 735
仅供个人学习总结，侵权必删！
JavaWeb：（二）HTML
sd_960614的博客
06-10 1268
JavaWeb之HTML
java学习篇——Javaweb ：HTML基本（我们是后端）
zhang19971014的博客
04-06 774
简单介绍： ——————HTML页面—————— 作用：负责搭建页面内容和结构。 HTML:HyperTextMarkupLanguage —— 超文本标记语言 超文本：不是只有文字。 基本操作： 新建maven项目，将src删除，新建Web文件夹。新建day01文件夹。新建01文本标签html页面。 标题标签：<h1>内容标题1</h1>——————————内容加粗，间隔固定，独占一行。 水平分割线：<hr> 换行：<br>协..
JavaWeb仿小米在线商城ShoppingMall
06-30
JavaWeb在线商城开发知识总结(java+jsp+servlet+MySQL+jdbc+css+js+jQuery) 可以实现浏览商品，查看商品详情，添加购物车，计算价格等功能 项目文章：...
javaWeb自学-html基础
最新发布
03-09
javaWeb自学-html基础
SpringBoot开发之JavaWeb回顾
10-15
2. JSP（JavaServer Pages）：JSP是动态网页技术，允许开发者在HTML中嵌入Java代码，实现视图层的动态渲染。然而，Spring Boot推荐使用模板引擎如Thymeleaf、Freemarker或Mustache等替代JSP，以提高开发效率和可维护...
javaweb 前端 html学习笔记
04-26
javaweb 前端 html学习笔记
javaweb项目实（含笔记与详细实现步骤）
07-20
9. **前端技术**：虽然JavaWeb主要关注后端，但理解HTML、CSS和JavaScript也是必要的。它们用于构建和美化用户界面，与Java后端进行交互。 10. **笔记与详细实现步骤**：项目中的笔记和详细步骤是学习过程的重要...
JavaWeb之HTML标签介绍及使用
weixin_67659262的博客
09-12 1288
JavaWeb之HTML简介及常用标签的使用方式~
JavaWeb学习笔记 ---- HTML
qq_36590338的博客
03-18 216
web概念概述 软件架构： 1. C/S: Client/Server 客户端/服务器端 在用户本地有一个客户端程序，在远程有一个服务器端程序 优点：用户体验好 缺点： 开发、安装、部署、维护 麻烦 2. B/S： Browser/Server 浏览器/服务器端 只需一个浏览器，用户通过不同的网址（URL），客户访问不同的服务器端程序 优点：开发、安装、部署、维护 简...
关于javaWeb项目下(jsp/html)页面和Servlet之间的互相访问的路径问题详解
扬帆天涯
04-30 3186
思考 在使用动态工程时，经常会遇到以下四个问题 1.从WebContent下的一个页面（或者WebContent下的一个文件夹的页面访问Servlet） 2.从Servlet转发或者重定向到WebContent下的一个页面（或者WebContent下的一个文件夹的页面） 3.WebContent下的两个页面之间的相互跳转（或者WebContent下的一个文件夹里面的两个页面之间的相互他跳转） 4....
html文件在JAVAweb位置,JavaWeb中的关于html、jsp、servlet下的路径问题
weixin_29611239的博客
06-05 2178
#1 前言 本文将对近期项目练习中出现的关于文件路径的问题进行分析和总结，主要涉及html页面中的href及ajax指向路径、jsp页面中href指向路径及servlet转发或重定向路径等内容，本文的分析及总结将尽量做到知其然知其所以然。注：本文中的项目练习，是通过IDEA的MAVEN插件，部署到TOMCAT完成的。**所有html、jsp页面都在webapp文件夹下，所有src中的java文件会...
html文件在JAVAweb目录位置,【idea】关于idea中Java Web项目的访问路径问题
weixin_42393198的博客
06-09 3905
关于本篇，能够结合以前一篇来理解：java另外本篇博客参考了另一位大佬博主(@WinstonLau)的文章，很是感谢大佬浏览器另外，IDEA确实是一款很好用的IDEA，在逐步上手后我逐渐喜欢上了它……jsp————————————————————————————————————————————————————————ideIDEA在出上手学习时，甚至说在刚开始学习JSP时，咱们最大的一个问题在于对...
html文件在JAVAweb目录位置,Java在WEB项目中获取文件路径
weixin_39618275的博客
06-09 1210
jsp中获得文件路径1、根目录所对应的绝对路径：request.getRequestURI()；2、文件的绝对路径：application.getRealPath(request.getRequestURI())3、当前web应用的绝对路径：application.getRealPath("/")4、取得请求文件的上层目录：newFile(application.getRealPath(reque...
JavaWeb开发使用jsp还是html做前端页面
akt8119的博客
03-03 5549
一、概述 刚开始学习Javaweb开发的小伙伴都有一个疑惑：用jsp开发前端还是用HTML开发前端呢？ 这个疑惑的来源主要是：刚接触完前端但又不深入学习js，接着学习jsp，发现老师们都一直用着jsp做页面进行教学，发现自己一直没有使用过HTML文本做页面。 原因：不明确区分HTML和jsp，不知道静态页面和动态页面的作用 虽然jsp里面有HTML...
java web如何设置页面自动更新_转载：java web 项目中如何设置项目打开的默认页面...
weixin_30802399的博客
02-13 472
通过博客学到的两种方法总结：一、在web.xml文件中加入：此时项目打开的默认页面就是loginS.html二、在WebContent文件夹下添加index.jsp文件，此时这个index.jsp页面就是我们想要默认进入的页面博客原文：在javaweb项目中的WebRoot\WEB-INF文件夹下有一个xml文件，如果没有则需要项目工程师自己创建一个，一般命名为web.xml。在这个xml文件中有...
javaweb html
09-18
在Java Web中，使用Java语言编写后台逻辑代码，而HTML则用于描述网页的结构和内容。与Java文件需要编译后才能运行不同，HTML文件直接由浏览器进行解析执行。 HTML是一种标记语言，用于描述网页的结构。它具有一定的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值