HTML5+CSS+JS

原创已于 2023-09-06 15:46:22 修改 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

于 2021-01-07 20:26:12 首次发布

语言专栏收录该内容

8 篇文章

订阅专栏

介绍

他们是由W3C推荐的前端三件套，并且互相之间可以很好地配合

HTML:Hyper Text Markup Language
- 超文本标记语言，|框架
CSS:Cascading Style Sheets
- 层叠样式表，Cascading Style Sheets显示样式
JS:JavaScript
- 脚本|监听时间，执行函数

学习

常用软件，语言文件相关格式 .html文件/文件夹

HBuilder X

.html文件格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 关于网页的一些属性 -->
		<!-- css样式 -->
	</head>
	<body>
		<!-- 主体内容 -->
	</body>
</html>

文件夹

刚学半年web，只是写个作业可以这么用吧(●’◡’●)
前为名字，后为文件格式

项目名 文件夹
	images 文件夹
	css 文件夹
    	网站名1.css
    	...
    html 文件夹 也可以直接把每个网站卸载更外面一层
    	网站名1.thml
    	...

英文	通常的内容
header	页眉
nav	导航栏
main	主要内容
article	与上下文无关的独立内容
section	其中一个区域
aside	侧栏或边栏
footer	页脚
detail	某个细节的描述
summary	detail的标题

英文	含义
h1	标题，字体最大的标题
中间部分	字体依次减小的标题
h6	标题，字体最小的标题
p	段落
br	换行
-	-
hr	水平线
sub	下标文本
sup	上标文本
ins	插入文本
del	删除文本
wbr	此处适合换行
pre	预格式文本
address	表示地址
bdo	文字方向
blockauote	长的引用语
q	短的引用语
mark	定义有记号的文本

table te td th是相互配合组成一个表格的,table>tr>td

表格
table	表格
tr	行标签
td	列标签
th	标题列

li必须在ol或ul内。通常用ul li

列表
ol	有序列表
ul	无序列表
li	列表项

表单可以用作问卷等
input属性typr value

表单
form	表单
label	点击时自动定位到里面的input
input	输入

select	多选
option	多选的一个选项

用后者的有

英文	含义
br	换行
img	引入图片
video	引入视频
audio	引入

abbr	此处适合换行

img video audio使用时需要更多的属性，比如URL路径等
以video为例：<video src="路径" autoplay="autoplay" controls="controls"/>
依次表示 URL路径自动播放显示播放器控件
他们有各自的属性
都必须有src属性以表示路径，img只需要src即可显示
各自可以在属性里选择width和height以显示宽度和高度（这两个在css 属性里介绍）
video和audio（他们有一样的可选属性）的其他可选属性在下面显示,一般一个只有一个可选择的值，那个值就是名字自己(言下之意就是，只写自己需要的属性)

英文	作用
autoplay	自动播放
controls	显示控件
loop	循环播放
poster	定义视频下载时需要的图像，值用路径表示
preload	autoplay时无效，定义文件预加载的时机，有3个值，具体在下面介绍
muted	静音

preload的值
auto：默认值，直接加载音频/视频
metadata：仅加载音频/视频元数据
none：不加载音频/视频

class/id

用于标签的定义
class表示类，可以用于很多类似的标签，以方便使用一样的css样式
id是唯一的，可以为独特的标签单独使用样式

css样式

css一共有3段：选择器{属性:值;…}
样式有3种添加的方法

直接在标签后面写，如<div style="具体样式">这时候选择器不需要写了
写在head的style标签内<style>写如css</style>，可以在style同时写入多个不同的样式
写在单独的css格式文件中，在head中添加<link href="文件路径" type="text/css" rel="stylesheet"/>引入css外部样式

选择器

常见的伪选择器/元素	表示方法
通用选择器	*
标签选择器	标签名
类选择器	.类名前面是一个下点
ID选择器	#ID号
-	以下选择器用于分隔不同的选择器
后代选择器	一个空格，其实这不是个选择器（但很像），可以选择出所有的后代
分组选择器	, 逗号
子元素选择器	>
-	以下选择器均需紧跟在最上面的选择器后
相邻兄弟选择器	+
不相邻兄弟选择器	~
属性选择器	[属性值] 详细介绍
伪类选择器	:单词详细介绍
伪属性	::单词详细介绍
后一个选择器不一定是前一个的子元素，也可以通过一些符号进行兄弟之间的变化

子元素选择器

div>p
选中选中div中的p子元素（没有中间层的关系）

相邻兄弟选择器

div+p
选中跟在div后的p

不相邻兄弟选择器

div~p
选中前面有相同父元素的div 的p

属性选择器

伪类选择器

这类选择器全部按前面（一部分）选择器的介绍，紧跟在后面，以":"(冒号)为标识符（即以它开头，可以看成选择器的一部分）
以下均不写冒号

