JavaWeb基础之HTML

最新推荐文章于 2024-05-19 14:33:54 发布
最新推荐文章于 2024-05-19 14:33:54 发布
阅读量279 收藏
点赞数
分类专栏： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jorocco/article/details/79449574
版权

1、超链接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!--
    超链接：
    作用：连接资源 
    当有了href属性才有了点击效果
    href属性的值的不同，解析方式也不一样

    如果在该值中没有制定过任何协议
    解析时是按照默认的协议来解析该值的，默认协议是file协议（也就是说默认打开本地的该名称文件）
    target="_blank"表示在新窗口打开该连接 
     -->
     <a href="http://www.sina.com.cn" target="_blank">新浪网站</a>
    <hr/>
    <a href="imgs/2.jpg" target="_blank">链接图片</a>
    <hr/>
    <a href="mailto:528497934@qq.com" target="_blank">联系我们</a>
    <hr/>
    <a href="thunder://qerfadfa">迅雷下载</a>
    <br>
    <a href="javascript:void(0)" onclick="alert('我弹')">自定义一个超链接效果</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!--
    定位标记
    专业术语：锚 
     -->
     <a name=top>顶部位置</a>
     <hr/>
    <img src="imgs/2.jpg" height=400 width=400 border=10/>
    <hr/>
    <a name=center>中间位置</a>
    <hr/>

    <img src="imgs/3.jpg" height=400 width=400 border=10/>
    <br/>
    <a href="#top">回到顶部位置</a>
    <a href="#center">回到中间位置</a>
</body>
</html>

2、图片标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
    <!-- 演示图片标签
    img标签是一个内部闭合标签，一般都是实现单一功能而不需要去封装数据的
     -->
     <img src="imgs\2.jpg" height=200 width=100 border=10 alt= "图片说明文字" />
</body>
</html>

3、列表标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表演示</title>
</head>

<body>
    <!-- HTML注释：演示列表标签 
    列表标签：dl
    上层项目：dt
    下层项目：dd：封装的内容是被缩紧的，有自动缩进效果。
    -->
    <dl>
        <dt>上层项目内容</dt>
        <dd>下层项目内容</dd>
        <dd>下层项目内容</dd>
        <dd>下层项目内容</dd>
    </dl>

    <hr/>
    <!--这是横线符-->

    <!-- 有序和无序的项目列表
    有序：<ol>
    无序：<ul>
    无论有序和无序，条目的封装用的都是<li>
    而且它们都有缩进功能
     -->
     <ul type="square">
        <li>无序项目列表</li>
        <li>无序项目列表</li>
        <li>无序项目列表</li>
        <li>无序项目列表</li>
     </ul>

     <ol type="1">
        <li>有序项目列表</li>
        <li>有序项目列表</li>
        <li>有序项目列表</li>
        <li>有序项目列表</li>
        <li>有序项目列表</li>
     </ol>

</body>
</html>

4、表单标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!--
    如果要给服务端提交数据，表单中的组件必须有name和value属性 
    用于给服务端获取数据方便
     -->
    <form>
        输入名称：<input type="text" name="user" value=""/><br/>
        输入密码：<input type="password" name="psw" /><br/>
        选择性别：<input type="radio" name="sex" value="nan"/>男
                <input type="radio" name="sex" value="nv" checked="checked"/>女<br/>
        选择技术：<input type="checkbox" name="tech" value="java"/>Java
                <input type="checkbox" name="tech" value="html"/>html
                <input type="checkbox" name="tech" value="css"/>css<br/>
        选择文件：<input type="file" name="file"/><br/>
        一个图片：<input type="image" src="imgs/4.jpg"/><br/>
        <!-- 数据不需要客户端知道，但是可以将其提交服务端 -->
        隐藏组件：<input type="hidden" name="myke" value="myvalue"/><br/>
        一个按钮:<input type="button" value="有个按钮" onclick="alert('有个按钮')"/><br/>


        <!-- 下拉按钮 -->
        <select name="country">
            <option value="none">---选择国家---</option>
            <option value="china" selected="selected">中国</option>
            <option value="usa">美国</option>
            <option value="eng">英国</option>
        </select><br/>

        <textarea name="text"></textarea>
        <br/>



        <input type="reset" value="清楚数据"/><input type="submit" value="提交数据"/>
    </form>
</body>
</html>

