javaWeb学习笔记 --- Html

最新推荐文章于 2024-07-21 17:58:14 发布
最新推荐文章于 2024-07-21 17:58:14 发布
阅读量301 收藏
点赞数
分类专栏： java 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39281866/article/details/121984620
版权

HTML

在这里插入图片描述

html是超文本标记语言，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片、表格、链接等。目前互联网上的绝大部分网页都是使用HTML编写的。

html的结构

<!DOCTYPE HTML>
<!--文档声明-->
<html>
<!--标签、元素、标记-->
<!--有开始和结束标签，必须结束-->
<head>
	<!--如果标签中没有标签体，可以自闭-->
	<!--标签中可以有一个或者多个属性，格式：key = value-->
	<!--meta标签用来指定编码-->
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>First web</title>
</head>
<body>
	<!--通过<br/>换行-->
	Hello java! <br/>
</body>
</html>
  • <!DOCTYPE HTML>: html5的文档声明
  • <html>：所有的html都要有这个标签，表示文档的开始和结束（根标签）
  • <head>: 用来存放html中的基本属性信息，比如标题，编码等
  • <body>：用来存放html中的页面数据，在页面中是可以显示的
  • <title>：指定网页的标题
  • <meta charset=UTF-8/>：指定浏览器的解码格式

HTML语法

  • HTML是一门标记语言, 标记也叫做元素或者标签, 标签分为开始标签和结束标签,，如果标签内没有内容要修饰，可以合并一个自闭标签，如: <meta/> <br/> <hr/> <input/> <img/>

  • 注释: <!--注释内容 -->

  • 空格&换行

    • 由于在网页中多个连续的空白字符会被当成一个空格来显示, 所以
    • 空格标签： &nbsp;
    • 换行标签：<br/>

HTML标签

  • 通过不同的标签，HTML文档可以包含不同的内容。比如文本，链接，图片，列表，表格，表单等。

  • 文本标签：<font></font>

    • 属性 — size：大小，范围为1-7；face：字体；color：颜色，有三种形式(英文、16色、RGB — RGB颜色部分浏览器不支持)

  • 标题标签：<h1> ~ <h6>

    • 标题标签，从h1 ~ h6依次变小
    • 属性 — align：文本的位置 ( left居左 (默认), center居中, right居右)

  • 列表标签

    • ul：定义一个无序标签
      • 属性 — type：表示列表前面的形状，取值有disc (默认): 实心圆，circle：空心圆，square：方块
    • ol: 有序列表
    • li：定义列表中的项
<!--无序列表-->
<ul type = "circle">
    <li>html</li>
    <li>css</li>
    <li>js</li>
</ul>
<!--有序列表-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>c++</li>
</ol>
  • 图片标签 <img …/>
    • 属性 — src:图片网址或者路径; width:宽度，可以是像素，也可以是百分比; hight：高度; alt：图像的代替文本 (图片无法显示时，显示的文本); border：边框的宽度 px
<!--图片标签-->
<img src="web.png" width="70%" height="" alt="web" />
  • 超链接标签 <a></a>
    • 属性 — href:用来指定跳转网址; title：鼠标移到改标签时所显示内容; target：在何处打开目标url (_self:当前页面打开，_blank:新页面打开，_top:回到顶部)
    • 如果需要回到指定位置，需要在指定位置加入<a name="place"/>
<!--超链接-->
<!--_self:当前页面打开，_blank:新页面打开，_top:回到顶部-->
<a name = "pic"></a>
<!--图片标签-->
<img src="web.png" width="70%" height="" alt="web" />
</br>
<a href="https://www.baidu.com/" title="" target="_blank">百度一下 baidu.com</a> </br>
<!--回到指定位置-->
<a href="#pic">返回查看图片</a></br>
<a href="#" title="" target="_top">回到顶部</a></br>

  • 表格标签 <table> <tr> <td>

    • table – 用来定义一个表格

      属性 — border：边框；cellspacing：单元格之间的距离；cellpadding：边框和内容之间的距离；bgcolor：背景颜色；width：定义表格的宽度；align：定义表格的位置

    • tr – 用来定义表格中的行

      属性 — bgcolor：背景颜色; align：定义表格的位置

    • td – 用来定义表格中的单元格

      属性 — bgcolor: 背景颜色; align：定义表格的位置; width：定义单元格的宽度; height：定义单元格的高度; colspan：定义单元格横跨的列数; rowspan：定义单元格竖跨的行数

    • th – 用来定义表头

    <!--表格标签-->
