JAVA学习笔记—前端学习笔记（一）—HTML、CSS、JS

最新推荐文章于 2021-06-19 16:44:10 发布

Big_BlueCat

最新推荐文章于 2021-06-19 16:44:10 发布

阅读量523

点赞数

分类专栏： Java学习笔记文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_40850871/article/details/109674142

版权

文章目录

一、HTML基础
二、CSS基础
三、JavaScript基础

一、HTML基础

1.HTML介绍 & 规范

1.1 介绍

HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language)
专门制作网页的计算机语言
普通的文本就是英文单词，英文字母一样的存在。
超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。
比如：我们都是普通人，但是有些人经过国家的选拔，穿上警服之后，他就被赋予了执法的特殊权利，普通人是没有执法权的。
字母img只是普通的字母，没什么特殊的含义。而<img>被加上尖括号后，在网页的世界中，就具备了显示图片的作用。

1.2 使用记事本开发第一个网页

在计算机任意的位置，创建一个空白的记事本
重点：文件的后缀名必须是 “htm” 或 “html”
鼠标右键文件，选择打开方式为"记事本"，输入下面代码

<html>
    <head>
    	<title>第一个网页</title>
    </head>
    <body>
    	123
    </body>
</html>

保存文件，双击文件会以计算机默认的浏览器运行。

注意：
1.<html>标签它代表当前页面是一个HTML
2.<head>标签中可以声明HTML页面的相关信息

3.<body>标签中它主要是用于显示页面信息
4.标签要有开始，有结束，成双成对
4.开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭<br/>
5.大多数标签它具有属性,属性值要使用引号引起来。
6.HTML它本身是不区分大小写的。

2.HTML的使用

2.1 文件标签

<html> 标签：代表当前书写的是一个HTML文档

<head>标签：存储的本页面的一些重要的信息，它不会显示
<head>标签：有一个子标签<title>它是用于定义页面的标题的
<body>标签：书写的内容会显示出来
<body>标签的属性
\1. text 用于设置文字颜色
\2. bgcolor 用于设置页面的背景色
\3. background 用于设置页面的背景图片

2.2 排版标签

2.2.1 HTML注释

2.2.2 换行标签

<br/>标签就是一个换行（回车）功能标签，标签中的 / 可有可无的。
有/是html语言的标准化，但是html语言是一门不那么严谨的语言

2.2.3 段落标签

在<p>标签中的内容,会在开始与结束之间产生一个空白行，并且它会自动换行.
常用属性 align 它的作用是设置段落中的内容对齐方式可取值有 left right center

2.2.4 水平线标签

<hr>标签会在页面上产生一个水平线
对于hr标签它有常用属性:
align：可取值有left right center 代表水平线位置
size：代表水平线厚度（粗细）
width：代表水平线宽度
color：水平线的颜色

单位：size=“5”，5是默认的单位，为"像素"/“像素点”，像素就是构成计算机图片的最小单位！
也可以使用百分比，size=“50%”

2.2.5 分区标签

div是一个块标签，用来进行布局的
普通的div并没有什么效果，肉眼也看不见，但div与CSS结合，就会更好对页面进行排版
div与span都是“容器”的作用，具体区别:
div会自动换行，我们也叫这样的标签为块级元素
span标签它不会自动换行，我们也叫它为行内元素
div：整体划分区块
span：局部划分

2.3 字体标签

2.3.1 字体标签

<font>标签可以设置字体，字的大小及颜色，常用属性：
face:用于设置字体，例如宋体隶书楷体
size:用于设置字的大小（大小默认设置1-7，7最大，想更大，往后学css即可）
color:用于设置字的颜色
注：
我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。
每一种颜色的饱和度和透明度都是可以变化的，用0～255的数值来表示。如纯红色表示为（255，0，0），十六进制表示为#FF0000。
按这种表达方式，理论上我们可以得到256 * 256 * 256 = 16777216种颜色。
\1. 使用十六进制方式，取值范围 #000000 ~ #FFFFFF （黑色到白色）。当颜色值为#cc3300 时，可简化成 #c30 这种方式

<body bgcolor="#666">

\2. RGB颜色表示法：RGB（x,y,z）。x、y、z是0 ～ 255之间的整数。rgb字母大小写无所谓

<body bgcolor="rgb(11,11,11)">

