Java web 学习日记

最新推荐文章于 2021-05-21 19:18:00 发布

赵国凯

最新推荐文章于 2021-05-21 19:18:00 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/weixin_36494136/article/details/80254162

HTML 专栏收录该内容

2 篇文章

订阅专栏

这篇博客记录了作者学习HTML的过程，从第一天的列表、图像、路径和表格标签，到第二天的表单属性和登陆页面制作。还介绍了HTML中的各种常用标签，如b、s、u、i、pre、sub、sup、p、div、span，以及框架标签的使用，特别是如何通过设置target属性实现页面间的跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一天

<font size="10" color="red">这是我的第一个html</font>

标签有很多并不需要全部记住，但是常用的一定要记住
一、html规范（遵循）
1、html包含两部分内容
<head>设置相关信息</head>
<body>显示在页面上的内容都写在body里</body>
2、html里不区分大小写，java里是区分的
3、有些标签没有结束标签
换行<br>
<br/>在标签内结束
一条水平线<hr>
<hr/>在标签内结束
二、html的操作思想标签属性（特别重要理解）
在网页中有很多的数据，不同的数据有不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装起来），通过修改标签的属性值实现标签内数据样式的变化。
延伸一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。

常用标签
size 1-7 超过7还是7

标题标签 <h1>最大，有唯一重要特点就是会自动换行所以就不需要在另外加<br/>标签<h6>
<hr size="7" color="">水平线标签的使用颜色、线宽
特殊字符的转义 < < 
> >
  空格也需要转义

<dl>列表的范围  特点 到第二行会有缩进（所说的上层内容跟下层内容）

         <dt>上层内容（就是不用缩进的的内容）	//在dl里
   		  <dd>下层内容（就是要缩进的内容）	//在dl里		
   		  </dd>
   	</dt>
   </dl>


   <ol>有序列表的范围 
   	<ol type="1(默认，默认就是缺省的意思),a,i"></ol>>  
   	        <li>
   	        </li>
        </ol>
    
    <ul>无序列表的范围 
    <ul type="空心圆circle，实心圆disc（默认），实心方块square">
    	
    </ul>

5、图像标签（非常重要）
< img src="图片的路径"/>
-src：图片的路径
-width：图片的宽度
-height：图片的高度
-alt：图片上显示的文字，把鼠标移动到图片上停留片刻，文字就会显示 

6、路径的介绍（很重要，路径错误会出现404）
分类两类
绝对路径
                -C:\Program Files (x86)\baidu\BaiduRJDownloader\a.jpg
                -https://www.icourse163.org/a.jpg
相对路径
                -一个文件相对于另一个文件的位置 a.jpg
                -三种
-HTML文件和图片在同一个路径下，可以直接写文件名称
-图片在HTML的下层目录（在HTML文件中，使用img文件夹下的a.jpg）
-图片在HTML的上层目录（../表示上层目录）
想要表示上层的上层../../ 点点杠

超链接（非常重要，且很常用）
*链接资源
<a href="链接到资源的路径"></a>
**href:链接的资源的地址
**target：设置打开的方式，默认是在当前页打开
-blank：在一个新窗口打开
-self:在当前页打开（默认）
当超链接不需要到任何的地址只要在href="#"就可以了
*定位资源
**如果想要定位资源；
定义一个位置<a name="top">顶部</a>
回到这个位置<a herf="#top">回到顶部</a>

**引入一个标签pre(原样输出标签，你写什么样就输出什么样)

<pre>
public static void main(string[]args){
system.out.println("hello world");
}
</pre >

9、表格标签<***很重要***>
*可以对数据进行格式化，使数据显示更加清晰
*<table></table>;表示表格的范围
-border 单元格线的粗细
-bgcolor 单元格线的颜色
-cellspacing 是否是双线
-width 表格的宽
-height 表格的高
**在table里面<tr></tr>表示行 //tr里面嵌套td

--设置对齐方式 align="left/center/right"句左居中居右

<tr align="center"></tr>

***在tr里面<td></td>
---th也可以代替td表示单元格表示居中和加粗
**操作技巧
-首先数有多少行，数每行里面有多少个单元格
**表格的标题
要写在table标签里<caption></caption>
**合并单元格
-rowspan跨行
**<td rowspan="3">人员信息</td> 跨行操作跨三行
-colspan跨列
<tr colspan="3">人员信息</tr> 跨列操作跨三列

