前端学习所得(html+css+jsp)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43790264/article/details/96282271

所看的视频学习教程来自哔哩哔哩https://www.bilibili.com/video/av5862916/?p=4
用的软件是webstorm

1.基础的标签的知识

1.1超链接的实现和分类

<a href="http://www.baidu.com" target="_blank">这是一个链接</a>
<a href="http://www.baidu.com">这也是一个链接</a>
<a href="http://www.baidu.com" target="_self">这还是是一个链接</a>

效果如下
这是一个链接
这也是一个链接
这也是一个链接

href后面实现的是网址的跳转,target后面实现的是 是否在本页面实现跳转
第一条: -blank实现的是重新开一个标签来打开所需要跳转的页面(也就是href后面的网页)
第二条: 没有target 就是默认为target = “-self” 具体如下
第三条:target后面接的是-self 意为在本页打开需要跳转的网页(覆盖掉本页)
1.2粗体和斜体的实现
粗体:

`<b>这是一个粗体</b>`

粗体实现的效果如图
这是一个粗体

斜体

<em>这是一个斜体</em>

不过亲测 斜体还是可以用

`<i>这是一个斜体</i>`

标签来实现
斜体实现效果如图
这是一个斜体

下划线标签

<u>这是一个下划线</u>

实现效果如下

这是一个下划线

贯穿线的实现

<s>这是一条贯穿线</s>

实现效果
这是一条贯穿线

**

2.表格元素

1.基础表格标签

<table border = "1px"  align="center" >
<tr>
    <th>姓名</th>
    <th>学号</th>
    <th>住址</th>
</tr>
<tr>
    <td>admian4</td>
    <td>admian5</td>
    <td>admian6</td>
</tr>
</table>

table是表格标签 整个表格都需要包含在两个table标签当中
tr是行标签 一对tr代表一行
td是列标签 一对td代表一列 td需要表示在tr中,来表示一行有多少列

 <table border = "1px"  align="center" >

这一段代码中的border = "1px"是用来控制表格的边框厚度如果不写则无边框。
align=“center” 则代表表格的位置是居中的。

表格第一行的元素通常都是用的th标签,th标签中的内容都会自动加粗和置中。用来表示分类
其效果如下:

姓名 学号 住址
admian4 admian5 admian6
实际上还有thead tbody tfoot标签 其作用也如其名 但是现在作用不是很明显,所以现阶段不做赘述。

2.基础功能的实现
2.1合并单元格
2.1.1合并行单元格
代码如下

<table border = "1px"  align="center" >
<tr>
    <th>admian1</th>
    <th>admian2</th>
    <th>admian3</th>
</tr>
<tr>
    <td>admian4</td>
    <td>admian5</td>
    <td>admian6</td>
</tr>
    <tr>
        <td>admian4</td>
        <td colspan="2"></td>
        
    </tr>
</table>

效果如下

admian1 admian2 admian3
admian4 admian5 admian6
admian4

其中代码

