JavaWeb-HTML

已于 2024-02-03 23:11:52 修改
阅读量477 收藏 6
点赞数 11
分类专栏： javaweb 文章标签： html 前端
于 2024-01-18 20:48:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45649595/article/details/135611693
版权

文章目录

HTML介绍

网页的三大基础：

  • 结构：HTML（超文本标记语言）标记指由标签构成
  • 表现：CSS 渲染表现
  • 行为：JavaScript 事件行为
    HTML标签都是预定义好的，运行在浏览器上，HTML标签由浏览器来解析
  1. 新建文本文件 后缀名为.html
  2. 编写HTML结构标签
  3. 在中定义文字

HTML的语法相对而言比较的松散 不区分大小写 对一些检查也很宽放

标签介绍

通常是成对的出现，比如和
开放标签和闭合标签

HTML的元素指的是从开始标签到结束标签的所有代码
开始标签。 元素内容 结束标签

自闭合

可以嵌套
标签的属性和属性值对大小写不敏感，属性值始终包括在引号内（双引号最常用）

全局属性，每个标签都能定义的属性

基础标签

<!DOCTYPE html> <!--HTML的标识-->
<html lang="en">
<head>
    <meta charset="UTF-8"><!--定义编码类型-->
    <title>Title</title>
</head>
<body>
<!--  定义六种不同大小的标题-->
  <h1>大小 one</h1>
  <h2>大小 two</h2>
  <h3>大小 three</h3>
  <h4>大小 four</h4>
  <h5>大小 five</h5>
  <h6>大小 six</h6>
<hr><!--水平线-->

<!--颜色的表示 推荐rgb的简化 #****** 红绿蓝 0-255-->
<font face="楷体" color="#ff0000" size="5">这是一个简陋的网页</font> <!--对字体进行操作 三大属性-->
<hr>

<p>我不知道怎么去说</p><!--定义段落更好的显示换行-->
<p>就是不得劲</p>
<hr>

<b>看看效果</b><br><!--字体的加粗 斜体 下划线-->
<i>看看效果</i><br>
<u>看看效果</u><br>
<hr>

<center>
    <b>效果up</b><!--居中显示-->
</center>
</body>
</html>

在这里插入图片描述


和

标签带来的间隔一个是行间隔一个是段落间隔

图片 音频 视频标签

在这里插入图片描述
在这里插入图片描述
三者统一使用src来指定路径
controls：播放控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片 音频 视频</title>
</head>
<body>
<!--
资源路径：
    1. 绝对路径：完整路径
    2: 相对路径：相对位置关系
    找页面和其他资源的相对路径。
    ./ 表示当前路径（./ 可以省略）
    ../ 表示上一级路径
    ../../ 表示上两级路径
尺寸单位：
    1. px：像素
    2. 百分比：父容器的大小百分比 %
-->
    <img src="a.jpg" alt="资源失效" height="500" width="389">
    <audio src="b.mp3" controls="controls"></audio>
    <video src="c.mp4" controls height="500" width="300"></video>
</body>
</html>

在这里插入图片描述

超链接标签

在这里插入图片描述

注意区别_self 和 _blank

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank"> 点我有惊喜哦 </a>
</body>
</html>

点击跳转
https加上协议头表示绝对地址跳转，不加表示相对地址

列表标签

在这里插入图片描述

  • ol是order list
  • ul是unorder list
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
<ul>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ul>
</body>
</html>

在这里插入图片描述

表格标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" cellspacing="0" width="500" align="center">
    <tr>
        <th colspan="2"></th>
        <th align="center">星期一</th>
        <th align="center">星期二</th>
        <th align="center">星期三</th>
        <th align="center">星期四</th>
        <th align="center">星期五</th>
    </tr>
    <tr>
        <td rowspan="4">上午</td>
        <td align="center">早自习</td>
        <td align="center">英语</td>
        <td align="center">语文</td>
        <td align="center">英语</td>
        <td align="center">语文</td>
        <td align="center">英语</td>
    </tr>
    <tr>
        <td align="center">第1节</td>
        <td align="center">数学</td>
        <td align="center">数学</td>
        <td align="center">数学</td>
        <td align="center">数学</td>
        <td align="center">数学</td>
    </tr>
    <tr>
        <td align="center">第2节</td>
        <td align="center">物理</td>
        <td align="center">物理</td>
        <td align="center">物理</td>
        <td align="center">物理</td>
        <td align="center">物理</td>
    </tr>
    <tr>
        <td align="center">第3节</td>
        <td align="center">化学</td>
        <td align="center">化学</td>
        <td align="center">化学</td>
        <td align="center">化学</td>
        <td align="center">化学</td>
    </tr>
    <tr>
        <td colspan="7" align="center">午休</td>
    </tr>
    <tr>
        <td rowspan="3">下午</td>
        <td align="center">第4节</td>
        <td align="center">生物</td>
        <td align="center">生物</td>
        <td align="center">生物</td>
        <td align="center">生物</td>
        <td align="center">生物</td>
    </tr>
    <tr>
        <td align="center">第5节</td>
        <td align="center">英语</td>
        <td align="center">英语</td>
        <td align="center">英语</td>
        <td align="center">英语</td>
        <td align="center">英语</td>
    </tr>
    <tr>
        <td align="center">第6节</td>
        <td align="center">语文</td>
        <td align="center">语文</td>
        <td align="center">语文</td>
        <td align="center">语文</td>
        <td align="center">语文</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

