【无标题】

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 图片标签 src:图片的路径 alt：图片的名称 width：宽度 height：高度 一般来说，网页的图片只需要设置宽度即可，高度会随着宽度进行等比缩放 图片的类别：jpg（jpeg），png（透明背景），gif（动画），webp，bmp 3.8.列表标签 无序列表

有序列表

1. 1. 定义列表

      水果

      苹果

      葡萄

      家电

      冰箱

      笔记本

      3.9表格标签 table表格 tr行 td单元格 cellpadding：内填充，值越大，内容距离单元格越远 cell spacing：外边距，单元格距离表格边框的距离，一般设0 colspan=”2”合并行 rowspan=”2”合并列 align=”center”居中 3.10表单标签 form：表单标签 text：普通文本框 passwor：密码框 radio：单选 checkbox：复选 select 下拉列表 option 下拉列表项 textarea 多行文本框

11.8
css 层叠式样式表
html标签 负责布局，轮廓
css样式 负责表现
Javascript脚本，负责行为，动态
鸟
html：一只扒光羽毛的丝鸟
css：鸟的羽毛
Javascript：活的，行为，飞，叫
一、网页中引用css的三种方式
1.1内部样式

在head之间，在title之下，定义的。
1.2外部样式
引入外部的样式

1.3行内样式 直接插入到标签之内

行内样式>(外部样式，内部样式，取决于哪个后执行，就是用后面的样式) 三、css样式选择器 2.1标签选择器 P，span，h1 2.2类选择器 定义的名称为title的类样式 .title{ color: green; } 使用：

巴以冲突

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 &nbsp空格

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; 内容溢出盒子后做隐藏处理