前端基础(HTML、CSS、JS)
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为鼠标悬停到图片上时显示的内容 -->
![图片标题 图片显示失败后显示的文字内容](https://i-blog.csdnimg.cn/blog_migrate/cd46108a14073ac585a014f8d584db2b.gif)
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 | ♠ | BLACK SPADE SUIT |
♡ | 9825 | 2661 | WHITE HEART SUIT | |
♢ | 9826 | 2662 | WHITE DIAMOND SUIT | |
♣ | 9827 | 2663 | ♣ | BLACK CLUB SUIT |
♤ | 9828 | 2664 | WHITE SPADE SUIT | |
♥ | 9829 | 2665 | ♥ | BLACK HEART SUIT |
♦ | 9830 | 2666 | ♦ | 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(执行语句/方法名,时间周期单位毫秒);