JavaEE-JavaWeb学习之HEML篇

最新推荐文章于 2021-08-27 22:56:41 发布
最新推荐文章于 2021-08-27 22:56:41 发布
阅读量365 收藏 2
点赞数
分类专栏： Web HTML java 文章标签： html css web html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44392716/article/details/104640458
版权
java 同时被 3 个专栏收录
18 篇文章 0 订阅
订阅专栏
Web
9 篇文章 1 订阅
订阅专栏
HTML
3 篇文章 0 订阅
订阅专栏

HTML&CSS&JavaScript之HTML篇

目录

1 HTML、CSS和JavaScript的分工

  • html负责网页的骨架
  • css负责页面元素的样式
  • JavaScript负责响应用户操作

2 HTML书写规范

2.1 新建HTML工程

2.2 html书写规范

<!DOCTYPE html> <!-- 声明-->
<html lang="zh_CN"> <!-- html标签的开始 lang="zh_CN"表示中文 lang="en"表示英文  html标签分为两部分head和body -->
<head> <!-- 表示头部信息，一般包含三部分内容：title标签、css样式，js代码 -->
    <meta charset="UTF-8"> <!-- 使用的字符集 -->
    <title>Title</title>  <!-- 标题 -->
</head>
<body>  <!-- 是整个html页面显示的主体内容-->
helloworld!
</body>
</html>

3 标签

  • 基本格式<标签名>.内容</标签名>
    • 注意：标签名大小写不敏感
  • 标签的属性：
    • 基本属性：设置基本格式
    • 事件属性：直接设置事件后响应代码
  • 标签的种类：
    • 单标签：<br />
    • 双标签：<p> </p>

3.1 基本语法

<!--标签不能交叉嵌套-->
正确：<div><span>内容</span></div>
错误：<div><span>内容</div></span>

<!--标签必须正确关闭-->
正确：<div>内容</div>
    <br />
错误：<div>内容
    <br>

<!--属性必须有值-->
正确：<font color="blue">内容</color>
错误：<font color=blue>内容</color>
<font color>内容</color>

3.2 常用标签

  • font
<!--
在网页上显示 我是字体 并修改为宋体，红色,7号
-->
<font color="red" face="宋体" size="7">我是字体</font>
  • 特殊字符
<!--
把<br>换行标签变成文本，转换成字符显示在页面上
-->
我是&lt;br&gt;标签

常用特殊字符：
在这里插入图片描述

  • 标题
    标题默认只有1-6，从一到6逐渐减小
<h1 align="left">标题1</h1><!--左对齐-->
<h2 align="right">标题2</h2><!--右对齐-->
<h3 align="center">标题3</h3><!--居中对齐-->
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

在这里插入图片描述

  • 超链接
<a href="www.baidu.com">百度</a><!--当前页面打开-->
<a href="www.baidu.com" target="_self">百度</a><!--当前页面打开-->
<a href="www.baidu.com" target="_blank">百度</a><!--新页面打开-->
  • 列表标签
    • 有序列表
    <ol>
	<li>熊1</li>
	<li>熊2</li>
	<li>熊3</li>
</ol>
    在这里插入图片描述
    • 无序列表
    <ul>
	<li>熊1</li>
	<li>熊2</li>
	<li>熊3</li>
</ul>
    在这里插入图片描述
  • 图片标签
<!--
显示一张图片，并修改宽200高100和边框为20并且如果图片找不到用“无法找到”代替图片显示
src设置图片路径
-->
<img src="QQ20200303-214104@2x.png" width="200" height="100" border="20" alt="无法找到">
  • 表格标签
<!--
创建2行3列的表格，显示边框像素密度为1
表格第一行加粗对齐
单元格间距为0（cellspacing="0"）
-->
<table border="2" width="300" height="300" cellspacing="0">
    <tr><!--列标签-->
        <td align="center"><b>1.1</b></td><!--行标签-->
        <th>1.2</th><!--自动加粗居中标签-->
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>3.3</td>
    </tr>
</table>

在这里插入图片描述
跨行跨列的表格

<!--
新建一个五行五列表格
第一行第一列的单元格跨两列
第二行第一列的单元格跨两行
第四行第四列的单元格跨两行两列
-->
<table width="500" heigth="500" cellspacing="0" border="1">
    <tr>
        <td colspan="2">1.1</td><!--跨列-->
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td><!--跨行-->
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>

        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">4.1</td>

        <td>4.3</td>
        <td>4.4</td>
        <td>4.5</td>
    </tr>
    <tr>

        <td>5.3</td>
        <td>5.4</td>
        <td>5.5</td>
    </tr>
</table>

在这里插入图片描述

  • 界面内显示界面
<!--在页面中显示单独的页面-->
<iframe src="要显示的页面.html" width="500" height="500"></iframe>
  • 表单标签
    表单是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器