代码
<table border="1" bgcolor="blue" cellspacing="0" width="12 " height="12">//单元格线粗细、颜色、是否双线、表格的宽高
<tr>
<td></td>
<td><td>
<td><td>
</tr>
</table>

第一天主要学了列表标签、图像标签、路径、表格标签

第二天

10、表单标签（***今天最重要的***就是别的标签可以不会，但是这个标签必须会这些都必须要记住，没有一点可以商量的，就是在你以后开发的时候，其他标签你都可以写不到，但是表单标签你百分之120需要用到）
*可以提交数据到开心网服务器，这个过程可以用表单标签来实现。
*<form></form>:定义一个表单的范围
action 参数提交的地址，如果没有action，则默认提交到本页面,提交到哪个页面的意思是，你点一下提交按钮然后页面会在地址栏带着键值对自动跳转到下一个页面中，至于键值对如何获取，会在以后学servlet的时候说。
<form action="地址"></form>
-form标签的属性
**action
**method
-值 post 信息不会通过地址栏显示出来
- 值 get 默认是get
**enctype:一般请求下不需要这个属性，做文件上传的时候会用到
**面试题目：get和post的区别
1、get请求地址栏会携带提交的数据，post不会携带（请求体里面，在第七天的讲HTTP协议时候）
2、get请求的安全级别较低，post较高
3、get请求数据会有数据大小的限制，post没有限制
（简单一句话，就是post安全一点，他不会在地址栏里携带提交数据，数据大小没有限制）

表单里必须要有name属性，不然参数提交不到服务器***
参数的传递依赖key-value

**输入项：大部分的输入项使用<input type="输入项类型"/>
***普通输入项；<input type="text"/> 
***密码输入框：<input type="password"/> 
***单选输入框：<input type="radio" name="sex" value="女"/> 
-单选框属性必须要有name <！--单选框和复选框必须要遵循的三个原则-->
-name的属性值必须要相同
-必须要有一个valve值（不然提交过去的都是on）

**** 实现默认选中单选框复选框都用 checked="checked"
比如有些网站卖女性化妆品的，性别这一栏就让它默认选择女
还有生日的默认选中下拉选框用 select="selected"
生日：<select name="birthday">
<option value="请选择">请选择</option>
<option value="1991" select="selected">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select><br/>

<input type="radio" name="sex" checked="checked"/>女

<input type="radio" name="sex"/>男

***复选输入项：<input type="checkbox" name="love"/>
-单选框属性必须要有name
-name的属性值必须要相同
-必须要有一个valve值
***文件输入项（在后面上传的时候用到）
-<input type="file"/>
***下拉输入框（不是在input标签里面的）
生日：<select name="birthday">
<option value="请选择">请选择</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select><br/>
***文本域
<textarea cols="10" rows"10"></textarea>
***隐藏项（不会显示在页面上，但是存在html代码里）
隐藏项：<input type="hidden"/>
提交按钮
<input type="submit" value="提交">
***使用图片来提交，因为默认的实在是太难看了
<input type="image" src="a.jpg"/>
重置按钮：回到输入项的初始状态
<input type="reset" value="重置注册"/> 
普通按钮（这个是和明天讲的js一起使用的，不然单独点上去没有反应）
<input type="button" value="普通按钮"/>

了解一下参数是怎么传递过去的
**？输入项name的值=输入的值&
**参数类似于key-value形式

<br/>换行的意思
代码
<form>
手机号码：<input type="text" name="phonenum"/><br/>
创建密码：<input type="password" name="mima"/><br/>
性别：<input type="radio" name="sex1"/>女<input type="radio" name="sex2"/>男
爱好：<input type="checkbox" name="love"/>羽毛球<input type="checkbox" name="love"/>乒乓球

</form>

占位符一般用&nbsp表示

第二天主要学了表单的各种属性、还有登陆页面的做法

12、html中其他常用标签的使用hr分割线br换行
b:加粗<b></b>
s ：删除线 strickout;
u ：下划线 underline
i：斜体 italic
pre；原样输出
sub：上标
sup ：下标
p:段落标签比br标签多换一行 br是直接重起段落 p是分成两行
====明天clss的时候一直使用
div ：自动换行