5、表格标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <table border=1 bordercolor="#0000EE" cellpadding=10 cellspacing=10 width=300><!--cellpadding单元格内容距离边界的距离 cellspacing单元格之间的距离  -->
        <caption>表格标题</caption>
        <tr><!-- 行标签 -->
            <td>姓名：张三</td><!-- 数据标签 -->
        </tr>
        <tr>
            <td>年龄：39</td>
        </tr>



        <tr>
            <th>姓名</th><!-- 加粗并居中标签 -->
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>39</td>
        </tr>
    </table>
    <hr/>
    <table border=1 bordercolor="#0000EE" cellpadding=10 cellspacing=0 width=300>
        <tr>
            <th colspan=2>个人信息</th>

        </tr>

        <tr>
            <td>张三</td>
            <td>30</td>
        </tr>
    </table>

    <hr/>
    <table border=1 bordercolor="#0000EE" cellpadding=10 cellspacing=0 width=300>
        <tbody><!-- 表格的下一级标签是tbody，不定义也存在 -->
        <tr>
            <th rowspan=2>个人信息</th>
            <td>张三</td>
        </tr>
        </tbody>

        <tr>
            <td>30</td>
        </tr>
    </table>

</body>
</html>

6、注册表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--  <meta http-equiv="refresh" content="3;url=http://www.sina.com.cn"/><!--过3秒自动刷新跳转到新浪  --> 
</head>

<body>
    <form action="http:172.25.11.91:10001" method="get">
        <table border="1" bordercolor="#00ffff" cellpadding=10 cellspacing=0 width=500 >
            <tr>
                <th colspan="2">注册表单</th>
            </tr>
            <tr>
                <td>用户名称：</td>
                <td><input type="text" name="user"></td>
            </tr>
            <tr>
                <td>输入密码：</td>
                <td><input type="password" name="psw"></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" name="repsw"></td>
            </tr>
            <tr>
                <td>选择性别：</td>
                <td>
                    <input type="radio" name="sex" value="nan"/>男
                    <input type="radio" name="sex" value="nv"/>女
                </td>   
            </tr>
            <tr>
                <td>选择技术：</td>
                <td>
                    <input type="checkbox" name="tech" value="java"/>JAVA
                    <input type="checkbox" name="tech" value="html"/>Html
                    <input type="checkbox" name="tech" value="css"/>css
                </td>
            </tr>
            <tr>
                <td>选择国家：</td>
                <td>
                    <select name="country">
                        <option value="none">---选择国家---</option>
                        <option value="usa">美国</option>
                        <option value="china">中国</option>
                        <option value="eng">英国</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th colspan="2"><!-- colspan="2"两列合并为一列 -->
                    <input type="reset" value="清除数据"/>
                    <input type="submit" value="提交数据"/>
                </th>
            </tr>
        </table>
    </form>
</body>
</html>

6、画中画标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <iframe src="table.html" height=400 width=400>这是画中画标签</iframe>
</body>
</html>

6、动态标签及其他标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <pre><!-- 格式标签 -->
    class Demo
    {
        public static void main(String[]args)
        {
            System.out.println("hello");
        }
    }
    </pre>
    <marquee direction="down" behavior="alternate">会飞的动态标签</marquee>
    <b>加粗</b><i>斜体</i><u>带下划线</u>常见的小标签<br/>
    X<sub>2</sub> X<sup>2</sup><!-- 下标和上标 -->
