黑马视频JavaWeb系列——重学HTML的笔记（Day1）

最新推荐文章于 2024-07-21 17:58:14 发布

我是一个点

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量478

点赞数 4

分类专栏： JavaWeb 文章标签： HTML基础知识点

本文链接：https://blog.csdn.net/qq_43918130/article/details/101557558

版权

JavaWeb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

简单说明

以下的所有的代码都经过测试，是可以执行的，除了部分的图片的路径的问题，其他的直接进行复制是可以用的。

标签的学习_{(很重要！)}

以下是可运行的HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	 <!-- 表格标签，是这里面的最重要的标签 -->
	 <!-- 特别值得注意的是，输入的项里面都是要有name属性的，要不然在submit提交的时候，就没法获得我们输入的值 -->
	  <form action="" method="get">
	 <!-- 上面的action：提交的地址，默认提交到当前的地址
	 上面的method：表示提交的方式：
	 常用的有两种:get和post，默认的是get
	  -->
	 	***普通输入项:<br/>
	 	手机号码：<input type="text" width="10px"/><br/>
	 	<br/>
	 	***隐藏输入项：<br/>
	 	创建密码：<input type="password"><br/>
	 	<br/>
	 	***单选框：<br/>
	 	性别：<input type="radio" name="sex"/>女<input type="radio" name="sex"/>男<br/>
	 	<br/>
	 	***复选框：<br/>
	 	爱好：<input type="checkbox" name="love">篮球<input type="checkbox" name="love">足球
	 	<input type="checkbox" name="love">排球<br/>
	 	<br/>
	 	***文件的输入项:<br/>
	 	文件：<input type="file"><br/><br/>
	 	<br/>
	 	***下拉复选框<br/>
	 	生日：<select name="birth">
	 	<option value="0">请选择</option>
	 	<option value="1991">1991</option>
	 	<option value="1992">1992</option>
	 	<option value="1993">1993</option>
	 	</select><br/>
	 	<br/>
	 	***文本域<br/>
	 	自我描述：<textarea rows="10" cols="10"></textarea><br/>
	 	<br/>
	 	***隐藏项<br/>
	 	隐藏：<input type="hidden">
	 	<br/>
	 	***提交按钮<br/>
	 	<input type="submit" value="注册">
	 	<!-- 下面是使用图片提交表单的方法 -->
	 	<input type="image" src="Image/A.png" width="200" height="200"><br/>
	 	***重置注册<br/>
	 	<input type="reset">重置<br/>
	 	***普通按钮<br/>
	 	<input type="button">普通按钮<br/>
	 	<!--普通按钮主要是用于js的事件的提交上的 -->
	 </form>
	 
</body>
</html>

效果图
在这里插入图片描述
重点的有个地方得说一下：

在这里插入图片描述

如上图，这个地方是很需要注意的，在我们真正的进行项目开发时候，这里个地方用到的特别多，action就不多说了，简单的说一下method，我们在进行提交的时候，我们的信息会被获取下来，与后台的一些东西进行操作，比如登录的时候需要与数据库进行操作。那么这里的get和post是怎么回事呢，get这种提交方式，submit获得的form中的东西会在地址栏显示出来，什么是地址栏？看图：在这里插入图片描述当然，任何人都不想自己的账户密码的信息泄露的吧，当我们的信息在地址栏的时候，通过特殊的手段是可以截图到地址栏上面的信息的，也就是说get的提交方式，不安全！ post的提交方式是我们在做项目的时候用到的最多的方法，这种请求的方式是不会在地址栏上显示的。还有！地址栏上显示的东西是有限制的，有过上网的人都知道，我们在百度搜索的时候，能输入的东西是有限制的，比如你搜索一下一篇英文文章，真实显示在上面的只有部分，如果没记错的话，地址栏上能显示的只有两百多个字符。post在理论上是没有限制的。

杂类知识的学习_{(简单学一下吧)}