<!--创建一个表单
包含用户名、密码、确认密码、性别（单选）、兴趣爱好（多选）、国籍（下拉列表）、隐藏域，自我评价（多行文本域）、重置提交
-->
<!--表单
    type=text 文字输入框 value设置默认显示内容
    type=password 密码输入框 value设置默认显示内容
    type=radio 单选框 name对其分组 checked="checked"表示默认选中
    type=checkbox 复选框 checked="checked"表示默认选中
    type=reset 重置按钮 value修改按钮上的文本
    type=submit 提交按钮 value修改按钮上的文本
    type=button 按钮 value修改按钮上的文本
    type=file 文件上传域
    type=hidden 隐藏域 需要发生不需要用户看到的信息
    select 下拉列表框
    option 下拉列表中的选项
    textarea 多行文本输入框 rows设置显示几行的高度 cols设置显示几个字符的宽度
-->
<form>
    用户名称：<input type="text" value="默认值"/><br/>
    用户密码：<input type="password" value="abc"/><br/>
    确认密码：<input type="password" value="abc"/><br/>
    性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br/>
    兴趣爱好：<input type="checkbox"/>Java<input type="checkbox"/>C++<input type="checkbox"/>Python<br/>
    国籍：<select>
    <option>--请选择国籍--</option>
    <option selected="selected">china</option>
    <option>english</option>
    <option>us</option>
</select><br/>
    自我评价：<textarea rows="10" cols="20">默认值</textarea><br/>
    <input type="reset" value="重置"/>
    <input type="submit"/>
    <input type="button" value="按钮"/>
    <input type="file"/><br/>
    <input type="hidden" name="要隐藏的模块的名字"/>
</form>
  • 表单的提交
    • 表单中内容不提交给服务器的原因：
    1. 表单项没有name值
    2. 单选、复选、下拉列表中 option标签未添加value标签
    3. 表单项不再from标签中
<!--创建一个表单
包含用户名、密码、确认密码、性别（单选）、兴趣爱好（多选）、国籍（下拉列表）、隐藏域，自我评价（多行文本域）、重置提交
-->
<!--
带入表格进行优化同时提交给服务器
action属性设置默认提交的服务器地址
method属性设置提交方式
    get：浏览器地址栏中地址：action属性+[？+请求参数]且不安全同时数据长度有限制（100字符内）
    post:浏览器地址栏中只有action属性
-->
<form action="http://www.baidu.com" method="get">
    <!--居中-->
    <h3 align="center">用户注册</h3>
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td><input type="text" value="默认值"/></td>
        </tr>

        <tr>
            <td>用户密码：</td>
            <td><input type="password" value="abc"/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" value="abc"/></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><input type="radio" name="sex">男<input type="radio" name="sex">女</td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td><input type="checkbox"/>Java<input type="checkbox"/>C++<input type="checkbox"/>Python</td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td><select>
                <option>--请选择国籍--</option>
                <option selected="selected">china</option>
                <option>english</option>
                <option>us</option>
            </select></td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="10" cols="20">默认值</textarea></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="reset" value="重置"/>
                <input type="submit"/>
            </td>
        </tr>
    </table>


</form>
  • div、span和p
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>
<p>p1</p>
<p>p2</p>

在这里插入图片描述

