前端基础（HTML、CSS、JS）1 HTML2 CSS3 JavaScript

354 阅读 0 评论 234 点赞

我是靠谱客的博主懵懂超短裙，这篇文章主要介绍前端基础（HTML、CSS、JS）1 HTML2 CSS3 JavaScript，现在分享给大家，希望可以做个参考。

前端基础（HTML、CSS、JS）

1 HTML
- 1.1 文件标签
- 1.2 排版标签
- 1.3 字体标签
- 1.4 列表标记
- - 1.4.1 有序列表
  - 1.4.2 无序列表
- 1.5 图片标签
- 1.6 超链接标签
- 1.7 表格标签
- 1.8 表单标签
- - 1.8.1 form属性
  - 1.8.2 表单中的元素
- 1.9 框架标签
- 1.10 其他标签与特殊字符
- - 1.10.1 ``标签
  - 1.10.2 ``标签
  - 1.10.3 特殊字符
  - 1.10.4 媒体
2 CSS
- 2.1 CSS与HTML结合方式
- - 2.1.1 内嵌/行内样式
  - 2.1.2 内部样式
  - 2.1.3 外部样式
- 2.2 CSS使用
- - 2.2.1 选择器
  - 2.2.2 选择器组
  - 2.2.3 派生选择器
  - 2.2.4 CSS伪类
  - 2.2.5 字体属性
  - 2.2.6 背景属性
  - 2.2.7 列表属性
  - 2.2.8 边框属性
  - 2.2.9 盒子模型
- 2.3 CSS定位
- - 2.3.1 默认定位
  - 2.3.2 浮动定位
  - 2.3.3 相对定位
  - 2.3.4 绝对定位
  - 2.3.5 固定定位
  - 2.3.6 z轴属性
- 2.4 CSS3
- - 2.4.1 圆角
  - 2.4.2 盒子阴影
  - 2.4.3 渐变
  - 2.4.4 背景
  - 2.4.5 过渡
  - 2.4.6 动画
3 JavaScript
- 3.1 组成
- 3.2 使用方式
- - 3.2.1 行内使用
  - 3.2.2 内部使用
  - 3.2.3 外部引用
- 3.3 JavaScript基本语法
- - 3.3.1 变量
  - 3.3.2 运算
  - 3.3.3 字符串的API
  - 3.3.4 数组
  - 3.3.5 Math数学对象
  - 3.3.6 正则表达式
  - 3.3.7 日期对象
  - 3.3.8 函数
  - 3.3.9 弹框输出
- 3.4 面向对象
- - 3.4.1 对象创建
  - 3.4.2 构造函数
  - 3.4.3 直接量（类似于lamda表达式）
  - 3.4.4 JSON操作
- 3.5 其他操作
- - 3.5.1 DOM文档对象模型
  - 3.5.2 窗口事件和表单事件
  - 3.5.3 BOM操作

1 HTML

1.1 文件标签

<!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>
Hello HTML!
</body>
</html>

<html>标签：代表当前书写的是一个HTML文档
<head>标签：存储本页面的一些配置信息
<title>标签：用于定义页面在浏览器标签的标题
<body>标签：显示的内容
<body>的属性
- text：用来设置文字颜色
- bgcolor：背景颜色
- background：背景图片，图片路径为项目根目录起的路径

1.2 排版标签

注释
```

```
换行
```
<br/>
```

段落

<p align="center">
这是一个居中对齐段落，段落之间有一个空白行
</p>
<p align="left">
这是一个左对齐段落，段落之间有一个空白行
</p>

水平线标签

<!-- 红色，线粗为10像素，宽度为页面的50%，居中显示的水平线-->
<hr color="red" size="10px" width="50%" align="center">

分区标签

<div style="width:100px; heigh:100px; background:red">
这是一个分区，大小为100像素×100像素，背景颜色为红色
</div>

div独占一行

<span>行内分区，属性设置与div相同</span>

1.3 字体标签

字体

<!-- face是字体；size可选1~7；color是文字颜色，可以使用颜色名或RGB形式（16进制数或10进制数） -->
<font face="楷体", size="7",color="red">这里可以修饰文字的属性</font>

标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题，最低的级别了</h6>
<!-- 标题自动换行，字体加粗，标题之间有一定可控的距离-->

格式化

<b>加粗</b>
<i>斜体</i>
<del>删除线</del>
<u>下划线</u>

1.4 列表标记

1.4.1 有序列表

默认形式

<ol>
<li>列表中的项目一</li>
<li>列表中的项目二</li>
<li>列表中的项目三</li>
</ol>

列表中的项目一
列表中的项目二
列表中的项目三

ABC形式

<ol type="A">
<li>列表中的项目一</li>
<li>列表中的项目二</li>
<li>列表中的项目三</li>
</ol>

罗马数字形式

<ol type="I">
<li>列表中的项目一</li>
<li>列表中的项目二</li>
<li>列表中的项目三</li>
</ol>

从指定计数开始

<ol type="I" start="5">
<li>列表中的项目一</li>
<li>列表中的项目二</li>
<li>列表中的项目三</li>
</ol>

1.4.2 无序列表

只需将标签改为<ul>

默认形式

