<!--
网页是网站中的一页(网页是网站的基本元素),通常是html格式的文件。它是通过浏览器来阅读
html指的是超文本标记语言(html不是一种编程语言,而是一个标记语言)
超文本两层含义(1.他可以加入图片,声音,动画,多媒体内容,超越了文本限制
2.它可以从一个文件跳转到另一个文件,超级链接文本)
浏览器内核显示页面用的
Web标准主要包括结构(主要html),表现(网页的外观样式,主要指的是CSS),行为(主要写javascript)三个方面
结构写到html 表现写到css 行为写到javascript
html标签是由尖括号包围的关键词,例如<html> html标签通常是成对出现的,例如<html> </html>我们称为双标签 第一个标签是开始标签 第二个标签是结束标签
有些特殊的标签必须单个标签,例如<br/>,我们称为单标签
双标签分为两类
包含关系 <head>
<title></title>
</head>
并列关系 <head></head>
<body></body>
<html></html>页面中最大的标签,我们称为根标签
<head></head>文档的头部,我们必须要设置的标签
<title></title>文档的标题,让自己网页拥有一个属于自己的标题
<body></body>文档的主题,页面内容基本放在body里面的
-->
<!DOCTYPE html>
<!-- !DOCTYPE不是一个HTML标签,而是文档类型声明标签 这句话意思:当前页面采用的是HTML5版本来显示网页-->
<html lang="en">
<!-- lang用于定义当前文档显示的语言 "en"定义语言为英语 "zh-CN"定义语言为中文 -->
<head>
<meta charset="UTF-8">
<!-- <meta charset="UTF-8">必须写,否则会出现乱码的情况 字符集:以便计算机能够识别和存储各种文字 其中"UTF-8"也被称为万国码 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个HTML网页</title>
<!-- 表格用于显示,展示数据
<table></table>用于定义表格的标签
<tr></tr>标签用于定义表格的行,必须嵌套在<table></table>标签中
<th></th>一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示
<td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>标签中
align(属性名) 属性值 left center right 规定表格相对周围元素的对齐方式
border 1或"" 规定表格单元是否拥有边框,默认为"",表示没有边框
cellpadding 规定单元边沿与其内容之间的空白,默认1像素
cellspacing 规定单元格之间的空白,默认2像素
width 规定表格的宽度 height规定表格的长度
因为表格可能很长,为了更好表示表格的语义,可以将表格分割成表格头部,表格主题两部分
<thead></thead>用于定义表格头部 <thead>内部必须拥有<tr>标签,一般位于第一行
<tbody></tbody>用于定义表格主体,主要用于放数据本题
以上标签都放在<table></table>标签中
合并单元格
跨行合并 rowspan="合并单元格的个数" 最上测单元格为目标单元格
跨列合并colspan="合并单元格个数" 最左侧单元格为目标单元格
列表标签最大特点整齐整洁有序,他的布局会更加自由和方便
无序列表 各个列表项之间没有顺序级别之分,是并列的
<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
<ul>
<li>列表项1</li>
<li>列表项2</li>
...
</ul>
有序列表
<o1>
<li>列表项1</li>
<li>列表项2</li>
...
</o1>
自定义列表
在html标签中,<dl>标签用于定义描述列表(或定义列表),该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用
dt和dd里面可以放任何标签
-->
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="500">
<tr><th>姓名</th> <th>性别</th></tr>
<tr><td>刘德华</td> <td>18</td></tr>
<tr><td>郭富城</td> <td>19</td></tr>
<tr><td>张学友</td> <td>20</td></tr>
<tr><td>黎明</td> <td>18</td></tr>
</table>
</head>
<body>
键盘敲烂,月入过万<br/>
<!--
在html中,一个完整的表单通常由表单域,表单控件(表单元素)和提示信息3个部分组成
<from></from> 表单域是一个包含表单元素的区域
<form action ="url地址" method="提交方式" name="表单域名称">
action用于指定接受并处理表单数据的服务器程序的url地址
method(get/post)用于设置表单数据的提交方式
name用于指定表单名称,以区分同一个页面中的多个表单域
-->
<from action="xxx.php" method="get">
<!-- text文本框 用户可以输入任意文字 -->
用户名:<input type="text" name="username" value="请输入用户名"><br/>
<!-- password密码框 用户看不见输入的密码 -->
密码:<input type="password" name="psd"><br/>
<!-- radio 单选按钮 这里性别单选按钮必须有相同的名字name -->
性别: 男 <input type="radio" name="sex" id="sex"> 女 <input type="radio" name="sex"><br/>
<label for="sex">男</label><br/>
<!--
当点击<label>标签内文本时,浏览器就会自动将光标转到或者选择对应的表单元素上,用来增加用户体验
<label> 标签的for属性应当与相关元素的id相同
-->
<!-- checkbox 复选框 可以实现多选 -->
爱好:吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby"> 打怪兽<input type="checkbox" name="hobby"><br/>
<input type="submit" value="免费注册">
<!--
type属性值 button定义可以点击的按钮(多数情况下,用于通过javaScript启动脚本)
file定义字段和浏览按钮,供文件上传
image定义图像形式的提交按钮
reset定义重置按钮,按下按钮会清空表单的数据
hidden定义隐藏的输入字段
除type外,<input>标签还有很多属性
name 用户自定义 定义input元素的名称 name要求单选按钮和复选框要有相同的name值
value 用户自定义 规定input元素的值
checked(checked) 规定input元素首次加载时应当被选中 主要针对单选按钮和复选框,主要打开页面,就要默认选中某个表单元素
maxlength(属性值:正整数) 规定输入字段中的字符的最大长度
-->
<!--
<select>表单元素(有多个选项供用户选择) <select>中包含至少包含一对<option> 在<option>定义selected="selected"时,当前选项为默认选中项
-->
位置<select >
<option>北京</option>
<option selected="selected">上海</option>
<option>深圳</option>
<option>广州</option>
</select><br/>
<!-- <textarea>标签可以轻松地创建多行文本输入框
cols="每行中的字符数" rows="显示的行数"
-->
自我介绍<textarea rows="3" cols="20">
作者很懒,什么都没有留下
</textarea>
</from>
</body>
</html>
<!-- HTML常用标签
标题标签 <h1> - <h6> 作为标题的使用,并且依据重要性递减 加了标题的文字会变大变粗,字号也会依次变大 一个标题独占一行
<p>标签用于定义段落,可以把HTML文档分割成若干个段落 文本在一个段落中根据浏览器的大小自动换行,段落和段落之间保有空袭
文本格式化标签 加粗<strong></strong>或者<b></b> 推荐使用<strong>语义更强烈
倾斜<em></em>或者<i></i> 推荐使用<em>语义更强烈
删除线<del></del>或者<s></s> 推荐使用<del>语义更强烈
下划线<ins></ins>或者<u></u> 推荐使用<ins>语义更强烈
<div>和<span>是没有语义的,他们就是一个盒子,用来装内容和布局的 <div>一行只能放一个 大盒子 ; <span>一行可以放很多个 小盒子
<img src = "图像url" > 图像标签 src是<img>标签的必须属性,它用于指定图像文件的路径和文件名
alt替换文本,图像不能显示的文字 title提示文本,鼠标放到图像上,显示文字
width 设置图像高度 height设置图像高度 border设置图像的边框粗细
目录文件夹:就是普通的文件夹,里面存在了我们页面相关的素材
根目录:打开目录文件夹的第一层就是根目录
相对路径 图片相对于html页面的位置
如果图片和HTML文件同一级则 <img src="xxx.jpg"/> 下一级目录 <img src="images/xxx.jpg"/> 上一级目录 <img src=" ../xxx.jpg"/>
链接的语法格式 <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href 用于指定链接目标的url地址 ; target指定链接页面的打开方式 _self为默认值 _blank在新窗口的打开方式
外部链接 a href="http://" 内部链接:网站内部页面之间的链接,直接连接内部页面即可 <a href="index.html">首页</a>
空链接 如果当时没有确定链接目标时, <a href="#">首页</a> 下载链接:如果href里面地址放一个文件或者压缩包,会下载这个文件
网页元素链接:网页中各种网页元素,如文本,图像,音频等都可以添加超链接
锚点链接:点击这个链接,快速定位到页面的某个位置 在href属性中,设置属性值为#名字形式 如<a href="one">第一</a> 找到目标位置标签,里面添加一个id属性 <h3 id="one">第一介绍</one>
html页面中,一些特殊的符号不方便直接使用,此时我们就可以用下面字符来代替
(空格符) <(<小于号) >(>大于号)
-->
<!--
CSS网页美容师 有时候我们称CSS样式表或级联样式表
CSS主要设置HTML页面中的文本内容(字体 大小 对齐方式等),图片的外形(宽度,边距),以及版面的布局和外观显示样式
h1(选择器) { color(属性):red(值) ; font-size:25px}
CSS规则由两个主要的部分构成:选择器以及一条或多条声明
选择器是用于指定HTML标签,花括号是对该对象设置的具体样式
属性和属性值以键值对形式出现,属性和属性之间用英文 : 分开,多个键值对用英文 ; 进行区分
标签选择器可以把某一类标签选择出来,比如<div>标签和所有的<span>标签 优点：能快速为页面中同类型的标签统一设置样式 缺点:不能色痕迹差异化样式
类选择器 .类名{属性1:属性值1 ; 属性2:属性值2} 在标签class属性写多个类名 每个类名中间必须空格分开
<title>第二页面</title>
<style>
.red{
color:red;
}
.ziti{
font-size :25px;
}
</style>
<body>
<div class="red ziti">亚瑟</div>
</body>
多类名开发应用场景:可以把标签元素相同的提取到一个类中,这些标签可以先调用公共的类,然后再调用自己的类
id选择器: #id{ 属性:属性值} HTML元素以id属性来设置,CSS中id选择器以"#"来定义 id属性只能在HTML文档只能调用一次
id选择器和类选择器区别 id选择器好比人和身份证号码 类选择去好比人和人的称呼
通配符选择器 *定义,他表示选取页面中所有元素(标签) *{属性: 属性值} 通配符不需要调用,自动给所有元素使用样式
特殊情况下使用,清楚所有的元素标签的内外边距 *{ margin : 0 ; padding : 0 ; }
CSS字体系列 div{font-family:"微软雅黑",Arial}
各字体之间必须用英文逗号相关 一般情况下,如果有多个空格隔开的单词,加引号
font-size : 20px px像素 谷歌浏览器16px 可以给body指定整体页面文字大小
font-weight :normal(正常的字体,相当于number为400) | bold(粗体 相当于number为700) | bolder(特粗体)| 100(直接赋值)
font-family 规定元素的字体系列。 'Microsoft yahei'
font-style:normal; normal默认值,浏览器会显示标准的字体样式 italic浏览器会显示斜体的样式
复合属性(简写方式,简约代码) font: font-style font-weight font-size/line-height font-family 必须按顺序写,不能更改顺序,各个属性空格隔开
不需要设置的属性可以省略,但必须保留font-size和font-family属性,否则则不起作用
文本颜色 div{color : red} 预定义的颜色值red green blue ; 十六进制#ff0000 ; RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)
文本对齐 text-align: center; left左对齐 right右对齐 center居中对齐
装饰文本 text-decoration:underline; underline下划线 ; none默认没有装饰线;overline上划线;line-through删除线;
文本缩进 text-indent属性用来指定文本第一行缩进 text-indent:10px; text-indent:2em; em是相对单位,为当前元素1个文字的大小
行间距(行与行的距离) line-height:26px;
CSS引入方式
内部样式表;这种也常叫做嵌入式引用
<style></style>标签理论可以放到任何位置,但一般放到<head>标签中;通过这种方式可以控制当前整个页面的元素样式设置;代码结构清晰,但并没有实现结构和样式完全分离
行式样式表 在元素标签内部的style定义CSS样式
<div style="color:red;font-size:12px;">智者不如爱河,寡王一路硕博</div>
外部样式表,通常也被称为外链式或链接式引入
新建一个.CSS的样式文件,把CSS代码都写在此文件中 在HTML页面中,使用<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径"> rel定义当前文档与链接文档之间的关系 stylesheet表示被链接的文档是一个样式表文件 href样式表文件的url
内xxx 行xxx 外xxx 三者区别
缺点 结构样式混写 没有彻底分离 需要引入
控制范围 控制一个标签 控制一个页面 控制多个页面
调试工具(chrome)
Ctrl+滚轮可以放大和缩小开发者工具的大小
左边是HTML元素结构,右边是CSS样式(这样式可以改动数值和查看颜色)
Ctrl + 0 复原浏览器大小
快速生成HTML结构语法
生成标签 直接输入标签名,按下tab键即可 比如div然后tab键,就可以生成<div></div>
如果想生成多个相同标签,加上*就可以了, 比如div*3就可以生成3个div
如果有父子集关系的标签,可以用> 比如ul>li就可以了
如果有兄弟关系的标签 用+就可以了 不如div+p
如果生成类名或者id名字的,直接写.demo或者#two tab键就可以了
如果生成div类是有顺序的,可以用自增符号$
快速生成CSS样式的语法(采取简写形式即可)
比如 w200 就可以生成 width:200
比如 lh26 就可以生成 line-height:26px
在CSS中,选择器类型分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上的
后代选择器 元素1(ul) 元素2(li) {样式声明} 元素1和元素2中间用空格隔开 元素2可以是儿子,也可以是孙子,只要是元素1的后代即可
子选择器 元素一>元素二{样式声明} 元素二必须是亲儿子,
并集选择器 元素一(ul),元素二(div){样式声明} 元素一和元素二逗号(逗号可以理解为和的意思)隔开
伪类选择器 用于向某些选择器添加特殊效果; 伪类选择器最大特点是使用冒号:表示
链接伪类选择器 a:link 选择所有未被访问的链接 a:visited 选择所有已被访问的链接 a:hover 选择鼠标指针位于其上的标签 a:active鼠标按下未弹起的链接
链接伪类选择器顺序声明 :link - :visited - :hover - :active（记忆法 lv包包 hao）
:focus伪类选择器用于获取焦点(焦点就是光标)的表单元素 input：focus{background:red}
元素显示模式,HTML元素一般分为块元素(<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>)和行内元素(<a>,<strong>,<b,i,u>,<del,s,ins,u>,<span>)两种类型
块元素比较霸道,自己独占一行;高度宽度外边距以及内边距都可以控制 容器可以包含任何标签 文本类的元素不能使用快件元素,<p><h1-h6>标签主要用于存放文字,
行内元素一行可以显示多个,高宽直接设置是无效的,行内元素只能容纳文本和其他行内元素 链接<a>不能再放链接
行内块元素<img/> <input/> <td> 他们同时具有块元素和行内元素的特点
和相邻的行内块元素放在一行上 他们之间有空白空隙 一行可以放多个 高度行高外边距以及内边距都可以控制
元素显示模式转换 转换为块元素 display:block; 转换为行内元素 display:inline; 转换为行内块元素 display:inline-block;
一个小工具的使用 snipaste F1截图 F3桌面置顶显示 点击图片,alt可以取色(shift切换取色模式) esc取消图片显示
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全能选手侧边栏</title>
<style>
a {
display: block;
width: 230px;
height: 40px;
background-color: #55585a;
font-size: 14px;
color: #fff;
text-decoration: none;
text-indent: 2em;
line-height: 40px;
}
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">上单 剑魔</a>
<a href="#">打野 人马</a>
<a href="#">中路 沙皇</a>
<a href="#">下路 女警</a>
<a href="#">辅助 巴德</a>
</body>
</html> -->
<!--
单行文字垂直居中原理 行高的上空隙和下空袭把文字挤到中间 如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,文字会偏下
background-color:颜色值 一般情况下元素背景颜色默认值transparent(透明色)
背景图片 background-image: none | url none无背景图,默认的 url绝对或相对地址为背景图像
背景平铺 background-repeat: repeat|no-repeat|repeat-x|repeat-y repeat背景图像在纵向和横向平铺 repeat-x背景在纵向平铺
背景图像位置 background-position: x y; 参数代表x坐标 y坐标 可以使用方位名词或者精确单位
length 百分数|由浮点数字和单位标识符组成的长度值 参数是精确单位 如果只指定一个数值,则该数值一定是x坐标,另一个默认垂直居中
position top|center|botton|left|center|right 参数是方位名词,这两个值前后顺序无关 比如left top 和top left效果一致 ;如果只指定一个方位名词,另一个值省略,则第二个值默认居中对齐
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是x坐标,第二个值y坐标
图像背景固定 background-attachment 后期可以制作视差滚动效果 background-attachment:scroll | fixed scroll背景图像是随对象内容滚动 fixed背景固定
背景复合写法 background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 简写属性时,没有固定的书写顺序
背景半透明色 background: rgba(0,0,0,0.3); 最后一个参数alpha透明度,取值范围在0-1之间 背景半透明色是指盒子背景半透明色,里面内容不受影响
相同选择器设置相同样式冲突(遵循就近原则),样式不冲突,不会层叠
CSS继承:子标签会继承父标签的某些样式,如文本的颜色和字号,text-,font-,line-
body{font:12px/1.5 Microsoft YaHei}行高可以跟单位也可以不跟单位 子元素没有设置行高,则会继承父元素行高的1.5 此时子元素的行高是:当前子元素的文字大小*1.5
选择器的优先级 继承或者(*) 0000 元素选择器0001 类选择器,伪类选择器0010 ID选择器0100 行内选择器style="" 1000 !important选择器权重无限大
继承的权重是0,该元素没有直接选中,不管父元素权重多高,子元素的权重都是零 a链接默认有一个样式,蓝色的+下划线
复合选择器权重会叠加,但永远不会有进位 ul li 权重 0001+0001=0002 .nav a -> 0,0,1,0
CSS盒子模型本质是一个盒子,封装了HTML元素,它包括边框,外边框,内边框和实际内容
border(边框) border : border-width(边框粗细,一般单位px) || border-style(边框样式) || border-color(边框颜色)
border-style(边框样式) solid边框实线 dashed虚线边框 dotted点线边框
border : 1px solid red; 边框简写没有顺序 也可以分开写 border-top:1px solid red
border-collapse:collapse;表示相邻边框合在一起 collapse合并的意思
padding(内边框)边框和内容直接的距离 padding-left(左内边框) padding-right(右内边框) padding-top(上内边框) padding-bottom(下内边框)
padding:5px; 1各值代表上下左右都是5像素的内边框 padding:5px,10px;代表上下内边框是5,左右内边框是10
padding:5px 10px 20px 3各值,代表上内边框是5,左右边框是10,下边框是20 padding:5px 10px 20px 30px 上右下左顺时针
如果盒子已经有了高度和宽度,再指定内边框会撑大盒子,如果保证盒子跟效果图大小一致,则让width/height减去多出来的内边距大小
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新浪导航</title>
<style>
.nav {
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
}
.nav a {
display: inline-block;
height: 41px;
padding: 0 20;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.nav a:hover {
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">移动客户端</a>
<a href="#">手机新浪</a>
<a href="#">微博</a>
<a href="#">联系我们</a>
</div>
</body>
</html> -->
<!--
margin(外边框 盒子和盒子之间的距离)
margin-left左外边框 margin-right右外边框 margin-top上外边框 margin-bottom下外边框
外边框可以让盒子水平居中但要满足两个条件(盒子必须有宽度,盒子左右的外边框都设置为auto) margin-left:auto; margin-right:ayto; margin:auto;margion:0 auto
上面一行方法是让块级元素水平居中,行内元素或者行内块元素水平居中给父元素添加text-align:center即可
对于两个嵌套关系(父子关系)的块元素 父元素和子元素都有上外边距(margin-top) 此时父元素会塌陷较大的外边距值
解决方法 可以在父元素定义上边框(border-top) / 也可以在父元素定义上内边距 / 可以在父元素添加overflow:hidden
很多网页元素默认带内外边距,而且不同浏览器默认也不一样 消除内外边距 *{ padding:0; margin:0;}
行内元素为了照顾兼容性,尽量只设置左右内外边距,非要设置则要转换为块级和行内块元素就可以了
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阿伟失败的作品</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #f5f5f5;
}
a {
color: #333;
text-decoration: none;
}
.box {
width: 298px;
height: 350px;
background-color: #fff;
margin: 100px auto;
}
.box img {
width: 100%;
height: 240px;
}
.review {
height: 35px;
font-size: 14px;
padding: 0 30px;
}
.appraise {
font-size: 12px;
color: #b0b0b0;
padding: 0 28px;
}
.info {
font-size: 14px;
margin-top: 10px;
padding: 0 28px;
}
.info h4 {
display: inline-block;
font-weight: 400;
}
.info span {
color: #ff6700;
}
.info em {
font-style: normal;
color: #ebe4e0;
margin: 0 6px 0 15px;
}
</style>
</head>
<body>
<div class="box">
<img src="computer.webp" alt="">
<p class="review">Pro 14 增强版 i5 独显 - Win11</p>
<div class="appraise">来自117384232 的评价</div>
<div class="info">
<h4><a href="#">小米自营 Windows11</a></h4>
<em>|</em>
<span>4799元</span>
</div>
</div>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻快报</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 420px;
height: 163px;
border: 1px solid #ccc;
margin: 100px auto;
}
.box h3 {
height: 32px;
border-bottom: 1px dotted #ccc;
font-size: 14px;
font-weight: 400;
line-height: 32px;
padding-left: 15px;
}
li {
list-style: none;
}
.box ul li a {
font-size: 12px;
color: #666;
text-decoration: none;
}
.box ul li {
height: 23px;
line-height: 23px;
padding-left: 20px;
}
.box ul {
margin-top: 7px;
}
.box ul li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box">
<h3>人民日报</h3>
<ul>
<li><a href="#">【8点见】吉林长春迎来今冬首场强降雪</a></li>
<li><a href="#">【8点见】深圳大学一名员工坠亡？校方：系后勤餐厅员工 不是刑事案件</a></li>
<li><a href="#">【8点见】不妨尝试主动养老</a></li>
<li><a href="#">【8点见】西安有城管向商户收保护费？官方回应</a></li>
<li><a href="#">【8点见】洞庭湖底现大型神秘图案 官方：非古墓古城遗址</a></li>
</ul>
</div>
</body>
</html> -->
<!--
去掉li前面的项目符号(小圆点) list-style:none;
border-radius：length;属性用于设置元素的外边框圆角 ;参数可以是参数值或百分比形式;radius椭圆与边框交集形成圆角效果 ;
如果是正方形,想要设置一个值,把数值改成高度或宽度的一半即可,或者直接写50% 如果是个矩形,设置高度的一半即可
该属性是一个简写属性,可以跟四个值,分别代表左上角,右上角,右下角,左下角
也可以分开写:border-top-left-radius border-top-right-radius border-botton-left-radius border-botton-right-radius
给盒子添加阴影box-shadow:h-shadow v-shadow blur spread color inset; 黑子阴影不占用空间,不会影响其他盒子排列
h-shadow必须,水平阴影的值,允许负值 v-shadow必须,垂直阴影的值,允许负值 blur可选,模糊距离 spread可选,阴影的尺寸
color可选,阴影的颜色 inset可选,外部阴影转换为内部阴影 默认是外部阴影(outset),但不可以写这个词,否则导致阴影无效
标准流(普通流/文档流) 就是标签按照规定好默认方式排列
浮动流:可以改变元素标签默认的排列方式 应用:可以让多个块级元素一行内排列显示
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
选择器{float:属性值;} 属性值 none元素不浮动(默认值) left(元素向左浮动) right(元素向右浮动)
浮动的特性:1.脱离标准流的控制(浮)移动到指定位置(动),俗称脱标;2.浮动盒子不再保留原先的位置3.浮动的元素具有行内块元素特性
浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐
浮动布局注意点1.浮动和标准流的父盒子搭配2.浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流
为什么需要消除浮动? 子盒子浮动不占有位置,脱标,父盒子没有高度就为0,不会被撑开盒子
清除浮动的本质是清除浮动元素脱离标准流造成的影响 清除浮动策略:闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子
选择器{clear：属性值;} 属性值:left不允许左侧有浮动 right不允许右侧有浮动 both同时清楚左右两侧浮动的影响
额外标签法也称隔墙法,会在浮动元素末尾添加一个空的标签(缺点:添加许多无意义的标签,结构化较差) <div style="clear.both"></div>
清除浮动---父级添加overflow属性,将其属性值设为hidden ,auto或 scroll (缺点:无法显示溢出部分)
伪元素清除浮动 :after 方式是额外标签法的升级版,也是给父元素添加 由于IE6、7不支持after 兼容性问题
<style>
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1; 注释：IE6、7专有 兼容性
}
</style>
双伪元素清除浮动,也是给父元素添加 由于IE6、7不支持after 兼容性问题
<style>
.clearfix:before , .clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1; 注释：IE6，7专有 兼容性
}
</style>
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局案例1</title>
<style>
.box {
width: 1200px;
height: 460px;
background-color: pink;
margin: 0 auto;
}
.left {
float: left;
width: 230px;
height: 460px;
background: purple;
}
.right {
float: left;
width: 970px;
height: 460px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局案例2</title>
<style>
.box {
width: 1226px;
height: 615px;
background-color: pink;
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 615px;
background-color: purple;
}
.right {
float: left;
width: 992px;
height: 615px;
background-color: skyblue;
}
.right>div {
float: left;
width: 234px;
height: 300px;
background-color: pink;
margin-left: 14px;
margin-bottom: 14px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左大盒子</div>
<div class="right">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝轮播图</title>
<style>
* {
padding: 0;
margin: 0;
}
.tb-promo {
position: relative;
width: 520px;
height: 280px;
background-color: pink;
margin: 100px auto;
}
.tb-promo img {
width: 520px;
height: 280px;
}
.prev,
.next {
position: absolute;
top: 50%;
margin-top: -15px;
width: 20px;
height: 30px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 30px;
color: #fff;
text-decoration: none;
}
.prev {
left: 0;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.next {
right: 0;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.promo-nav {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 13px;
background: rgba(255, 255, 255, .3);
border-radius: 7px;
}
li {
list-style: none;
}
.promo-nav li {
width: 8px;
height: 8px;
float: left;
background-color: #fff;
border-radius: 50%;
margin: 3px;
}
.promo-nav .selected {
background-color: #ff5000;
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="tb.jpg" alt="">
<a href="#" class="prev"> < </a>
<a href="#" class="next"> > </a>
<ul class="promo-nav">
<li></li>
<li></li>
<li class="selected"></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html> -->
<!-- CSS书写的顺序
布局定位属性 dispaly/position/float/clear属性规定元素的哪一侧不允许其他浮动元素/visbility属性规定元素是否可见/overflow属性规定当内容溢出元素框时发生的事情
自身属性 width/height/margin/padding/border/background
文本属性color/font/txet-decoration对文本设置某种效果，如加下划线/text-align规定元素中的文本的水平对齐方式。/vertical-align属性设置元素的垂直对齐方式/white-space属性设置如何处理元素内的空白/break-word规定自动换行的处理方法
其他属性 content来插入生成内容/cursor规定要显示的光标的类型（形状）/border-radius/box-shadow/text-shadow/
浮动的盒子不会有外边距合并
定位也是在摆放盒子 定位=定位模式(用于指定一个元素在文档中的定位方式)+边偏移(决定元素的最终位置)
定位模式:static静态定位 relative相对定位 absolute绝对定位 fixed固定定位
边偏移：top :80px 顶端偏移量,定义元素相对其父元素上边线的距离
bottom :80px 底部偏移量,定义元素相对其父元素下边线的距离
left :80px 左侧偏移量,定义元素相对其父元素左边线的距离
right :80px 右侧偏移量,定义元素相对其父元素右边线的距离
静态定位static是元素的默认定位方式,无定位的意思 选择器{position:static;} 静态定位按照标准流特性改变位置,他没有边偏移
相对定位是元素移动位置的时候,是相对于他原来的位置来说的 选择器{position:relative;} 原来在标准流的位置继续占用,后面的盒子仍然以标准流的方式对待他(不脱标,继续保持原来位置)
绝对定位在移动位置的时候,是相对它祖先元素来说的 选择器{position:absolute;} 如果没有祖先元素或者祖先元素没有定位,则以浏览器标准为主
如果祖先元素有定位(相对 绝对 固定定位),则以最近一级有定位祖先元素为参考点移动位置 绝对定位不在占有原先的位置(脱标)
子绝父相 子集绝对定位的话,父级就要用相对定位
子集绝对位置,不会占有位置,可以放到盒子里面任何一个地方,不会影响其他的兄弟盒子 父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时,需要占有位置,因此父亲只能是相对定位
固定定位是元素固定于浏览器可视区位置 选择器{position:fixed;} 以浏览器的可视窗口为参照点移动元素(跟父元素没有任何关系 不随滚动条滚动)
固定位置不在占有原先的位置(脱标) 其实固定位置也可以看作是一种特殊的绝对定位
固定在版心右侧位置 让固定定位的盒子left:50% 走到浏览器可视区(也可以看作版心)的一半位置
让固定定位的盒子margin-left:版心宽度的一半距离
sticky粘性定位 可以认为相对定位和固定定位的混合 选择器{position:sticky;top:10px}
以浏览器的可视窗口为参照点移动元素(固定点位特点) 粘性定位占有原先的位置(相对定位特点) 必须添加top、left、right、bottom其中一个才有效
静态定位和粘性定位不脱标
使用定位可能会出现盒子重叠的情况 选择器{z-index:1;} 数值可以是正整数,负数或0,默认是auto，数值远大,盒子越靠上 如果盒子属性值相同,则按照书写顺序,后来居上
数字后面不能加单位,只有定位的盒子才有z-index属性
加了绝对定位的盒子不能通过margin:0 auto水平居中, 但可以 left:50%; 让盒子的左侧移动到父级元素的水平中心位置 margin-left:-100px;让盒子向左移动自身宽度一半
行内元素添加绝对或固定定位,可以直接设置高度和宽度 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小
绝对定位(固定定位)会压住下面标准流的所有内容 浮动元素只会压住下面标准流的盒子,不会压住下面标准流的文字和图片,因为浮动产生的目的最初是为了做文字的环绕效果
让一个元素在页面中隐藏或者显示出来
display:none;隐藏对象 block除了转换块级元素之外,同时还会显示元素的意思 display隐藏元素后,不在占有原来的位置
visibility:visible;元素可视 hidden元素隐藏 visbility元素隐藏后,继续占有原来位置
overflow:visible;元素可视 hidden元素隐藏 scroll溢出不溢出都显示滚动条 auto溢出的时候才显示滚动条,不溢出不显示
为了有效的减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites / CSS雪碧)
核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了
使用精灵图核心:精灵图主要针对背景图片的使用,就是把多个小背景图片整合到一张大图片(这个大图片也叫sprites精灵图或者雪碧图)中
移动背景图片位置，此时可以使用background-position 移动的距离就是目标图片x和y坐标(x轴右边走是正值,左边走是负值,y轴上走负值,下走正值) background:url(图片位置)no-repeat -110px -120px;
精灵图缺点:图片文件还是比较大的,图片本身放大缩小会失真,一旦图片制作完成想替换非常复杂 这是就出现了字体图标(展开是图标,本质是字体)
字体图标优点 轻量级(一个图标字体要比一系列图像要小 一旦字体加载,图标会马上渲染出来) 灵活性(本质是文字,可以随意改变颜色,产生阴影等) 兼容性(几乎直至所有浏览器)
如果遇到一些结构和样式比较简单的小图标,就用字体图标 如果遇到一些结构和样式复杂一点的小图片,就用精灵图
字体文字格式(.ttf .woff .eot .svg)不同浏览器所支持的字体格式是不一样的,字体格式之所以兼容,就是因为包含了主流浏览器支持的字体文件
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体图标使用</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?4clnsm');
src: url('fonts/icomoon.eot?4clnsm#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?4clnsm') format('truetype'),
url('fonts/icomoon.woff?4clnsm') format('woff'),
url('fonts/icomoon.svg?4clnsm#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: 'icomoon';
font-size: 100px;
color: skyblue;
}
</style>
</head>
<body>
<span></span>
</body>
</html> -->
<!-- 鼠标样式cursor li{cursor:point;} 设置或检查在对象上移动的鼠标指针采用何种系统预定义的光标形状
属性值 default小白默认 pointer小手 move移动 text文本 not-allowed禁止
vertical-align用于设置一个元素的垂直对齐方式
vertical-align:baseline(默认,元素放置在父元素基线上); top()把元素的顶端与行中最高元素的顶端对齐 middle()把此元素放置到父元素的中部 bottom()把元素的顶端与行中最低的元素顶端对齐
默认文字与图片是基线对齐的
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单轮廓和防止拖拽文本域</title>
<style>
input,
textarea {
outline: none;
}
textarea {
resize: none;
}
</>
</head>
<body>
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html> -->
<!-- CSS三角
div{
width:0;
height:0;
line-height:0;
font-size:0;
border:50px solid transparent;
border-left-color:pink;
} -->
<!--
解决图片底部默认空白缝隙问题(图片底层会有一个空白缝隙,原因是行内块元素会和文字基线对齐)
解决问题:给图片添加vertical-align:middle|top|botton等 / 把图片转换为块级元素display:block;
单行文本溢出显示省略号--必须满足三个条件
white-space : nowrap ; (默认normal自动换行) 先强制一行内显示文本
overflow:hidden;超出的部分隐藏
text-overflow:ellipsis;文本用省略号替代超出的部分
多行文本溢出显示省略号 有较大的兼容性问题
overflow:hidden;
text-overflow:ellipsis;
display: -webkit-box; 弹性伸缩盒子模型显示
-webkit-line-clamp: 2; 限制在一个块元素显示文本的行数
-webkit-box-orient: vertical; 设置或检索伸缩盒对象的子元素的排列方式
margin负值运用
让每个盒子margin往左侧移动-1px正好压住相邻盒子边框 鼠标经过盒子的时候提高盒子的层级即可(如果没有定位,则加相对定位(保留位置),如果有定位,则加z-index)
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin负值的巧妙运用</title>
<style>
/* ul li {
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
ul li:hover {
如果盒子没有定位,则鼠标经过添加相对定位即可
position: relative;
border: 1px solid blue;
} */
ul li {
position: relative;
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}
ul li:hover {
/* 如果li有定位,则利用z-index提高层级 */
z-index: 1;
border: 1px solid blue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
<!--
HTML5新增的语义化标签
<header>头部标签 <nav>导航标签 <article>内容标签 <section>定义文档某个区域 <aside>侧边栏标签 <footer>尾部标签
这种语义标准主要针对搜索引擎,这些新标签页面可以使用多次 在IE9中需要把这些元素转换为块级元素
HTML新增的多媒体标签
<vedio>元素支持三种视频格式:mp4 webm ogg 尽量使用MP4格式
常见属性 autoplay(autoplay)视频自动播放,谷歌浏览器需要添加muted来解决自动播放的问题 controls(controls)向用户显示播放插件 width(值是像素)设置播放器宽度
height(设置播放器高度 值像素) loop(loop)循环播放 src(url) 视频url的地址 poster(lmgurl)加载等待的画面图片 muted(muted)静音播放
preload 值auto预先加载视频 none不应加载视频 规定是否预加载视频,如果有autoplay则忽略该属性
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新增视频标签</title>
<style>
video {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<video src="美女.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop" poster="熊宝宝.jpg"></video>
</body>
</html> -->
<!--
当前<audio>元素支持三种音频格式 mp3 wav ogg
属性 autoplay(autoplay)音频就绪后马上播放 controls(controls)播放插件 loop(loop)循环播放 src(url)要播放音频的地址
谷歌浏览器把音频和视频自动播放禁止了
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音乐标签</title>
</head>
<body>
<audio src="你是人间四月天.mp3" autoplay="autoplay" muted="muted" controls="controls" loop="loop"></audio>
</body>
</html> -->
<!--
HTML新增的input类型
type="email" 限制用户输入email类型
type="url" 限制用户输入url类型
type="date" 限制用户输入日期类型
type="time" 限制用户输入时间类型
type="month" 限制用户输入月类型
type="week" 限制用户输入周类型
type="number" 限制用户输入数字类型
type="tel" 手机号码
type="search" 搜索框
type="color" 生成一个颜色选择表单
required(required) 表单拥有该属性表示内容不能为空,必填
placeholder 提示文本 表单的提示信息,存在默认值将不显示
autofocus 自动焦距属性,页面加载完成自动聚焦到指定表单
autocomplete off/on 默认已经打开,浏览器记录之前输入过的值
multiple 可以多个文件提交
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新增input表单</title>
<style>
input::placeholder {
color: green;
}
</style>
</head>
<body>
<form action="">
<ul>
<li>邮箱:<input type="email" /></li>
<li>网址:<input type="url" /></li>
<li>日期:<input type="date" /></li>
<li>日期:<input type="time" /></li>
<li>数量:<input type="number" /></li>
<li>手机号码:<input type="tel" /></li>
<li>搜索:<input type="search" /></li>
<li>颜色:<input type="color" /></li>
<li>日期:<input type="submit" values="提交"></li>
</ul>
<input type="search" name="sear" id="" required="required" placeholder="阿伟已经死了" autofocus="autofocus"
autocomplete="off">
<input type="file" name="" id="" multiple="multiple">
<input type="submit" value="提交">
</form>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.todou {
position: relative;
width: 444px;
height: 320px;
margin: 30px auto;
}
.todou img {
width: 100%;
height: 100%;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(arr.png) no-repeat center;
}
.todou:hover .mask {
display: block;
}
</style>
</head>
<body>
<div class="todou">
<div class="mask"></div>
<image src="tudou.jpg" alt=""></image>
</div>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字浮动元素的妙用</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 326px;
height: 89px;
background-color: pink;
margin: 100px auto;
padding: 5px;
}
.pic {
float: left;
width: 158px;
height: 89px;
margin-right: 5px;
}
.pic img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="game.webp" alt="">
</div>
<p>超级QQ秀打造虚拟社交的新体验:王者新次元之旅</p>
</div>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内块的巧妙运用</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
text-align: center;
}
.box a {
display: inline-block;
width: 36px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
text-align: center;
line-height: 36px;
text-decoration: none;
color: #333;
font-size: 14px;
}
.box .prev,
.box .next {
width: 85px;
}
.box .current,
.box .elp {
background-color: #fff;
border: none;
}
.box input {
height: 36px;
width: 45px;
border: 1px solid #ccc;
outline: none;
}
.box button {
width: 60px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="prev"><<上一页</a>
<a href="#" class="current">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="elp">...</a>
<a href="#" class="next">>>下一页</a>
到第几
<input type="text">
页
<button>确定</button>
</div>
</body>
</html> -->
<!-- 只保留右边的边框有颜色
border-color:transparent red transparent transparent;
样式都是solid
border-style:solid;
上边框宽度要大 右边框宽度稍小 其余边框为0
border-width:100px 50px 0 0; -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三角妙用</title>
<style>
.box1 {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
}
.price {
width: 160px;
height: 24px;
border: 1px solid red;
margin: 0 auto;
line-height: 24px;
}
.prev {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color: red;
text-align: center;
color: #fff;
font-weight: 700;
margin-right: 8px;
}
.prev one {
position: absolute;
width: 0;
height: 0;
right: 0;
top: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.next {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="price">
<span class="prev">￥5689
<one></one>
</span>
<span class="next">￥4568</span>
</div>
</body>
</html> -->
<!--
不同浏览器对有些标签默认值是不同的,为了消除不同浏览器对HTML文本的差异,照顾浏览器兼容,我们需要对CSS进行初始化
每个页面都必须进行CSS初始化
把中文字体的名称用相应的Unicode编码来代替,这样有效避免了浏览器解释代码的乱码问题
黑体 \9ED1\4F53 宋体 \5B8B\4F53 微软雅黑 \5FAE\8F6F\96C5\9ED1
CSS新特性 新增的css特性有兼容问题ie9才支持
属性选择器可以根据元素特定的属性来选择元素。这样就可以不借助类或id选择器
E[att] 在E元素选择具有att属性
E[att="val"] 在E元素选择具有att属性且属性值等于val的E元素
E[att^="val"] 在E元素选择具有att属性且属性值等于val的E元素
E[att$="val"] 在E元素选择具有att属性且属性值以val开头的E元素
E[att*="val"] 在E元素选择具有att属性且属性值以val结尾的E元素
属性选择器,类选择器,伪类选择器,权重为0
结构伪类选择器主要根据文档结构来选择元素 常用于根据父级选择器里面的子元素
E:first-child 匹配父元素中的第一个子元素
E:last-child 匹配父元素中的最后一个子元素
E:nth-child() 匹配父元素中的第n个子元素
E:nth-of-child() 选择类型E的第n个
E:first-of-child() 选择类型E的第一个
E:last-of-child() 选择类型E的最后一个
选择伪类选择器 nth-child(n) 选择某个父类元素的一个或多个特定的子元素(里面必须是n,不能是其他字母,选择了里面所有的子元素)
n可以是数字,就是选择第n个子元素,里面数字从1开始 n可以是关键字:even偶数 odd奇数
n可以是公式(如果n是公式,从零开始计算) 2n偶数 2n+1奇数 5n五的倍数 n+5从第五个开始 -n+5前五个
section div:nth-child(1){background-color:red} nth-child会把所有的盒子都排列序号,执行的时候首先看 nth-child(1) 再看前面的div
对父类里面所有的孩子排序选择(序号是固定的)先找到第n个孩子 然后看看她是否和E匹配
section div:nth-of-child(1){background-color:red} nth-of-child会把所有的盒子都排列序号,执行的时候首先看div指定的元素 之后再看nth-of-child(1)
对父元素里面指定子元素进行排序选择,先去匹配E,然后根据E找第n个孩子
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签
::before 在元素内部的前面插入内容 ::after在元素内部的后面插入内容
before和after创建一个元素,但是属于行内元素 新创建的这个元素在文档树中是找不到的,我们称为伪元素
before和after必须有content属性 伪元素选择器和标签选择器一样,权重为1
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
div::before {
display: inline-block;
content: '我';
width: 30px;
height: 40px;
background-color: skyblue;
}
div::after {
content: '你';
}
</style>
</head>
<body>
<div>爱</div>
</body>
</html> -->
<!--
CSS盒子模型
box-sizing:content-box 盒子大小为width+padding+border(以前默认的)
box-sizing:border-box 盒子大小为width padding和border不会撑大我们盒子(前提是padding和border不会超过width宽度)
CSS模糊 filter:blur(5px); blur模糊处理 数值越大越模糊
width:calc(100%-50px); 括号里面可以使用+-*/
CSS过渡 当元素从一种样式到另一种样式 经常和hover一起搭配使用 过度口诀:谁做过渡给谁用
语法 transition:要过渡的属性 花费时间 运动曲线 何时开始; 何时开始(单位是秒必须写单位可以设置延迟触发时间 默认是零可以省略)
如果想要所有的属性都变化过渡,写一个all就可以 花费时间单位是秒(必须写单位) 运动曲线(默认是ease 可以省略)
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡效果</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
transition: width .5s, height .5s, background-color 0.5s;
}
div:hover {
background-color: skyblue;
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器使用场景-字体图标</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?qtit0l');
src: url('fonts/icomoon.eot?qtit0l#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?qtit0l') format('truetype'),
url('fonts/icomoon.woff?qtit0l') format('woff'),
url('fonts/icomoon.svg?qtit0l#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after {
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
content: '\e901';
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<div></div>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>土豆</title>
<style>
.todou {
position: relative;
width: 444px;
height: 320px;
margin: 30px auto;
}
.todou img {
width: 100%;
height: 100%;
}
.todou::before {
content: '';
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(arr.png) no-repeat center;
}
.todou:hover::before {
display: block;
}
</style>
</head>
<body>
<div class="todou">
<image src="tudou.jpg" alt=""></image>
</div>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡练习</title>
<style>
.bar {
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.bar_in {
width: 50%;
height: 100%;
background-color: red;
transition: all .7s;
}
.bar:hover .bar_in {
width: 90%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
</html> -->
<!--
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: ""; 伪元素必须写的属性
display: block; 插入的元素必须是块级
height: 0; 不要看见这个元素
clear:both; 核心代码清除浮动
visibility: hidden; 不要看见这个元素
}
.clearfix:after,.clearfix:before{
content: "";
display: table; 转换为块级元素并一行显示
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
有些网站初始化不太提倡 *{margin:0;padding:0;}
favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上
网站SEO译为搜素引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式
SEO的目的是对网站进行深度优化,从来在网站获取免费的流量,从而在搜索引擎提升网站的排名,提高网站的知名度
title网站标签 建议网站名-网站的介绍 京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！
description网站说明 简要说明网站主要做什么
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。
商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
keywords页面关键字 是搜索引擎的关注点之一
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
常用模块类名命名 shortcut快捷导航栏 header头部 logo标志 shopcar购物车 search搜索 hotwrods热点词
nav导航 dropdown包含.dd .dt navitems导航右侧 footer页面底部 mod_service页面底部服务模块
mod_help页面底部帮助模块 mod_copyright页面底部版权模块
logoSEO logo里面先放一个h1标签,目地是为了提却权,告诉搜索引擎这个很重要 h1再放一个链接,可以返回首页
链接里面放1文字(网站名称),但文字不要显示出来 方法1:text-indent移动到盒子外(text-indent:-9999px),然后overhidden,淘宝做法
方法二 直接给font-size:0;就看不到文字了,京东的做法
最后给链接一个title属性,这样鼠标放到logo上就可以看到提示的文字了
服务器,他也是一个计算机,根据服务的类型不同,服务器又分为文件服务器,数据库服务器,应用程序服务器和Web服务器等
Web服务器又可以分为本地服务器和远程服务器
本地服务器主要在局域网中访问,如果在互联网中访问,可以把优品购上传到远程服务器
远程服务器,任何人都可以利用域名访问我们的网站了
广义的HTML5是HTML5本身+CSS3+JavaScript -->
<!--
转换是CSS中具有颠覆性的特征之一 你可以理解为变形
translate移动 对行内标签没有效果
语法 transform:translate(x,y);或者分开写; transform:translateX(n); transform:translateY(n);
translate最大的优点:不会影响到其他元素的位置 translate中的百分比单位是相对于自身元素的translate(50%,50%);
rotate让元素在二维平面内顺时针或者逆时针旋转 transform:rotate(度数)
rotate里面跟度数,单位是deg 角度为正时,顺时针;负为逆时针 默认旋转的中心点是元素的中心点
设置元素转换中心点 transform-origin:x y; 注意x和y要有逗号隔开 x和y默认转换的中心点是元素的中心点(50%,50%)
还可以给x和y设置像素或者方位名词( top bottom left right center )
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转效果</title>
<style>
img {
width: 300px;
border-radius: 50%;
border: 5px solid #d64143;
transition: all 0.9s;
margin-left: 500px;
}
img:hover {
transform: rotate(300deg);
}
</style>
</head>
<body>
<img src="xuanzhuan.jfif" alt="">
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转案例一</title>
<style>
div {
position: relative;
width: 250px;
height: 35px;
border: 1px solid #000;
}
div::after {
content: '';
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
transition: all 0.9s;
}
div:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转案例二</title>
<style>
div {
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
}
div::before {
content: "黑马";
display: block;
width: 100%;
height: 100%;
background-color: hotpink;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all 0.5s;
}
div:hover::before {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html> -->
<!--
2D转换之缩放 transform:scale(x,y);不跟单位 设置元素转换中心点 transform-origin:x y;
注意其中的的x和y用逗号分隔 如果只写一个参数(等比例缩放),则相当于scale(x,x)
scale缩放的最大的优势:可以设置转换中心点缩放,默认是中心缩放,而不影响其他盒子
转换综合写法 transform:translate() rotate() scale() 等 ;其顺序会影响转换效果(先先转会改变坐标轴方向) 当我们有位移和其他属性的时候,记得要将位移放到最前
-->
<!--
动画是CSS中具有颠覆性的特征之一 相比较过渡,动画可以实现更多效果
动画的基本使用,1.先定义动画 @keyframes 动画名称{
0%{width:100px;}
100%{width:200px;}
}
0%是动画的开始,100%是动画的完成,这样的规则就是动画序列 @keyframes中规定某项CSS样式,就能创建有当前样式逐渐改成新样式的动画效果
from和to等价于0%和100% 里面的百分比就是总的时间 如案例共10s 则25%相当于0.25*10=2.5s
2.元素使用动画 div{
abimation-name:动画名称;
animation-duration:持续时间;
}
动画常用属性①animation-name动画的名称 ②animation-duration规定动画完成一个周期所花费的秒或毫秒,默认是零
③animation-timing-function 规定动画的速度曲线,默认是"ease"④animation-delay规定动画何时开始
⑤animation-iteration-count规定动画的播放次数,默认1还有infinite⑥animation-direction规定动画是否在下一周期逆向播放,默认normal,alternate逆播放
⑦animation-fill-mode规定动画结束后的状态,保持forwards回到起始backwards⑧animation-play-state规定动画是否正常运行或暂停,默认runing还有paused
动画简写 animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态
简写属性不包括animation-play-state(暂停动画 经常和鼠标经过其他配合使用)
想要动画走回来,而不是直接回来 animation-direction:alternate 盒子动画结束,停在结束位置 animation-fill-mode:forwards
速度曲线 animation-timing-function:规定动画的速度曲线,默认ease linear匀速 ease默认,动画低速开始,然后加快,在结束前变慢
ease-in动画以低速开始 ease-out动画以低速结束 ease-in-out动画以低俗开始和结束 steps()指定了时间函数中的间隔数量(步长)
steps(5)就是分5步来完成我们的动画,有了steps就不要再写ease或者linear了
3D转换 特点:近大远小 物体后面遮挡不可见 x轴右面正值,y下面是正值,z垂直屏幕往外面是正值
translform:translateX(100px):仅仅在x轴上移动 translform:translayeY(100px):仅仅在Y轴移动 translform:translayeZ(100px):仅仅在Z轴移动
translform:translate3d(x,y,z)其中xyz分别指要移动轴方向的距离 xyz是不能省略,如果没有就写0
透视perspective 如果在网页产生3D效果需要透视 透视我们也可以称为视距(视距就是人的眼睛到屏幕之间的距离),透视单位像素,近大远小
透视现在被观察的父盒子上
3D旋转rotate3的 transform:rotateX(45deg)沿着x轴正方向旋转45度
transform:rotate3d(x,y,z,deg)沿着自定义轴旋转deg角度 xyz表示旋转轴的矢量 transform:rotate3d(1,1,0,45deg)就是沿着对角线旋转45度
对元素旋转方向判断用左手准则(左手拇指指向x轴的正方向 其余手指的弯曲方向就是该元素沿着x轴旋转的方向)
transfrom-style(控制子元素是否开启三维立体环境):flat子元素不开启3d立体空间,默认的 preserve-3d开启立体空间 代码写给父级,影响的是子盒子
浏览器私有前缀(是为了兼顾老版本,比较新的版本无需添加) -moz-border-radius:10px; -moz-代表firefox浏览器私有属性 -ms-代表ie浏览器私有属性
-webkit-代表safari和chrome私有属性 -o-代表Opera私有属性
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片放大案例</title>
<style>
img {
width: 300px;
transition: all 0.4s;
}
div {
float: left;
margin: 10px;
overflow: hidden;
}
div img:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div><a href="#"><img src="xuanzhuan.jfif" alt=""></a></div>
<div><a href="#"><img src="xuanzhuan.jfif" alt=""></a></div>
<div><a href="#"><img src="xuanzhuan.jfif" alt=""></a></div>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大数据热点图</title>
<style>
body {
background-color: #333;
}
.map {
width: 747px;
height: 617px;
background: url(map.png) no-repeat;
margin: 0 auto;
position: relative;
}
.beijing {
position: absolute;
top: 228px;
right: 193px;
color: #fff;
}
.dotted {
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 50%;
}
.beijing div[class^="pulse"] {
position: absolute;
top: 50%;
left: 50%;
width: 8px;
transform: translate(-50%, -50%);
height: 8px;
box-shadow: 0 0 12px #009dfd;
border-radius: 50%;
animation: pulse 1.2s linear infinite;
}
@keyframes pulse {
0% {}
70% {
width: 40px;
height: 40px;
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
.beijing div.pulse2 {
animation-delay: 0.4s;
}
.beijing div.pulse3 {
animation-delay: 0.8s;
}
.tb {
top: 500px;
right: 80px;
}
.gz {
top: 539px;
right: 189px;
}
</style>
</head>
<body>
<div class="map">
<div class="beijing">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="beijing tb">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="beijing gz">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>奔跑的小熊</title>
<style>
body {
background-color: #000;
}
div {
position: absolute;
width: 200px;
height: 100px;
background: url(benpao.png) no-repeat;
animation: bear 0.8s steps(8) infinite, move 3s forwards;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html> -->
<!-- backface-visibility 属性定义当元素不面向屏幕时是否可见 -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>失败的案例两面反转</title>
<style>
body {
perspective: 400px;
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transition: all .4s;
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(180deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 300px;
}
.front {
background-color: pink;
z-index: 1;
backface-visibility: hidden;
}
.back {
background-color: purple;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">究竟是什么样的结局</div>
<div class="back">才配的上一路的颠沛流离</div>
</div>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D导航栏</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px;
}
ul li {
width: 120px;
height: 35px;
list-style: none;
perspective: 500px;
}
.box {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all .4s;
}
.front,
.bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 16px;
font-size: 400;
text-align: center;
}
.front {
background-color: pink;
z-index: 1;
transform: translateZ(17.5px);
}
.bottom {
background-color: purple;
transform: translateY(17.5px) rotateX(-90deg);
}
.box:hover {
transform: rotateX(90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">腾讯</div>
<div class="bottom">欢迎你</div>
</div>
</li>
</ul>
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转木马</title>
<style>
body {
perspective: 1000px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 150px auto;
transform-style: preserve-3d;
/*添加动画效果*/
animation: rotate 10s linear infinite;
background: url("xaiocaoshen.png") no-repeat;
}
section:hover {
/*鼠标放入section暂停*/
animation-play-state: paused;
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("xaiocaoshen.png") no-repeat;
}
section div:nth-child(1) {
transform: translateZ(300px);
}
section div:nth-child(2) {
/*先旋转好了，再移动距离,因为旋转会改变坐标轴的方向
*/
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3) {
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4) {
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5) {
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6) {
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
<!--
计算机程序就是计算机所执行一系列的指令集和
编程语言有机器语言 汇编语言 高级语言(高级语言需要一个翻译器转换为计算机识别的机器语言)
编程语言是主动的很强的逻辑性
计算机组成(硬件(输入输出设备,cpu,硬盘和内存)和软件(系统软件和应用软件))
输入设备摄像头鼠标键盘等 输出设备显示器打印机投影仪等 cpu负责处理数据和运算
所有数据包括文件图片等最终都以二进制的形式存在硬盘中,平时我们所装的软件,其实就是把程序文件复制到硬盘中
硬盘内存都放二进制文件 打开某个程序中,先从硬盘中把程序的代码加载到内存,CPU执行内存中的代码
之所以有内存这个重要原因,是因为CPU运动太快了,如果只从硬盘中读取数据,会浪费CPU性能(内存用的是电,硬盘用的是机械)
JavaScript是一种运行在客户端的脚本语言(Script是脚本的意思)
脚本语言不需要编译,运行过程由js解释器逐行进行解释并执行
渲染引擎用来解析HTML和CSS,俗称内核,比如chrome浏览器的blink,老版的webkit
JS引擎也称为JS解释器,用来读取网页中JavaScript代码,比如chrome浏览器的v8
ECMAScripy规定了JS编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准
JS有三种书写位置,分别为行内,内嵌和外部
行内 <input type="button" value="唐伯虎" onclick="alert('秋香秋香')">
可以将单行和少量JS代码写在HTML标签的事件属性中(以on开头的属性)
单双引号的使用:在HTML中我们推荐使用双引号,JS我们推荐使用单引号
可读性差,在html有大量代码时,不方便阅读
外部JS引用 <scirpt src="xxx.js"></script>
适合JS代码量较大的情况 引用外部JS文件中的srcipt标签中间不可以写代码
变量用于存放数据的容器 本质:变量是程序在内存中申请一块用来存放数据的空间
var(variable变量)是一个JS关键字,可以同时声明多个变量,多个变量名直接用逗号隔开 var age=10,name='awei';
变量名的命名规范 由字母a(A)-z(Z),数字和下划线和$组成;严格区分大小写,不能以数字开头,不能是关键字,保留字,驼峰命名法
JavaScirpt是一种弱类型或者说动态语言(这意味着不用提前声明变量的类型,在程序的运行中,类型会被自动确定)
js引擎根据=右边变量值的数据类型来判断 js拥有动态类型,意味着相同的变量可以作用不同的类型
基本数据类型
Number数字型,包含整数型和浮点型值,默认是0 Boolean布尔类型,默认false String字符串类型,在js里面,字符串都带引号,默认""
Undefined ; var a;声明了a但是没有给值,此时a=undefined Null ;var a=null;声明变量a为空值
字符串有特殊字符,我们称为转义字符, \n换行符(n是newline的意思) \\斜杠\ \'单引号 \"双引号 \t(tab缩进) \b空格(b是blank的意思)
字符串+任意类型=拼接之后的新字符串 +号总结口诀:数值相加,字符相连
数据类型转换为字符串 toString()转换成字符串 var num=1; num.toString()
String()强制转换成字符串 var num=1; String(num)
和字符串拼接的结果都是字符串(隐式转换) var num=1; num+" "
数据转换为数字型 parseInt(string)函数 将string类型转换成整数数值型 parseInt("78")
parseFloat(string) 将string类型转换为浮点数值类型 parseFloat("78.12")
Number()强制转换函数 Number("12")
js隐式转换( - / * ) '12'-0
隐式转换是在我们进行算术运算的时候,JS自动转换了数据类型
Boolean()其他类型转换为布尔值 代表空,否定的值会被转换为false,如 '' / 0 / NaN / null / undefined 其余值都被转换为true
计算机不能直接理解任何除机器语言以外的语言,所以必须把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成语言工具被称为翻译器
翻译器翻译的方式有两种,一种是编译,一种是解释。两种方式直接的区别在于翻译的时间点不同
编译器在代码执行之前进行编译,生成中间代码文件 解释器在运行时进行解释,并立即执行
算术运算符 + - * / %
浮点数的最高精度是17位,但在进行算术计算时其精确度远远不如整数 所以不要直接判断两个浮点数是否相等
console.log(0.07 * 100)结果不是7,而是7.000000000000001
如果一个数它的余数是0就说明这个数能被整除,这就是%取余运算符的主要用途
算术运算符优先级先* / % 后 + -
比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较后会返回一个布尔值 >,<,>=,<=,==,!=, ===和!==全等要求值和数据类型都一致
逻辑运算符是用来进行布尔值运算的运算符 表达式1&&表达式2(如果第一个表达式为真,返回表达式2;如果第一个表达式的值为假,则返回表达式1)
表达式1||表达式2(如果第一个表达式的值为真,则返回表达式1;如果第一个表达式为假,则返回表达式2) !
逻辑运算符优先级先 && 后 ||
赋值运算符 = += -= *= /= %=
if的语句和else的语句最终只能有一个语句执行 else后面跟大括号
switch(num) 中的num 的值和 case 后面的值相匹配的时候是全等 必须值和数据类型一致才可以
switch语句和if else if语句的区别 一般情况下,他们两个语句可以相互替换
switch...case语句通常处理case为比较确定值的情况,而if..else...语句更加灵活,常用于范围判断
switch语句进行条件判断后直接执行到程序的条件语句,效率更高;而if...else语句有几个条件,就的判断多少次
分支较少用if..else 分支较多用switch
断点调试可以帮助我们观察程序的运行过程 浏览器按F12->sources->找到调试的文件->在程序设置断点
Watch可以监视变量值的变化 F11让程序一步一步执行
JS中三个循环很多情况下可以相互替代;如果用来计数,和数字相关,我们更喜欢用for
while和do...while可以做更多复杂的判断条件,比for灵活一些
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS基础语法</title>
<script>
// 浏览器弹出输入框 用户可输入
//prompt('请输入你的年龄');
//alert浏览器 弹出警告框
//alert('祝您永远年轻');
//console 控制台输出,给程序员测试用的
//console.log('程序员能看到的');
//var number;
//console.log(number);
//只声明 不赋值 控制台结果undefined
//var myname = prompt('请输入你的大名');
//alert(myname);
var number1 = 010;// 数字前面加0表示八进制 十六进制前面加 0x
console.log(number1);// 010八进制转换为10进制就是8
console.log(Number.MAX_VALUE);//js中数值的最大值
console.log(Number.MIN_VALUE);//js中数值的最小值
console.log(Number.MAX_VALUE * 2);// Infinity无穷大
console.log(-Number.MAX_VALUE * 2);// -Infinity无穷小
console.log('你好' - 100); //NaN(Not a number)代表一个非数值
console.log(isNaN(12)); //isNaN()这个方法用来判断非数字,并且返回一个值 如果是数字返回的是false 如果不是数字返回true
var str = "帅气的飞";
console.log(str.length);//通过字符串的length属性获取整个字符串的长度
var flag1 = true;
var flag2 = false;
console.log(flag1 + 1);//true参加运算当1来看
console.log(flag2 + 1);//false参加运算当0来看 ;
var variable;
console.log(variable + 1);//未赋值的variable(会有一个默认的undefined) NaN undefined和数字相加最后的结果是NaN
var vari1 = null;
console.log(11 + vari1);
console.log(true + vari1);
console.log(typeof vari1);//获取变量数据类型
console.log(18 == '18');//true
console.log(18 === '18');// false 两侧的值还有数据类型完全一致才可以
console.log(18 && 12);//12
console.log(0 && 12);
console.log(undefined && 12);// 0 '' null undefined NaN 这些都为假
</script>
</head>
<body>
<input type="button" value="唐伯虎" onclick="alert('秋香秋香')">
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字小于0,则在前面这个数字上补零</title>
<script>
var number = prompt('请输入一个0-59之间的数字');
var result = number < 10 ? '0' + number : number;
alert(result);
</script>
</head>
<body>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一行打印n个星星</title>
<script>
var frequency = prompt('请输入星星的个数');
var str = '';
for (var i = 1; i <= frequency; i++) {
str = str + '*';
}
console.log(str);
</script>
</head>
<body>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打印n行n列星星</title>
<script>
var rows = prompt('请输入星星行数');
var cols = prompt('请输入星星列数');
var str = '';
for (var i = 1; i <= rows; i++) {
for (var j = 1; j <= cols; j++) {
str = str + '*';
}
str += '\n';
}
console.log(str);
</script>
</head>
<body>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打印倒三角案例</title>
<script>
var str = '';
for (var i = 1; i <= 10; i++) {//外层控制行数
for (var j = i; j <= 10; j++) {//里层循环打印的个数不一样
str = str + '*';
}
str += '\n';
}
console.log(str);
</script>
</head>
<body>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九九乘法表</title>
<script>
var str = '';
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
str += i + 'x' + j + '=' + i * j + '\t';
}
str += '\n';
}
console.log(str);
</script>
</head>
<body>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>while案例</title>
<script>
var say = prompt('开卷开卷,卷死他们');
while (say !== '好') {
say = prompt('输入"好"咱们就开始');
}
</script>
</head>
<body>
</body>
</html> -->
<!--
创建数组两种方式 var 数组名=[]; 利用数组字面量创建数组 / var 数组名=new Array();用new来创建数组
console.log(sum,average);想要输出多个值,用逗号分隔即可
函数就是封装了一段可以被重复执行的代码块,通过代码块可以实现大量代码的重复使用 函数名一般是动词 function声明函数的关键字,全部小写
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组添加元素</title>
<script>
var array = ['red', 'yellow', 'green', 5];
array.length = 5;//可以通过修改length的长度来实现数组扩容的目的 length属性是可读写的
console.log(array[4]);//索引4的空间没有给值 默认是undefined
array[5] = 'pink';//修改索引号,追加数组元素 不能直接给新增元素赋值,否则会覆盖掉以前的数据
console.log(array);
array[0]='myRed';//
</script>
</head>
<body>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遍历数组找出大于10的元素,依次追加到新的数组 方法一</title>
<script>
var array = [2, 5, 6, 9, 8, 21, 4, 11, 23];
var newArr = [];//空数组
var j = 0;
for (var i = 0; i < array.length; i++) {
if (array[i] > 10) {
newArr[j] = array[i];
j++;
}
}
console.log(newArr);
</script>
</head>
<body>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遍历数组找出大于10的元素,依次追加到新的数组 方法二</title>
<script>
var array = [2, 5, 6, 9, 8, 21, 4, 11, 23];
var newArr = [];//空数组
//刚开始newArr.length就是0
for (var i = 0; i < array.length; i++) {
if (array[i] >= 10) {
newArr[newArr.length] = array[i];
}
}
console.log(newArr);
</script>
</head>
<body>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数</title>
<script>
// function getSum(num1, num2) {
// console.log(num1 + num2);
// }
// //实参个数和形参个数一致,则正常输出结果
// getSum(1, 2);
// //如果实参的个数多于形参个数,会取到形参的个数
// getSum(2, 2, 2);
// //实参个数小于形参个数,形参可以看作是不用声明的变量 num2是一个变量但没有接受值,默认就是undefined
// getSum(2);//结果NaN 在Js中,形参默认是undefined
// function fun() {
// }
// console.log(fun());// 有return则返回return后的值 如果函数没有return则返回undefined
// function fn() {
// console.log(arguments);//里面存储了所有传递过来的参数
// console.log(arguments.length);
// console.log(arguments[2]);
// //伪数组(并不是真正意义上的数组) 具有数组length属性 按照索引的方式进行存储 它没有真正数组的一些方法pop() push()等
// }
// fn(1, 2, 3, 4);
//函数声明的两种方式
function fu1() {
console.log('第一种方式:利用函数关键字自定义函数');
}
fu1();
// var 变量名=function(){}; fu2是变量名,不是函数名
//函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值,而函数表达式里面存的是函数
var fu2 = function () {
console.log('第二种方式:函数表达式(匿名函数)');
}
fu2();
</script>
</head>
<body>
</body>
</html> -->
<!--
JavaScript作用域:就是代码名字(变量)在某个范围内起作用和效果,目的是为了提高程序的可靠性更重要是减少命名冲突
全局作用域:整个script标签或者一个单独的js文件
局部作用域(函数作用域)在函数内部就是局部作用域
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大杂烩</title>
<script>
//我们js也是在es6的时候新增的块级作用域 块级作用域{} if{} for{}
if (3 < 5) {
var number = 10;
}
console.log(number);
//我们js引擎运行分为两步:预解析 代码执行
//(1)预解析 js引擎会把js里面所有的var还有function提升到当前作用域的最前面 (2)代码执行 按照代码书写的顺序从上往下执行
// 预解析分为变量预解析(变量提升)和函数预解析(函数提升)
//变量提升(函数提升)就是把所有的变量声明(函数声明)提升到当前作用域的最前面 不提升赋值操作(不调用函数)
//保存一个值可以用变量,保存多个值可以用数组,那保存一个人的完整信息呢? JS的对象表达结构更清晰,更强大
//利用对象字面量创建对象 var obj={};创建一个空对象
var obj1 = {
myName: '哈哈哈',
age: 18,
say: function () {
console.log('hi');
}
//里面的属性和方法我们采用键值对形式 键:属性名 值:属性值 多个属性或者方法之间逗号隔开 方法后面跟一个匿名函数
}
console.log(obj1.age);//调用对象属性1 对象名.属性名 .这个小点可以理解为"的"
console.log(obj1['myName']);//调用对象属性2 对象名['属性名']
obj1.say();//调用对象方法 对象名.方法名
//变量单独声明并赋值,使用时直接写变量名,单独存在 / 属性在对象里面的不需要声明,使用时对象名.属性名
//函数是单独声明 并且调用 函数名() 单独存在的 / 方法在对象里面 调用的时候 对象.方法()
//利用 new Object 创建对象
var obj2 = new Object();//创建了一个空的对象
obj2.you_name = '呵呵呵';
obj2.age = 19;
obj2.say = function () { console.log('hello') };
console.log(obj2.you_name);
obj2.say();
//构造函数 就是把我们对象里面一些相同的属性和方法抽取出来封装到函数里面 构造函数名字首字母要大写
//构造函数(抽象的,泛指某一大类) 他类似于java中的类
function Star(uname, age) {
this.name = uname;
this.age = age;
this.sing = function (sang) {
console.log('大家好我是' + uname + '我要唱' + sang);
}
}//构造函数不需要return就可以返回结果
var one = new Star('刘德华', 18);//调用构造函数 必须使用new 对象是一个具体的实例
//new 在内存中创建一个新的空对象,让this指向这个新对象,执行构造函数里面的代码,给这个新的对象添加属性和方法,返回这个新对象
console.log(typeof one);//构造函数返回一个对象
one.sing('冰雨');
var two = new Star('张学友', 19);
console.log(two.name);
//for in遍历我们的对象 for(变量 in 对象){}
for (var k in obj1) {
console.log(k);// k 变量 输出 得到的是属性名
console.log(obj1[k]);
}
//JavaScript对象分为3类:自定义对象 内置对象 浏览器对象 ; 前两种是JS的基础内容,属于ECMAScript;第三个浏览器对象是我们JS独有的
//内置对象就是JS语言自带的一些对象,并提供了一些常用的或是最基本而有必要的功能
//Math数学对象 不是一个构造函数 我们不需要new来调用 而是直接使用里面的属性和方法
// Math.floor();向下取整 Math.ceil();向上取整 Math.round();四舍五入 Math.abs();绝对值 Math.min();最小值
console.log(Math.PI);// 圆周率
console.log(Math.max(1, 2, 3));//最大值
console.log(Math.max());//没有参数则无穷小 -Infinity
console.log(Math.max(1, 3, 'e'));// 无法识别NaN
console.log(Math.abs('-1'));//会隐式转换 把字符串-1转换成字符型
console.log(Math.abs('e'));//无法识别 NaN
console.log(Math.round(-1.5));//其他数字都是四舍五入,但是 .5特殊 他往大的取 所以结果是-1
//Math对象随机数方法 random()返回一个随机的小数 0<=x<1 这个方法不能跟参
console.log(Math.random());
//我们想要两个数之间的随机整数 并且包含这两个整数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10));
//随机点名
var array = ['刘德华', '张学友', '郭富城', '黎明'];
console.log(array[getRandom(0, array.length - 1)]);
//Date对象跟Math对象不一样,他是一个构造函数,需要实例化才能使用
var date = new Date();//如果没有参数 返回当前系统的时间
console.log(date);
var date1 = new Date(2022, 3, 23);//参数有两种写法 数字型/字符串型 '2022-3-23 12:12:12'
console.log(date1);//返回的是4月,而不是三月 原因索引是从零开始的
var date2 = new Date('2022-3-23 12:12:12');
console.log(date2);
console.log(date2.getFullYear());//返回当前的年
// getMonth()+1; 月份返回的是小一个月 记得加一 getDate();返回的是几号 getDay();周日返回0,星期一到星期六返回1-6
// getHours();获取当前小时 getMinutes();获取当前分钟 getSeconds();获取秒
//封装一个对象 返回当前的时分秒
function getTime() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
console.log(getTime());
console.log(date.valueOf());//返回我们现在的时间到1970.1.1总的毫秒数 方法一
console.log(date.getTime());//方法二
var haomiao = +new Date();
console.log(haomiao);//方法三
console.log(Date.now());// H5新增的 获得总的毫秒数
//倒计时效果
function countDown(time) {
var nowTime = +new Date();//获取当前时间毫秒数
var inputTime = +new Date(time);//返回用户输入的毫秒数
var times = (inputTime - nowTime) / 1000;//times是剩余时间总的毫秒数
var d = parseInt(times / 60 / 60 / 24);//天
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24);//时
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 24);//分
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 24);//秒
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2023-1-1 24:00:00'));
//创建数组的两种方式
var array1 = [1, 2, 3, 4];//利用数组字面量
var array2 = new Array();//创建了一个空数组
var array3 = new Array(3);//这个三表示数组的长度为3 里面有两个空的数组元素
var array4 = new Array(1, 2, 3);//这样写表示里面有三个数组元素是1，2，3
// instanceof运算符 检测是否为数组
console.log(array1 instanceof Array);//方法一
console.log(Array.isArray(array1));// Array.isArray(参数); 方法二
//当检测Array实例时,Array.isArray优于instanceof,因为Array.isArray能检测iframes
//push()在数组末尾 添加一个或者多个数组元素
var array5 = [1, 2, 3];
console.log(array5.push(4, '你好'));//push完毕之后,返回的结果是新数组的长度
console.log(array5);
// unshift 在我们数组开头,添加一个或者多个数组元素
console.log(array5.unshift('red', 'yello', 'green'));//unshift完毕之后,返回的结果是新数组的长度
console.log(array5);
//pop()它可以删除数组最后一个元素(一次只能删除一个)
console.log(array5.pop());//pop()没有参数 删除完毕后返回的结果是删除的那个元素
//shift可以删除数组第一个元素 一次只能删除一个 shift()没有参数 删除完毕后返回的结果是删除的那个元素
var array6 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
array6.reverse();//反转数组
console.log(array6);
//数组排序 冒泡排序
array6.sort(function (a, b) {
// return a - b;//升序
return b - a;//降序
});
console.log(array6);
console.log(array6.indexOf(8));//返回第一个满足数组元素索引号 找不到元素返回-1
//lastIndeOf() 从后往前找
//去重
function unique(array) {
var newArr = [];
for (var i = 0; i < array.length; i++) {
if (newArr.indexOf(array[i]) === -1) {
newArr.push(array[i]);
}
}
return newArr;
}
var demo = unique(['a', 'b', 'c', 'c']);
console.log(demo);
var array7 = [1, 2, 3];
console.log(array7.toString());//数组转换为字符串
// join(分隔符)
console.log(array7.join());//打印结果默认 1,2,3
console.log(array7.join('-'));//打印结果 1-2-3
//concat() 连接两个或多个数组,不影响原数组,返回一个新的数组 slice(begin,end)数组截取,返回被截取的新数组 splice(第几个开始,要删除的个数)返回被删除的新数组
// const letters = ["a", "b", "c"];
// const numbers = [1, 2, 3];
// const alphaNumeric = letters.concat(numbers);
// console.log(alphaNumeric);
//
var str = 'angle';
console.log(str.length);//复杂数据类型才有属性和方法,基本数据类型为什么会有length属性呢? 这就是基本数据类型包装成为了复杂数据类型
// var temp=new String('angle'); 把临时变量给str str=temp; 销毁这个临时变量 temp=null
//因为字符串的不可变所以不要大量的拼接字符串,字符串的所有方法,都不会修改字符串的本身,操作完成之后会形成一个新的字符串
var str = '改革春风吹满地,春国人民';
console.log(str.indexOf('春'));//根据字符返回位置 lastIndexOf();从后往前找
console.log(str.indexOf('春', 3));//从索引3的位置开始往后查找
console.log(str.charAt(3));//根据位置返回字符
console.log(str.charCodeAt(3));//返回相应索引号的字符ASCII值 目的是判断用户按下了哪一个键
console.log(str[3]);///H5新增的
//统计出现最多字符和次数
var str = 'abcdefgabcai';
var kong = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i);// chars是字符串的每一个字符
if (kong[chars]) {
kong[chars]++;
} else {
kong[chars] = 1;
}
}
console.log(kong);
//遍历对象
var max = 0;
var charr = '';
for (var k in kong) {
if (kong[k] > max) {
max = kong[k];
charr = k;
}
}
console.log('最多的字符是' + charr + '出现次数为' + max);
console.log(str.concat('你好'));//字符串追加 等效于+,+更常用
console.log(str.substr(2, 2));// substr('截取的位置','截取的字符')
//substring(start,end)基本和slice(start,end)相同,从start位置开始截取end位置(他们俩都是索引号)
var str2 = 'red,yellow';
console.log(str2.split(','));//字符转换为数组 solit('分隔符')
console.log(str.replace('a', 'b'));//替换字符,replace('被替换的字符','替换为的字符'),他只会替换第一个字符
//toUpperCase()转换成大写 toLowerCase()转换成小写
//const sentence = 'The quick brown fox jumps over the lazy dog.';
//console.log(sentence.toUpperCase());
//简单类型又叫基本数据类型和值类型(string number boolean undefined null),复杂类型又叫引用类型(通过new创建的关键字 Object Array Date等)
//栈:基本数据类型存储到栈里 操作系统自动分配和释放 堆:复杂数据类型放到堆里 一般由程序员分配释放,若不释放,由垃圾回收机制回收
//JS没有堆和栈概念 复杂数据类型在栈里放地址,16进制表示,然后指向堆中的数据 简单数据类型:在栈里开辟空间赋值
var nuller = null;
console.log(typeof nuller);//简单数据类型返回的是一个空对象
</script>
</head>
<body>
</body>
</html>
<!--
JS的组成:ECMAScript语法(JavaScript基础),DOM页面文档类型对象,BOM浏览器对象模型
DOM和BOM统称为Web APIs(JS所独有的部分 )是W3C组织的标准
API是给程序员提供的一种工具,以便轻松的实现想要完成的功能
Web API一般都有输入和输出(函数的传参和返回值),其中很多都是方法(函数)
W3C已经定义了一系列DOM接口,通过这些接口可以改变网页的内容,结构和样式
DOM树,一个页面就是一个文档,DOM中使用document表示;页面中所有的标签都是元素,DOM中使用element表示
节点:页面中所有的内容都是节点(标签,属性,文本,注释),DOM用node表示
DOM把以上内容都看作是对象
DOM如何获取页面元素：1.ID获取 2.根据标签名获取 3.通过HTML5新增的方法获取 4.特殊的元素获取
-->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面获取元素</title>
</head>
<body>
<div id="time">2022-11-24</div>、
<ul>
<li>知否知否,应是绿肥红瘦1</li>
<li>知否知否,应是绿肥红瘦2</li>
<li>知否知否,应是绿肥红瘦3</li>
</ul>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<script>
//因为我们文档页面从上往下加载,所以先得有标签,所以我们script写到表情下面
// getElementById--get获得--element元素--by通过 驼峰命名法
// 参数id是大小写敏感的字符串 返回的是一个元素的对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
//返回的是 获取过来元素对象的集合 以伪数组的形式存储(如果页面中没有这个元素,返回的是空的伪数组形式)
//因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历
//得到元素是动态的,是跟随内容变化的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
//还可以获取某个元素(父元素)内部所有指定标签名的子元素
//父元素必须是单个对象(必须指明是哪一个元素对象),获取的时候不包括父元素自己
var ul = document.getElementsByTagName('ul');
console.log(ul[0].getElementsByTagName('li'));
// H5 新增元素的方法 1.根据类名获取某些元素的集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
//2. 返回指定选择器的第一个元素对象
var firstBox = document.querySelector('.box');
console.log(firstBox);
var time1 = document.querySelector('#time');
console.log(time1);
var li = document.querySelector('li');
console.log(li);
//3.返回指定选择器所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
//获取特殊元素
console.log(document.body);//document.body获取body元素对象
console.log(document.documentElement); //document.documentElement获取HTML元素对象
</script>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件三要素</title>
</head>
<body>
<button id="btn">唐伯虎</button>
<script>
//事件是由三部分组成 事件源(事件被触发的对象) 事件类型 事件处理程序 我们称为事件三要素
//(1)事件源(事件被触发的对象) 谁? 按钮
var btn = document.getElementById('btn');
//(2)事件类型 如何触发 什么事件 比如鼠标点击(onclike) 还是鼠标经过 还是键盘按下
//(3)事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function () {
alert('点秋香');
}
// onclick 鼠标点击左键触发 onmouseover 鼠标经过触发 onmouseout鼠标离开触发 onfocus 获得鼠标焦点触发 onblur 失去鼠标焦点触发
//onmousemove 鼠标移动出发 onmouseup鼠标弹起触发 onmousedown鼠标按下触发
</script>
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作元素</title>
<style>
div {
height: 30px;
width: 300px;
line-height: 30px;
color: #fff;
background-color: pink;
}
</style>
</head>
<body>
<button>显示当前系统的时间</button>
<div>某个时间</div>
<script>
//获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
//注册事件
btn.onclick = function () {
// div.innerText = '2022-12-12';
div.innerText = getDate();
}
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = data.getMonth() + 1;
var dates = data.getDate();
var array = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是' + year + '年' + month + '月' + dates + '日' + array[day];
}
</script>
</body>
</html>
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
