前端

ye_jr_zi

已于 2023-04-23 11:50:35 修改

阅读量102

点赞数

分类专栏： java 文章标签：前端 html css

于 2023-04-20 16:42:39 首次发布

本文链接：https://blog.csdn.net/ye_jr_zi/article/details/130222777

版权

java 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

HBuilderX

在这里插入图片描述
CSS：存放CSS文件
Img：存放图片
Js：存放JavaScript文件
x.html：HTML文件

HTML

超文本标记语言
超文本：超链接——
标记：HTML中的元素都是以标签的形式出现的。
<标签名></标签名>
<标签名/>

作用：组织网页中的内容。

HTML基本结构

在这里插入图片描述

常用标签：

文本标签

 <h1> ~ <h6>：标题
 <p>：段落
 <br/>：但标签 换行
 <b>|<strong>：加粗标签
 <i>|<em>：斜体
 <sub>:下角标
 <sup>：上角标
 <hr/>:分割线

转移字符
在这里插入图片描述

图片标签
语法：<img src="图片URL地址" width="宽度" height="高度"/ >

 src->source：源——指定图片的位置，通常使用url的地址
 高度和宽度设置方式：
 	1）使用像素作为单位：100px
 	2）使用百分比：100%【根据父元素计算】

超链接
语法：<a href="跳转页面的url地址" target="页面的打开目标">文本、图片</a>
```
 target：_self【默认】、_blank【空白页】、_parent【当前页面的父页面】
```
锚点
<a>标签在跳转时，href可以设置任意值但前面需要跟#
语法：<a href="#ID值"></a>

组合标签

父子和兄弟标签一起来起作用

列表

 1）有序列表
 	<ol>
 		<li></li>
 		<li></li>
 		<li></li>
 	</ol>
 2）无序列表
 	<ul>
 		<li></li>
 		<li></li>
 		<li></li>
 	</ul>
 3）自定义列表
 	<dl>
 		<dt></dt>
 		<dd></dd>
 	</dl>

表格

 <table>
 	<tr>
 		<th></th>
 		<th></th>
 		<th></th>
 	</tr>
 	<tr>	//表行
 		<td></td>
 		<td></td>
 		<td></td>
 	</tr>
 	<tr>	//表行
 		<td></td>
 		<td></td>
 		<td></td>
 	</tr>
 </table>

表单
是获取用户的输入。

 语法：
 <form action="表单提交的地址/通常都是一个动态页面"  method="表单提交的方式：get【默认】/sei">
 	表单元素
 </form>

表单元素：

 1) input
 <input type="类型" value="值" name="名字"/>
 type：
 	text
 	password
 	radio【单选】
 	check【多选】
 	file
 	submit
 	reset
 	email
 	number
 	
 2) select
 	<select name="">
 		<option value="值">选项一</option>
 		<option value="值" selected>选项二</option>
 		<option value="值">选项三</option>
 	</select>
 	//如果不设置默认最后一个选项
 3) textarea
 	<textarea name="" rows="" cols=""></textarea>
 4) button
 	<button type="submit/reset"></button>
 	<input type="button"/>
 	<button type="button"></button>

CSS

层叠样式表
作用：美化网页中元素的显示

CSS语法

选择器{
	属性：值；
	属性：值；
	...
}

1）选择器：选择HTML中的元素
2）属性值：设置显示方式

CSS三种形式

行内样式
使用style属性，将CSS直接设置到标签上。
行内样式不需要写选择器，只会作用在当前标签上。
内部样式【内联样式/页内样式】
在HTML页面中，使用style标签，编写CSS样式
在当前页面中有效
外部样式
将CSS写入文件中，在需要的页面里，使用link标签引入css文件
优先级
就近原则

选择器

标签选择器
```
 使用HTML标签名作为选择器
```

ID选择器

 使用标签的ID属性作为选择器
 使用 #id属性值
 一个页面中不应该出现两个id相同的标签

Class选择器

 使用标签的class属性作为选择器
 使用 .class属性值

属性选择器

 [属性名]：选取带有某个属性的
 [属性名='值']

[属性名~=value]

层次选择器

 1）祖孙
 	会选择祖节点下的所有子孙节点
 	组选择器 孙选择器{
 	}
 2）父子
 	选择父节点，再从父节点上选择直接子节点
 	祖选择器>子选择器{}
 3）兄弟
 	兄选择器+弟选择器{}
 		只会找紧挨着的弟弟
 	兄选择器~弟选择器{}
 		会找所有弟弟

优先级
若以上优先级都用了，则优先级为：越具体优先级越高
ID选择器最高
层次选择器>其他单选择器

常用属性