<td colspan="2"></td`>

表示合并两个行单元格
2.1.2 合并列单元格
代码如下

 <table border = "1px"  align="center" >
    <tr>
        <th>admian1</th>
        <th>admian2</th>
        <th rowspan="2"></th>
    </tr>
    <tr>
    
        <td>admian5</td>
        <td>admian6</td>
    </tr>
    <tr>
        <td>admian4</td>
        <td colspan="2"></td>

    </tr>
</table>

效果如下

如下
未知原因在本站显示不了,但是能够正常的运行
代码

 <th rowspan="2"></th>

的作用是合并两个列单元格,但是需要自己在下一行相应的位置留出一个空的位置

2.2 列表元素

<ol>//有序列表
 	属性:type(设置样式),reversed 降序
<ul>//无序列表
<li>//表示列表中的项  

有列表示例代码如下:

<ol type="1">
<li>这是啥</li>
<ol type="a">
<li>这又是啥</li>
<li>这还是啥</li>
<li>这特么是啥</li>
<li>这特么到底是啥</li>
</ol>

效果如下(csdn无法实现代码的效果,故采用的是Chrome来展示)
在这里插入图片描述
可以观察到以上的代码使用了有序列表的相互嵌套
type = “1”代表按照自然数排列
type = “a”代表按照字母顺序排列
同理还可选择罗马数字和大写的英文字母,使用软件时会有提示,故再次不做赘述

加上reversed后的代码如下

<ol type="1"  reversed>
    <li>这是啥</li>
    <li>这又是啥</li>
    <li>这还是啥</li>
    <li>这特么是啥</li>
    <li>这特么到底是啥</li>
</ol>

效果如下
顺序颠倒过来了
在这里插入图片描述

无序列表的表示
代码如下

<ul>
    <li>这是啥</li>
    <li>这又是啥</li>
    <li>这还是啥</li>
    <li>这特么是啥</li>
    <li>这特么到底是啥</li>
</ul>

效果如下

  • 这是啥
  • 这又是啥
  • 这还是啥
  • 这特么是啥
  • 这特么到底是啥

**

3.表单元素

表单的创建必须要用到form标签
用来为用户输入创建html表单

<form>
    <input type="text"><!--单行文本框-->
    <br>
    <input type="text" value="占个位置"><!--占位符-->
    <br>
    <input type="text" placeholder="占个位置"><!--暂时占位符-->
    <br>
    <input type="text" placeholder="占个位置" maxlength="10"><!--最大能输入的字符就是maxlength后面的数字-->
    <br>
    <input type="text" size="50"><!--size表示拓展文本框,最大能展示五十个字符长度的内容-->
        <br>
   <input type="text" value="占个位置" readonly><!--readonly表示占位的字符无法被修改和移动-->
</form>

其效果如图所示:(csdn无法识别,故还是采用Chrome进行展示)

在这里插入图片 描述
第一个的value和placeholder都表示占位符, 但是不同的是:
前者表示占位同时也能够被编辑,在你点击文本框的时候他还是不会消失。
后者则在你点击文本框的时候他就会消失,起到一个提醒的作用。
至于maxlength 和 size,readonly的作用参见以上相关代码后面的注释。

<br>
<input type="password" placeholder="密码">

以上的代码效果如下
在这里插入图片描述
在这里插入图片描述
type = “passwor”的时候用来输入密码,输入的时候会自动隐藏所输入的内容

多行文本框的制作
代码如下

<br>
<textarea name="文本框" id="" cols="40" rows="10" ></textarea>

效果如下
在这里插入图片描述
其中cols规定可见宽度,rows规定可见高度

三种按钮的方式和区别
代码如下

<br><br>
<input type="button" value="按钮">
<br><br>
<button> 按钮</button>
<br><br>
<form action="http://www.baidu.com">
    <input type="submit" value="按钮">  
</form>

效果如下:

在这里插入图片描述
需要注意的是在使用第三个的时候必须写在

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

它会根据action后面的地址进行跳转

附带原课程的笔记在这里插入图片描述其他样式的按钮
代码如下:

<input type="range" min="100" max="1000" value="200">
<input type="range" min="100" max="1000">

效果如下:
不同的浏览器显示的不同,此次为了美观显示的是ie浏览器的内容
在这里插入图片描述
min规定最小数值,max规定最大数值,value规定默认数值。补充:还可以借助step属性调节步长,即每一次调节所增长或者较少的数目。
如果都不指定的话 max为100, min 为0 value默认都为中间数值。

还有一种规定数字的输入文本框
示例代码如下:

  <input type="number" min="0" max="100" value="50">

其结果如下:
在这里插入图片描述
在各个浏览器中的显示和作用可能会有所不同,上图是以Chrome的运行效果为例子
文本框中不允许输入数字之外的字符。上下按钮代表增加和删除(不超过代码中所规定的最大和最小值)。//但是有意思的是,在Chrome中是能够手动输入超过范围的数值的。

不过其实在传输数据的时候,就算填写的数据过大或者是过小,都只能传输原本所限定的最大或者最小数值。

复选框
其代码如下

<input type="checkbox">记住我

实现的效果如下所示
在这里插入图片描述
默认是不打勾的,点击之后可以勾选,再次点击,取消勾选。

还有一个类似的选择按钮
示例代码如下:

你最喜欢的动漫人物是
<br>
<input type="radio" name="1" checked> mikasang
<input type="radio" name="1"> mikasang
<input type="radio" name="1"> mikasang

运行结果如下:
在这里插入图片描述
分析:三个的那么都等于一个值的时候(不限于数值,只要是相同的字符都是可行的)才能作为一个实现功能的整体,即实现非此即彼的功能(总得选一个)选中一个再去选中另外一个,前面的那个就会消失掉。

 <input type="radio" name="1" checked> mikasang

也可以注意到第一行的checked,这代表着让第一个默认被选择。

还有一种选择按钮
代码如下:

你最喜欢的小说是:
<select >
    <option>活着</option>
    <option>活着</option>
    <option>活着</option>
    <option>活着</option>
</select>

其实现的效果如下:
在这里插入图片描述
option标签用来提供不同的选项。
这个虽然简单明了,但是如果它给出的没有符合自己想法的,却还是只能选择它给出的一种。

所以还有一种能够解决这种问题的选择方式
实现代码如下:

你最喜欢的小说是   
    <input type="text" list="datalist">
    <datalist id="datalist">
        <option>活着</option>
        <option>徐三观卖血记</option>
        <option>红与黑</option>
        <option>人猿泰山</option>
        <option>雪国</option>
    </datalist>

运行的效果如下:
在这里插入图片描述
此时不但能够选择它所提供的选项,同时也能够,输入自己想要的但是它没有提供的。
需要注意的是input标签中的list的值应该和datalist标签中的id的值相等,但是也不局限与字母和数字,只要是相同的字符,都是可以起作用的。

在这里插入图片描述

第一天的学习就到这里,完成时间是2019/717/ 晚上11:09

后续还会做进一步的订正,以及后面内容的学习以及博客的撰写。





第二天,开始时间2019/7/18 上午9:00

另外的一些input标签的一些属性

<input type="email">
<input type="tel">
<input type="url">

分别是用来填写一些邮件,电话和网址的文本框,具体实现的外观效果和单行文本框基本没有差异。
如下:
在这里插入图片描述

还有input标签的一些其他的应用。

示例如下:
用date属性来获取时间

在这里插入图片描述
用color属性来获取颜色
示例代码如下:

<input type="color">

具体实现效果如图:
在这里插入图片描述
默认为黑色

用search属性来搜索输入的内容
代码如下:

<input type="search">

在这里插入图片描述
可见其样式基本和单行文本框想相同。

用hidden属性来生成隐藏的数据项,但是在提交表单时依旧是存在的。
代码如下:

<input type="search" value="nihao">

这个运行之后在浏览器上是不可见的,但是在提交表单之后是能够被获取到的。

用image属性来在网页上展示图片
代码如下:

<input type="image" src="bilibili.png" width="900px">

width表示的是这个图像的宽度,px是像素的单位。
实现的效果如下:
在这里插入图片描述

用file属性来上传文件
代码如下:

<input type="file" multiple>

实现效果如下:
在这里插入图片描述
其中的 multiple属性代表可以选择多个文件,佛则默认只能上传一个文件。
还有required属性,代表的是,必须要上传一个文件。
在这里插入图片描述

创建分区响应图:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190718110215260.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc5MDI2NA==,size_16,color_FFFFFF,t_70
目标图片是在这里插入图片描述
利用分区响应实现点击一张图片的不同的区域会链接到不同的网站。

实现代码如下:

<img src="a.png" usemap="#map1">
<map name="map1">

<area href="https://time.51240.com/" shape="rect" coords="38,60,175,200" target="_blank">

</map>

由于时间原因只划分了一个区域的超链接
分析:1.usemap后面的字符前面是必须带有一个#符号的 map name后面的字符必须和usemap后面的#后面的字符相同(不局限于某一种字符,只要是相 同的字符即可。)
2.shape的种类在上面的图片中有详细的描述,此时coords的四个数值分别代表左,上,右,下,的x,y,x,y坐标。具体的坐标求法,可使用qq的截图功能去度量。
本次实现的网址跳转是 世界时间的网页。
点击之后效果如下:
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

html5 嵌入视频

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
示例代码如下:

<video src="一拳超人第二第03集_bd.mp4%20-%20PotPlayer%202019-04-25%2012-14-41.mp4" width="700px" autoplay muted="muted" controls preload="auto" poster="一拳.gif">
    <source src="一拳超人第二季第03集_bd.mp4%20-%20PotPlayer%202019-04-25%2012-14-41.mp4" type="video/mp4">
</video>

演示效果如下:

在这里插入图片描述
分析:autoplay属性的作用:控制视频自动播放。
poster:设置第一帧所显示的内容,可以不是本视频的内容。
source标签的作用:防止有些浏览器不支持上面的video里面的视频格式,而设置的多个视频播放源,上一个格式不支持,自动播放另一个格式视频。

**

html5嵌入音频

在这里插入图片描述
基本用途和属性和video相差无几。
代码演示如下:

<audio src="06%20%20找朋友.WAV" aoutplay controls ></audio>
<source src="06%20%20找朋友.WAV" type="audio/wav">

属性也和video差不多,故再次不做赘述
演示效果如下:
在这里插入图片描述

到此就是上面链接视频教程的所有html5 的教学内容。下面就会开始css3的学习和笔记的记录。

css部分

最基础的css元素及属性:
1.元素内嵌样式表
在这里插入图片描述
代码如下:

<a> 我是css</a><!--对比代码-->
<a style="font-size: 40px ;color: aqua" > 我是css</a>

展示效果如下:
在这里插入图片描述
分析:style属性是必须要嵌套到a标签中的。




2.文档内嵌样式表
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3学习</title>
    <style>
        a{
            font-size: 40px;
            color: antiquewhite;
        }
    </style>
</head>
<body>
<a> 我是css</a><!--对比代码-->
我是css
</body>
</html>

演示效果如下:
在这里插入图片描述
分析,此时使用的是文档内嵌样式表,需要把style属性写进最前面的head标签里面。
并在下方想要规定字体的标签后面的花括号中写上想要的规定。
示例如下:

 <head>
        <meta charset="UTF-8">
        <title>css3学习</title>
        <style>
            a{
                font-size: 40px;
                color: antiquewhite;
            }
        </style>
    </head>

<a> 我是css</a><!--对比代码-->

相对应。

同理如果想改变的是text标签中的元素的外形,在head中同样要在text{}后面来规定相关的参数。


3.外部样式表
代码如下:css.html中的代码:

…………………………………………………………………………………………
    <head>
        <meta charset="UTF-8">
        <title>css3学习</title>
        <link rel="stylesheet" href="css.css">
    </head>
…………………………………………………………………………………………
        <a> 我是css</a><!--对比代码-->`