<h2 align = "center">这是一个3*3的表格</h2>
<table align = "center" border = "1px" cellspacing = "0" cellpadding = "10" width = "400px">
    <tr bgcolor = "#1BBCE0">
        <th>第一列</th>  <!--表头-->
        <th>第二列</th>
        <th>第三列</th>
    </tr>
    <tr> <!--行-->
        <td>arr[1][1]</td>
        <td>arr[1][2]</td>
        <td>arr[1][3]</td>
    </tr>
    <tr> <!--行-->
        <td>arr[2][1]</td>
        <td>arr[2][2]</td>
        <!--rowspan按行合并单元格-->
        <td rowspan = "2" align = "center">合并</td>
    </tr>
    <tr> <!--行-->
        <!--colspan按列合并单元格-->
        <td colspan = "2" align = "center">arr[3][1] & arr[3][2] </td> 
    </tr>
</table>

  • 表单标签 <form>

  1. 浏览器向服务器发送数据的两种方式

    • 通过超链接向服务器发送数据，例如
      https://www.baidu.com/?user=zhangsan&password=123

      在超链接后面通过?拼接参数将数据带给服务器；参数和参数值之间用等号分隔 (key = value)；参数可以有多个, 多个参数之间用&分隔, 并且参数的名字可以重复

    • 通过表单向服务器发送数据

      通过表单及表单项标签, 用户可以通过表单项输入数据, 通过提交表单向服务器发送数据.

  2. form 标签

    <form action="http://www.baidu.com" method="GET"></form>

    • action 必须存在的属性, 用来指定表单提交的目的地地址

    • method 可选属性, 用来指定以何种方式来提交表单, 如果不指定, 默认是GET提交

      • HTTP协议中规定了7种提交方式, 其中5种都不常用, 只用GET和POST。只有使用表单, 并且明确的指定了提交方式为POST时, 才是POST提交, 其他方式都是GET提交
      • GET和POST提交的区别: 主要区别在于请求参数传输过程的不相同

    • GET提交:

      • 通过在地址栏拼接参数将数据发送给服务器

      • 数据显示在地址栏, 非常不安全

      • 通过地址栏发送数据, 数据量不能太大, 不能超过1kb或者4kb

    • POST提交:

      • 通过底层的流将数据发送给服务器
      • 没有将数据显示在地址栏, 相对更安全
      • 没有通过地址栏发送数据, 数据量理论上没有限制

  3. 表单中的项

    • 表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它

    • 通用的属性:

      • readonly = "readonly": 设置表单项为只读, 只能读不能写, 但是可以被提交

      • disabled = "disabled": 设置表单项为禁用, 不能被提交

    1. <input>输入框

      • type属性: 当type属性的值不同时, input标签的功能效果也不同

        type功能
        text文本输入框，通过size设置宽度
        password密码框
        radio单选框，name属性值必须一致， 通过value属性指定被提交时的值
        checkbox复选框 (多选框)，通过value属性指定被提交时的值
        submit提交按钮 用来提交表单
        reset重置按钮， 将表单项重置到初始时的状态
        button普通按钮
        file文件上传项, 可以选择文件进行上传
        hidden隐藏域，一般在信息修改的时候用来隐藏用户id

    2. <textarea>文本域

       <textarea cols="30" rows="5">请输入个人信息…</textarea>

      • cols 设置列数, 即输入框的宽度

      • rows 设置行数, 即输入框的高度

    3. <select> <option>标签

      • select 定义一个下拉选框
        • name属性 – name指定该项提交时参数的名字
        • size属性 –- 指定可见选项的个数
        • multiple –- 指定支持多选
      • option 用来定义下拉选框中的选项

    表单示例：

    <body>
	<h2 align = "center">注册表单</h2>
	<!--get提交会将所有内容放入地址栏-->
	<!--请求分为7种，常用的为get和post-->
	<!--post通过底层的流将数据提交-->
	<form method="get" action="http://www.baidu.com">
		<table align = "center" border = "1px" cellspacing = "0" cellpadding = "10" width = "500px">
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="userName"/></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" name="psw"/></td>
			</tr>
			<tr>
				<td>确认密码：</td>
				<td><input type="password" name="pswConfig"/></td>
			</tr>
			<tr>
				<td>手机：</td>
				<!--不指定name，则不提交-->
				<td><input type="text" value = "+86" size = "1"/>  <input type="text" name="phone"/></td>
			</tr>
			<tr>
				<td>昵称：</td>
				<td><input type="text" name="nickName" value="" /></td>
			</tr>
			<tr>
				<td>性别：</td>
				<!--name需要保持一致-->
				<!--checked = "checked" 默认选中--> 
				<td><input type="radio" name="gender" value="m" checked = "checked"/>男<input type="radio" name="gender" value="f" />女</td>
			</tr>
			<tr>
				<td>爱好：</td>
				<td>
					<input type="checkbox" name="hobby" value="Basketball" /> 篮球
					<input type="checkbox" name="hobby" value="football" /> 足球
					<input type="checkbox" name="hobby" value="
					baseball" /> 乒乓球
				</td>
			</tr>
			<tr>
				<td>出生地：</td>
				<td><select name="city">
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="xian">西安</option>
					<option value="chengdu">成都</option>
					<option value="guangzhou">广州</option>
				</select></td>
			</tr>
			<tr>
				<td>头像：</td>
				<td><input type="file" name="photo" value="选择头像" /></td>
			</tr>
			<tr>
				<td>个人描述：</td>
				<td><textarea name="dis" rows="5" cols="30">
					
				</textarea></td>
			</tr>
			<tr>
				<td>验证码：</td>
				<td><input type="text" name="yzm" value="" /><img src="yzm.png" width="100" height="30" alt="验证码" /></td>
			</tr>
			<tr>
				<td colspan = "2" align = "center"><input type="submit"  value="注册" /> <input type="reset"/>
				</td>
			</tr>
		</table>
	</form>
