HTML
Day01
一、网页开发准备
HTML 超文本标记语言
HTTP/HTTPS 超文本传输协议
网页制作编写工具：hbuildx
HbuilderX 下载网址：httpS://dcloud.lo/
谷歌浏览器网址：http://www.google.cn/chrome/ 64位
二、网页标签
html：网页的声明
head:网页的头部
title:网页的名称
body：网页的主体部分
三、网页标签
1、标题标签
<h> </h>
2、水平线标签
`<hr/>` 单标签
3、 换行标签
<br/> 单标签
4、段落标签
<p> </p>
5、文本标签
<em></em> 斜体
<strong></strong> 加粗体
<span></span> 正常体
6、超链接
<a href=""></a>
href="“是链接目标网址的路径
href=“https://www.baidu.com"站外链接
href=“index.html"站内链接
href=”#“空链接
target=”_blank"新开一个窗口
target=”_self” 默认
7、如何在网页显示图片
在项目中创建网页
选中img
<img src="img/1.png" alt="" width="" />
src:图片的路径
alt:名字
width:图片的宽度
height:高度
网页的图片只需要设置宽度不设置高度，高度会跟随宽度等比缩放
8、列表标签
无序列表
<ul>
<li> </li>
</ul>
li—列表项—可以出现多个
有序列表
a:小写字母序号
A：大写字母序号
I：大罗马数字序号
i：小罗马数字序号
<ol type="a/A/i/I">
<li> </li>
</ol>
ctrl+k 整理代码
Day02
一、定义列表
<dl>
<dt>一级标签</dt>
<dd>二级标签</dd>
</dl>
二、表格标签
<table border="1" width="" cellpadding="" cellsapcing="">
<tr>
<td></td>
</tr>
</table>
<th></th> 表头，默认加粗居中
<tr></tr>行标签
<td></td>单元格
border=“1” 属性
width=“” 宽度
cellpadding=“” 内填充，值越大，内容距离单元格越远
cellspacing=“” 外边距，单元格距离表格边框的距离，一般为0
合并单元格（列）：去掉最后一个单元格，加colspan=“2”
<td colspan="2"></td>
合并单元格（行）：删掉下面的单元格，加rowspan=“2”
<td rowspan="2"></td>
align=“center” 居中
align=“right” 右
align=“lift” 左
三、表单标签
text----普通文本框
password—密码文本框
radio ------单选框
checkbox -----复选框
<select>------下拉选择框
textarea-----多行文本框
cols=“” 列数
rows=“” 行数
<form action="#">
账号:
<input type="text"/> <br/>
密码： <input type="password"/>
性别：<input type="radio" name="xb"/>男<input type="radio" name="xb"/>女
爱好：<input type="checkbox">唱歌<input type="checkbox">跳舞<input type="checkbox">画画
住址：
<select>
<option></option>----选择项
</select>
简介：
<textarea cols="30" rows="10"></textarea>
</form>
CSS样式
Day01
CSS 层叠式样式表
html标签—负责布局 轮廓
css样式—负责表现
javascript脚本–负责行为 动态
一、网页中引入css样式的三种方式
1、内部样式
在title之下，head之间
<style>
p{
color: red;
}
</style>
2、外部样式
在css文件下创建一个css样式表，文件名必须和html相同
html中：在title之下，head之间
<link rel="stylesheet" href="css/index-01.css" />
css中：
p{
color: orange;
}
3、
直接插入到标签里面
<p style="color: pink;">你看见才能</p>
三种样式的优先级
如果三种同时出现，行内样式>(外部样式 内部样式—取决于那个后执行)
二、css样式的选择器
1、标签选择器
p,span,h1…
2、类选择器
//定义的名称为title的类样式
.名称
{
.color: red
}
使用：class=“名称”；
<p class="title">你看见才能</p>
<span class="title">你好久</span>
<h3 class="title">好机会</h3>
3、ID选择器—唯一性(只能出现一次)
//定义的名称为title的类样式
#名称{
#color: red
}
使用：class=“名称”；
<p id="title">你看见才能</p>
<span class="title">你好久</span>
<h3 class="title">好机会</h3>
选择器优先级：
id选择器>类选择器>标签选择器
4、其他选择器
后代选择器
.title span{
color: blue;
}
<p class="title">你看见才能 <span >你好久</span></p>
p是span的父类
三、css样式
1、字体样式
font-size—>字体大小
font-family—>字体类型
font-weight: bold;—>字体是否加粗
font-weight: normal;—>去除加粗效果
font-style: italic;—>字体倾斜
font-style: normal;—>字体正常
text-indent: 2em;—>缩进两个字符
<style>
p{
font-size: 7px;
font-family: "楷体";
font-weight: bold;
font-style: italic;
font-style: normal;
font-weight: normal;
}
</style>
2、文本样式
color: blue;—>文本的颜色值
line-height: 50px;—>段落文本行高
text-align: center;—>文本对齐方式–左 中 右
text-decoration: underline;—>文本装饰–下划线
text-decoration: line-through;—>删除线
text-decoration: none;—>去掉下划线
p{
color: blue;
line-height: 50px;
text-align: center;
text-decoration: underline;
text-decoration: line-through;
text-decoration: none;
}
将图片进行居中
img{
display: block;将图片转换为块级元素，可以使其居中
margin: 0 auto;用于设置图片的外边距，将左右外边距设置为auto，则图片会是水平居中
}
文字进行阴影
text-shadow: h-shadow v-shadow blur color;
h-shadow:水平阴影的位置,
v-shadow:垂直阴影的位置,
blur 模糊的距离
color 阴影的颜色
Day02
一、盒子模型
里面可以装内容的各种标签容器都可以称作盒子
width: 300px;—>宽
height: 300px;—>高
border: 1px solid red;—>边框线：像素 实线 颜色
line-height:38—>行高
text-align: center;—>居中
list-style:none;---->去掉小黑点
<style>
div{
width: 300px;
height: 300px;
border: 1px solid red;
text-align: center;
line-height: 300px;
}
</style>
<body>
<div>
type="square" 将圆点改为正方形
<span>我是内容</span>
</div>
</body>
二、标签的分类
1、块级元素
p,div,ul,li,ol,h1-h6
特点：独占一行，—>可以自定义宽度和高度
2、行内元素
span,em,strong,a
特点：不独占一行，不可以自定义宽度和高度
3、行内块元素
img,input
特点：不独占一行，可以自定义宽度和高度
4、块级元素和行内元素的转换
块级元素转为行内元素：display:inline;
行内元素转为块级元素：display:block;
三、标签的嵌套
规则：
1、块级元素可以嵌套任意的元素，，p标签除外
p标签只能嵌套行内元素及行内块元素
2、行内元素只可以嵌套行内元素及行内块元素，不可以嵌套块级元素
四、超链接的样式(伪类)
<title></title>
<style>
a{
color: black;
text-decoration: none;
}
a:hover{
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#">我是超链接</a>
</body>
link：超链接样式（可不写）
hover：划过显示样式
visited：访问过的状态
active：鼠标单击未释放是的状态
五、颜色值的表示形式
1、单词
2、十六进制
#ff0000;–red
十六进制颜色值转换
（https://www.sioe.cn/yingyong/yanse-rgb-16/）
3、RGB–0-255
color: rgb(255, 0, 0);
  空格
快速生成列表：ul>li*8—按tab
多行写同样的代码：alt+鼠标左键下滑
Day03
一、盒子的外边距
margin：外边距
margin-top: 0; 上
margin-bottom: 0; 下
margin-left: 0; 左
margin-right: 0; 右
margin: 0; —>直接代表上下左右
*—>是通配符，匹配所有的网页标签
*{
margin: 0;
} 所有标签上的外边距都被清除
margin: 50px 30px 40px 29px;—>
1个值代表上下左右
4个值代表上右下左
2个值代表上下 左右
3个值代表 上 左右 下
二、盒子的内边距
内容距离盒子的距离，通俗说就是填充
填充可以清楚，也可以自定义设置
内边距（padding）是指一个元素的内容和边框之间的区域。
和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距
padding 内边距
padding-top 上
padding-bottom 下
padding-left 左
padding-right 右
padding：0；
1个值代表上下左右
4个值代表上右下左
2个值代表上下 左右
3个值代表 上 左右 下
三、盒子的边框
border
border: 1px solid black;
border-top: ;上
border-bottom: ;下
border-left: ;左
border-right: ;右
dashed 虚线
dotted 小圆点
solid 实线
四、盒子的背景颜色和图片
1、背景颜色
background-color: ;
2、背景图片----body里
background-image: url(图片名称);
background-repeat: no-repeat;背景不重复
background-position: 30 50; 背景的位置，左右 上下
background-size: ; 背景图片大小
Day04
一个盒子要在其父级容器中居中显示则使用margin：0 auto；
透明度：opacity：；值在0-1之间
划过鼠标变为小手：cursor:pointer;
一、浮动
float: left;把元素设置为浮动元素，向左浮动
float:right;向右浮动
特征：加上float: left;属性后元素就脱离了标准文档流
clear: both;再此元素的两侧清除浮动元素
clear: left;元素被向下移动以清除左浮动
clear: right;元素被向下移动以清除右浮动
二、定位
1、相对定位
position: relative;
left: 50px;从左往右位移了50
bottom：50px；从下往上
相对定位的元素没有脱离标准文档流，虽然位移了但之前的文档位置还存在
2、绝对定位
position: absolute;
添加绝对定位的元素会脱离标准文档流
绝对定位的元素的偏移，如果父级盒子未定位元素，则会参考父级盒子的位置作偏移，如果父级盒子不是定位元素，则会参考body作偏移元素‘
3、固定定位
position: fixed;脱离了标准文档流，
right:0;右
bottom:0;下
vertical-align:middle;垂直位置保持对齐
placeholder:文本框里的文字
text-index:10;一般用于p标记，用于首行缩进
盒子在父级盒子中居中显示一般可以使用margin：0 auto；
但行内元素或行内块元素在父级盒子中显示用text-align：center
JS
Day01
javascript 简称js，是基于对象的，具有事件驱动的具有安全性能的脚本语言
引擎：会自动解释执行脚本语言，执行顺序：自上而下按照顺序执行，边解释边执行
document 文档对象
一、网页引入js的三种形式
1、内部
body下：
<script>
document.write("我要好好学习！！!")
</script>
2、外部
body下：<script src="js/index.js"></script>
js文件下：document.write(“我要好好学习！！!”)
3、行内
alert—>弹出
<body>
<input type="button"
onclick="javascript:alert('ok')"
value="点击我"/>
</body>
二、声明变量
var num=10;
var name=“张三”;
js是一种弱类型的语言
三、数据类型
看类型：typeof()
基本数据类型：五种
1、number 数值类型(整数 小数)
2、string 字符类型
3、boolean 布尔类型
4、object/null类型
5、undefined 代表变量未赋值，未定义
引用数据类型：
对象，数组
四、运算符
1、算术运算符
+ - * / % ++ --
2、比较运算符
> >= < <= == (比较的是值是否一样) !=
===(全等于，比较的是变量的数据类型和值，如果两个都一致则为true)
3、逻辑运算符
&&
||
！
五、选择结构
if else
switch
六、循环结构
while
do while
for
七、document对象
得到id为title的节点对象
var node=document.getElementById("title")
获取节点的文本内容
var node=document.getElementById("title");
var title=node.innerText;
alert(title)
设置节点的文本内容
document.getElementById("title").innerText="我爱玩游戏";
设置节点的文本格式
document.getElementById("title").innerHTML="<strong><a href='#'>我爱玩游戏</a></strong>";
innerHTML与innerText的区别
可以获取节点下的标签及文本内容
只获取节点下的文本内容
onclick 单击事件
八、自定义函数
function sum (){}
有参
<input type="button" value="计算两数之和" onclick="sum()"/>
function sum (){
var num1=10;
var num2=20;
document.write(num1+num2)
}
无参
<input type="button" value="计算两数之和" onclick="sum(11，22)"/>
function sum (num1,num2){
document.write(num1+num2)
}
1403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