伪类选择器	介绍
-	下面定义的是应用于超链接文本a的4种(鼠标在该元素的)状态，一起出现(分开使用)时，顺序不可颠倒，否则会使本应在上面的选择器失效也可以用到其他元素(非a)身上，即当鼠标移过/在上面/移出时的活动状态
link	正常状态（未访问）
visited	被访问之后
hover	经过时
active	单机被激活时
伪类选择器也有一些分类，见下
结构伪类选择器	介绍
–	–
first-child	第一个子元素
lastchild	最后一个子元素
-	注意以下4个带()的，()内可以是一个算式或数字，选中符合结果的(可以是多个) 若()内是一个确定的数字，数字超出范围，选择器将无效；算式里可以有一个字母n，n会自增直到超出父类的子类数量。 n=0等最前面的几个值超出范围问题不大尽量简单有效，比如(2n+1)选中所有奇数行 ()里面也可以是 odd，选中奇数行；even，选中偶数行
nth-child()	正数第()个子元素
nth-last-child()	倒数第()个子元素
nth-of-type()	父元素的第()个同类子元素
nth-last-of-type()	父元素的倒数第()个同类子元素
first-of-type	父元素的第一个同类子元素
last-of-type	父元素的倒数第一个同类子元素
only-child	父元素的唯一的子元素，(当然，)可能有很多子元素是唯一的
only-of-type	父元素的唯一一个相同类型的子元素
empty	没有任何内容的子元素

状态伪类选择器	介绍，UI元素一般指包含在form元素内的表单元素
enabled	范围内的所有可用UI元素
disabled	范围内的所有不可用UI元素
checked	范围内的所有可用UI元素

否定伪类选择器
not()	不匹配该元素的选择器，()里是一个选择器的属性，将选取不符合该选择器的元素

目标伪类选择器
target	前面的匹配元素被相关URL指向，样式效果才生效，是动态选择器

伪元素