虽然杂，但是都是一些实用的知识点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>对HTML的学习</title>
</head>
<body>
	<!-- 标签是成对出现的，可以在前面增加属性,Html里面是不区分大小写的 -->
	<!-- 有些标签是没有结束标签的，如换行的<br/>，这样的标签是在标签内结束的 -->
	<!-- 标签里面可以嵌套标签 -->
	
	
	<!-- 一个标签相当于一个容器 ，想要改变容器内的样式，改变这个容器的属性值就可以了
	文字标签：
	font：font中的size的范围是1-7，超出7的部分还是7显示的
	color是颜色，这里其实可以直接用取色器来取的！！！-->
	<font size="5" color="red">这是一个标签</font>
	
	<!-- 注释标签 ,网页上是不会显示的，但是右键查看源代码会显示-->
	
	
	<!-- 标题标签-->
	<h1>标题，大小是可以控制的，并且是自动换行的</h1>
	<h2>从h1到h6是自动变小的</h2>
	
	
	<!-- hr表示的是一条水平线，结束也是在标签内结束的 -->
	<hr size="5" color="red"/>
	
	
	<!-- 特殊字符标签 -->
	<!-- 直接写<html>是没法显示的 -->
	&lt;html&gt;:是网页的开始
	<!-- 这里的&lt;指代的是<(就是小于号)
	这里的&gt;指代的是>（就是大于号）
	&nbsp的作用是产生空格，记忆方式，牛逼sp -->
	
	
	<!-- 列表标签 -->
	<dl>
		<dt>张三家族:</dt>
		<dd>张三爷爷</dd>
		<dd>张三奶奶</dd>
	</dl>
	
	
	<!-- 有序列表 -->
	<ol type="a">
		<li>我是带序号的标签，没有type，默认的是用数字进行编号</li>
		<li>标签，type中可以写的是1,a,i</li>
		<li>得到的效果是数字编号，字母编号，i,ii,iii这种编号</li>
	</ol>
	
	
	<!-- 无序列表 -->
	<ul type="circle">
		<li>我是无序的</li>
		<li>type的属性可以自己改</li>
	</ul>
	
	
	<!-- 图像标签 -->
	<!--<img src="图片的路径">-->
	<img src="G:/项目学习/JavaWeb_Day01/WebContent/Image/A.png" height="300" width="300">
	<!-- 上面的那种路径的写法获得的图片加载的很慢 -->
	<img src="Image/A.png" height="300" width="300">
	
	
	<!-- 原样输出标签 -->
	<pre>
		main(,,,,,,,,,,)
	</pre>
	
	<!-- 路径的学习：
	绝对路径：直接给一个完整的路径
	1：JavaWeb_Day01/WebContent/Image/A.png，硬盘中的位置
	2：http://www.baidu.com/b.jpg;//网页中的位置
	相对路径：一个文件相对于另外一个文件的位置（有三种类型的）
	1：Image/A.png，就是得到的HTML与图片所在的文件在一个路径下，这里的相同路径就是WebContent
	 -->
	
	
	<!-- 超链接标签 -->
	<!--
	链接资源：<a href="超链接资源的路径"></a>
	定位资源： <a href="#"></a> 此时的超链接是不能到任何的地址的 
	 -->
	 <br/>
	 <a href="https://www.baidu.com/" >这是一个超链接，点击后悔直接在这个窗口打开</a>
	 <a href="https://www.baidu.com/" target="_blank" >这是一个超链接，点击后会在新的窗口打开</a>
	 
	 
	 <!-- 定位资源 ，回到指定的位置-->
	 <br/>
	 <a name="top">顶部</a>
	 <pre>
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 	我爱学习
	 </pre>
	 <a href="#top">回到顶部</a>
	 
	 
	 <!-- 表格标签 ,table代表的是表格，tr代表的是行，td代表的是单元格-->
	 <table border="1" bordercolor="red" cellspacing="0" width="400" height="150">
	 <!-- 上面的 cellspacing是控制单元格之间的间隙的-->
	 	
	 	<tr align="center">	<!-- 第一行 ,并且设置的效果是居中的-->
	 		<td>我是编号一的单元格</td>   <!-- 第一行的第一列 -->
	 		<td>我是张三</td>
	 	</tr>
	 	<tr>
	 	<!-- th和td都是单元格，但是th是居中和加粗的 -->
	 		<td>作为第二行，只有我这一个单元格</td>
	 	</tr>
	 	<!-- 特别注意：跨行rowspan，跨列colspan的使用 -->
	 </table>
	 
</body>
</html>

效果图
在这里插入图片描述

其他标签的使用_{(轻松学一下)}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 加粗 -->
	<b>张三</b><br/>
	
	<!-- 删除线 -->
	<s>李四</s><br/>
	
	<!-- 加下划线-->
	<u>王五</u><br/>
	
	<!-- 斜体-->
	<i>王二麻子</i><br/>
	
	<!-- 原样输出 -->
	<pre>我是原样的输出</pre>
	
	<!-- sup代表的是上标 -->
	<sup>7</sup>
	
	<!-- sub代表的是下标 -->
	<sub>5</sub>
	
	<!-- div标签是有自动换行的功能 -->
	<div>第一行</div>
	<div>第二行</div>
	<br/>
	
	<!-- span都会在一行显示 -->
	<span>第一行</span>
	<span>第二行</span>
	<br/>
	
	<!-- p是段落标签，比br标签多一行 -->
	张三
	<p>
	李四
	
</body>
</html>

效果图
在这里插入图片描述

头标签_{(蛮重要的)}

页面的自动定时跳转_{(很重要！)}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- http-equiv是模拟一个页面刷新的请求，时间是3秒，跳转的是后面的url的链接，
这里的链接也可以是你自己项目中的其他的页面，直接给地址路径就行，就像给图片的地址一样 -->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com"/>
</head>
<body>
待会页面会产生跳转，等待跳转的时间是三秒，跳转的页面是百度
</body>
</html>

简单的说一下base标签_{(了解一下)}

在这里插入图片描述这个的效果能让HTML中的超链接都是在新的窗口打开的，默认的超链接是直接在这个窗口打开的，看下面的，我们加这个能让这个超链接点击的时候在新的窗口打开，而每一个超链接都设置，很麻烦！直接在头标签加base标签就行了。
在这里插入图片描述

简单的说一下link标签_{(了解一下)}

link标签可以引入外部文件，比如说写css的时候，link标签就用的上了，没唬人吧，是真的在简单的说。。。

框架标签_{(比较重要，但是部分公司已经淘汰)}

强烈推荐去看帮助文档，各种风格都有的，在这里就简单的说一下吧，反正目前我是用不上的。。。
我也懒得写了，直接截取一下视频的图吧
在这里插入图片描述主要页面的代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<frameset rows="100,*">
	<frame name="top" src="Test1.html"/>
	<frame name="top" src="Test2.html"/>
</frameset>
</html>