span ：不换行

错误信息就是用span实现的

13、html的头标签的使用(悟：头标签里面的都是可以控制大局的)
*html由两部分组成 head和body
**在head里面的标签就是头标签
**title：表示在标签上显示的内容
**meta：
<meta name="keyword" content="jams，徐颖，彼得兔">

<meta http-equiv="refresh" content="3;url=地址">
**base：设置超链接的基本设置
-可以统一设置本页面超链接的打开方式
<base target="_blank"/>
<a href="地址" target="_blank">超链接</a> 

**link：引入外部文件
**明天css，可以使用link标签引入css文件、

框架标签（会用就可以，大公司都用div）

14、框架标签的使用
*<frameset>
-rows：按行进行划分
**<feameset rows="80,*">80逗号星，星表示剩下部分
-cols:按列进行划分
**<feameset cols="80,*">
*<frame>
-具体显示的页面
-<frame name="lower_left" src="b.html">
*使用框架标签的时候，不能写在body里面，使用了框架标签，需要把body去掉（注意点！！！body和feameset不能共存）
<frameset rows="80,*">
<frame name="top" src="a.html"/>
<frameset cols="80,*"> 
<frame name="bottom" src="b.html"/>
<frame name="bottom" src="b.html"/>
</frameset>
</frameset>
*如果在左边的页面超链接，想让内容显示在右边的页面中（百度网盘那个模式）
-设置超链接里面的属性 target值设置成名称
-<a href="holle.html" target="right">超链接</a>
这两部分就是两个页面个给它放到一起显示出来了

代码如图

效果如图

百度网盘页面分割

要跳转页面就要加target属性=所要跳转超链接的name

15、a标签的扩展（了解）

-百度是网络资源
-当a标签里面访问网络资源的时候，必须加一个协议 http：表示网络的公共协议
如果加上http协议之后，自动识别访问资源是一个网络资源
-当浏览器里面找到相关协议，回去本地电脑找支持这个协议的应用程序。

16、今天内容总结
1、html操作思想
*使用标签把要操作的数据包起来，通过修改标签的属性值，来实现标签内数据样式的变化
2、font标签
属性：size 取值范围1-7
color：英文单词，十六进制数#fffffff
3、标题标签<h1></h1>......<h6></h6>：从h1到h6越来越小，自动换行
4、注释
5、列表标签
**<dl><dt></dt><dd></dd></dl>
**有序<ol><li></li></ol>
**无序<ul><li></li></ul>
6、图像标签（***重点***）
<img src="图片的路径" width="" height"" alt""/>
**alt:浏览器的兼容性很差，一般不用
7、路径（***相对路径***）
**在同一级目录：直接写
**在下一级目录：images/1.jpg
**在上层目录：../
8、在超链接标签（*****）
<a href="路径">显示在页面上的内容</a>
-打开方式target="_self(默认方式) _blank"
-默认方式是在当前页面打开
9、表格标签（*******）
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
技巧：先数有多少行，再数每行里面有多少个单元格

10、表单标签（***今天最重要的标签***）
*<form></form>
-action:提交到地址
-method：提交方式；常用的有两种get和post

-get和post的区别

-enctype属性（上传的时候使用）
*输入项
*输入项里面写name属性（不然表单提交不过去）
*普通输入项<input type="text"/>
*密码；password
*单选框：radio
*复选框：checkbox
*下拉框：<select name="">
<option value="请选择">请选择</option>
</select>
*文本域
<textarea cols="" rows"" name=""></textarea>
*文件 file
*提交按钮 submit
*重置 reset
*使用图片提交<input type="imge" src=""/>
*隐藏项hidden
*普通按钮 button

11、div和span（*******） (重点是一个换行，一个不换行)
12、框架标签（会用，看懂代码）重点两个 <frameset></frameset> <frame>

今天学习的是css和JavaScript。
写在前面的话：你如果说你精通css，那意义不大，因为这些东西都会有专门的美工去做，在css这一步，你要做的是能看懂代码就可以了。而JavaScript你就需要精通了。

css

1、css简介
*css：层叠样式表
**层叠：一层一层的