</body>

  • div span p 标签

    • 这三个标签都可以看作是一个容器, 可以用来包裹其他的 html内容, 被包裹起来的内容形成了一个组, 可以通过css样式对这一组的内容统一设置样式.

    • div: 独占一行，标签可以把文档分割为独立的、不同的部分。

    • span：并非独占一行，多个span会并排排列，直到一行排满才会换行，标签被用来组合文档中的行内元素。

    • p：独占一行，但是元素会自动在其前后创建一些空白，是段落标签。

    • 元素的类型:

      • 块级元素: 默认情况下独占一行的元素, 如: div p h1~h6 br hr
      • 行内元素: 默认情况下, 多个行内元素可以处在同一行。如：span input font…
zss1+1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaweb空格标签_java web
weixin_39715538的博客
11-11 1403
java web 表单标签： type中的text :<form action="#" method="get"> 用户名：<input type="text" name="username"> 密码：<input type="text" name="password"> 账号：<input type="t...
javaweb空格标签_超详细的Java面试题总结之JavaWeb基础知识总结
weixin_39944074的博客
11-20 437
系列文章请查看： 超详细的Java面试题总结（一）之Java基础知识篇 超详细的Java面试题总结（二）之Java基础知识篇 超详细的Java面试题总结（三）之Java集合篇常见问题 下面的都是自己之前在学习JavaWeb的时候总结的，对于巩固JavaWeb的基础知识应该有很大帮助。后面还会把框架的面试题总结一下。 Servlet总结： 在Java Web程序中，Servlet主要负责接收用户请求...
java中怎么弄空格_JAVA中怎样让标签之间有空格
weixin_35675101的博客
02-25 589
好久没接触这一块了。昨天的回答误导你了，不好意思。JLable标签确实无法定义其宽度的，都是随着文字自动扩展或者手工定位。也就是自己定义矩形标签中四个坐标点的位置，比如下面的代码：这只是一个简单的示例，告诉你JLable是如何定位的，想要快速实现计算机按钮式的排版，手工指定每个标签的位置是很麻烦的，所以你必须了解一下Swing提供的内置的一些布局方式，帮助你快速布局。不过这一块我也不能详细解释了。...
java后台过滤字符串中HTML标签和空格
永封尘埃的博客
02-09 4766
  过滤文章中的html标签，实现的方式都是将html标签替换掉，都是使用正则表达式 下面列出几种 经常过滤的字符String content = "文章内容";// 过滤文章内容中的htmlcontent =content.replaceAll("&lt;/?[^&lt;]+&gt;","");// 去除字符串中的空格 回车 换行符 制表符 等content = content.replaceA...