<ul>
<li>列表中的项目一</li>
<li>列表中的项目二</li>
<li>列表中的项目三</li>
</ul>

列表中的项目一
列表中的项目二
列表中的项目三

以圆圈开头

<ul type="circle">
<li>列表中的项目一</li>
<li>列表中的项目二</li>
<li>列表中的项目三</li>
</ul>

以□开头

<ul type="square">
<li>列表中的项目一</li>
<li>列表中的项目二</li>
<li>列表中的项目三</li>
</ul>

1.5 图片标签

<img src="图片路径，可以是本地也可以是远程地址" width="400px" high="600px" border="10px" title="图片标题" alt="图片显示失败后显示的文字内容" align="middle/left/right/top/bottom"/>
<!-- 其中width为图片按宽度缩放的像素，high为按图片高度缩放的像素，如果只有其中一个，则另一个也同比收缩-->
<!-- 其中boder为图片边框 -->
<!-- 其中title为鼠标悬停到图片上时显示的内容 -->

1.6 超链接标签

跳转到互联网上的资源，需要补全协议

<a href="https://html.com/">查看互联网资源</a>

跳转到本地的资源

<a href="同项目下的相对路径或本地的绝对路径">查看本地资源</a>

发邮件

<a href="mailto:zhangsan@163.com">发邮件的超链接，会打开本地的邮件软件</a>

图片超链接

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

1.7 表格标签

<table>定义一个表格

<tr表格中的一行

td表格中的数据单元格

<table border="1" width="500px" cellspacing="10">
<tr>
<th align="left">表头(左对齐)</th>
<th align="center">表头(居中)</th>
<th align="right">表头(右对齐)</th>
</tr>
<tr>
<td>行1，列1</td>
<td>行1，列2</td>
<td>行1，列3</td>
</tr>
<tr>
<td colspan="2" align="center">合并行单元格</td>
<td>行2，列3</td>
</tr>
<tr>
<td rowspan="2" align="center">合并列单元格</td>
<td>行3，列2</td>
<td>行3，列3</td>
</tr>
<tr>
<td>行4，列2</th>
<td>行4，列3</td>
</tr>
<!--在表格td中，有两个属性控制居中显示
align——控制左右居中——left，center，right
valign——控制上下居中——left，center，right
width——控制单元格宽度，单位像素
cellspacing——单元格之间的间隔，单位像素
-->
</table>

表头(左对齐)	表头(居中)	表头(右对齐)
行1，列1	行1，列2	行1，列3
合并行单元格		行2，列3
合并列单元格	行3，列2	行3，列3
合并列单元格	行4，列2	行4，列3

1.8 表单标签

1.8.1 form属性

<form action="表单提交的目的地/服务器的地址" method="GET/POST">
</form>

1.8.2 表单中的元素

输入框input：文本框属性text，复选框属性checkbox，

注意每一个元素需要定义一个名字，即给其name属性赋值

<form>
<!--普通文本框------------------------------------------>
<p>账号：<input name="username" type="text" placeholder="提示内容" maxlength="最多能输入的字数"></p>
<p>密码：<input name="passwd" type="password"></p>
<!--多行文本框------------------------------------------>
<p>多行文本框：
<textarea cols="10" rows="5">初始化大小为：10列5行</textarea>
<textarea width="10" heigh="5">初始化大小为：10×5px</textarea>
</p>
<!--复选框--------------------------------------------->
<p>复选框：
<input type="checkbox">复选框一
<input type="checkbox" checked="checked">复选框二（被选中了）
<input type="checkbox">复选框三
</p>
<!--单选框--------------------------------------------->
<p>单选框
<input type="radio" name="danxuan" checked="checked">true
<input type="radio" name="danxuan">false
</p>
<!--上传文件------------------------------------------>
<p>上传文件
<input type="file">
</p>
<!--下拉框------------------------------------------->
<p>下拉框：
<select>
<option>选项一</option>
<option selected="selected">选项二</option>
<option>选项三</option>
</select>
</p>
<!--按钮--------------------------------------------->
<p>按钮：
<input type="reset" value="清空">
<input type="submit" value="提交">
<input type="button" value="普通按钮">
<button>
在form中与type="button"相同
</button>
</p>
</form>

1.9 框架标签

框架标签分为四个部分，顶部、底部、左边、右边。

<frameset>和<body>不共存

<!--顶部和底部各占网页高度的20%-->
<frameset rows="20%,*,20%">
<frame src="top.html">顶部</frame>
<!--左边占网页宽度的10%-->
<frameset cols="10%,*">
<frame src="left.html">左边</frame>
<frame src="right.html">右边</frame>
</frameset>
<frame src="bottom.html">底部</frame>
</frameset>

1.10 其他标签与特殊字符

1.10.1 `<meta>`标签

charset指定字符集
```
<meta charset="UTF-8">
```

显示窗口为设备满屏，文字和图形的初始化比例为1.0

<meta name="viewport" content="width=device-width,initial-scale=1.0">

兼容所有浏览器

<meta http-equiv="X-UA-Compatible" content="ie=edge">

打开该页面后，计时5秒自动刷新并跳转到指定地址
```
<meta http-equiv="refresh" content="5;url=http://xxx.coom">
```