高压锅码农777
关注
专栏目录
水平居中
......的博客
07-24 1044
水平居中方式 （1）内联元素 在父元素中设置text-align属性为center<!Doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>水平居中方式-内联元素</title> <style> div { width: 480px; height:
Java(JavaEE)学习线路图
热门推荐
hixiaoyang的博客
09-19 3万+
Java学习线路图 Java教程 Java 教程 Java 简介 Java 开发环境配置 Java 基础语法 Java 对象和类 Java 基本数据类型 Java变量类型 Java修饰符 Java运算符 Java循环结构 Java分支结构 Java Number类 Java Character类 Java String 类 Java StringBuffer和StringBuil...
基于Java EE的在线学习系统
05-02
本课题的主要内容是开发基于Java EE的在线学习平台，使用MVC经典开发模式、Java EE的框架 SSM（Spring+SpringMVC+Mybatis）等相关技术开发网站系统。
JavaEE平台的学习
王者归来
02-21 2124
原来写错一篇关注java平台的学习，不知道丢到哪里去了，今天心血来潮，决定重写在写一次，分享给大家，能对广大的学习爱好者有一定的帮助，闲言碎语我就不要讲了，开始正式进入正题：首先先说一下java平台的概念javaEE平台就是一组技术的集合，包括java语言基础、jsp、ejb、jdbc以及三大框架等（struts、spring和hibernate），这个平台能干什么？能实现企业级的应用，比
JavaEE：Thymeleaf使用
a526001650a的专栏
08-15 599
说明： Thymeleaf是页面模板，和FreeMarker 类似，替代JSP。 一、SpringBoot整合Thymeleaf： 1.导入依赖包，在工程pom.xml中： <!-- 继承起步依赖spring-boot-starter-parent --> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter
javaee学习-基础(一)
安逸风声
10-31 913
1、javaee的Tomcat的安装 2、javaee的jsp使用 推荐书籍：轻量级javaee企业应用实战 1、javaee的Tomcat安装 前几天开始学习javaee，这也是我头一次轻松的使用服务器。 首先安装Tomcat，去官网下载Tomcat的zip文件，然后解压到自己知道的目录。这就完成了安装。暂时不配置到eclipse上进行开发。 目录介绍： bin:存放启动和
疯狂的java讲义源码-JavaEE-Study-Notes:用于记录JavaEE学习过程中的笔记
06-06
JavaEE-Study-Notes （JavaEE 学习笔记） 用于记录 JavaEE 学习过程中的笔记 知识点预览（个人学习要求） 1.1 JavaSE 基础部分： 1.2 FrontEnd 前端部分： 1.3 Database 数据库部分： 1.4 JavaWeb： JSP/Servlet ...
yolo开发t-JavaWeb-m笔记
06-03
【描述】虽然描述简短，但我们可以推断这是一系列记录开发者在构建JavaWeb应用过程中的学习和经验总结。笔记可能包含了从项目初始化、环境配置、开发工具的选用到具体功能实现的全过程。 【标签】"java"表明这个...
JavaScript-javaweb项目
05-02
JavaScript 和 JavaWeb 项目是两种在 Web 开发中至关重要的技术。JavaScript 是一种轻量级的解释型编程语言，主要用于客户端的网页动态效果处理，而 JavaWeb 则是指使用 Java 技术进行服务器端开发的一系列框架和...
javaweb学生成绩管理系统_JavaEE_javaweb_MYSQL_jsp_
10-04
本文将深入探讨一个基于JavaEE技术的学生成绩管理系统，该系统采用JavaWeb、MYSQL数据库以及JSP技术，旨在实现管理员、教师和学生对角色信息、课程和成绩的有效管理。 首先，我们要理解JavaEE（Java Enterprise ...
java毕业设计&课设-Javaweb仓库管理系统项目源码.zip
最新发布
06-11
总的来说，这个JavaWeb仓库管理系统项目涵盖了Java编程、Web开发、数据库管理和项目实践等多个方面的知识，对于学习者来说是一个全面掌握JavaWeb开发的绝佳实践案例。通过深入研究这个项目，不仅可以提升编程技能，...
HTML标签
WJB08223的专栏
10-07 607
HTML是用来描述网页的语言。 HTML指的是超文本标记语言(Hyper  Text  Markup  Language)。HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签(markup tag)。HTML使用标记标签来描述网页。 ————————————————————————————————————————————————————— HTML文档的结构：
JAVAEE开发--好的学习网站，必备知识
湫兮若风的博客
03-06 507
Spring Boot官方翻译： http://springboot.lianmengtu.top/ Spring Boot官方解决方案：http://syllabus.lianmengtu.top/ 搜云库：https://www.souyunku.com/categories/ 并发网站：http://ifeve.com/java-io-3/ 牛客网：https://www.nowcode...
[JAVAEE] 常用th标签
Dust的博客
08-27 829
关键字 功能介绍 案例 th:id 替换id <input th:id="'xxx' + ${collect.id}"/> th:text 文本替换 <p th:text="${collect.description}">description</p> th:utext 支持html的文本替换 <p th:utext="${htmlcontent}">content</p> th:object 替换对象 <div ...
java th标签_初步认识Thymeleaf：简单表达式和标签。（一）
weixin_39616503的博客
02-25 1963
本文只适用于不会Java对HTML语言有基础的程序员们，是浏览了各大博客后收集整理，重新编辑的一篇文章，希望能对大家有所帮助。最后本文如果有哪里写错的，希望各位大神们能够批评指正，谢谢大家！对于Thymeleaf，网上特别官方的解释无非就是：网站或者独立应用程序的新式的服务端java模板引擎，可以执行HTML，XML，JavaScript，CSS甚至纯文本模板。这个解释没有任何问题，它确实是建立在...
JAVA学习网站
huangshuyi529的专栏
04-09 1439
http://how2j.cn?p=16567 这是网址，网站里有Java基础，Javaweb、框架、数据库、工具、面试题等等的，站长一直在更新新的知识，很好用哦
JavaWeb学习关键点：HTML到Ajax的探索
此外，还学习了JavaEE的部分技术，包括JSP（JavaServer Pages）、Servlet、过滤器、监听器、JSTL（JavaServer Pages Standard Tag Library）和EL（Expression Language）。JSP是动态生成HTML的工具，而Servlet处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

高压锅码农777

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值