前端学习所得（html+css+jsp）

最新推荐文章于 2021-08-17 17:14:15 发布

&油泼辣子

最新推荐文章于 2021-08-17 17:14:15 发布

阅读量2.4k

点赞数 5

分类专栏：前端文章标签： html css javascript 自学笔记

本文链接：https://blog.csdn.net/weixin_43790264/article/details/96282271

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

所看的视频学习教程来自哔哩哔哩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设置文本样式：
在这里插入图片描述

&油泼辣子

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
前端学习所得（html+css+jsp）

所看的视频学习教程来自哔哩哔哩https://www.bilibili.com/video/av5862916/?p=4用的软件是webstorm1.基础的标签的知识1.1超链接的实现和分类<a href="http://www.baidu.com" target="_blank">这是一个链接</a><a href="http://www.baidu.co...
复制链接

扫一扫