（在线颜色选择器： http://www.86y.org/code/colorpicker/color.html ）

2.3.2 标题标记

给一段文字起一个标题

<h1> ----- <h6>
h1最大 h6最小，它们代表的是标题，
自动换行，字体加粗，标题与标题之间产生一定的距离
注意:在HTML中允许标签进行嵌套的，但是一般都包裹嵌套，而不可以进行交叉嵌套

2.4 列表标记

ol：有序列表
type=‘A’：字母排序
type=‘I’：罗马排序
start=“3” 序列从几开始
ul：无序列表
type=“disc”：默认，实心圆
type=“square”：方块
type=“circle”：空心圆

2.5 图像标签

<img>它可以让我们在网页引入一张图片，常用属性：
\1. src 代表的图片的路径
\2. width 图片的宽度
\3. height 图片的高度
\4. border 用于设置图片的边框
\5. alt 如果图片不可以显示时，默认显示的文本信息
\6. title鼠标悬停图片上，默认显示的文本信息
\7. align 图片附件文字的对齐方式，可取值有
left：把图像对齐到左边
right：把图像对齐到右边
middle：把图像与中央对齐
top：把图像与顶部对齐
bottom：把图像与底部对齐（默认）

2.6 超连接标签

<a>标签,可以实现跳转到其它页面操作.
超链接内容不仅可以是文本，也可以是图片等信息
常用属性:
\1. href 代表的我们要跳转的路径
\2. target 这个属性规定在何处打开这个链接文档，可取值：
_ blank 在新窗口中打开页面
self 默认。在本窗口打开页面

功能性连接：
1.发邮件

<a href="mailto:sunguoan@163.com">联系站长</a>

2.QQ聊天窗口

<a href="tencent://message/?uin=123456789&Menu=yes">
	<img border="0" src="http://wpa.qq.com/pa?p=1:615050000:7"/>
</a>

2.7 表格

<table>：定义一个表格
border：边框，取值是像素为单位
width 代表的表格的宽度
align 代表表格的对齐方式；取值
left 左对齐表格
right 右对齐表格
center 居中对齐表格
cellspacing：单元格间距（通常设置0表示单线表格）
<tr>：表格中的行（Table Row）
align 代表表格的对齐方式；取值
left 左对齐内容（默认值）
right 右对齐内容
center 居中对齐内容（th 元素的默认值）
<td>：表格中的数据单元格（Table DataCell）
colspan 指示列的合并
rowspan 指示行的合并

<table border="1" width="400px" align="center" cellspacing="0">
	<tr align="center">
		<td colspan="3">计划统计表</td>
	</tr>
	<tr>
		<td rowspan="3">收入金额</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>8</td>
		<td>9</td>
	</tr>
	<tr>
		<td>11</td>
		<td>12</td>
	</tr>
</table>

2.8 表单标签

表单可以让我们将录入信息携带到服务器端。
简单说，通过表单可以将要提交的数据提交到指定的位置。
但一个一个的提交，不方便。表单正好解决了这个问题，将所有的数据形成一个整体，一起提交给服务器。
常见的登录页面、注册页面都离不开表单的应用

2.8.1 form属性

action：整个表单提交的目的地
method：表单提交的方式
get：提交时，传输数据量少（传递普通文字信息，传递照片会失败），明文提交（在浏览器的url后面会显示提交的数据，不适合用于登录）
post：提交时，传输数据量大（传递文字和图片都行），密文提交（浏览器的url后面看不到提交的数据）
2.8.2 表单中的元素(控件)
<input>元素的type属性
text：默认值，普通的文本输入框
placeholder属性：提示文本
maxlength属性：最多能输入字符数量
password：密码输入框
checkbox：多选框/复选框
checked：被选中
radio：单选按钮
file：上传文件
reset：重置按钮
submit：提交按钮
button：普通按钮

<select>：下拉列表/下拉框
<option>：列表中的项
selected：被选中
<textarea>：文本域（多行文本框）
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的height和 width 属性。
<button>：按钮
在form表单中，作用和submit一样
不在form表单中，就是普通按钮（配合后期的javascript，可扩展性更高）

<form action="baidu" method="GET">
    
	<p>帐号：<input name="a" type="text" placeholder="请输入帐号..."