css.css中的代码:

a{
    font-size: 100px;
    color: aqua;
}

演示效果如下:
在这里插入图片描述
分析:此时采用的是外部样式表。
不是直接在原html文件中写出所规定的对象和规定的内容。
而是在另外一个css文件中写出相关规定。
并使用在head标签中间使用 <link rel="stylesheet" href="css.css">代码来导入css文件。

注意:当不同的样式表重叠的时候,采用就近原则,谁离得近谁的权限就愈大,文本就采用谁的样式。


样式小结:在这里插入图片描述

使用css基本选择器:

1.选择所有元素:
代码如下:

<style>
        *{
            font-size: 60px;
            color: chartreuse;
        }
    </style>
……………………………………………………………………
我是css
<p>我也是css</p>
<a>我还是css</a>

演示效果如下:
在这里插入图片描述
在head标签中的style标签前的括号写上*,就代表选择所有元素。

2.根据类型选择元素:
实现的代码如下:
在head标签中写上:

<style>
    .class1{
        font-size: 60px;
        color: chartreuse;
    }
     .class2{
         font-size: 90px;
         color: aqua;
     }
</style>

而后:
在body标签

我是css
<p class="class1">我也是css</p>
<a class="class2">我还是css</a>

实现的效果如下:

在这里插入图片描述
此时就开始分类:可见p标签中的class 等于class1 a标签中的class标签等于class2
在head标签中对于class1和class2做出了不同的规范。
也可以很明显的对比出来有不同的显示效果。
但是要注意的是在style标签中必须在“.”后面接上类的名字。

