前端基础（HTML、CSS、JS）

已于 2022-05-20 10:13:27 修改
阅读量1.1k 收藏 2
点赞数 1
分类专栏： 前端 文章标签： 前端 html5 css javascript
于 2022-04-23 03:22:00 首次发布
本文博主FisrtBqy。文章内容仅供学习交流，未经允许请勿用于论文写作、竞赛答辩、书刊出版、商业活动等。如有问题请联系作者：FisrtBqy@163.com
本文链接：https://blog.csdn.net/FisrtBqy/article/details/124358468
版权

前端基础（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>
    1. 列表中的项目一
    2. 列表中的项目二
    3. 列表中的项目三

  • 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 特殊字符

字符十进制十六进制实体名称
☀97282600 BLACK SUN WITH RAYS
☁97292601 CLOUD
☂97302602 UMBRELLA
☃97312603 SNOWMAN
☄97322604 COMET
★97332605 BLACK STAR
☆97342606 WHITE STAR
☇97352607 LIGHTNING
☈97362608 THUNDERSTORM
☉97372609 SUN
☊9738260A ASCENDING NODE
☋9739260B DESCENDING NODE
☌9740260C CONJUNCTION
☍9741260D OPPOSITION
☎9742260E BLACK TELEPHONE
☏9743260F WHITE TELEPHONE
☐97442610 BALLOT BOX
☑97452611 BALLOT BOX WITH CHECK
☒97462612 BALLOT BOX WITH X
☓97472613 SALTIRE
☔97482614 UMBRELLA WITH RAIN DROPS
☕97492615 HOT BEVERAGE
☖97502616 WHITE SHOGI PIECE
☗97512617 BLACK SHOGI PIECE
☘97522618 SHAMROCK
☙97532619 REVERSED ROTATED FLORAL HEART BULLET
☚9754261A BLACK LEFT POINTING INDEX
☛9755261B BLACK RIGHT POINTING INDEX
☜9756261C WHITE LEFT POINTING INDEX
☝9757261D WHITE UP POINTING INDEX
☞9758261E WHITE RIGHT POINTING INDEX
☟9759261F WHITE DOWN POINTING INDEX
☠97602620 SKULL AND CROSSBONES
☡97612621 CAUTION SIGN
☢97622622 RADIOACTIVE SIGN
☣97632623 BIOHAZARD SIGN
☤97642624 CADUCEUS
☥97652625 ANKH
☦97662626 ORTHODOX CROSS
☧97672627 CHI RHO
☨97682628 CROSS OF LORRAINE
☩97692629 CROSS OF JERUSALEM
☪9770262A STAR AND CRESCENT
☫9771262B FARSI SYMBOL
☬9772262C ADI SHAKTI
☭9773262D HAMMER AND SICKLE
☮9774262E PEACE SYMBOL
☯9775262F YIN YANG
☰97762630 TRIGRAM FOR HEAVEN
☱97772631 TRIGRAM FOR LAKE
☲97782632 TRIGRAM FOR FIRE
☳97792633 TRIGRAM FOR THUNDER
☴97802634 TRIGRAM FOR WIND
☵97812635 TRIGRAM FOR WATER
☶97822636 TRIGRAM FOR MOUNTAIN
☷97832637 TRIGRAM FOR EARTH
☸97842638 WHEEL OF DHARMA
☹97852639 WHITE FROWNING FACE
☺9786263A WHITE SMILING FACE
☻9787263B BLACK SMILING FACE
☼9788263C WHITE SUN WITH RAYS
☽9789263D FIRST QUARTER MOON
☾9790263E LAST QUARTER MOON
☿9791263F MERCURY
♀97922640 FEMALE SIGN
♁97932641 EARTH
♂97942642 MALE SIGN
♃97952643 JUPITER
♄97962644 SATURN
♅97972645 URANUS
♆97982646 NEPTUNE
♇97992647 PLUTO
♈98002648 ARIES
♉98012649 TAURUS
♊9802264A GEMINI
♋9803264B CANCER
♌9804264C LEO
♍9805264D VIRGO
♎9806264E LIBRA
♏9807264F SCORPIUS
♐98082650 SAGITTARIUS
♑98092651 CAPRICORN
♒98102652 AQUARIUS
♓98112653 PISCES
♔98122654 WHITE CHESS KING
♕98132655 WHITE CHESS QUEEN
♖98142656 WHITE CHESS ROOK
♗98152657 WHITE CHESS BISHOP
♘98162658 WHITE CHESS KNIGHT
♙98172659 WHITE CHESS PAWN
♚9818265A BLACK CHESS KING
♛9819265B BLACK CHESS QUEEN
♜9820265C BLACK CHESS ROOK
♝9821265D BLACK CHESS BISHOP
♞9822265E BLACK CHESS KNIGHT
♟9823265F BLACK CHESS PAWN
♠98242660&spades;BLACK SPADE SUIT
♡98252661 WHITE HEART SUIT
♢98262662 WHITE DIAMOND SUIT
♣98272663&clubs;BLACK CLUB SUIT
♤98282664 WHITE SPADE SUIT
♥98292665&hearts;BLACK HEART SUIT
♦98302666&diams;BLACK DIAMOND SUIT
♧98312667 WHITE CLUB SUIT
♨98322668 HOT SPRINGS
♩98332669 QUARTER NOTE
♪9834266A EIGHTH NOTE
♫9835266B BEAMED EIGHTH NOTES
♬9836266C BEAMED SIXTEENTH NOTES
♭9837266D MUSIC FLAT SIGN
♮9838266E MUSIC NATURAL SIGN
♯9839266F MUSIC SHARP SIGN
♰98402670 WEST SYRIAC CROSS
♱98412671 EAST SYRIAC CROSS
♲98422672 UNIVERSAL RECYCLING SYMBOL
♳98432673 RECYCLING SYMBOL FOR TYPE-1 PLASTICS
♴98442674 RECYCLING SYMBOL FOR TYPE-2 PLASTICS
♵98452675 RECYCLING SYMBOL FOR TYPE-3 PLASTICS
♶98462676 RECYCLING SYMBOL FOR TYPE-4 PLASTICS
♷98472677 RECYCLING SYMBOL FOR TYPE-5 PLASTICS
♸98482678 RECYCLING SYMBOL FOR TYPE-6 PLASTICS
♹98492679 RECYCLING SYMBOL FOR TYPE-7 PLASTICS
♺9850267A RECYCLING SYMBOL FOR GENERIC MATERIALS
♻9851267B BLACK UNIVERSAL RECYCLING SYMBOL
♼9852267C RECYCLED PAPER SYMBOL
♽9853267D PARTIALLY-RECYCLED PAPER SYMBOL
♾9854267E PERMANENT PAPER SIGN
♿9855267F WHEELCHAIR SYMBOL
⚀98562680 DIE FACE-1
⚁98572681 DIE FACE-2
⚂98582682 DIE FACE-3
⚃98592683 DIE FACE-4
⚄98602684 DIE FACE-5
⚅98612685 DIE FACE-6
⚆98622686 WHITE CIRCLE WITH DOT RIGHT
⚇98632687 WHITE CIRCLE WITH TWO DOTS
⚈98642688 BLACK CIRCLE WITH WHITE DOT RIGHT
⚉98652689 BLACK CIRCLE WITH TWO WHITE DOTS
⚊9866268A MONOGRAM FOR YANG
⚋9867268B MONOGRAM FOR YIN
⚌9868268C DIGRAM FOR GREATER YANG
⚍9869268D DIGRAM FOR LESSER YIN
⚎9870268E DIGRAM FOR LESSER YANG
⚏9871268F DIGRAM FOR GREATER YIN
⚐98722690 WHITE FLAG
⚑98732691 BLACK FLAG
⚒98742692 HAMMER AND PICK
⚓98752693 ANCHOR
⚔98762694 CROSSED SWORDS
⚕98772695 STAFF OF AESCULAPIUS
⚖98782696 SCALES
⚗98792697 ALEMBIC
⚘98802698 FLOWER
⚙98812699 GEAR
⚚9882269A STAFF OF HERMES
⚛9883269B ATOM SYMBOL
⚜9884269C FLEUR-DE-LIS
⚝9885269D OUTLINED WHITE STAR
⚞9886269E THREE LINES CONVERGING RIGHT
⚟9887269F THREE LINES CONVERGING LEFT
⚠988826A0 WARNING SIGN
⚡988926A1 HIGH VOLTAGE SIGN
⚢989026A2 DOUBLED FEMALE SIGN
⚣989126A3 DOUBLED MALE SIGN
⚤989226A4 INTERLOCKED FEMALE AND MALE SIGN
⚥989326A5 MALE AND FEMALE SIGN
⚦989426A6 MALE WITH STROKE SIGN
⚧989526A7 MALE WITH STROKE AND MALE AND FEMALE SIGN
⚨989626A8 VERTICAL MALE WITH STROKE SIGN
⚩989726A9 HORIZONTAL MALE WITH STROKE SIGN
⚪989826AA MEDIUM WHITE CIRCLE
⚫989926AB MEDIUM BLACK CIRCLE
⚬990026AC MEDIUM SMALL WHITE CIRCLE
⚭990126AD MARRIAGE SYMBOL
⚮990226AE DIVORCE SYMBOL
⚯990326AF UNMARRIED PARTNERSHIP SYMBOL
⚰990426B0 COFFIN
⚱990526B1 FUNERAL URN
⚲990626B2 NEUTER
⚳990726B3 CERES
⚴990826B4 PALLAS
⚵990926B5 JUNO
⚶991026B6 VESTA
⚷991126B7 CHIRON
⚸991226B8 BLACK MOON LILITH
⚹991326B9 SEXTILE
⚺991426BA SEMISEXTILE
⚻991526BB QUINCUNX
⚼991626BC SESQUIQUADRATE
⚽991726BD SOCCER BALL
⚾991826BE BASEBALL
⚿991926BF SQUARED KEY
⛀992026C0 WHITE DRAUGHTS MAN
⛁992126C1 WHITE DRAUGHTS KING
⛂992226C2 BLACK DRAUGHTS MAN
⛃992326C3 BLACK DRAUGHTS KING
⛄992426C4 SNOWMAN WITHOUT SNOW
⛅992526C5 SUN BEHIND CLOUD
⛆992626C6 RAIN
⛇992726C7 BLACK SNOWMAN
⛈992826C8 THUNDER CLOUD AND RAIN
⛉992926C9 TURNED WHITE SHOGI PIECE
⛊993026CA TURNED BLACK SHOGI PIECE
⛋993126CB WHITE DIAMOND IN SQUARE
⛌993226CC CROSSING LANES
⛍993326CD DISABLED CAR
⛎993426CE OPHIUCHUS
⛏993526CF PICK
⛐993626D0 CAR SLIDING
⛑993726D1 HELMET WITH WHITE CROSS
⛒993826D2 CIRCLED CROSSING LANES
⛓993926D3 CHAINS
⛔994026D4 NO ENTRY
⛕994126D5 ALTERNATE ONE-WAY LEFT WAY TRAFFIC
⛖994226D6 BLACK TWO-WAY LEFT WAY TRAFFIC
⛗994326D7 WHITE TWO-WAY LEFT WAY TRAFFIC
⛘994426D8 BLACK LEFT LANE MERGE
⛙994526D9 WHITE LEFT LANE MERGE
⛚994626DA DRIVE SLOW SIGN
⛛994726DB HEAVY WHITE DOWN-POINTING TRIANGLE
⛜994826DC LEFT CLOSED ENTRY
⛝994926DD SQUARED SALTIRE
⛞995026DE FALLING DIAGONAL IN WHITE CIRCLE IN BLACK SQUARE
⛟995126DF BLACK TRUCK
⛠995226E0 RESTRICTED LEFT ENTRY-1
⛡995326E1 RESTRICTED LEFT ENTRY-2
⛢995426E2 ASTRONOMICAL SYMBOL FOR URANUS
⛣995526E3 HEAVY CIRCLE WITH STROKE AND TWO DOTS ABOVE
⛤995626E4 PENTAGRAM
⛥995726E5 RIGHT-HANDED INTERLACED PENTAGRAM
⛦995826E6 LEFT-HANDED INTERLACED PENTAGRAM
⛧995926E7 INVERTED PENTAGRAM
⛨996026E8 BLACK CROSS ON SHIELD
⛩996126E9 SHINTO SHRINE
⛪996226EA CHURCH
⛫996326EB CASTLE
⛬996426EC HISTORIC SITE
⛭996526ED GEAR WITHOUT HUB
⛮996626EE GEAR WITH HANDLES
⛯996726EF MAP SYMBOL FOR LIGHTHOUSE
⛰996826F0 MOUNTAIN
⛱996926F1 UMBRELLA ON GROUND
⛲997026F2 FOUNTAIN
⛳997126F3 FLAG IN HOLE
⛴997226F4 FERRY
⛵997326F5 SAILBOAT
⛶997426F6 SQUARE FOUR CORNERS
⛷997526F7 SKIER
⛸997626F8 ICE SKATE
⛹997726F9 PERSON WITH BALL
⛺997826FA TENT
⛻997926FB JAPANESE BANK SYMBOL
⛼998026FC HEADSTONE GRAVEYARD SYMBOL
⛽998126FD FUEL PUMP
⛾998226FE CUP ON BLACK SQUARE
⛿998326FF 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文档对象模型

  • 有且仅有一个根节点

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

  • 子节点数量不限

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

  1. 获取指定id值的节点的值

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

  2. 获取指定name值的所有节点

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

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

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

  4. 修改指定标签的内容

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

  5. 修改指定标签的样式

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

  6. 新建标签

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

  7. 删除节点

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

  8. 替换节点

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