JavaWeb学习笔记-JavaEE概述
qq_44653420的博客
12-11 760
JavaEE规范 JavaEE简介 JavaEE：Java企业版 它是由SUN公司领导、各个厂家共同制定的并得到广泛认可的工业标准。 JavaEE早期叫做J2EE，但是没有继续采用其命名规则，J2EE的版本从1.0开始到1.4结束，而JavaEE版本是从JavaEE 5版本开始，目前最新的版本是JavaEE 8 JavaEE 规范是很多Java技术的总称，这些技术都是沿用自J2EE的。一共包括了13个技术规范 包括：JDBC JNDI EJB RMI IDL/CORBA JSP XML JMS JTA J
Java开发 - 尚硅谷JavaWeb学习笔记 - Part2_HTML
codeLearnerEternally的博客
06-22 735
HTML的学习章节
Java开发 - 尚硅谷JavaWeb学习笔记 - Part1_Web概述&HTML入门
codeLearnerEternally的博客
06-22 699
用Java技术来解决相关web互联网领域的技术栈.使用JAVAEE技术体系开发企业级互联网项目. 项目规模和架构模式与JAVASE阶段有着很大的差别. 在互联网项目下,首先需要明白客户端和服务器的概念客户端 :与用户进行交互，用于接收用户的输入(操作)、展示服务器端的数据以及向服务器传递数据手机APP微信小程序PC端程序PC浏览器其他设备服务端:与客户端进行交互，接收客户端的数据、处理具体的业务逻辑、传递给客户端其需要的数据“服务器”是一个非常宽泛的概念，
JavaWeb学习笔记-kuangshen
魂小猫的博客
06-07 169
JavaWeb 1、基本概念 1.1、前言 web开发： web，网页的意思 ， www.baidu.com 静态web html，css 提供给所有人看的数据始终不会发生变化！ 动态web 淘宝，几乎是所有的网站； 提供给所有人看的数据始终会发生变化，每个人在不同的时间，不同的地点看到的信息各不相同！ 技术栈：Servlet/JSP，ASP，PHP 在Java中，动态web资源开发的技术统称为JavaWeb； 1.2、web应用程序 web应用程序：可以提供浏览器访问的程序； a.html
javaWeb学习笔记 --- HTTP协议
weixin_39281866的博客
01-05 393
HTTP协议 什么是HTTP协议? HTTP是hypertext transfer protocol (超文本传输协议)的简写，用来规定浏览器客户端和服务器之间进行通信的方式 三个基本原则 基于请求响应模型 一次请求对应一次响应 请求只能由客户端发出，服务器只能被动的等待请求，做出响应. HTTP协议详解 http请求 HTTP请求信息由3部分组成： 请求行：包含请求方式 (如：Get or Post)、请求的资源 (如：URL)、所遵循的协议(如：HTTP/1.1) 请求头：http中的请
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
JavaWeb新版教程-配套课件笔记代码-05-XML & Tomcat.zip
05-18
总的来说，这个"JavaWeb新版教程-05-XML & Tomcat"涵盖了JavaWeb开发中的核心概念，通过学习这些内容，你可以建立起对JavaWeb应用开发的基础，为进一步深入学习如Spring、Hibernate等高级框架打下坚实的基础。...
JavaWeb02-JavaScript学习笔记
08-22
JavaScript基础知识点 JavaScript是一种脚本语言...本笔记涵盖了JavaScript的基础知识点，包括变量、数据类型、流程控制语句、函数、数组、对象、JSON、BOM和Location等概念，为学习JavaScript提供了一个良好的基础。
JavaWeb视频教程-day10
04-25
【JavaWeb视频教程-day10】是一门针对JavaWeb开发的深入学习课程，主要涵盖了JavaWeb开发中的核心概念和技术。本教程可能详细讲解了在实际项目开发中常见且重要的知识点，帮助初学者或有一定基础的开发者提升技能。...
javaweb 前端 html学习笔记
04-26
javaweb 前端 html学习笔记
学习笔记-JavaWeb入门-浅学HTML
fixxxxxxx的博客
07-28 84
超链接默认为蓝色加下划线，可使用text-decoration规定添加到文本的修饰，none表示定义标准的文本。类选择器可以根据标签中指定的class属性来选择对应的元素。通过.class名来使用。id选择器可以给标签指定id属性，再通过id设置CSS属性。黑马的图片和 "fixxx的主页"都可点击，点击即进入到对应的网站。绝对路径可填写磁盘绝对路径，也可填写绝对网络路径，推荐使用相对路径。相对路径： ./： 当前目录，./可以省略。三种选择器优先级：id选择器>类选择器>元素选择器。
黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版
最新发布
apple_68589597的博客
07-21 975
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
[HTML]一文掌握
CSDN20221005的博客
07-21 806
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
使用PicGo操作gitee图床(及web端html不能访问图片的解决办法)
weixin_68658847的博客
07-20 1041
使用PicGo操作gitee图床(及web端html不能访问图片的解决办法)
JavaWeb学习笔记：核心概念与标签解析
"JavaWeb学习笔记分享，涵盖了HTML的基础元素如自定义列表、有序与无序列表、图像标签、路径类型、超链接标签以及定位资源的方法。这些是构建网页的基本构成部分，对于JavaWeb开发入门至关重要。" 在JavaWeb的学习...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值