HTML CSS js笔记

一、网页开发准备
HTML 超文本标记语言
HTTP/HTTPS 超文本传输协议
HTML5+CSS3
网页制作编写工具：
HbuilderX，网址：https://dcloud.io/
谷歌浏览器网址：https://www.google.cn/chrome/
二 、网页标签
html：网页的声明
head：网页的头部
title：网页的名称
body：网页的主体部分
三、网页标签
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 列表标签 无序列表

有序列表 定义列表 3.9 表格标签 table 表格 tr 行 th 表头单元格，默认加粗，居中 td 单元格 border : 表格的属性 cellpadding ：内填充，值越大，内容距离单元格越远 cellspacing ：外边距，单元格距离表格边框的距离，一般设为0 colspan="2" 合并列 rowspan="2" 合并行 align="center" 居中 3.10 表单标签 form：表单标签 text: 普通文本框 password：密码框 radio：单选 checkbox：复选 select 下拉列表 option 下拉列表项 textarea 多行文本框 ctrl+k 格式化代码 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: red; } 使用：

巴以冲突

2.3 ID选择器 定义的名称为title的ID样式 #title{ color: red; } 使用：

巴以冲突

选择器优先级： ID选择器>类选择器>标签选择器 2.4 其他选择器 后代选择器： .title span{ color: red; } 三、CSS样式 3.1 字体样式（常用的） font-size: 20px; 字体大小为20个像素 font-family: "微软雅黑"; 字体类型为微软雅黑字体 font-weight: bold; 字体加粗 normal去除加粗效果 font-style: italic|normal; 字体为斜体字 倾斜|正常 3.2 文本样式 color: cadetblue; 文本的颜色值 line-height: 50px; 段落文本行高 text-align:left|center|right; 文本的对齐方式，左，中，右 text-decoration: underline; 文本装饰：下划线 none：去除下划线 四、盒子模型 里面可以装内容的各种标签容器都可以称作为盒子。 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、块级元素可以嵌套任意的元素，p标签除外，p标签只能嵌套行内元素及行内块元素 2、行内元素只可以嵌套行内元素及行内块元素，不可以嵌套块级元素 快速生成列表的快捷键：ul>li*8

五、超链接的样式（伪类）
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
颜色值在线转换工具：
https://www.sioe.cn/yingyong/yanse-rgb-16/
  空格
七、外边距
margin：在网页里面，盒子距离盒子的距离就叫做外边距
left 左
top 上
right 右
bottom 下
*{
margin: 0; 所有网页标签上的外边距统统 清除
}
*是通配符，匹配所有的网页标签
margin: 0; 上下左右
margin: 20px 30px; 上下 左右
margin: 20px 50px 100px; 上 左右 下
margin: 50px 30px 20px 0; 上 右 下 左 顺时针
八、内边距
内容距离盒子的距离，通俗点说就是填充。
填充可以清除，也可以自定义设置。
padding
padding: 0; 上下左右
padding: 20px 30px; 上下 左右
padding: 20px 50px 100px; 上 左右 下
padding: 50px 30px 20px 0; 上 右 下 左 顺时针
九、边框
border
border-left: 1px solid #ff0000;
border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-bottom: 1px 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; 背景图片的大小
十一、浮动
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;
脱离了标准文档流
javascript
定义：简称js，它是基于对象的，事件驱动的，具有安全性能的脚本语言。
引擎：会自动解释执行脚本语言，执行的顺序是自上而下，按照顺序执行，边解释边执行。
document 文档对象
一、网页引入js的三种方式
1.1 内部

1.2 外部

1.3 行内

二、声明变量
var num=10;
var name=“张三”;
js是一种弱类型的语言
typeof(num)
三、数据类型
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=“我爱玩游戏”;
innerHTMLinnerText与 的区别：
innerHTML可以获取节点下的标签及文本内容
innerText只可以获取节点下的文本内容
七、自定义函数
function sum(num1,num2){
document.write(num1+num2)
}
八、js中的事件
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; 内容溢出盒子后做隐藏处理