1. 首页
  2. 文章中心
  3. Java

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

60 阅读 0 评论
我是靠谱客的博主 懵懂超短裙，最近开发中收集的这篇文章主要介绍前端基础（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>
    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(执行语句/方法名,时间周期单位毫秒);

最后

以上就是懵懂超短裙为你收集整理的前端基础（HTML、CSS、JS）1 HTML2 CSS3 JavaScript的全部内容，希望文章能够帮你解决前端基础（HTML、CSS、JS）1 HTML2 CSS3 JavaScript所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

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

相关文章

The SplFileObject class
The SplFileObject class
2099年的flag——writeup
2099年的flag——writeup
hctf2016-fheap程序简介思路EXP总结
hctf2016-fheap程序简介思路EXP总结
HCTF 2016 fheap
HCTF 2016 fheap
前端基础（HTML、CSS、JS）1 HTML2 CSS3 JavaScript
前端基础（HTML、CSS、JS）1 HTML2 CSS3 JavaScript
hctf 2016 write up签到题2099年的flagRESTFULgiligili兵者多诡
hctf 2016 write up签到题2099年的flagRESTFULgiligili兵者多诡
数组中重复的数字
数组中重复的数字
一个可以绑定多个天翼云网盘的目录列表程序，支持视频播放
一个可以绑定多个天翼云网盘的目录列表程序，支持视频播放

评论列表共有 0 条评论

立即
投稿
返回
顶部