</body>
</html>
Jorocco
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Javaweb】HTML 基础
耀的博客
03-04 6221
目录 一、HTML结构 1，认识HTML标签 2，HTML 文件基本结构 3，标签层次结构 4，快速生成代码框架 二、HTML 常见标签 1，注释标签 2，标题标签 3，段落标签: p 4，换行标签: br 5，格式化标签 6，超链接标签: a 7，表格标签 8，列表标签 9，表单标签 form 标签 input 标签 label 标签 select 标签 11，无语义标签: div & span 一、HTML结构 1，认识HTML标签 HTML
【JavaWEB】HTML基础入门
weixin_42575113的博客
09-11 104
什么是HTML？ Hyper Text Markup Language:超文本标记语言 超文本：功能比普通文本更加强大 标记语言：使用一组标签对内容进行描述的一门语言(它不是编程语言) 语法和规范 HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。 HTML文件分为头部分(<head></head>)和体部分(<body>...
JavaWeb—HTML
夏日漱石的博客
03-07 725
JavaWeb—HTML，前端
【JavaWeb】HTML
yu_fu_a_bu的博客
11-20 404
6.使用表格标签展示数据 6.1未合并单元格 6.2合并单元格-合并列 6.3合并单元格-合并行 7使用表单标签提交数据 7.1表单标签的作用 7. 2 form标签的介绍 7.2.1 action属性 7.2.2 method属性 7.3表单项标签.
JavaWeb（1） HTML入门
最新发布
Theodore_1022的博客
05-19 1296
本篇对JavaWeb中所需要的HTML技术进行了总结与概括，部分内容源于网络，如有侵权，请联系作者删除，谢谢。
java学习——HTML
weixin_51512325的博客
09-23 337
html 1、注释： 快捷键：ctrl+/ 2、编辑完成后，右击右上角图标选择一个浏览器即可打开网页 3、idea创建一个html文件 <!--声明 DOCTYPE：告诉浏览器我们要使用什么规范--> <!DOCTYPE html> <html lang="en"> <!--head标签代表网页头部--> <head> <!--<meta>描述性标签，用来描述我们网站的一些信息--> <
JavaWeb开发 —— HTML
hdakj22的博客
04-10 1921
什么是HTML、CSS、基本标签 & 样式以及标题排版、标题样式、超链接以及正文排版、页面布局以及表格标签、表单标签和表单项标签
JavaWeb-HTML
weixin_49856572的博客
07-31 164
HTML创建及标签介绍
01-javaweb基础之html基础学习笔记
05-03
html基础知识，比如常用的标签、表格标签、表单标签、freamset框架、ifream内置框架标签
javaWeb自学-html基础
03-09
javaWeb自学-html基础
javaweb之web入门基础
09-05
### JavaWeb之Web入门基础知识详解 #### 一、JavaWeb概述 JavaWeb是基于Java语言进行Web应用程序开发的一套技术和框架。它包含了多种技术和服务，主要用于构建动态网站、Web应用程序等。JavaWeb的基础主要包括静态...
javaweb基础系统.zip
05-10
JavaWeb基础系统是一个涵盖Web开发基础知识的项目，主要利用Java语言和MVC（Model-View-Controller）设计模式来构建。MVC模式是Web应用程序架构中的一个经典模式，它将业务逻辑、数据处理和用户界面分离开来，使得...
javaweb基础 ppt和案例
04-27
本教程的"第一页javaweb基础"文件可能包含了这些知识点的详细讲解，包括PPT演示和实践案例，是初学者理想的自学资料。通过系统学习，你将能够独立开发简单的JavaWeb应用程序，并为进一步学习框架如Spring、Struts等...
【Java Web——HTML】
不爱熬夜的朱霸霸的博客
04-27 606
学习Java Web之HTML概念一、 标签1.1标签分类 前言 Java Web是指使用java语言来解决相关Web领域的技术总和。关于Web项目离不开静态资源与动态资源，而静态资源中的html是用于搭建基础网页的，因此掌握html是必要的，也是学习最基础的知识 概念 HTML（Hyper Text Markup Language）： 超文本标记语言它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTM
零基础入门JavaWeb——HTML相关知识
星霖的博客
11-29 592
前端技术相关知识
JavaWeb---HTML
weixin_65440201的博客
07-27 499
1.1web概念概述 1.2软件架构： 1. 2.1C/S: Client/Server 客户端/服务器端 1.2.2.B/S: Browser/Server 浏览器/服务器端 1.3.1静态资源： 1.3.2 动态资源： 2.HTML 2.1概念：是最基础的网页开发语言 2. 2快速入门： 2.3标签学习： 2.3.1文件标签：构成html最基本的标签 2.3.2 文本标签：和文本有关的标签 2.3.2案例：简介 2.4图片标签： 2.5列表标签： 2.6链接标签： 2.7
JavaWeb HTML
weixin_65637841的博客
07-17 1537
页面由三部分内容组成！分别是内容（结构）、表现、行为。 内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用html 技术来展示。 表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用CSS 技术实现. 行为，指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现。 Hyper Text Markup Language （超文本标记语言）简写：HTML
JavaWeb之HTML(HTML，CSS，JavaScript)
weixin_48548208的博客
08-07 478
是一门编程语言java sql xml html都是编程语言浏览器是一个软件 : 能够解析html 展示数据Client–server : 需要安装客户端,访问服务器缺点更新繁琐优点用户黏度高(手机app)Brower-service : 安装浏览器即可优点(服务)更新方便,无需告知客户缺点手机时代不方便主要用来开发 公司内部管理类软件 后缀名 .html 或 .htm 标签不区分大小写 语法松散(不严谨) 属性可以单引号也可以双引号 html 基础标签 注意:在html 中 不管写多少个空格,
JavaWeb入门：HTML基础与核心标签详解
HTML中的四个重点标签之一是链接，基础用法是使用`<a>`标签，通过`href`属性指定链接的目标URL，`target="_blank"`属性用于在新窗口打开链接。这展示了如何通过HTML元素实现网页的导航和交互功能。 JavaWeb笔记深入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值