使用id也可以得到相似的效果:
代码需要改成:<p class="类别1" id="1">我也是css</p>
style中的代码也需要改成

#1{
            font-size: 100px;
            color: green;
        }

id是可以和class共存的,但是同一个id只能使用一次,同一个class却可以使用多次。
且id的权重是要大于class的

根据属性选择元素:
示例代码:

<style>
        [href]{
            font-size: 40px;
            color: red;
        }
  </style>
  …………………………
<a href="https://space.bilibili.com/22570473">我的个人空间</a>
<br>
<a href="https://www.biyov.com">比优视频</a>

显示效果如下:
在这里插入图片描述
此时是在style标签中对herf元素做出了相应的规范
与前面不同的是这种做法需要在style标签中的集体属性规范前使用[元素名称]

如果上面只想对“比优视频”做出规范的话 ,只需要在[ ]中写全所要规范的属性

修改之后的代码:

[href="https://www.biyov.com"]{
    font-size: 40px;
    color: red;

演示效果如下:
在这里插入图片描述

:选择器
代码如下:

   <style>
 a:hover{
            font-size:90px;
            color: cyan;
        }
    </style>

此时hover代表的是鼠标移动到改标签时候发生的效果。
演示效果如下:
在这里插入图片描述
此时要注意的是在想改变的标签后面写上:
然后写上想达到的效果。(除了hover之外还有许多的其他元素可以使用)

注意:
使用class前面用. 加类名
使用id前面用# 加id名
使用元素选择用[]
里面加元素名
在这里插入图片描述

css边框设置

**

由于时间有限,接下来的笔记将不会过于详细的去叙述。 简略的介绍 后面再来填坑。

**

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

css设置文本样式:
在这里插入图片描述
在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页