布局标签

在这里插入图片描述
用来对韩哪的内容进行组织，主要是结合CSS

表单标签

在这里插入图片描述
区分表单和表单项

对于

  • action: 规定用于提交表单数据的位置
  • method：规定如何的发送表单
  1. get：请求的参数会拼接在URL的后面，长度收到一定的限制
  2. post：请求参数会在http请求协议的请求体中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="post">
        <input type="text" name="username">
        <input type="submit">
    </form>
</body>
</html>

在这里插入图片描述

表单项标签

定义 表单中的表单项
在这里插入图片描述
在这里插入图片描述

截取一些比较常见的input属性
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
</head>
<body>
<form action="#" method="post">
    <label for="userName">用户名：</label>
    <input type="text" id="userName" name="userName"><br>
    <label for="password">密码：  </label>
    <input type="password" id="password" name="passWord"><br>
    性别：
    <label for="man">男</label>
    <input type="radio" id="man" name="gender" value="1">
    <label for="woman">女</label>
    <input type="radio" id="woman" name="gender" value="0"><br>

    爱好：
    <label for="hobby1">篮球</label>
    <input type="checkbox" id="hobby1" name="hobby" value="1">
    <label for="hobby2">羽毛球</label>
    <input type="checkbox" id="hobby2" name="hobby" value="2">
    <label for="hobby3">游泳</label>
    <input type="checkbox" id="hobby3" name="hobby" value="3"><br>

    <label for="file">请选择文件：</label>
    <input type="file" id="file" name="file"><br>

    <label for ="city">城市</label>
    <select name="city" id="city">
        <option value="BeiJin">北京</option>
        <option value="ShangHai">上海</option>
        <option value="WuHan">武汉</option>
    </select><br>

    <label for="person">个人描述：</label>
    <textarea cols="10" rows="5" id="person"></textarea><br>

    <input type="submit" id="submit" name="submit" value="submit">
    <input type="reset" id="reset" name="reset" value="reset">
    <input type="button" id="button" name="button" value="button">
</form>
</body>
</html>

在这里插入图片描述