用法：紧跟在后面，用两个":“作为标识符（也可以只用一个，但两个更好）。css样式里需包含content属性，值为带引号的字符（当然也可以什么都不写）
如：div:after{content=”";}

伪元素	介绍
before	在前面插入一段文字
after	在后面插入一段文字

属性及含义

先讲一些主要的值

长度

用途：广泛
用法：有数字和单位组成：200px

当数字为0时，单位可有可无

使用频率：px最常用，其次em
单位有绝对和相对之分

相对单位	单位长度的含义
px	像素(Pixel)
em	相对于父元素字体大小的倍数
ex	相对于字符x的高度，通常为字体高度的一半
ch	相对于数字0的宽度
rem	相对于根元素(html)字体大小的倍数。若未被设置，则相对于浏览器的默认字体尺寸（一般为16px）
vw	相对于视口的宽度（视口被均分为100vw）
vh	相对于视口的高度（视口被均分为100vw）
xmin	相对于视口的高度或宽度中较小的那个（小的被均分为100vmin）
vmax	相对于视口的高度或宽度中较大的那个（大的被均分为100vmax）
–	–
绝对单位	单位长度的含义
pt	点(point)
pc	派卡(pica)，=我国新四号铅字的尺寸
in	英寸(inch)
cm	厘米(centimeter)
mm	mm(millimeter)

时间

用途：属性transition(变化时间)
用法：数字+单位：200ms
使用频率：都常用

单位	含义
s	秒
ms	毫秒

角度

用途：
用法：数字+单位：120deg
使用频率：第一个deg最常用

单位
deg	角度(degrees) ，一个圆 360°
grad	梯度(gradians)，一个圆 400梯度
rad	弧度(radians)，一个圆 PI
turn	转、圈(turns)

颜色

用途：color，background(-color)
用法：值
使用频率：2和-1最为常用，-1代表最后一个

值	描述
white	白色
具体英文单词↑	代表这个单词指代的颜色
rgb(r,g,b)	RGB值，rgb分别代表红绿蓝，[0,255]
rgba(r,g,b,a)	见上↑.a代表透明度 [0,1]
rgb(r%,g%,b%)	RGB值(255*x%)，三个值[0,100] ,最后即为0%-100%
#rrggbb	RGB值，每个值用两位 16进制数表示（大小写不敏感），最后值在0-255
hsl(h,s,l)	hsl分别代表色相(hue,[0,360])/饱和度(saturation,[0%,100%])/亮度(lightness,[0%,100%])
hsla(h,s,l,a)	↑ a代表透明度

字符串

只在属性font-family中用到，定义字体类型

{font-family="微软雅黑"}

也可以不用双引号

{font-family=微软雅黑}

属性概要

长度表示一栏：

1：值完全用长度表示，下面不再具体介绍
其他值的类型：值不能用长度表示，能用其他的较规范的表示表示
0：值不能用长度表示，也无法用其他规范的值表示
＞1：有多个值，都用长度表示（同时出现多个值：长度可变）

属性	含义	长度表示
width	宽度	1
height	高度	1
position	定位方式	字符
display	显示方式	字符
float	浮动方式	字符
clear	清除部分浮动	字符
margin	外边距	1-4
border	边框	1-4
padding	内边距	1-4
text-align	字体左右的对齐方式	字符
text-indent	文字之前空多少长	1
background	背景，包括背景图，背景色，是否重复	0
line-heignt	行高	1
font-family	字体	字符
font-size	字的大小	1
font-weight	字的粗细	1
color	字的颜色	颜色
opacity	透明度0-1	0
z-index	离屏幕远近，越大越显示在上面	0
transition	状态变化的时间	时间
animation	动画	0
overflow	溢出	字符

position 定位

值	含义
absolute	绝对定位，相对于最近的定位过的父元素偏移
relative	相对定位，在文件流中，相对自生原本在的位置偏移
fixed	绝对定位，相对视口偏移
这里提到了偏移，它相对于定位的位置进行偏移
relative在文件流中的意思是，在这个页面中单独占据一块空间，原始位置不会与在文件流中的同级元素重叠

display 显示

block，none，grid较为常用

值	含义
block	块状元素
none	不显示
flex	flex布局
grid	grid布局
inline	行内元素
inline-block	行内块元素

grid和flex可以去网上找资料学习

grid布局

着重介绍一下grid布局
含义：可以方便地进行网格状的布局，而后可以随意组合，分配给子元素
有许多属性和它配合使用（前提：display:grid，至少与前3个一起使用，前4个可以更美观地表示）

属性	含义	用法与解释
grid-template	融合了下面上半部分的所有项	较为复杂，不讲
grid-template-rows	每行的宽度（单独设置）	多个长度/auto/xfr 表示，有几行写几个(空格分开) 可以用repeat(s,值)代替s个连续的重复值 fr代表比例，会将剩下的长度按比例分配
grid-template-colums	每列的宽度（单独设置）	↑ 有几列写几个
grid-template-areas	给每个格子命名，名字一样则合并	每行一对双引号，（适当使用回车）单个双引号内每列分别有一个代表这个区域的名字。 “aa b” “aa b” “c c”，代表3行2列： aa占据上面两行的最左边一列； b占据上面两行的最右边一列； c占据最后一行的两列
grid-gap	行间距和列间距（统一设置）	行间距列间距
grid-row-gap	行间距（统一设置）	长度
grid-colum-gap	列间距（统一设置）	长度
place-items	内容的左右和上下位置情况	↓ start/end/center/stretch
align-items	内容的左右位置情况	↑ 开头/末尾/中间/拉伸以盛满
justify-items	内容的上下位置情况	↑ 对align来说，左是开头，右是末尾
place-content	整个表格左右和上下位置情况	↑ 对juestify来说，上是开头，下是末尾
align-content	整个表格的左右位置情况	↑有两个值的(place)，用空格分开
justify-content	整个表格的上下位置情况	↑
–	–	以下都是子元素获得父元素分配的某个空间的语句
grid-template-area	用指定的名字获取父类给这个名字的空间	字符串
–	–	以下用起始/末尾的(间隔,即gap) 行/列获得空间有多个值的用/分隔第1个间隔行在整个表格的最上方，列：左即，有n行内容行，就有n+1行间隔行默认名为从1开始的数字，行列的下标分开计算或使用上面areas里定义的名字+start/end 如 aa-start 表示区域a的起始行上：起始行左：起始列下：末尾行右：末尾列
grid-area	起始/末尾的行/列	起始行/起始列/末尾行/末尾列
grid-row	起始/末尾的行	起始行/末尾行
grid-row-start	起始行	起始行
grid-row-end	末尾行	末尾列
grid-column	起始/末尾的列	起始列/末尾列
grid-column-start	起始列	起始列
grid-column-end	末尾列	末尾列

flex布局

着重介绍一下flex布局
含义：可以方便地进行弹性布局，尤其是垂直对齐的问题
有许多属性和它配合使用（前提：display:flex）
| 属性 | 含义
|–|–|–|
|flex-direction| 决定主轴的方向
| justify-content | 子元素在主轴方向上的分布方式
| align-items | 子元素在副轴方向上的分布方式

flex-direction的值	含义
row	从上到下
row-reserve	从下到上
column	从左到右
column-reserve	从右到左

justify-content的值	含义
flex-start	主轴起始除处
flex-end	主轴末尾处
center	主轴中间
space-around	元素两边留空隙，每个元素各占一份，不会像magin一样重合
space-between	元素之间留空隙，这意味着最边上没有空隙

align-items的值	含义
flex-start	副轴起始除处
flex-end	副轴末尾处
center	副轴中间
stretch	全部占满

inline-block布局

overflow 溢出处理

不设置这个属性，它可能会在区域之外显示

值	含义
auto	超出长度时，可滚动
hidden	隐藏
其他	-

margin/border/padding 外边距/边框/内边距

分别代表外边距/边框/内边距
他们都可以用4个长度值表示，分别代表上右下左的长度

也可以有auto值，即自动，它会使两边相等
如 margin:0 auto;
它的左右两边是相等的

后面的值可以省略，但至少有第一个值

第4个值（左）省略，则=第2个值（右）
第3个值（下）省略，则=第1个值（上）
第2个值（右）省略，则=第1个值（上）

他们的四个值可以单独设置，以margin为例子
margin-top，margin-right，margin-bottom，margin-left

float/text-align 浮动/左右对齐

值	含义（浮动方向/对齐方向）
left	左
center	中
right	右

clear 清除浮动

先清除上一个区域来的浮动（float），而后可以设置自己的浮动

值	清除浮动
left	左
right	右
both	左右

background 背景

属性自由书写,其中的属性可以缺少一些或调换顺序

下面是两个较频繁使用的格式

背景色: background: background-color
背景图片: background: url(“”) background-repeat background-position;

有多个子属性

子属性	含义	值
background-image	图片链接	url(“路径”)
background-repeat	是否重复	repeat/no-repeat
background-position	背景图的起始位置
background-position-x	离左边距离	长度/x%
background-position-y	离上边距离	长度/y%
background-color	背景色	颜色
background-size	背景大小	长度长度
background-attachment	是否随着滚动而滚动	scroll(默认)/fixed(不会)/local(会)

javascript

<script type="text/javascript">
	变量及赋值
	计算语句
	函数
	事件
</script>

一定有事件，因为没有事件，js就没有什么意义

变量

所有类型的变量都用 var 变量名 = 值; 来定义

数据类型

数据类型	含义	值
Undefined	定义但未赋值	undefined
Null	未定义，由Undefined衍生而来，值==undef	null
Boolean	布尔类型	true false
Number	数字，正数，浮点数等，可以用纯数字，科学计数法、进制数等表示	数字
String	字符串，用单引号或双引号都可	字符串
Object	项目，上面有属性，如{name:“myname”,age:18}
Array	数组可以混杂其他类型，如[1,“myname”]
DOM对象	一个具体的标签，如window, document,element

可用数据类型	数据类型相关函数	目的类型	含义与用法
Boolean Number	toString()	String	变换成字符串 str=from.toString() Number的()可以放十进制表示的进制数
-	下面两个 String转Number 的函数出现异常则返回前面的正常的值	-	下面的都把源操作数放()里
String	praseInt()	整数(Number)	字符串变整数
String	praseFloat()	浮点数(Number)	字符串变浮点数
-	下面的是三种强制类型转换	-
所有	Boolean()	Boolean	空字符串 0 undefined null 值为false，其他的true
所有	Number()	Number	匹配整个数，fasle null为0，true为1 undefined为NaN（非数，not a number）
所有	String()	String	强制类型转换，变成字符串
	isNaN	判断是不是数

赋值及计算语句

运算符

赋值符	含义
=	右边赋给左边
–	–
运算符
+	加
-	减
*	乘
/	除
%	余
++	自增，放在数的前/后不一样
? :	三目运算符
( )	提高优先级，左括号，右括号
-	-
判断符
>	大于
>=	大于等于
<	小于
<=	小于等于
==	值相等
!=	值不相等
===	值和类型都相等
!==	值和类型都不相等
-	-
运算赋值符	左边的值加上右边的值，再赋值给左边 a+=b相当于a=a+b
+=
-=
*=
\=
%=

基本计算语句

语句	使用
定义及赋值	var i=3;也可以单独定义/赋值，定义统一用var
选择(分支)	if-else或switch–case-default-break
循环	for或while或do-while
跳出	break或continue
返回	return

事件

一个事件只能绑定一个函数，如果一个事件要做多件事情，都放到一个函数里
表达形式：(被触发)对象.事件属性=…

不只是a有事件属性，其他的标签都有事件属性
事件属性有很多，根据可以触发者（比如鼠标，键盘，窗口）的不同分类
只列举常用的
鼠标触发：onclick（点击），onmouseover（鼠标再其上，和选择器hover有点像，但有不同）
窗口触发（被触发对象必须是window）：onload（窗口完成后）

动态绑定
写在js样式里，被包含在其他的事件的函数中绑定
对象需要给出
参照函数的三种绑定方式
静态绑定
直接在标签里绑定，这时候对象就是自己这个标签
参照函数的第2种
比如 <p onclick="函数名(参数)">