1.10.2 `<link>`标签

link标签必须写入到标签中

用于导入外部css

<!--链接一个外部样式表：-->
<head> <link rel="stylesheet" type="text/css" href="theme.css" /></head>

https://www.runoob.com/tags/tag-link.html

1.10.3 特殊字符

字符	十进制	十六进制	实体	名称
☀	9728	2600		BLACK SUN WITH RAYS
☁	9729	2601		CLOUD
☂	9730	2602		UMBRELLA
☃	9731	2603		SNOWMAN
☄	9732	2604		COMET
★	9733	2605		BLACK STAR
☆	9734	2606		WHITE STAR
☇	9735	2607		LIGHTNING
☈	9736	2608		THUNDERSTORM
☉	9737	2609		SUN
☊	9738	260A		ASCENDING NODE
☋	9739	260B		DESCENDING NODE
☌	9740	260C		CONJUNCTION
☍	9741	260D		OPPOSITION
☎	9742	260E		BLACK TELEPHONE
☏	9743	260F		WHITE TELEPHONE
☐	9744	2610		BALLOT BOX
☑	9745	2611		BALLOT BOX WITH CHECK
☒	9746	2612		BALLOT BOX WITH X
☓	9747	2613		SALTIRE
☔	9748	2614		UMBRELLA WITH RAIN DROPS
☕	9749	2615		HOT BEVERAGE
☖	9750	2616		WHITE SHOGI PIECE
☗	9751	2617		BLACK SHOGI PIECE
☘	9752	2618		SHAMROCK
☙	9753	2619		REVERSED ROTATED FLORAL HEART BULLET
☚	9754	261A		BLACK LEFT POINTING INDEX
☛	9755	261B		BLACK RIGHT POINTING INDEX
☜	9756	261C		WHITE LEFT POINTING INDEX
☝	9757	261D		WHITE UP POINTING INDEX
☞	9758	261E		WHITE RIGHT POINTING INDEX
☟	9759	261F		WHITE DOWN POINTING INDEX
☠	9760	2620		SKULL AND CROSSBONES
☡	9761	2621		CAUTION SIGN
☢	9762	2622		RADIOACTIVE SIGN
☣	9763	2623		BIOHAZARD SIGN
☤	9764	2624		CADUCEUS
☥	9765	2625		ANKH
☦	9766	2626		ORTHODOX CROSS
☧	9767	2627		CHI RHO
☨	9768	2628		CROSS OF LORRAINE
☩	9769	2629		CROSS OF JERUSALEM
☪	9770	262A		STAR AND CRESCENT
☫	9771	262B		FARSI SYMBOL
☬	9772	262C		ADI SHAKTI
☭	9773	262D		HAMMER AND SICKLE
☮	9774	262E		PEACE SYMBOL
☯	9775	262F		YIN YANG
☰	9776	2630		TRIGRAM FOR HEAVEN
☱	9777	2631		TRIGRAM FOR LAKE
☲	9778	2632		TRIGRAM FOR FIRE
☳	9779	2633		TRIGRAM FOR THUNDER
☴	9780	2634		TRIGRAM FOR WIND
☵	9781	2635		TRIGRAM FOR WATER
☶	9782	2636		TRIGRAM FOR MOUNTAIN
☷	9783	2637		TRIGRAM FOR EARTH
☸	9784	2638		WHEEL OF DHARMA
☹	9785	2639		WHITE FROWNING FACE
☺	9786	263A		WHITE SMILING FACE
☻	9787	263B		BLACK SMILING FACE
☼	9788	263C		WHITE SUN WITH RAYS
☽	9789	263D		FIRST QUARTER MOON
☾	9790	263E		LAST QUARTER MOON
☿	9791	263F		MERCURY
♀	9792	2640		FEMALE SIGN
♁	9793	2641		EARTH
♂	9794	2642		MALE SIGN
♃	9795	2643		JUPITER
♄	9796	2644		SATURN
♅	9797	2645		URANUS
♆	9798	2646		NEPTUNE
♇	9799	2647		PLUTO
♈	9800	2648		ARIES
♉	9801	2649		TAURUS
♊	9802	264A		GEMINI
♋	9803	264B		CANCER
♌	9804	264C		LEO
♍	9805	264D		VIRGO
♎	9806	264E		LIBRA
♏	9807	264F		SCORPIUS
♐	9808	2650		SAGITTARIUS
♑	9809	2651		CAPRICORN
♒	9810	2652		AQUARIUS
♓	9811	2653		PISCES
♔	9812	2654		WHITE CHESS KING
♕	9813	2655		WHITE CHESS QUEEN
♖	9814	2656		WHITE CHESS ROOK
♗	9815	2657		WHITE CHESS BISHOP
♘	9816	2658		WHITE CHESS KNIGHT
♙	9817	2659		WHITE CHESS PAWN
♚	9818	265A		BLACK CHESS KING
♛	9819	265B		BLACK CHESS QUEEN
♜	9820	265C		BLACK CHESS ROOK
♝	9821	265D		BLACK CHESS BISHOP
♞	9822	265E		BLACK CHESS KNIGHT
♟	9823	265F		BLACK CHESS PAWN
♠	9824	2660	&spades;	BLACK SPADE SUIT
♡	9825	2661		WHITE HEART SUIT
♢	9826	2662		WHITE DIAMOND SUIT
♣	9827	2663	&clubs;	BLACK CLUB SUIT
♤	9828	2664		WHITE SPADE SUIT
♥	9829	2665	&hearts;	BLACK HEART SUIT
♦	9830	2666	&diams;	BLACK DIAMOND SUIT
♧	9831	2667		WHITE CLUB SUIT
♨	9832	2668		HOT SPRINGS
♩	9833	2669		QUARTER NOTE
♪	9834	266A		EIGHTH NOTE
♫	9835	266B		BEAMED EIGHTH NOTES
♬	9836	266C		BEAMED SIXTEENTH NOTES
♭	9837	266D		MUSIC FLAT SIGN
♮	9838	266E		MUSIC NATURAL SIGN
♯	9839	266F		MUSIC SHARP SIGN
♰	9840	2670		WEST SYRIAC CROSS
♱	9841	2671		EAST SYRIAC CROSS
♲	9842	2672		UNIVERSAL RECYCLING SYMBOL
♳	9843	2673		RECYCLING SYMBOL FOR TYPE-1 PLASTICS
♴	9844	2674		RECYCLING SYMBOL FOR TYPE-2 PLASTICS
♵	9845	2675		RECYCLING SYMBOL FOR TYPE-3 PLASTICS
♶	9846	2676		RECYCLING SYMBOL FOR TYPE-4 PLASTICS
♷	9847	2677		RECYCLING SYMBOL FOR TYPE-5 PLASTICS
♸	9848	2678		RECYCLING SYMBOL FOR TYPE-6 PLASTICS
♹	9849	2679		RECYCLING SYMBOL FOR TYPE-7 PLASTICS
♺	9850	267A		RECYCLING SYMBOL FOR GENERIC MATERIALS
♻	9851	267B		BLACK UNIVERSAL RECYCLING SYMBOL
♼	9852	267C		RECYCLED PAPER SYMBOL
♽	9853	267D		PARTIALLY-RECYCLED PAPER SYMBOL
♾	9854	267E		PERMANENT PAPER SIGN
♿	9855	267F		WHEELCHAIR SYMBOL
⚀	9856	2680		DIE FACE-1
⚁	9857	2681		DIE FACE-2
⚂	9858	2682		DIE FACE-3
⚃	9859	2683		DIE FACE-4
⚄	9860	2684		DIE FACE-5
⚅	9861	2685		DIE FACE-6
⚆	9862	2686		WHITE CIRCLE WITH DOT RIGHT
⚇	9863	2687		WHITE CIRCLE WITH TWO DOTS
⚈	9864	2688		BLACK CIRCLE WITH WHITE DOT RIGHT
⚉	9865	2689		BLACK CIRCLE WITH TWO WHITE DOTS
⚊	9866	268A		MONOGRAM FOR YANG
⚋	9867	268B		MONOGRAM FOR YIN
⚌	9868	268C		DIGRAM FOR GREATER YANG
⚍	9869	268D		DIGRAM FOR LESSER YIN
⚎	9870	268E		DIGRAM FOR LESSER YANG
⚏	9871	268F		DIGRAM FOR GREATER YIN
⚐	9872	2690		WHITE FLAG
⚑	9873	2691		BLACK FLAG
⚒	9874	2692		HAMMER AND PICK
⚓	9875	2693		ANCHOR
⚔	9876	2694		CROSSED SWORDS
⚕	9877	2695		STAFF OF AESCULAPIUS
⚖	9878	2696		SCALES
⚗	9879	2697		ALEMBIC
⚘	9880	2698		FLOWER
⚙	9881	2699		GEAR
⚚	9882	269A		STAFF OF HERMES
⚛	9883	269B		ATOM SYMBOL
⚜	9884	269C		FLEUR-DE-LIS
⚝	9885	269D		OUTLINED WHITE STAR
⚞	9886	269E		THREE LINES CONVERGING RIGHT
⚟	9887	269F		THREE LINES CONVERGING LEFT
⚠	9888	26A0		WARNING SIGN
⚡	9889	26A1		HIGH VOLTAGE SIGN
⚢	9890	26A2		DOUBLED FEMALE SIGN
⚣	9891	26A3		DOUBLED MALE SIGN
⚤	9892	26A4		INTERLOCKED FEMALE AND MALE SIGN
⚥	9893	26A5		MALE AND FEMALE SIGN
⚦	9894	26A6		MALE WITH STROKE SIGN
⚧	9895	26A7		MALE WITH STROKE AND MALE AND FEMALE SIGN
⚨	9896	26A8		VERTICAL MALE WITH STROKE SIGN
⚩	9897	26A9		HORIZONTAL MALE WITH STROKE SIGN
⚪	9898	26AA		MEDIUM WHITE CIRCLE
⚫	9899	26AB		MEDIUM BLACK CIRCLE
⚬	9900	26AC		MEDIUM SMALL WHITE CIRCLE
⚭	9901	26AD		MARRIAGE SYMBOL
⚮	9902	26AE		DIVORCE SYMBOL
⚯	9903	26AF		UNMARRIED PARTNERSHIP SYMBOL
⚰	9904	26B0		COFFIN
⚱	9905	26B1		FUNERAL URN
⚲	9906	26B2		NEUTER
⚳	9907	26B3		CERES
⚴	9908	26B4		PALLAS
⚵	9909	26B5		JUNO
⚶	9910	26B6		VESTA
⚷	9911	26B7		CHIRON
⚸	9912	26B8		BLACK MOON LILITH
⚹	9913	26B9		SEXTILE
⚺	9914	26BA		SEMISEXTILE
⚻	9915	26BB		QUINCUNX
⚼	9916	26BC		SESQUIQUADRATE
⚽	9917	26BD		SOCCER BALL
⚾	9918	26BE		BASEBALL
⚿	9919	26BF		SQUARED KEY
⛀	9920	26C0		WHITE DRAUGHTS MAN
⛁	9921	26C1		WHITE DRAUGHTS KING
⛂	9922	26C2		BLACK DRAUGHTS MAN
⛃	9923	26C3		BLACK DRAUGHTS KING
⛄	9924	26C4		SNOWMAN WITHOUT SNOW
⛅	9925	26C5		SUN BEHIND CLOUD
⛆	9926	26C6		RAIN
⛇	9927	26C7		BLACK SNOWMAN
⛈	9928	26C8		THUNDER CLOUD AND RAIN
⛉	9929	26C9		TURNED WHITE SHOGI PIECE
⛊	9930	26CA		TURNED BLACK SHOGI PIECE
⛋	9931	26CB		WHITE DIAMOND IN SQUARE
⛌	9932	26CC		CROSSING LANES
⛍	9933	26CD		DISABLED CAR
⛎	9934	26CE		OPHIUCHUS
⛏	9935	26CF		PICK
⛐	9936	26D0		CAR SLIDING
⛑	9937	26D1		HELMET WITH WHITE CROSS
⛒	9938	26D2		CIRCLED CROSSING LANES
⛓	9939	26D3		CHAINS
⛔	9940	26D4		NO ENTRY
⛕	9941	26D5		ALTERNATE ONE-WAY LEFT WAY TRAFFIC
⛖	9942	26D6		BLACK TWO-WAY LEFT WAY TRAFFIC
⛗	9943	26D7		WHITE TWO-WAY LEFT WAY TRAFFIC
⛘	9944	26D8		BLACK LEFT LANE MERGE
⛙	9945	26D9		WHITE LEFT LANE MERGE
⛚	9946	26DA		DRIVE SLOW SIGN
⛛	9947	26DB		HEAVY WHITE DOWN-POINTING TRIANGLE
⛜	9948	26DC		LEFT CLOSED ENTRY
⛝	9949	26DD		SQUARED SALTIRE
⛞	9950	26DE		FALLING DIAGONAL IN WHITE CIRCLE IN BLACK SQUARE
⛟	9951	26DF		BLACK TRUCK
⛠	9952	26E0		RESTRICTED LEFT ENTRY-1
⛡	9953	26E1		RESTRICTED LEFT ENTRY-2
⛢	9954	26E2		ASTRONOMICAL SYMBOL FOR URANUS
⛣	9955	26E3		HEAVY CIRCLE WITH STROKE AND TWO DOTS ABOVE
⛤	9956	26E4		PENTAGRAM
⛥	9957	26E5		RIGHT-HANDED INTERLACED PENTAGRAM
⛦	9958	26E6		LEFT-HANDED INTERLACED PENTAGRAM
⛧	9959	26E7		INVERTED PENTAGRAM
⛨	9960	26E8		BLACK CROSS ON SHIELD
⛩	9961	26E9		SHINTO SHRINE
⛪	9962	26EA		CHURCH
⛫	9963	26EB		CASTLE
⛬	9964	26EC		HISTORIC SITE
⛭	9965	26ED		GEAR WITHOUT HUB
⛮	9966	26EE		GEAR WITH HANDLES
⛯	9967	26EF		MAP SYMBOL FOR LIGHTHOUSE
⛰	9968	26F0		MOUNTAIN
⛱	9969	26F1		UMBRELLA ON GROUND
⛲	9970	26F2		FOUNTAIN
⛳	9971	26F3		FLAG IN HOLE
⛴	9972	26F4		FERRY
⛵	9973	26F5		SAILBOAT
⛶	9974	26F6		SQUARE FOUR CORNERS
⛷	9975	26F7		SKIER
⛸	9976	26F8		ICE SKATE
⛹	9977	26F9		PERSON WITH BALL
⛺	9978	26FA		TENT
⛻	9979	26FB		JAPANESE BANK SYMBOL
⛼	9980	26FC		HEADSTONE GRAVEYARD SYMBOL
⛽	9981	26FD		FUEL PUMP
⛾	9982	26FE		CUP ON BLACK SQUARE
⛿	9983	26FF		WHITE FLAG WITH HORIZONTAL MIDDLE BLACK STRIPE