**样式表：有很多的属性和属性值
*使页面效果更加好
*css将网页内容和显示效果进行分离，提高了显示功能
2、css和HTML的结合方式（四种结合方式）
（1）每个html标签页面上都有一个属性 style，把html和css结合在一起
（2）使用HTML的一个标签<style>标签，写在head里面
*<style type="text/css">
css代码；
</style>
** 代码
<head>
<title>css的第二种结合方式</title>
<style type="text/css">
div{
background-color:blue;
color:red;
}
</style>
</head>
<body>
<div>css的第二种结合方式</div>
</body>
(3)在style标签里面使用语句
@import url（css文件的路径）；
<head>
<title>css的第三种结合方式</title>
<style type="text/css">
@import url(div.css)
</style>>
</head>
（4）使用头标签 link，引入外部css文件
-第一步，创建一个css文件
-<link rel="stylesheet" type="text/css" href="css文件路径"/>
<head>
<title>css的第四种结合方式</title>
<link rel="stylesheet" type="text/css" href="div.css">>
</head>
<body>
<div>css的第四种结合方式</div>>
</body>

***第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式

***css样式优先级（一般情况）
由上到下，由外到内。优先级由低到高。（最里面，最下面的优先级最高）
后记载的优先级高
因为解析方式，从上到下一行一行解析的。
*** 格式选择器名称{属性名：属性值：属性名：属性值：.....}
3、css基本选择器（三种）(必须要记住)
**要对哪个标签里面的数据进行操作
（1）标签选择器
*使用标签名作为选择器的名称
div{
background-color:gray;
color:white;
}
(2)class选择器（class点）
*每个html标签都有一个属性 class
-<div class="haha">aaaaaa</div>
- .haha{background-color:orage;}
(3)id选择器（id#）
*每个html标签上面有一个属性id
-<div id="haha">bbbbbb</div>
- #haha{
background-color:#333330;
}
***优先级
style（HTML里的属性)> id选择器>class选择器>标签（div）
style方式不利于维护，以为它把代码跟样式写在了一起

4、css的扩展选择器（css这部分一定要看得懂）
（1）关联选择器
*<div><p>wwwwww</p></div>
*设置div标签里p标签的样式
*div p{ 
background-color:red;
}
（2）组合选择器
*<div>111</div>
<p>222</p>
*把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
* div,p{ 
background-color:red;
}
（3）伪（类）元素选择器
*css里面提供了一些定义好的样式，可以直接拿出来使用
*比如超链接
**超链接的状态
原始状态鼠标放上去的状态点击点击之后
：link ：hover ：active ：visited
**记忆方法
lv ha
<style type="text/css">
/*原始状态*/
a:link{background-color: red;
}
/*悬停状态*/
a:hover{background-color: blue;}
/*点击状态*/
a:active{background-color: green;}
/*点击之后的状态*/
a:visited{background-color: gray;}

</style>
</head>
<body>
<a href="http://www.baidu.com" target="_black">选择器</a>

5、css的盒子模型 div+css来做布局
在进行布局前需要把数据封装到一块一块的区域内，这个区域的专业术语叫盒子
盒子模型有三个很重要的概念
（1）边框
border：统一设置（border有三个值，不同的值用空格隔开border: 2px solid blue;）
上border-top
下border-bottom
左border-lift
右border-right
（2）内边距p
padding：统一设置
上padding-top
下padding-bottom
左padding-lift
右paddingr-right
（3）外边距m
margin：统一设置
上margin-top
下margin-bottom
左margin-lift
右margin-right

6、css的布局的漂浮（了解）
float
ps：这个float可不是Java中的基本数据类型
问题1: float m=1.0;这样定义对吗？错，应该是float m=1.0f;
问题2：float来个值除以0他会抛出异常吗？不会
float：
**属性值（对，你没看错左流向右边）
lift：文本流向对象的右边
right：文本流向对象的左边

lift 把当前div的位置居左，然后把下面的一个div居右，然后把第三个自动补齐（div的补位思想）

7、css的布局定位
position：
**属性值
-absolute：（漂浮广告就是用这个实现的）
***将对象从文档流中拖出，
***使用lift，right，top，bottom等属性相对与其进行绝对定位。
-relative：
***不会把对象从文档流中拖出去（就是位子不会空，不需要下一个div来补位）
***可以使用ift，right，top，bottom定位
这两个属性的区别是一个会拖出去，一个不会拖出去（就是一个会被补位，一个不会）