3.5.2 窗口事件和表单事件

  1. 窗口事件

    仅在body和frameset元素中有效

    <body onload="响应方法"></body>

  2. 表单元素事件

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

  3. 鼠标事件

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

  4. 键盘事件（event）

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

  5. 事件冒泡

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

  6. 事件捕获

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

    先父后子。

3.5.3 BOM操作

  1. screen屏幕对象

  2. location定位

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

  3. history浏览器历史

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

  4. navigator导航

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

  5. 存储数据localStorage

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

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

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

  6. 存储会话sessionStorage

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

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

  7. 计时操作

    ●周期性定时器setInterval

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

    ●停止计时器clearInterval

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

    ●一次性定时器setTimeout

    setTimeout(执行语句/方法名,时间周期单位毫秒);
FisrtBqy
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端方向-学习指路
Ellie棒棒哒的博客
03-30 462
只要能看到的，不管是 app，小程序，pc端，都是前端做的 前后端分离模式下，只需要从服务器获取数据，展示到页面， 或者把客户端获取到的数据传递给服务器，属于应用层和交互层 后台需要处理数据，需要会算法 通过算法考察思维逻辑 ...
前端学习 html css js 算法.zip
01-05
前端学习 html css js 算法前端学习 html css js 算法前端学习 html css js 算法 前端学习 html css js 算法前端学习 html css js 算法前端学习 html css js 算法 前端学习 html css js 算法前端学习 html css js ...
前端学习方向
abcde3326的博客
04-12 310
1. 通读权威指南。不要瞎读，外面烂书太多。倒不是说烂书学不到知识，它们之所以是烂书，是因为它们缺乏一种“正确的价值观”。什么是卓越的方法，什么是优雅的代码，这些都是有“品味”和“格调”的。由于我近期看的书不多，也不想为别人打广告，所以我只能给出一个简单但绝对不会错的答案：看《权威指南》。 2. 多做自己想做的练习，俗称“造轮子”。比如自己做一个简历网站或是博客，把想用的技术都用...
2024最新版前端学习路线图--Vue
最新发布
2401_84434331的博客
06-18 505
Vue.js基础1、Vue实例2、文本与属性绑定3、计算属性computed4、侦听器watch5、Class与Style绑定6、条件渲染7、列表渲染8、事件处理9、表单输入绑定10、Vue实例生命周期11、开发Vue插件和模板过滤器12、自定义指令13、Vue组件系统14、Vue过渡和动画15、VueRouter路由系统16、组件通信17、axios请求库18、VueCLI脚手架工具19、VueDevTools调试工具20、在Vue中操作DOMwebpack。
适合普通大学生的前端开发学习路线
帅地
04-12 4万+
大家好，我是帅地。 假如你没有明确的目标，或许可以按照我说的学习路线来学习一波，我写的每一份学习路线，不会很全面，因为我认为，东西列的太多，反而不利于新手的学习，所以我列举的，都是比较必要的知识，当你把这些知识学了的时候，我相信你不需要别人的学习路线，也能知道自己接下来需要学啥了。 虽然帅地的技术栈是后端开发，不过后端和前端显然是一对的，还是经常要和前端打交道，所以在之前也学习过不少前端的知识，下面总结的这套前端学习路线，是我参考了别人大量的学习经历 + 自己的思考 + 咨询前端大佬后提取出来的，可能不会像
前端工程师的学习方向
qq_35650896的博客
07-03 728
这是我的第一篇博客，之前一直想写，总是感觉麻烦就被搁置了。到后来越发意识到其重要性。 第一篇给自己一个技术路线吧。参照网上的给自己一个自检清单，算是给自己一个技术路线。 javascript基础 javascript前端重中之重 变量和类型 1.Javascript 规定国几种语言类型 2.Javascript 对象的底层数据结构是什么 3.Symbol 类型在实际开发中的应用，可手动实现一...
前端基础三剑客HTML，css，js
04-21
前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现UI/UX设计的各种效果，从而让用户获得更好的使用体验。它主要负责页面的展示样式...
前端 js html css 基础教程
08-17
本书为电子版,任何终端下阅读, 欢迎大家下载阅读~~~~~~
前端学习 html,css,js.zip
01-05
前端学习 html,css,js前端学习 html,css,js前端学习 html,css,js前端学习 html,css,js 前端学习 html,css,js前端学习 html,css,js前端学习 html,css,js前端学习 html,css,js 前端学习 html,css,js前端学习 html,css,...
前端学习html+css+js.zip
01-05
前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端...
免费永久域名
09-23
MyServer是一款能够让你的计算机变成服务器、让你能在本地调试微信代码的神器 你可以直接在自己pc上发布网站、本地调试微信代码再也不需要服务器了，这一切都是免费的
前端学习方向路线
betty_grant的博客
07-03 382
快速入门 生态圈、io.js、Linux/windows/OS环境配置、REPL环境和控制台程序、异步编程、模块化、模块管理工具、非阻塞IO ###核心模块 全局对象global、process、console、util、事件驱动、事件发射器，加密解密、路径操作、序列化和反系列化、文流操作、http、socket.IO ###web开发 http协议、请求响应、关系型数据库数据操作、非关系型数据操作、原生开发web应用程序 ###快速开发框架 Express框架、koa框架等 ...
前端学习者应该知道的前端学习方向
m0_59553217的博客
12-09 1536
大家好 我叫小杨。今天我给大家介绍一下如果你是一个前端学习者，你应该怎么学，学什么！ 一、前端基础 1.HTML、2.CSS、3.JavaScript(DOM、BOM) 什么是HTML？ HTML就是一个网站的骨架 什么是CSS？ CSS就像是人穿的衣服，你使用CSS就像再给HTML穿衣服，这样才能让我们网页更加好看 什么是JavaScript？ JavaScript就像是人在运动，如果我们的网页你使用了JavaScript的话，你的网页就能让和用户体验更加的舒服 首先你得有一个好的基础才
web前端学习路线
weixin_41780944的博客
09-12 1700
首先分享一下我的经验，想做好一件事，必须要花费一些功夫，然后是多学、多思、多练、多交流、多总结，发现自己的问题，然后一定要克服，在状态不好的情况 下，往往要及时调整。新手学习前端的话，一定要想想为什么要学习它，是出于一种什么心态，然后定位好自己，多向大牛请教，多教一些没有自己水平高的人，那 样往往能让自己成长的快，切勿急躁。初学可以看一些入门视频教程，之后可以买一些书，做一些小项目，要学会投资，分...
03.07毕业设计前工作感悟
03-07 156
距离毕业设计只有20天了，梳理一下实习这段时间的感悟，列出要做事情清单，deadline来了。 1. 我想做一个个人网站，或者给我们团队或者小组做一些介绍页面。怎么做？搜索发现要学习：HTML、CSS。 2. 发现一个网站设计的好漂亮，交互真赞，动画效果真好。我想在我自己网站上也放上，可是我看不懂它的代码？搜索发现要学习：交互视觉、CSS3 动画等。 3....
2023版完整版web前端学习路线图（超详细自学路线）
热门推荐
千锋教育
09-09 4万+
跟着路线图认真坚持学习从前端小白到大神不是梦，0基础看这一篇足矣！前端计算机常识 ➾ html+css基础 ➾ html+css 项目实践JavaScript基础+进阶 ➾ Ajxa ➾ JavaScript应用项目实践 ➾ Node.js ➾ MongoDB项目实践Vue&React开发：Vue2.0+3.0 ➾ Vue项目实践 ➾ 数据可视化项目 ➾ React ➾ React项目实战 ➾ UmiJS项目公众号&小程序开发。
2020最新版前端学习路线图--Vue.js项目实战
CZ-001的博客
01-10 3455
黑马程序员前端学习路线图中第五阶段的学习是Vue.js项目实战的学习：主要介绍了前端学习路线图Vue.js项目实战的学习目标，前端学习路线图Vue.js项目实战的市场价值，前端学习路线图Vue.js项目实战的重点知识。前端学习路线图中的Vue.js项目实战学习视频可以在黑马程序员视频库中找到自学教程。 前端学习路线图中Vue.js项目实战的技术要点：Vue.js基础；webpack；社交媒体-黑马...
Web前端基础：HTML、CSS、JS详解
Web前端基础包括HTML、CSS和JS三部分。HTML是超文本标记语言的缩写，是编写网页的基础语言，用来定义网页的结构和内容。CSS是层叠样式表的缩写，用来控制网页的样式和布局。JS是JavaScript的缩写，是一种脚本语言，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值