1.10.4 媒体

<video src="视频路径" controls loop autoplay>带播放按钮，自动、循环播放</video>

2 CSS

层叠样式表（Cascading Style Sheets）

2.1 CSS与HTML结合方式

2.1.1 内嵌/行内样式

只能对一个标签进行修饰

<h1 type="color:red">这是行内样式</h1>

2.1.2 内部样式

<style>
/*选择器（属性，值）*/
</style>

2.1.3 外部样式

<style>@import 'css样式表的路径'</style>
<!--两种方式-->
<head>
<link rel="stylesheet" href="样式表地址">
</head>

2.2 CSS使用

2.2.1 选择器

标签选择器 标签名
类选择器 .加上类名
id选择器 #加上id名

2.2.2 选择器组

标签名、类名、id名之间用逗号隔开，前提是这些被修饰体所需修饰的样式相同

2.2.3 派生选择器

<style>
div p{color="red"}/*影响所有p标签*/
div>p{color="blue"}/*影响子目录下的p标签*/
</style>

2.2.4 CSS伪类

以下顺序不能改变 l v h a

未访问的链接——:link
访问过的链接——:visited
鼠标悬停的样式——:hover
访问的链接（链接被点击时的样式）——:active
第一个子类——first-child

2.2.5 字体属性

字体：font-family:"字体"
字号：font-size:3em默认大小的3倍
字体加粗：font-weight:bolder;
字体颜色：color:颜色;
对齐方式：text-align:center/left/right;
下划线：text-decoration:underline;
行高：line-height:100px;
首行缩进：text-indent:2em;

