第二阶段笔记

11月6日（HTML）
一、网页开发准备
HTML 超文本标记语言
HTTP/HTTPS 超文本传输协议
HTML5+CSS3
网页制作编写工具：
HbuilderX ，网址：http://dcloud.io
谷歌浏览器网址：http://www.google.cn/chrome/
二、网页标签
Html：网页的声明
Head：网页的头部
Title：网页的名称
Body：网页的主体部分
三、网页标签：
3.1标题标签

我是标签

我是标签

我是标签

我是标签

我是标签

我是标签

3.2水平线标签

---

单标签

3.3换行标签

单标签

3.4段落标签

3.5文本标签 倾斜 加粗 正常

3.6超链接
政策”真金白银”加力稳就业
Href = “” 链接的目标网址路径
Href = “http：//www.baidu.com/” 站外链接
Href = “index4.html” 站内链接
Href = “#” 空链接
Href = “—blank” 新开一个窗口
3.7图片标签
<img src=””alt=””width=”1000”height=”50”/>
Src:图片的路径
Alt：图片的名称
Width：宽度
height：高度
一般来说，网页的图片只需要设置宽度即可，高度会随着宽度进行等比缩放
图片的类别：jpg（jpeg），png（透明背景），gif（动画），webp，bmp
3.8列表标签
无序列表

有序列表

11月7日
定义列表

一级列表项

二级列表项

水果1 水果2 水果3

苹果

葡萄

家电

手机

笔记本

3.9表格标签 Table 表格 Tr 行 Td 单元格 Border：表格的属性 Cellpadding：内填充，值越大，内容距离单元格越远 Cellspacing：外边框，单元格距离表格边框的距离，一般设为0 Colspan=“2”合并行 Rowspan=“2”合并列 Align = “center”居中 3.10表单标签 Form：表单标签 Text：普通文本框 Password:密码框 Radio：单选 Checkbox：复选 Textarea 多行文本框 ======================= CTRL+格式化代码

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；去除下划线 Text-decoration：line-through；中划线

11月9日
四、盒子模型
里面可以装内容的各种标签容器都可以称作为盒子。
Width：300px （宽度）
height: 300px;（高度）
border: 1px solid red;（盒子的边框线，1个像素，实线，红色）
line-height: 300px;（盒子的行高）
例子：

标签样式：
1.块级元素
P、div、ul、il、h1-h6
P：特征：独占一行，可以自定义宽度和高度
2.行内元素
Span、em、srtong、a
Span:不独占一行，不可以自定宽度和高度
3.行内块元素
Img、input
Img：不独占一行，可以自定宽度和高度
块级元素与行内元素的转换：
块级元素转为行内元素: display：inline;
行内元素转为块级元素: display:block;
标签的嵌套规则：
1.块级元素可以嵌套任意元素
2.行内元素只可以嵌套行内元素及行内块元素，不可以嵌套块级元素
五、超链接的样式（伪类）
a:link{
Color:black;
Text-decoration:none;
}
a:hover{
Color:red
Text-decoration:underline;
}
六、颜色值的表现形式
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日
颜色值在线转化工具：
https：//www.sioe.cn/yingyong/yanse-rab-16/
 空格
七、外边框
Margin：在网页里面，盒子的距离就叫做外边距
Left：左
Top：上
Right：右
Bottom：下
*{
Margin:0; 所有网页标签上的外边框统统清除
}
*是通配符，匹配所有的网页标签
Margin：上，下，左，右；
Margin：50px，30px，20px，0；上 右 下 左（顺时针）
Margin：20px，30px；上 左右 下
Margin：50px，30px，20px，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:no0-repeat;背景不重复
Background-positiong：135px，120px；背景图片的位置
Background-size：25px；背景图片的大小
11月15日
十一、浮动
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; 即可
11月16日
Javascript
定义：简称js，她是基于对象的，事件驱动的，具有安全性能的脚本语言。
引擎：会自动解释执行脚本语言，执行的顺序是自上而下，按照顺序执行，边解释边执行。
Document文档对象
一、网页引入js的三种方式：
1.1内部(在body下)

1.2外部(在css里)

1.3行内

二、声明变量： var num=10; Var name=“张三” Js是一种弱类型的语言

三、数据类型：
Js的基本数据类型有五种(var)
3.1number数值类型
3.2String字符类型
3.3Boolen 布尔类型
3.4Object或者null类型
3.5Underfined类型,代表着变量未赋值，未定义
引用数据类型
对象，数值…
四、运算符：
4.1算数运算符
±*/ % ++ –
4.2比较运算符
< > <= >= ==（比较的是值是否一样） !=
===(全等，比较的是变量的数据类型和值，如果两个都一致则为ture)
4.3逻辑运算符
& 于
|| 或
! 非
五、选择结构
If…else
swith
六、循环结构
6.1 while
6.2 do…while
6.3 for
七、document对象
document.getElementById(“title”)；得到id为title的节点对象
1.获取节点的文本内容
var node=document.getElementByld(“title”)；
var title=node.innerText；
alert(title)
2.设置节点的文本内容
document.getElementById(“title”).innerText=“我爱学习”;

innerHTML与innerText的区别：
innerHTML可以获取节点下的标签及文本内容
innerHTML只可以获取节点下的文本内容
八、自定义函数
function sum(num1,num2){
Document.write（num1+num2）
}
九、单击事件：
onclick 单击事件
display：none；元素的显示状态为隐藏
Onmouseout：鼠标移入
Onmouseout:鼠标移出
var node=document.getElementByld(“info”);
节点对象.style.样式名称=“属性”
nodestyle.display=“block”;
十、计算：
内置函数 eval（）
可以后计算一个表达式，转化成算数运算，并计算结果
slice(0,-1)把字符串的最后一位截取，拿到截取后的字符串
按alt+41420
平分根的内置函数：math.aqrt();
overflow: hidden;内容溢出盒子后做隐藏处理