一、网页开发准备
HTML 超文本标记语言
HTTP/HTTPS 超文本传输协议
HTML5+CSS3
网页制作编写工具：
HbuilderX，网址：https://dcloud.io/
谷歌浏览器网址：https://www.google.cn/chrome/
二 、网页标签
html：网页的声明
head：网页的头部
title：网页的名称
body：网页的主体部分
三、网页标签
3.1 标题标签
<h1>我是标题</h1>
<h2>我是标题</h2>
<h3>我是标题</h3>
<h4>我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>
3.2 水平线标签
<hr/> 单标签
3.3 换行标签
<br/> 单标签
3.4 段落标签
<p></p>
3.5 文本标签
<em></em> 倾斜
<strong></strong> 加粗
<span></span> 正常
3.6 超链接
<a href="">政策"真金白银"加力稳就业</a>
href="" 链接的目标网址路径
href="https://www.baidu.com/" 站外链接
href="index4.html" 站内链接
href="#" 空链接
target="_blank" 新开一个窗口
3.7 图片标签
<img src="" alt="" width="1000" height="50"/>
src ：图片的路径
alt : 图片的名称
width：宽度
height：高度
一般来说，网页的图片只需要设置宽度即可，高度会随着宽度进行等比缩放
图片的类别: jpg(jpeg)，png（透明背景）, gif(动画)，webp，bmp
3.8 列表标签
无序列表 <ul><li></li><li></li><li></li></ul>
有序列表
定义列表
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 多行文本框
<input type="submit" value="提交" />
<input type="button" value="普通按钮"/>
<input type="reset" value="重置" />
========================
ctrl+k 格式化代码
css 层叠式样式表
html标签， 负责布局，轮廓
css样式， 负责表现
javascript脚本，负责行为，动态
鸟
html：一只扒光羽毛的死鸟
css: 鸟的羽毛
javascript: 活的，行为，飞，叫
一、网页中引入css的三种方式
1.1 内部样式
<style>
p{
color: red;
}
</style>
在head之间，在title之下，定义的。
1.2 外部样式
引入外部的样式
<link rel="stylesheet" href="css/index.css" />
1.3 行内样式
直接插入到标签之间的
<p style="color: yellow;"></p>
三种方式的优先级：
行内样式>(外部样式,内部样式，取决于哪个后执行，就是用后面的样式)
二、css样式选择器
2.1 标签选择器
p,span,h1
2.2 类选择器
定义的名称为title的类样式
.title{
color: red;
}
使用：
<h1 class="title">巴以冲突</h1>
2.3 ID选择器
定义的名称为title的ID样式
#title{
color: red;
}
使用：
<h1 id="title">巴以冲突</h1>
选择器优先级：
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; 背景图片的位置
backgr
十一、浮动
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; 鼠标变为小手
ound-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;
脱离了标准文档流
text-indent:10px; 一般用于p标记中，用于首行缩进
块级元素在父级盒子中居中显示一般可以使用margin:0 auto;
行内元素或行内块元素在父级盒子中居中显示一般设置text-align:center；即可。
javascript
定义：简称js，它是基于对象的，事件驱动的，具有安全性能的脚本语言。
引擎：会自动解释执行脚本语言，执行的顺序是自上而下，按照顺序执行，边解释边执行。
document 文档对象
一、网页引入js的三种方式
1.1 内部
<script>
document.write("我要好好学习javascript!");
</script>
1.2 外部
<script src="js/index.js"></script>
1.3 行内
<input type="button" οnclick="javascript:alert('ok')" value="点击我" />
二、声明变量
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; 内容溢出盒子后做隐藏处理
6074
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