qishimu
关注
  • 11
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
01-javaWeb-html.7z
07-02
【HTML的概述】 什么是HTML HTML：Hyper Text Markup Language 超文本标记语言 超文本：比文本功能更加强大 标记语言：通过一组标签对内容进行描述的一门语言 为什么学习HTML HTML是设计页面基础 在哪些地方可以...
javaweb-demo
09-27
【JavaWeb-Demo详解】 JavaWeb技术是Java平台上的一个重要组成部分，主要用于开发和构建Web应用程序。这个名为"javaweb-demo"的项目很可能是用来演示JavaWeb应用的基础架构和核心功能。下面，我们将深入探讨JavaWeb...
JAVAWeb-HTML
阿辉爱睡觉的博客
05-29 558
HTML结构 HTML标签 HTML代码是由标签构成的 <body>hello</body> 标签名 (body) 放到 < > 中 大多数标签成对出现 <body> 为开始标签, </body> 为结束标签. 少数标签只有开始标签, 称为 "单标签". 开始标签和结束标签之间, 写的是标签的内容. (hello) 开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码).
JavaWeb --- HTML
乌云的博客
02-28 1947
HTMLHTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等） 跨行跨列
JAVAweb --- HTML简单引入
a23452的博客
11-28 3032
Java学习简单前端 HTML 文章导航互联网通信介绍共享资源文件静态资源文件动态资源文件HTML hyper text markup language简单的HTML程序注释常用的标记 Java养成计划80天 JavaWeb简单涉猎 HTML 作为一个合格的全栈开发，初期目标是能够看懂所有的代码，包括前端的三剑客，Sring大礼包，java所有的代码，也就是简单的能够使用 同时会继续学习计算机网络，Linux系统，高阶数据结构，12月份了，要抓紧时间了 首先先大概了解互联网通信的框架，同时简单用过时的
JavaWeb---CSS
weixin_65440201的博客
07-28 640
1.CSS：页面美化和布局控制 1. 1概念： Cascading Style Sheets 层叠样式表 1.2好处： 1.3CSS的使用：CSS与html结合方式 1. 内联样式 2. 内部样式 3. 外部样式 1.4css语法： 1.5选择器：筛选具有相似特征的元素 1. 5.1基础选择器： 1.5.2扩展选择器： 1.6 属性...
JavaWeb --- Tomcat
乌云的博客
03-06 961
JavaWeb 是指，所有通过 Java 语言编写可以通过浏览器访问的程序的总称，叫 JavaWeb。 JavaWeb是基于请求和响应来开发的。请求是指客户端给服务器发送数据，叫请求 Request。响应是指服务器给客户端回传数据，叫响应 Response。请求和响应是成对出现的，有请求就有响应。
JavaWeb--------HTML基础
詹煜彪9527
03-06 7564
一. 概念 HTML 是用来描述网页的一种语言，指的是超文本标记语言 (Hyper Text Markup Language)。“超文本”：就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 “标记”：是一套标记标签 (markup tag)，HTML使用标记标签来描述网页，大多数都是成对出现。HTML不是编程语言。 打开某个网页只需要单击右键，然后选择“查看源文件”就会打开...
JavaWeb--用户注册登录案例
Eumenides_Suki的博客
03-02 2390
接下来我们通过两个比较常见的案例，一个是，一个是来对今天学习的内容进行一个实战演练，首先来实现用户登录。
JavaWeb--MVC
qq_66924116的博客
04-22 1050
一、MVC演变过程 整个javaweb的开发模式 jsp模型1---- 第一代： jsp：html+css+js (java); 第二代 把相关的java代码使用javaBean模式进行简单的封装 jsp模型2----MVC 模式 M---Model.模型 完成具体操作，如查找数据库封装对象 V--View视图 jsp,html等来进行数据展示 C--Controller控制器 sevlet获取view的请求，通过视图展示出来 二、三层架构 业务逻辑层，数据库访问层，表
javaweb-javascript讲解
weixin_46582817的博客
10-10 2122
javaweb-javascript讲解介绍javascript基础html结合方式变量关系运算逻辑运算数组函数第一种定义方式第二种定义方式函数隐性参数自定义对象object定义{}定义事件事件的注册onload 加载完成事件onclick 单击事件onblur 失去焦点事件onchange 内容发生改变事件onsubmit 表单提交事件DOMdocument对象document方法getElementByIdgetElementsByNamegetElementsByTagNamecreateElemen
初学JavaWeb-MySQL
07-15
2. **前端**：前端技术包括HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript，它们负责构建用户界面并实现交互效果。 3. **Web核心**：这部分主要包括Servlet、JSP（JavaServer Pages）和JDBC（Java ...
Javaweb-飞机机票预订系统
11-07
本系统基于JavaWeb，利用HTML、CSS和JavaScript进行前端页面设计，结合Mybatis轻量级持久层框架进行数据交互，旨在为用户提供便捷的机票查询和预订服务。本文将对这一系统的实现细节进行深入探讨。 首先，从后端...
xinwenruyi-JavaWeb-master_HTML5_CSS3源码_
10-02
【HTML5】 HTML5是超文本标记语言的最新版本，它在HTML4的基础上进行了许多改进和创新。...JavaWeb还涉及到MVC（Model-View-Controller）设计模式，以及Spring框架、Hibernate等工具，用于实现企业级的Web应用。
Javaweb--狂神版
12-26
JSP（JavaServer Pages）则是一种视图技术，用于动态生成HTML页面。Servlet-JSP模型是常见的MVC（Model-View-Controller）架构的一部分，Servlet负责业务逻辑处理，JSP负责页面展示。 2. **MVC设计模式**：MVC是一...
JavaWeb-Vue
最新发布
10-08
4. **03-HTML-VUE**：这部分内容可能强调Vue与HTML的结合，讲解如何在HTML模板中使用Vue指令和属性来创建动态视图。可能还涉及Vue Router，它是Vue.js的官方路由库，用于管理应用的页面路由。 结合JavaWeb，这个...
javaweb-QQZONE-JavaWeb.zip
10-24
JavaWeb 是一个广泛使用的术语，它涵盖了使用Java技术开发的Web应用程序的各种方面。这个"javaweb-QQZONE-JavaWeb.zip"文件可能是一个项目压缩包，包含了开发一个基于JavaWeb的QQ空间克隆或者类似社交平台所需的所有...
javaweb520-JavaWeb-master.zip
02-06
【JavaWeb开发框架详解】 JavaWeb是一个广泛使用的开发平台，用于构建动态、交互式的Web应用程序。这个名为"javaweb520-JavaWeb-master.zip"的压缩包很可能包含了一个完整的JavaWeb项目实例，让我们来深入探讨...
javaweb html
09-18
Java Web是指使用Java技术进行Web开发的一种方式。在Java Web中，使用Java语言编写后台逻辑代码，而HTML则用于描述网页的结构和内容。与Java文件需要编译后才能运行不同，HTML文件直接由浏览器进行解析执行。 HTML是一种标记语言，用于描述网页的结构。它具有一定的书写规范，例如使用<!DOCTYPE html>声明文档类型，使用<meta charset="UTF-8">指定字符编码，使用<title>定义标题等。下面是一个HTML的示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> hello </body> </html> HTML还可以使用JavaScript技术实现页面元素与输入设备的交互响应。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值