maxlength="5" ></p>
	<p>密码：<input name="b" type="password"></p>
	<p>爱好：
		<input name="hobby" type="checkbox"> 抽烟
		<input name="hobby" type="checkbox" checked="checked"> 喝酒
		<input name="hobby" type="checkbox"> 烫头
		<input name="hobby" type="checkbox"> 泡澡
	</p>
	<p>性别：
		<input type="radio" name="sex"> 男
		<input type="radio" name="sex" checked="checked"> 女
	</p>
	<p>身份：
        <input type="radio" name="role"> ceo
        <input type="radio" name="role"> cto
        <input type="radio" name="role"> coo
        <input type="radio" name="role" checked="checked"> ufo
	</p>
	<p>头像：
		<input type="file">
	</p>
	<p>血型：
		<select>
                <option>A型</option>
                <option>B型</option>
                <option>C型</option>
                <option selected="selected">O型</option>
		</select>
	</p>
	<p>个人简介：
		<textarea cols="10" rows="5"></textarea>
	</p>
	<p>
		<input type="reset" value="清空">
		<input type="submit" value="提交">
		<input type="button" value="取消">
		<button>保存</button>
	</p>
</form>
<button>测试</button>

注意事项：
\1. 所有表单中的元素都要具有名称（否则提交到服务器之后，服务器无法区识别多个元素之间的不同）
\2. 单选框要想可以一次只选择一个，要具有相同的name值
\3. 所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值

2.9 框架标签

通过<frameset>和<frame>框架标签可以定制HTML页面布局。可以理解为：用多个页面拼装成一个页面。
注意，框架标签和body标签不共存。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
	<frameset rows="10%,*,13%">
		<frame src="top.html"></frame>
		<frameset cols="15%,*">
			<frame src="left.html"></frame>
			<frame src="right.html"></frame>
		</frameset>
		<frame src="foot.html"></frame>
	</frameset>
</html>

top.html、left.html、right.html、foot.html 四个页面内容一样，稍微改下文字而已，以top.html为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
	<body>
		<h1>顶部导航区域</h1>
	</body>
</html>

2.10 其它标签与特殊字符

2.10.1<meta>标签

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

\1. 当前页面的字符编码 gbk：中文简体
\2. 这里的名字是 viewport （显示窗口）
数据是文本内容 content=“width=device-width, initial-scale=1.0”
也就是显示窗口宽度是客户端的屏幕宽度（就是满屏！），显示的文字和图形的初始比例是1.0
\3. 每个电脑内置的IE版本是不一样的，为了兼容所有的版本以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染
通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面

<meta http-equiv="refresh" content="5; url=http://www.baidu.com">

注意：在html中如果跳转的互联网上的网站资源，那么我们在书写路径时，一定要带协议的路径。

2.10.2 <link>标签

后面我们会使用link标签来导入css
注意:link标签也必须写在<head>标签中。

2.10.3 特殊字符

3. HTML5新特性

3.1 HTML4与HTML5的区别

H5包含h4

\1. 大小写不敏感

(1) 标签
(2) 属性
(3) 属性的值

\2. 引号可省略

\3. 省略了结尾标签

说是省略，其实运行起来，查看源代码，html是自动帮我们补全了

3.2 新增语义化标签

html4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此
新增许多语义化标签，让div“见名知意”

section标签：表示页面中的内容区域，部分，页面的主体部分
article标签：文章
aside标签：文章内容之外的，标题
header标签：头部，页眉，页面的顶部
hgroup标签：内容与标题的组合
nav标签：导航
figure标签：图文并茂
foot：页脚，页面的底部

3.3 媒体标签

想在网页上播放视频，就要使用<video>，属性有：
src：媒体资源文件的位置
controls：控制面板

autoplay：自动播放（谷歌失效，360浏览器可以）
loop：循环播放

<video src="img/html-css-js之间的关系.mp4" controls loop autoplay></video>

3.4 新增表单控件

表单的控件更加丰富了
<input>，修改type属性：
color：调色板
date：日历
month：月历
week：周历
number：数值域
min：最小值（默认值是1）
max：最大值（默认值无上限）
step：递增量
range：滑块
search：搜索框（带×号，可一键删除框中内容）
进度条<progress/>
高亮<mark>
联想输入框<datalist> （模糊查询）
选项<option>

二、CSS基础

