11.6
一、网页开发准备
HTML超文本标记语言
HTTP/HTTPS超文本传输协议
HTML5+CSS3
网页制作编写工具:HbuilderX,网址:https://dcloud.io
谷歌浏览器网址:https://www.google.cn/chrome/
一、网页标签
html:网页的声明
head:网页的头部
title:网页的名称
boby:网页的主体部分
二、网页标签
3.1 标题标签
我是标题
我是标题
我是标题
我是标题
我是标题
我是标题
3.2 水平线标签单标签 3.3 换行标签
单标签 3.4 段落标签 3.5文本标签 倾斜 加粗 正常 3.6超链接 政策”真金白银”加力稳就业 href=””链接的目标网址路径 href=”https://www.baidu.com/”站外链接 href=”index4.html”站内链接 href=”#”空连接 target=”_blank”新开一个窗口 3.7 图片标签
-
定义列表
-
水果
- 苹果
- 葡萄 家电
- 冰箱
- 笔记本
-
定义列表
11.8
css 层叠式样式表
html标签 负责布局,轮廓
css样式 负责表现
Javascript脚本,负责行为,动态
鸟
html:一只扒光羽毛的丝鸟
css:鸟的羽毛
Javascript:活的,行为,飞,叫
一、网页中引用css的三种方式
1.1内部样式
在head之间,在title之下,定义的。
1.2外部样式
引入外部的样式
巴以冲突
2.3 ID选择器 定义的名称为title的ID样式 #title{Color:red; } 使用:巴以冲突
选择器优先级: ID选择器>类选择器>标签选择器 2.4 其他选择器 后代选择器: 例子:[环球网报道]据塔斯社7日援
四、css样式 3.1字体样式(常用的) font-size:20px;字体大小为20个像素 font-family:“宋体”;字体类型为宋体 font-weight:bold;字体加粗 font-weight:normal;去除字体加粗 font-style:italic;字体倾斜 font-style:normal;字体正常 3.2文本样式 color:cadetblue;文本的颜色值 line-height:50px;段落文本的行高 text-align:right/left;向右/向左对齐 text-align:center; 居中对齐 text-decoration:underline; 下划线 text-decoration:none;去除下划线11.9
一、盒子模型
里面可以装内容的各种标签容器都可以称作为盒子。
Width:300px;宽度
Height:300px;高度
Border:1px;solid red;盒子的边框线,1个像素 实线 红色
标签的分类:
1.块级元素
p、div、ul、li、h1-h6
特征:独占一行,可以自定义宽度和高度
2.行内元素
span、em、strong、a
特征:不独占一行,不可以自定义宽度和高度
3.行内块元素
img、input
特征:不独占一行,可以自定义宽度和高度
块级元素与行内元素的转换:
块级元素转行内元素:display:inline
行内元素转块级元素:display:block
标签的嵌套规则:
1.块级元素可以嵌套任意元素
2.行内元素只可以嵌套行内元素及行内块元素,不可以嵌套块级元素
五、超链接的样式(伪类)
a:link{
color: black;
text-decoration: none;
}
a:hover{
color: red;
text-decoration: underline;
}
a:visited{
color: blueviolet;/访问过的状态/
}
a:active{
color: darkcyan;/鼠标单机未释放时的状态/
}
六、颜色值的表现形式
6.1 单词
red
6.2 十六进制
#ff0000;
二进制 0 1
十进制
十六进制 0 1 2 3 4 5 6 7 8 9 A B C D E F
6.3 RGB
Color:rgb(red,green,blue);取值:0-255
快速生成列表的快捷键 ul>li*8  空格
11.10
七、外边距
margin:在网页里面,盒子距离盒子的距离就叫做外边距
left 左 right右 top上 bottom下
margin:0 上下左右
margin:20px 30px;上下 左右
margin:20px 50px 100px;上 左右 下
margin:50px 30px 20px 0;上 右 下 左 顺时针
*{
margin:0;所有网页标签上的外边距统统清楚
}
*是通配符,匹配所有的网页元素
八、内边距
内容距离盒子的距离,通过俗点说就是填充
填充可以清楚,也可以自定义设置
padding 填充
padding:0 上下左右
padding:20px 30px;上下 左右
padding:20px 50px 100px;上 左右 下
padding:50px 30px 20px 0;上 右 下 左 顺时针
九、边框
border
border-left:10px solid #ff0000;
border-top:5px solid #ff0000;
border-right:30px solid #ff0000;
border-bottom:5px solid #ff0000;
border-right-color:#ff0000;
border-right-width:1px;
border-right-style:solid;
十、背景颜色和背景图片
10.1背景颜色
background-color:#ff0000;
10.2背景图片
background-image:url(img/b.png);背景图片
background-repeat:no-repeat;背景不重复
background-position:135px 120px;背景图片的位置
background-size:25px;背景图片大小
11.13
十一、浮动
float:left;把元素设置为浮动元素,向左浮动
特征:加上属性后,元素就脱离了标准文档流
clear:both;在此元素的两侧清除浮动元素
一个元素(一个盒子)要在其父级容器中居中显示,则使用margin:0 auto;
十二、定位
12.1相对定位
position:relative;
left:50px;从左往右位移50像素
相对位移的元素没有脱离标准文档流,虽然位移走了,但之前的文档位置还存在
12.2 绝对定位
position:absolute;
添加了绝对位移的元素会脱离标准文档流
绝对定位的元素的偏移,如果父级盒子为定位元素,则会参考父级盒子的位置做偏移。如果父级盒子不是定位元素,则会参考body做偏移。
opacity:0.7;透明度,取值为0-1之间
cursor:pointer;鼠标变为小手
12.3固定定位
Position:fixed;
脱离了标准文档流
text-indent:10px; 一般用于p标记中,用于首行缩进
块级元素在父级盒子中居中显示一般可以使用margin:0 auto;
行内元素或行内块元素在父级盒子中居中显示一般设置text-align:center;即可。
javascript
定义:简称js,它是基于对象的,事件驱动的,具有安全性能的脚本语言。
引擎:会自动解释执行脚本语言,执行的顺序是自上而下,按照顺序执行,边解释边执行。
document 文档对象
11.16
一、网页引入js的三种方式
1.1 内部
1.2 外部
1.3 行内
二、声明变量
var num=10;
var name=“张三”;
js是一种弱类型的语言
三、数据类型
js的基本数据类型有五种:
3.1 number 数值类型
3.2 string 字符类型
3.3 boolean 布尔类型
3.4 object或者null类型
3.5 undefined类型,代表着变量未赋值,未定义
引用数据类型
对象,数组…
四、运算符
4.1 算术运算符
-
-
* / % ++ --
-
4.2 比较运算符
= < <= ==(比较的是值是否一样) !=
===(全等于,比较的是变量的数据类型和值,如果两个都一致则为true)
4.3 逻辑运算符
&& 与
|| 或
! 非
五、选择结构
5.1 if…else…
5.2 switch
六、循环结构
6.1 while
6.2 do …while
6.3 for
六、document对象
document.getElementById(“title”); 得到id为title的节点对象
//获取节点的文本内容
var node=document.getElementById(“title”);
var title=node.innerText;
alert(title)
//设置节点的文本内容
document.getElementById(“title”).innerText=“我爱玩游戏”;
innerHTML与 的区别:
innerHTML可以获取节点下的标签及文本内容
innerHTML只可以获取节点下的文本内容
七、自定义函数
function sum(num1,num2){
document.write(num1+num2)
}
onclick 单击事件
onmouseover 鼠标移入
onmouseout 鼠标移出
display: none;元素的显示状态为不显示
var node=document.getElementById(“info”);
节点对象.style.样式名称=“属性值”;
node.style.display=“block”;
九、计算器
内置函数eval()
可以计算一个表达式,转成算术运算,并计算结果
字符串对象的方法:slice(0,-1)把字符串的最后一位截取,拿到截取后的字符串
按alt+小键盘41420
平方根的内置函数:Math.sqrt(title);
overflow: hidden; 内容溢出盒子后做隐藏处理