尺寸
```
 width
 height
```
文字
```
 color：设置字体的颜色value：
 三种表示方法：
 1. 颜色名
 2. 十六进制：#RGB、 #RGBA(透明度)、#RRGGBB、#RRGGBBAA
 3.  颜色函数：RGB(255,255,255)、RGBA(255,255,255,0-1[小数])
```
font-size：设置字体尺寸
```
 1. 像素：比较常用的14px,16px,12px
```
font-weight：bold
font-famliy：字体类型，取值：宋体、楷体、黑体等。
font-align：对齐方式，取值：left、center、right。
text-align：水平方向上的对齐方式
line-height：行高【垂直方向对齐方式】
text-decration：字体修饰线
颜色取值
背景
background-color：背景颜色
background-image：背景图片，取值：url(图片地址)
background-repeat：重复，取值：repeat（重复）、repeat-x（水平方向重复）、repeat-y（垂直方向上重复）、no-repeat（不重复）。
background-position：背景图片的位置，即可以使用top,left,right,bottom,center设置，也可以使用像素值。
background-position-x：背景图片水平位置。
background-position-y：背景图片垂直位置。

盒子模型

在这里插入图片描述

border

border: 宽度 线类型 颜色;

border-width: 宽度;
border-style: 类型;
border-color: 颜色;

border-top: 宽度 线类型 颜色;
border-right: 宽度 线类型 颜色;
border-bottom: 宽度 线类型 颜色;
border-left: 宽度 线类型 颜色;

border-radius：设置四个角的半径

也可以在四个方向上单独设置宽度、类型、颜色。
border-top-width: 宽度;
border-top-style: 类型;
border-top-color: 颜色;

border-width: 四个边的宽度;
border-width: 上下 左右;
border-width: 上  左右  下;
border-width: 上  右  下  左;

padding【内边距】

padding: 四个方向的内边距;
padding: 上下 左右;
padding: 上 左右 下;
padding: 上 右 下 左;

padding-top: 上边距;
padding-right: 右边距;
padding-bottom: 下边距;
padding-left: 左边距;

margin【外边距】
可用于元素的水平方向上的自动居中

margin: 四个方向的外边距;
margin: 上下  左右;
margin: 上 左右 下;
margin: 上 右 下 左;

margin-top: 上外边距;
margin-right: 右外边距;
margin-bottom: 下外边距;
margin-left: 左外边距;

浮动

HTML标准DOM流
HTML中的元素，以两种方式排列，行内元素，块级元素

 		1）行内元素
 		从左向右，一个个排，一行放不下才会换行
 		例如：strong、b、em、sup、sub、img、a、th、td、input、select、textarea、button。
 		span
 	2）块级元素
 		从上往下，每一个块级元素都会独占一行
 		例如：h1~h6、p、br、hr、ol、ul、li、dl、dt、dd、table、caption、tr、thead、tbody、form、div。
 		div
 
 display：设置元素的类型【行内元素或者块级元素】
 	display: block; // 设置为块元素
 	display: inline; // 设置为行内元素
 	display: inline-block; // 设置为行内块元素，行内元素，可以设置宽度和高度。
 	display: none; // 设置元素不显示，也不占空间。

浮动
float: left right
左浮动：所有所浮动的元素会脱离HTML的标准文档流。按照从所往右的方向进行排列，一行装不下，才会换行。
右浮动：···

清除浮动
找回因浮动丢失的空间
clear: left,right,both

 left：只清除左浮动带来的损失
 right：只清除右浮动带来的损失
 both：清除左右浮动带来的损失

伪元素
在HTML中没有的元素。通过CSS控制，使其可以像HTML元素显示在页面中一样。

 befor：在指定元素内部最前面添加一个伪元素
 after：在指定元素内部最后面添加一个伪元素

在这里插入图片描述

定位

position属性用来设置元素的定位方式，还需要使用top、right、bottom、left四个属性设置元素的偏移【left和top优先级高于right和bottom】。
非必要情况下，不要使用定位
能使用浮动的就优先使用浮动，在相对重叠的情况下使用定位
position：static、relative、absolute、fixed。
定位可以分成三种：相对定位，绝对定位，固定定位。

相对定位：

 将postition的属性值设置为relative，元素就变成了相对定位。
 相对定位的特点：
 1） 元素在HTML标准文档流中的空间保持不变。
 2） 元素相对HTML标准文档流中的原始位置进行偏移。

绝对定位

 将position的属性值设置为absolute，元素就变成了绝对定位。
 绝对定位的特点：
 1） 元素在HTML标准文档流中的空间会消失。
 2） 元素相对于离它最近的，已经定位的父元素进行偏移；如果所有的父元素都没有定位，元素相对于HTML标签进行偏移。
 应用：在网页中出现元素相互重叠的情况大部分是绝对定位。

固定定位

 将position的属性值设置为fixed，元素就变成了固定定位。
 固定定位的特点：
 1） 元素在HTML标准文档流中的空间也会消失。
 2） 元素会相对于浏览器的窗口进行偏移。