1.css介绍

1.1 什么是CSS？

CSS是指层叠样式表 cascading style sheets
通过CSS可以让我们定义HTML元素如何显示。
CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来。
通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率。

2.CSS与HTML结合方式

2.1 第一种方式内联/行内样式

就是在我们的HTML标签上通过style属性来引用CSS代码。

优点:简单方便；
缺点:只能对一个标签进行修饰。

<div style="color:red">hello</div>

2.2 第二种方式内部样式表

我们通过<style>标签来声明我们的CSS. 通常<style>标签我们推荐写在head和body之间，也就是“子”的位置
优点:可以通过多个标签进行统一的样式设置
缺点: 它只能在本页面上进行修饰
语法：选择器 {属性:值;属性:值}

2.3 第三种方式外部样式表

我们需要单独定义一个CSS文件,注意CSS文件的后缀名就是.css
在项目根目录下，创建css目录，在css目录中创建css文件 css01.css
在<head>中使用<link>标签引用外部的css文件

还可以使用另一种引入css文件的方式：

<style>
@import 'css/css01.css'
</style>

关于外部导入css使用<link>与@import的区别?
\1. 加载顺序不同
@import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面。
如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面；
\2. @import方式导入css样式，它是不支持javascript的动态修改的。而link支持。
三种样式表的优先级：满足就近原则
内联 > 内部 > 外部

3.CSS的使用

3.1 css中选择器

3.1.1 元素(标签)选择器

它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称.

3.1.2 类选择器

类选择器在使用时使用"."来描述，它描述的是元素上的class属性值

3.1.3 id选择器

它只能选择一个元素，使用 “#” 引入，引用的是元素的id属性值。
id选择器，比类选择器更具有唯一性

3.1.4 选择器组

逗号表示，谁和谁。
例如，我有手机，你有手机，他也有手机，一条一条写太麻烦，就可以合并编写

我,你,他{
手机
}

3.1.5 派生选择器

子代：父子关系（隔代不管）
后代：父子孙，曾孙，从孙…

3.1.6 CSS伪类

CSS伪类可对css的选择器添加一些特殊效果
伪类属性列表：
:active 向被激活的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

3.2 CSS基本属性

3.2.1 文本属性

指定字体：font-family : value;
字体大小：font-size : value;
px：像素
em：倍数
字体加粗：font-weight : normal/bold;
文本颜色：color : value;
文本排列：text-align : left/right/center;
文字修饰：text-decoration : none/underline;
行高：line-height : value;
首行文本缩进：text-indent : value （2em）;

3.2.2 背景属性

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

background-color 设置元素的背景颜色。
background-image 把图像设置为背景。

background-image: url('img/1.jpg');

background-repeat 设置背景图像的墙纸效果，是否及如何重复
repeat：在垂直方向和水平方向重复，为重复值
repeat-x：仅在水平方向重复
repeat-y：仅在垂直方向重复
no-repeat：仅显示一次
background-position 设置背景图像的起始位置
1：控制水平方向 x轴：正值，向右移动；负值，向左移动
2：控制垂直方向 y轴：正值，向下移动；负值，向上移动

/* 图片向左移动50px，向下移动100px （可以为负值） */
background-position:50px 100px;

background-attachment 背景图像是否固定或者随着页面的其余部分滚动
默认值是 scroll：默认情况下，背景会随文档滚动
可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像

background-attachment: fixed;

3.2.3 列表属性

CSS列表属性作用如下：
设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像
有两种类型的列表：
无序列表 - 列表项标记用特殊图形࿰

最低0.47元/天解锁文章

Big_BlueCat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVA学习笔记—前端学习笔记（一）—HTML、CSS、JS

文章目录一、HTML基础1.HTML介绍 & 规范1.1 介绍1.2 使用记事本开发第一个网页2.HTML的使用2.1 文件标签2.2 排版标签2.2.1 HTML注释2.2.2 换行标签2.2.3 段落标签2.2.4 水平线标签2.2.5 分区标签2.3 字体标签2.3.1 字体标签2.3.2 标题标记2.4 列表标记2.5 图像标签2.6 超连接标签2.7 表格2.8 表单标签2.8.1 form属性2.9 框架标签2.10 其它标签与特殊字符2.10.1<meta>标签2.10.2
复制链接

扫一扫