标签三种方式:默认的,浮动和定位的。
前端网页标签排布方式,默认的是最好的。
选择顺序:默认的标准流/文档流--->浮动---->定位
定位也能实现浮动的效果,原因是计算机执行定位的时候,稳定性会差一些。
灵活性越好,相对来说稳定性就会差一些。
快捷键
<div></div>
div.aa
<div class="aa"></div>
p.aa
<p class="aa"></p>
div#cc
<div id="cc"></div>
.aa #只有div能这样
<div class="aa"></div>
<!-- ul>li -->
<ul>
<li></li>
</ul>
<!-- ul>li*8 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- ul>li{内容} -->
<ul>
<li>内容</li>
</ul>
<!-- ul>li{内容$}*8 -->
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
<li>内容6</li>
<li>内容7</li>
<li>内容8</li>
</ul>
<!-- div+p -->
<div></div>
<p></p>
<!-- dl>dt+dd -->
<dl>
<dt></dt>
<dd></dd>
</dl>
当一个标签选择器使用冲突的时候谁先生效的问题
外链式导入的时候,link放在style外面。
id只能使用一次
层级选择器使用两个标签类似于标签选择器的权重。
层级选择器中如果一个类一个标签,那么会执行覆盖,按照书写顺序
!import
(提权功能,慎用)1看颜色 单击色块工具---目标单击----复制粘贴颜色值
用十六进制的颜色值,复制过去记得前面加一个#号
2看文字样式 T 单击目标文字,菜单栏下面查看文字效果---释放选择:ctrl + enter或选择其他工具
看完文字ctrl + enter 退出文字选择
3测量尺寸 矩形选框工具,直接拖拽需要测量的地方,然后会显示。ctrl+r 标尺中右键可以改单位 改为像素px
4切图 工作中指的是独立小图标和实现出一个网页形成html文件
切片工具,然后文件---导出---存储为web所用格式--存储----保存的时候选择“选中的切片或所有用户切片”
.psd后缀为ps打开的文件(分层图)
1995年,那个年代,没有任何一个脚本语言是运行在浏览器端,当时为了把表单验证(当时是在服务器端完成的)在浏览器端完成所以开始研发js
JavaScript 开始叫livesript,为了推广改名
雷锋 和 雷峰塔的关系
js 抱 java 大腿出来的,和java没有关系
写在哪 语法是什么
环境标签 双标记script
单行注释是//
多行注释 是/* 这里写注释 */
警示框alert()和python中的print的作用一样:打印结果、测试、调试程序。浏览器弹窗的形式展示
有可能有人会在每一行命令的后面加封号,不会报错。还有一个作用就是将两行内容压缩在一行中,封号隔开。
单独存一个js文件,后缀名是.js
导入的时候用script src查找js文件的位置,填路径即可
语法要求:行内式必须是事件的格式k="v" onclick='js命令'
鼠标滑过或者点击这些都是事件,用户操作,需要扑捉用户操作就是事件
在标签里面写
行内式基本不用:
1.冗余代码多,
2.行内式有局限性、有些命令没法写
注意范围、注意特点(必须是唯一性的)
招标签的时候,可以将js放到要找的标签后面,也可以定义一个入口函数。
入口函数是固定的格式,我们需要进行记忆
浏览器加载完就是标签加载完了。
先执行标签再执行js那么就需要window.onload = function(){}
一个html页面只能有一个js入口函数
document.getElementByid()
<!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>Document</title>
</head>
<body>
<!-- 范围 特点 -- 必须是唯一性的 -->
<div id="box">div</div>
</body>
</html>
<script>
// document 网页文档
// 从整个网页文档里面,通过id名box查找标签
alert( document.getElementById('box') )
</script>
作用:先执行标签,再执行js
window.onload = function(){命令}
<!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>Document</title>
<script>
// 当浏览器窗口加载完成之后,执行后面大括号里面的命令
window.onload = function(){
// document 网页文档
// 从整个网页文档里面,通过id名box查找标签
alert( document.getElementById('box') )
}
</script>
<script src="xx.js"></script>
<!-- **** 注意:一个html页面只能有一个js入口函数 -->
</head>
<body>
<!-- 范围 特点 -- 必须是唯一性的 -->
<div id="box">div</div>
</body>
</html>
window.onload = function(){
alert('这是外链式')
}
<!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>Document</title>
<script>
window.onload = function(){
// document.getElementById('box').innerHTML = 'js'
// document.getElementById('box').innerHTML = '<p>ppppppppp</p>'
// 清空div的内容
document.getElementById('box').innerHTML = ''
}
</script>
</head>
<body>
<div id="box">div</div>
</body>
</html>
标签的属性 k='v'
标签的css属性 k:v;
如果控制class属性js写法为className,其余html属性写法和js控制的时候写法一样
oBox .className = 'xx'
<!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>Document</title>
<script>
window.onload = function(){
// 如果控制class属性js写为className,其余html属性写法和js控制的时候写法一样
document.getElementById('img').src = 'img3.jpg'
document.getElementById('img').alt = '赵四'
document.getElementById('img').className = 'zhaosi'
}
</script>
</head>
<body>
<img src="img2.jpg" alt="" id="img" class="aa">
</body>
</html>
查找标签style.csskey
注意 如果是font-size 写为小驼峰 fontSize
但凡是变化的,需要写到js里面
<!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>Document</title>
<script>
window.onload = function(){
document.getElementById('box').style.color = 'red'
document.getElementById('box').style.background = 'green'
// font-size -- js带“-” 写为小驼峰
document.getElementById('box').style.fontSize = '60px'
}
</script>
</head>
<body>
<div id="box">测试css</div>
</body>
</html>
关键字var,后面跟着自定义的变量名,再对其进行赋值
js命名变量的时候会在原有标识符 的基础上加入数据类型的体现
标签存储到js,数据类型用o(object)
命名的时候数字、字母下划线,或者$
命名用小驼峰
不能和内置的关键字冲突、符合标识符的命名规则
网页内出现大量的行内式的style,很有可能是js控制的
<!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>Document</title>
<script>
window.onload = function(){
// var 变量名 = 值 js明明变量的时候会在原有标识符的基础上加入数据类型的体现
// fAa sAa bAa
// o 表示object 所有的标签通过js查找到之后都是对象型
var oBox = document.getElementById('box')
oBox.innerHTML = 'js'
oBox.className = 'bb'
oBox.style.color = 'red'
oBox.style.fontWeight = 'bold'
alert(typeof(oBox))
}
</script>
</head>
<body>
<div id="box">测试css</div>
</body>
</html>
检测数据类型typeof(类型名)
需要弹出的时候用到alert()
python中用的是很多是缩写,JavaScript中是完整的单词
number数值型
string字符串
boolean布尔型
undefined未定义类型(表示程序有bug,没有定义变量)
object
aa = null 叫做null类型(虽然得到的提示字是object,但是因为没有真实数据,所以只能叫做null类型)
对于真实有数据的得到提示字是object的数据才是对象型---标签
总结:基础(number、string、boolean、undefined、null) 和复杂型(复合---对象型有数据的)
<!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>Document</title>
<script>
var num1 = 1 // number 数值型
var num2 = 1.1 // number
var str = '1' // string 字符串
var bool = true //boolean 布尔型
// undefined 未定义 表示程序有bug
var aa = null // null类型 虽然得到的提示字是object,但是因为没有真实数据,所以只能叫null类型
// 对于真实有数据的得到提示字是object的数据才是对象型 -- 标签
alert(typeof(aa))
// 总结: 基础(number、string、boolean、undefined、null) 和 复杂(复合 -- 对象型)
</script>
</head>
<body>
</body>
</html>
和python中的函数中不同的是语法规则
定义 function fnAx(参数){命令}
function后面跟着函数名,但是一般前面加fn
调用的时候fnAx(参数)
还有一个不同点:可以先调用,再定义------js函数预解析
变量没有预解析功能
<!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>Document</title>
<script>
// alert(num) // 变量没有预解析到数据
var num = 1
// 定义 function fnAx(参数){命令}
// 调用 fnAx(参数)
alert(fnAlert()) // js函数预解析
function fnAlert(){
// alert('我是自定义函数里面的弹窗')
return 1
alert('22222')
}
</script>
</head>
<body>
</body>
</html>
js中:
小括号里面可以写条件和参数
大括号里面可以写命令
if(条件){条件成立时执行的命令}
else{命令}
else执行了,那么if没有执行
多重条件
if(){}else if(){}.....else{}
elif用其全称
<!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>Document</title>
<script>
// (条件/参数) {命令}
// if(条件){条件成立执行的命令}
// var age = 10
// if(age > 18)
// {
// alert('可以上网了')
// }
// else
// {
// alert('回家写作业去')
// }
// if(){}else if(){}...else{}
// 如果str==A 弹窗a str == B 弹窗b 既不是a也不是b弹窗daqiu
var str = 'q'
if(str == 'A')
{
alert('A')
}
else if(str == 'B')
{
alert('B')
}
else
{
alert('daqiu')
}
</script>
</head>
<body>
</body>
</html>
==判断等于(只判断数值)
=== (严格的判断,判断数据类型和数值)
js是弱类型语言(赋了什么值,就是什么类型)
&&而且
||或者
!否
<!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>Document</title>
<script>
// == 只判断数 === 判断数据类型和数 ----- js是弱类型语言
// alert( 1 == '1' )
alert( 1 === '1' )
</script>
</head>
<body>
</body>
</html>
事件语法 + 常用的事件属性:单击、鼠标滑过、鼠标离开
单击onclick 鼠标滑过onmouseover 鼠标离开onmouseout
目标.事件属性 = 命令
命令:1、函数名 2、匿名函数function(){}
事件语法:发生事件的目标,事件属性= 函数名/function(){}
function(){}-----叫做匿名函数,就是没有名字的函数
dbclick 双击double
十六进制0-9a-f
css2.0改变按钮的圆角,需要切图片
css3.0中可以border-radius:圆角半径;
圆角半径可以是百分比,可以是像素。当圆角半径是50%,背景是正方形的话,那么是一个圆。最大值是50%。
<!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>Document</title>
<script>
window.onload = function(){
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02')
var oBtn03 = document.getElementById('btn03');
// 事件语法 发生事件的目标.事件属性 = 函数名/ function(){}
// function(){} -- 叫做匿名函数
// ondblclick
oBtn01.onclick = fnClick
function fnClick(){
alert('单击成功')
}
oBtn02.onmouseover = function(){
alert('鼠标滑过成功')
}
oBtn03.onmouseout = function(){
alert('鼠标离开成功')
}
}
</script>
</head>
<body>
<button id="btn01">单击</button>
<button id="btn02">鼠标滑过</button>
<button id="btn03">鼠标离开</button>
</body>
</html>
<!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>Document</title>
<link rel="stylesheet" type="text/css" href="css/main02.css">
<script>
window.onload = function(){
// 1。设置按钮绑定单击事件:获取左侧用户输入的数据,显示到右侧; 下拉菜单选中不同的选项,更换不同的风格(css)
// 按钮
var oSetcard = document.getElementById('setcard');
var oInp01 = document.getElementById('input01')
var oInp02 = document.getElementById('input02')
var oInp03 = document.getElementById('input03')
var oInp04 = document.getElementById('input04')
var oInp05 = document.getElementById('input05')
var oInp06 = document.getElementById('input06')
var oInp07 = document.getElementById('input07')
// 右侧显示区域
var oCardWrap = document.getElementById('card_wrap')
oSetcard.onclick = function(){
// 如果用户没有输入内容 报错提示 -- 名字和职位是必填项
if(oInp01.value == '' || oInp02.value == '')
{
alert('请输入内容')
return
}
// 1、获取数据2、显示数据 == 获取每个表单控件的value属性值,把这个值显示 -- 找到标签保留标签和类的基础上替换文字即可
// alert(oInp01.value)
var str = '<div class="p01">'+oInp01.value+'<em>'+oInp02.value+'</em></div><div class="p02"><p class="company">银河科技信息技术有限公司</p><p>手机:1808888888</p><p>email:dasan@126.com</p><p>地址:中关村银河大厦B座2603</p></div>'
// 设置右侧显示区域的内容是 str
oCardWrap.innerHTML = str
// 下拉菜单控制风格:如果下拉选中风格1(如果下拉菜单的value==0),右侧就是风格1的样式 --css(更换class属性值idcar01 02 03);如果下拉选中风格2,右侧就是风格2的样式
if(oInp07.value == 0)
{
oCardWrap.className = 'idcard01'
}
else if(oInp07.value == 1)
{
oCardWrap.className = 'idcard02'
}
else
{
oCardWrap.className = 'idcard03'
}
}
}
</script>
</head>
<body>
<div class="set_con">
<div class="left_set">
<label>姓名:</label>
<input type="text" id="input01" value="会员名">
<label>职位:</label>
<input type="text" id="input02">
<label>公司名称:</label>
<input type="text" id="input03">
<label>手机:</label>
<input type="text" id="input04">
<label>email:</label>
<input type="text" id="input05">
<label>地址:</label>
<input type="text" id="input06">
<label>风格:</label>
<select id="input07">
<option value="0">风格一</option>
<option value="1">风格二</option>
<option value="2">风格三</option>
</select>
<input type="button" value="设 置" class="setbtn" id="setcard">
</div>
<div class="right_show">
<div class="idcard01" id="card_wrap">
<div class="p01">张大山<em>产品经理</em></div>
<div class="p02">
<p class="company">银河科技信息技术有限公司</p>
<p>手机:1808888888</p>
<p>email:dasan@126.com</p>
<p>地址:中关村银河大厦B座2603</p>
</div>
</div>
</div>
</div>
</body>
</html>
1、 按钮单击
2、 数据显示 – 获取表单控件的value – 拼字符串 – 设置显示区域的内容是这个字符串
3、 换右侧区域的风格 – 分析出if – 条件:看下拉菜单选中了哪一项(下拉菜单的vlaue == 0/1/2) -- 命令:右侧区域的class属性换值
4、 为空的判断 – if :获取value==‘’,执行命令报错提示用户alert + return
<!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>Document</title>
<link rel="stylesheet" type="text/css" href="css/main02.css">
<script>
window.onload = function(){
// 1。设置按钮绑定单击事件:获取左侧用户输入的数据,显示到右侧; 下拉菜单选中不同的选项,更换不同的风格(css)
// 按钮
var oSetcard = document.getElementById('setcard');
var oInp01 = document.getElementById('input01')
var oInp02 = document.getElementById('input02')
var oInp03 = document.getElementById('input03')
var oInp04 = document.getElementById('input04')
var oInp05 = document.getElementById('input05')
var oInp06 = document.getElementById('input06')
var oInp07 = document.getElementById('input07')
// 右侧显示区域
var oCardWrap = document.getElementById('card_wrap')
oSetcard.onclick = function(){
// 如果用户没有输入内容 报错提示 -- 名字和职位是必填项
if(oInp01.value == '' || oInp02.value == '')
{
alert('请输入内容')
return
}
// 1、获取数据2、显示数据 == 获取每个表单控件的value属性值,把这个值显示 -- 找到标签保留标签和类的基础上替换文字即可
// alert(oInp01.value)
var str = '<div class="p01">'+oInp01.value+'<em>'+oInp02.value+'</em></div><div class="p02"><p class="company">银河科技信息技术有限公司</p><p>手机:1808888888</p><p>email:dasan@126.com</p><p>地址:中关村银河大厦B座2603</p></div>'
// 设置右侧显示区域的内容是 str
oCardWrap.innerHTML = str
// 下拉菜单控制风格:如果下拉选中风格1(如果下拉菜单的value==0),右侧就是风格1的样式 --css(更换class属性值idcar01 02 03);如果下拉选中风格2,右侧就是风格2的样式
if(oInp07.value == 0)
{
oCardWrap.className = 'idcard01'
}
else if(oInp07.value == 1)
{
oCardWrap.className = 'idcard02'
}
else
{
oCardWrap.className = 'idcard03'
}
}
}
</script>
</head>
<body>
<div class="set_con">
<div class="left_set">
<label>姓名:</label>
<input type="text" id="input01" value="会员名">
<label>职位:</label>
<input type="text" id="input02">
<label>公司名称:</label>
<input type="text" id="input03">
<label>手机:</label>
<input type="text" id="input04">
<label>email:</label>
<input type="text" id="input05">
<label>地址:</label>
<input type="text" id="input06">
<label>风格:</label>
<select id="input07">
<option value="0">风格一</option>
<option value="1">风格二</option>
<option value="2">风格三</option>
</select>
<input type="button" value="设 置" class="setbtn" id="setcard">
</div>
<div class="right_show">
<div class="idcard01" id="card_wrap">
<div class="p01">张大山<em>产品经理</em></div>
<div class="p02">
<p class="company">银河科技信息技术有限公司</p>
<p>手机:1808888888</p>
<p>email:dasan@126.com</p>
<p>地址:中关村银河大厦B座2603</p>
</div>
</div>
</div>
</div>
</body>
</html>