层次
z-index:定位元素的层次【1-99】

 用于设置定位元素的层次。
 z-index的值越大，离你的眼更近。

在这里插入图片描述

div+css布局
1）先从上往下：将页面分成几个部分
一般：导航栏、banner、内容、页脚
2）再从左向右，分块。
3）逐步细化。
伪类样式
超链接有四种状态：
1）未点击过

2）已点击过
在这里插入图片描述

3）鼠标移上
在这里插入图片描述

4）鼠标按下
在这里插入图片描述

【注意】如果只设置一个，则无论怎么操作，颜色/格式都一样
如果顺序设置不是按照1-3-4【link、hover、active】则可能会出问题。

JavaScript

HTML与CSS和JS都是运行在用户客户端的浏览器中的、
JS与HTML和CSS不一样的

JS——是一种可以运行在浏览器中的脚本语言。
作用：丰富网页中的交互。

JS和Java是没有关系的。
JS参考了Java的一些语法和思想

JS的简单使用

行内
<标签名属性="JS 代码"></标签名>
内部
在HTML文档中，使用script的标签内部编写JS。
通常放在body的最后面
外部
单独写在 .js文件中获得javaScript
在需要的页面中使用script标签引入.js文件

Script标签智能干一件事
引入外部的JS，内部不在执行。

JS语法

变量
JS是一种给弱类型的语言
var 变量名
变量是没有数据类型的，可以保存任何类型的数据。
没有声明的变量直接赋值的变量时全局变量，可以在整个页面中访问。

数据类型

 1）基础数据类型
 数值型: number——整数、小数、NAN：not a number
 字符串: string——可以使用单引号/双引号
 布尔型: boolean——true、false
 null
 undefined——没有定义，如果一个变量只声明没有复
 制，他的值就是undefined

typeof() 查看类型
parseInt() 转成整数格式的number
parseFloat() 转成小数格式的number
toString() 转成字符串
在这里插入图片描述

2）引用数据类型

数组——动态数组
var arr=new Array();
对象
函数
function 函数名（参数列表）{ body }
1）没有返回值类型，可以只用return
2）参数也不需要数据类型
3）函数是一种数据类型，也就是一种值。

调用：
1）调用函数时，可以传递参数，也可以不传递参数。
2）JS中没有函数的重载。
变量的作用域
1）全局变量：在当前页面中都可以访问的变量
在页面的根部定义的变量都是全局变量
在函数中没有用var定义的变量也是全局变量。
2）局部变量：只在方法中用var定义的变量时局部变量
3）闭包变量：小全局变量，在函数的函数中使用的外层函数的局部变量
运算符
1）算数运算符：没有地板除，将计算后的结果转换成Int(parseInt())
2）比较运算符
3）逻辑运算符
4）位运算符
5）赋值运算符
6）三目运算符
流程控制
1）顺序结构

2）选择分支

3）循环结构

条件：类0值会被当作false使用；非0值会被当做true使用。
比较运算符： $==$ 【只比较数据量，不比较数据类型】、 $===$ 【全等于：比较数据量也比较数据类型】
$t r u e == " t r u e "$ 结果为false

DOM操作

选取HTML中的元素

在这里插入图片描述

操作元素

在这里插入图片描述

事件

<button onclick="JS">按钮</button>
在这里插入图片描述

JQuery

是JS的一个库

jQuery语法

jQuery/$("选择器").函数/事件();
选择器与CSS的选择器基本是一样的，jQuery
扩展了一些东西。

DOM操作

增
删
改
查
DOM树

向上：父节点、祖先节点

向下：子节点，孙子节点

横向：兄弟节点

事件

在这里插入图片描述

动画

内置动画

显示和隐藏
淡入淡出
滑上滑下
自定义动画

在这里插入图片描述
animate支持的属性：


 borderWidth
    borderBottomWidth
    borderLeftWidth
    borderRightWidth
    borderTopWidth
    borderSpacing

    margin
    marginBottom
    marginLeft
    marginRight
    marginTop

   

   padding
    paddingBottom
    paddingLeft
    paddingRight
    paddingTop

    height
    width

    maxHeight
    maxWidth
    minHeight
    maxWidth

    font
    fontSize（在animate函数的css参数指定并不同于标准css属性，例如这个css标准是：font-size。同理上面很多也是这样的情况）
  
    bottom
    left
    right
    top

    letterSpacing
    wordSpacing

    lineHeight
    textIndent

backgroundPosition

outlineWidth

opacity

ye_jr_zi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端

position属性用来设置元素的定位方式，还需要使用top、right、bottom、left四个属性设置元素的偏移【left和top优先级高于right和bottom】。background-repeat：重复，取值：repeat（重复）、repeat-x（水平方向重复）、repeat-y（垂直方向上重复）、no-repeat（不重复）。background-position：背景图片的位置，即可以使用top,left,right,bottom,center设置，也可以使用像素值。
复制链接

扫一扫