2.2.6 背景属性

背景颜色：background-color
背景图像：background-image:url('图片地址')
背景的契合模式：background-repeat:
- 平铺（垂直和水平方向重复）：repeat
- 水平方向重复：repeat-x
- 垂直方向重复：repeat-y
- 不重复：no-repeat
背景图像的起始位置：background-position:value_x,value_y;单位像素
背景图像是否随着页面滚动：background-attachment:scroll/fixed;

2.2.7 列表属性

无标记：list-style-type:none;
实心圆：list-style-type:disc;
空心圆：list-style-type:circle;
实心方块：list-style-type:square;
数字（0开头）：list-style-type:decimal（decimal-leading-zero）;
大小写罗马数字：list-style-type:lower/upper-roman;
大小写英文字母：list-style-type:lower/upper-alpha;
图片路径：`list-style-image:url(‘图片路径’);

2.2.8 边框属性

<style>
类或id{
border-width:2px;
border-color:red;
border-style:solid;/*到这一步才能显示出边框（实线）*/
/*也可以单独设置一个边*/
border-right-color:green;
border-bottom-style:dashed;/*虚线；dotted点线；double双线；grove凹槽；ridge凸边框*/
}
</style>

/*简单写法*/
<style>
类或id{
border:1px solid red;
}
</style>

2.2.9 盒子模型

margin外边距，盒子间的距离
border边框，盒子的保护壳
padding内边距
content内容，显示的文本或图像

2.3 CSS定位

2.3.1 默认定位

块：h,p,div自动换行，垂直排列，自上而下，可变高度。
行：a,b,span由左至右，水平排列，不可变高。
行内块：inline-block，行内铁元素变高需要转换成行内块。display：

2.3.2 浮动定位

两个块之间加float修饰，可以消除块独占一行的特性。

<style>
.a{float:left;}
.b{float:right;}
</style>

2.3.3 相对定位

top:1px上偏移1像素
left:1px左偏移1像素

2.3.4 绝对定位

本元素与上级已定位的元素的相对位置，如果没有已定位的上级元素，则最高追溯至body标签

在元素的样式中添加如下内容则已定位：

position:relative;

在需设置绝对定位的元素样式中添加如下内容：

position:absolute;
top:10px;
left:10px;

2.3.5 固定定位

固定到页面的指定位置

在元素的样式中添加如下内容：

position:fixed;
top:10px;
left:10px;

2.3.6 z轴属性

简单说就是堆叠层级。

需要配合相对或绝对定位来使用。

position:relative;
z-index:2;
z-index:3;/*值越大层级越高，堆叠越靠上*/

2.4 CSS3

2.4.1 圆角

boder-radius：1px 2px 3px 4px;由左上至左下顺时针依次设置。
boder-radius：50%;所有边50%边长的圆角。

2.4.2 盒子阴影

box-shadow:水平阴影宽度 垂直阴影高度 模糊程度 扩张程度（原有宽度/高度+） 颜色;

2.4.3 渐变

线性渐变

background:linear-gradient([方向/角度],颜色列表，用逗号隔开);
/*默认由上至下*/

方向：to top/left/right/top left
角度：30deg

径向渐变

background:radial-gradient(颜色列表，用逗号隔开)

2.4.4 背景

位置

background-orgin:boder-box/padding-box/content-box;
分别表示从外边框/内边框/内容起的距离

裁切

background-clip:boder-box/padding-box/content-box;
同上

大小

background-size:cover/contain;
全显示，等比例适应高度或宽度

2.4.5 过渡

transation:过渡样式（默认all） 过渡时长（默认0s） 过渡效果的时间曲线（默认ease） 延时（默认0s）;
/*过渡效果可以多个，之间用逗号隔开*/

过渡样式
- 颜色: color background-color border-color outline-color
- 位置: backround-position left right top bottom
- 长度:
  
  [1]max-height min-height max-width min-width height width
  
  [2]border-width margin padding outline-width outline-offset
  
  [3]font-size line-height text-indent vertical-align
  
  [4]border-spacing letter-spacing word-spacing
- 数字: opacity visibility z-index font-weight zoom
- 组合: text-shadow transform box-shadow clip
- 其他: gradient

过渡效果的时间曲线

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

2.4.6 动画

@keyframes 动作帧名{
from{}
to{}
}
img{
animation:动作帧名 时长 过渡函数 延时 次数;
}

/*动作帧也可以写成：*/
@keyframes 动作帧名{
10%{}
20%{}
50%{}
100%{}
}

次数可以修改为 infinite alternative

3 JavaScript

3.1 组成

ECMAScript：定义核心语法，关键字，运算符，数据类型等
DOM：文档对象模型，将一个html页面的所有节点看作一个一个的对象，更有层次感地管理每一个节点
BOM：浏览器对象模型，对浏览器窗口进行访问和操作，开发者可以移动窗口，改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。

3.2 使用方式

JS是解释性语言，程序的执行按照代码顺序逐行进行。

3.2.1 行内使用

<button onclick="alert('行内脚本')">
行内使用
</button>

3.2.2 内部使用

写在<head>和<body>之间，使用

<script>内部脚本</script>

3.2.3 外部引用

在项目根目录下创建一个目录类js，在js目录中创建一个文件，后缀名为.js，在html页面中使用如下语句：

<script src="js/xxx.js"></script>

3.3 JavaScript基本语法

3.3.1 变量

声明变量var 变量名1,变量名2;

不使用var定义的变量就是全局变量
数值类型都是采用64位浮点格式存储
字符串类型用单引号或双引号括住即可
布尔类型在实际运算中：true=1，false=0
数据类型转换 parseInt parseFloat typeof（查询当前类型）

3.3.2 运算

判断是否相等：==
严格相等（数值和类型都相等）：===
严格不相等（数值和类型都不相等）：!==
逻辑非：! 逻辑与：&& 逻辑或：||
逻辑运算中的for循环，声明自变量应当用var

3.3.3 字符串的API

API	功能
length	获取字符串的长度（字符的个数），属性不用加括号
toUpperCase()	转大写
toLowerCase()	转小写
charAt(i)	返回下标为i的字符，下标是从0起计算的
indexof(a)	返回字符a在字符串中首次出现的下标
lastIndexof(a)	返回字符a在字符串中最后一次出现的下标
substring(start,stop)	截取字符串中一部分（stop位置不含）
replace(old,new)	将字符串中的old全部替换为new
split(分割的标志)	返回按标志分割后的数组

3.3.4 数组

创建数组：

//第一种
var arr = new Array();
arr[0] = 1;
arr[1] = 1090;
//第二种
var arr = new Array(1,"a",true);
//第三种
var arr = [1,"a",true];

数组的常用方法：
- toString()
- join(“将数组中每个元素需要拼接的字符串”)
- concat(新元素或数组) 在原数组后面拼接新元素或数组形成新的数组
- slice(start,stop) 截取原数组的下标start到stop之间的元素形成新数组，同样stop不含
- reverse() 将原数组倒置，不形成新数组
- sort() 数组按字符排序
- sort(function)
  
  function(a,b){return a-b;}
  
  数组按大小排序

3.3.5 Math数学对象

方法Math.	功能
abs(x)	绝对值
acos(x)	反余弦
asin(x)	反正弦
atan(x)	反正切
atan2(y,x)	从X轴到(x,y)的角度
ceil(x)	向上取整
cos(x)	余弦
exp(x)	返回e的指数
floor(x)	向下取整
log(x)	取对数
max(x,y) min(x,y)	返回最大最小值
pow(x,y)	返回x的y次幂
random()	返回0~1之间的随机数
sin(x)	正弦
sqrt(x)	平方根
round(x)	四舍五入
tan(x)	正切
toSource()	返回该对象源代码
valueOf()	返回Math对象原始值
Number对象toFixed(n)	将数字保留小数点后n位

3.3.6 正则表达式

var reg = /^正则表达式&/;

必须以/^开始，以&/结尾。

方式一

var number = "x8";
var reg = /^d(1,3)$/;
//数字，1到3位
var b = reg.test(number);
if(b==true){}

方式二

var number = "abc123";
var reg = new RegExp("^[a-zA-Z0-9][5,8]$");
if(reg.text(number)){}

3.3.7 日期对象

var time = new Date(); //得到的是中国标准时间
var year = time.getFullYear();//年份
var month = time.getMonth();//月份，从0开始
var day = time.getDate();//日
var hour = time.getHours();//时
var mm = time.getMinutes();//分
var s = time.getSeconds();//秒
var ms = time.getMilliseconds();//毫秒

3.3.8 函数

function 函数名(形参列表){
//函数体
return 返回值;
}

形参不需要带数据类型。

参数对象

调用参数的属性，比如传入两个参数，那么arguments.length的值为2，arguments[1]即为下标为1的参数。

构造函数

var f = new Function("a","b","return a*b");

匿名函数

var anonymous = function(x,y){
return x*y;
}
alert( a(2,3) );

全局函数

检测非数字 isNaN(需要检查的变量)

转码 encodeURI(字符串)

解码 decodeURI(字符串)

3.3.9 弹框输出

弹框 alert(内容)
控制台 console.log(内容)
页面 document.write("内容，可以是html语句")
确认框 var 布尔变量名 = confirm(“待确认的内容”);
输入框 var name = prompt("请输入：");

3.4 面向对象

3.4.1 对象创建

//创建一个对象
var user = new Object();
//设置对象属性
user.name = "";
user.age = 10;
user.say = function(){
……
}
//调用对象的方法
user.say();

3.4.2 构造函数

<script>
function userinfo(name,age){
this.name = name;
this.age = age;
this.say = function(){}
}
var user = new userinfo("name",111);
user.say();
</script>

3.4.3 直接量（类似于lamda表达式）

var user = {
username : "zhangsan",
age : 1111,
say : function(){
...
}
};
user.say();

3.4.4 JSON操作

<script>
//1.生成json
var json1 = {username:"张三",age:111,hobby:["爱好1","爱好2","爱好3"]};
//2.操作json数据
console.log("姓名：" + json1.username + "，年龄：" + json1.age + "，爱好2：" + json1.hobby[1]);
</script>

3.5 其他操作

3.5.1 DOM文档对象模型

有且仅有一个根节点

每个节点都有父节点（根节点除外）

子节点数量不限

共有父节点的子节点成为同胞

获取指定id值的节点的值

document.getElementById("节点id的值").value

获取指定name值的所有节点

document.getElementsByName("节点的name值")

获取指定标签名的所有节点

 document.getElementsByTagName("标签名，可以是tr、p、td")

修改指定标签的内容

document.getElementById("节点id的值").innerHTML = "要修改成的值";

修改指定标签的样式

document.getElementById("节点id的值").style.color/fontfamily = "指定样式名";

新建标签

var img = document.createElement("img指定标签的特征名");
img.setAttribute("src","图片路径");//同样命令也可以用于修改指定节点
img.setAttribute("title","名字");
img.setAttribute("id","id名");

删除节点

//必须通过父节点删除子节点
var img = document.getElementById("指定节点的id值");
img.parentNode.removeChile(img);

替换节点

//新建一个节点imgnew，要替换掉原有节点imgold
//获取待替换节点
var imgold = document.getElementById("");
//创建新节点
var imgnew = document.createElement("指定标签类型名");
imgnew.setAttribute("属性名","属性值");
//替换
imgold.parentNode.replaceChild(imgnew,imgold);

3.5.2 窗口事件和表单事件

窗口事件

仅在body和frameset元素中有效
```
<body onload="响应方法"></body>
```

表单元素事件

//获得焦点
<input onfocus="响应方法"></input>
//失去焦点
<input onblur="响应方法"></input>

鼠标事件

//1.单击
<p onclick=""></p>
//2.双击
<p ondbclick=""></p>
//3.移出
<p onmouseout=""></p>
//4.悬停
<p onmouseover=""></p>

键盘事件（event）

//1.按键按下时
<script>
window.onkeydown = function(){
if(event.keyCode == "13"){
alert("Enter");
}
}
</script>
//2.键盘长按后
<script>
window.onkeyup = function(){
……
}
</script>

事件冒泡

当子元素触发事件时，父元素也会触发事件，顺序是先子后父。

事件捕获

<script>
document.getElementById("father").addEventListener("click",function(){
alert("父级");
},true);
document.getElementById("child",function(){
alert("子级");
},true);
</script>

先父后子。

3.5.3 BOM操作

screen屏幕对象

location定位

window.location.href//获取当前页面url
.reload()//重载当前页面
.href=""//跳转到指定页面

history浏览器历史

history.back();//返回上一级页面
history.go(-1);

navigator导航

navigator.appCodeName//浏览器代号比如Mozilla
.appName//浏览器名称
.appVersion//浏览器版本
.platform//硬件平台
.userAgent//用户代理
.cookieEnabled//cookie启用

存储数据localStorage

localStorage.setItem("变量名","变量值");
.getItem("变量名");
.removeItem("变量名");

//存储变量的三中方式
localStorage["变量名"] = "变量值";
localStorage.变量名 = 变量值;
localStorage.setItem("变量名","变量值");
//都是string类型

//取变量
var a = localStorage.a;
localStorage["a"];
localStorage.getItem("a");

存储会话sessionStorage

只要不关闭页面就不会销毁

sessionStorage.setItem("变量名",变量值);
.getItem("变量名");

计时操作

●周期性定时器setInterval

setInterval(执行语句/方法名,时间周期单位毫秒);

●停止计时器clearInterval

timer = setInterval(执行语句/方法名,时间周期单位毫秒);
clearInterval(timer);

●一次性定时器setTimeout

setTimeout(执行语句/方法名,时间周期单位毫秒);

最后

以上就是懵懂超短裙最近收集整理的关于前端基础（HTML、CSS、JS）1 HTML2 CSS3 JavaScript的全部内容，更多相关前端基础（HTML、CSS、JS）1内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：Java
浏览次数：354 次浏览
发布日期：2023-12-19 02:40:16