编辑器的基础使用

编辑器推荐使用：
HBuilderx（免费+中文）（建议使用）
在这里插入图片描述

Sublime（免费+英文）
在这里插入图片描述
Sublime中文设置方法，下载语言插件：
1、进入Sublime后，Shift+Ctrl+P，在查找框中输入Install
2、在搜到的列表中选择安装程序包控件Install Package Control
3、安装成功后有提示
4、Shift+Ctrl+P，在查找框中输入Install package
5、确定后会弹出新的选项框，搜索Chinese，选择ChineseLocalizations
6、稍等后会自动设置中文，此时可以在帮助-Language中设置其他语言

Sublime编译器基本使用

1、创建新项目Ctrl + n
2、保存项目Ctrl + s，另存为Ctrl + shift+ n
（保存时后缀为html）
3、右下角要选择格式为HTML

制作HTML页面

二：基本标签：html，head，body，title

HTML里面的所有东西，都叫标签
分两种，不用闭合，需要闭合
<标签名>
<标签名></标签名>

<!doctype html>文档头，从此开始为HTML代码
<html>人
	<head>头部标签-脑袋（名字，信息等）
		<title>文件在页面上的显示的名字
		</title>
	</head>
	<body>身体（网页中的内容）
	</body>
</html>

具体展示：
在这里插入图片描述

三：标签DIV

大部分网站通过div标签构成
特性：
一行一行，带有换行效果
在这里插入图片描述

四：标签img，属性src

网页=文字+视频+图片
img：image缩写，插入图片，在网页上显示图片，不需要闭合
需要让img标签和图片有关联：
放入属性，src：地址属性

<img src='XXX.jpg'>

<!DOCTYPE html>
<html>
<head>
	<title>
		Ai
	</title>
</head>
<body>
	<div>
		我叫Ai，爱好听音乐
	</div>
	<div>
		打游戏，看电影
	</div>
	<div>
		三十年河东三十年河西
	</div>
	<img src='image/1.jpg'>
	<img src="image/2.jpg">
</body>
</html>

在这里插入图片描述

五：标签a，属性href，target

页面跳转：

<a href="这里写链接地址">我要打开XX页面</a>

原页面不关闭，打开新页面进行跳转：

<a href="https://www.baidu.com/" target="_blank">打开百度</a>

制作点击图片跳转：

<a href="这里写链接地址">
	<img src="xxx">
</a>

具体代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>
		Ai
	</title>
</head>
<body>
	<div>
		跳转链接
	</div>
	<a href="https://www.baidu.com/">打开百度</a>
	<a href="https://www.douyin.com/" target="_blank">新页面打开抖音</a>
	<a href="1-5 a标签，href属性 - 副本.html">跳转到副本</a>
	<a href="https://www.baidu.com/">
		<img src="image/1.jpg">
	</a>
</body>
</html>

在这里插入图片描述

六：无序列表标签ul，li

ul是列表，li是项
ul中可以有无数个li，li中可以放任意内容
正规情况，ui下第一层只能是li

<!DOCTYPE html>
<html>
<head>
	<title>
		Ai
	</title>
</head>
<body>
	<ul>
		<li>我叫AI</li>
		<li>我喜欢自由</li>
		<li>哈哈哈</li>
		<li>
			<a href="https://www.baidu.com/" target="_blank">
				<img src="image/1.jpg">
			</a>
		</li>
	</ul>
</body>
</html>

七：有序列表标签ol，li

用法同ul一致，默认数字标注1~~n

<!DOCTYPE html>
<html>
<head>
	<title>
		Ai
	</title>
</head>
<body>
	<ul>
		<li>我叫AI</li>
		<li>我喜欢自由</li>
		<li>哈哈哈</li>
	</ul>
	<ol>
		<li>我叫AI</li>
		<li>我喜欢自由</li>
		<li>哈哈哈</li>
	</ol>
</body>
</html>

在这里插入图片描述

八：Sublime编辑器的初始化快捷键的编辑

Tools（工具）— 插件开发—新建代码片段
把第三行的内容替换成你要输出的快捷内容

下方修改：
随便写
用tab键可以快速把上面的内容输出的快捷按键
写什么 -> tab

九：标签p

用于写文字/段落，自带段落间距，上下有留白，换行
一般用于新闻等特别多的文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Web学习</title>
	</head>
	<body>
		<p>天倾流火，地海翻覆，人潮惊骇。遮天蔽日的黑色膜翼展开，密密麻麻挂满着死去生物的白色躯骸。神话里的皇帝终将归来!届时，万物寂灭，末世终焉。</p>
		<p>这是地狱中的魔王们相互撕咬。铁剑和利爪撕裂空气，留下霜冻和火焰的痕迹，血液刚刚飞溅出来，就被高温化作血红色的蒸汽，冲击波在长长的走廊上来来去去，早已没有任何完整的玻璃，连这座建筑物都摇摇欲坠。</p>
		<p>天若流火</p>
		
		<div>天倾流火，地海翻覆，人潮惊骇。遮天蔽日的黑色膜翼展开，密密麻麻挂满着死去生物的白色躯骸。神话里的皇帝终将归来!届时，万物寂灭，末世终焉。</div>
		<div>这是地狱中的魔王们相互撕咬。铁剑和利爪撕裂空气，留下霜冻和火焰的痕迹，血液刚刚飞溅出来，就被高温化作血红色的蒸汽，冲击波在长长的走廊上来来去去，早已没有任何完整的玻璃，连这座建筑物都摇摇欲坠。</div>
		<div>天若流火</div>
	</body>
</html>

在这里插入图片描述

十：标签input，type

插件
type=‘input类型’
eg：text：默认，文本
password：密码
radio：单选框
CheckBox：复选框
color：颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div>
			用户名：
			<input type="text"/>
		</div>
		<div>
			密  码：
			<input type="password"/>
		</div>
		<div>
			复选框1：
			<input type="checkbox"/>
		</div>
		<div>
			复选框2：
			<input type="checkbox"/>
		</div>
		<div>
			复选框3：
			<input type="checkbox"/>
		</div>
		<div>
			单选框1：
			<input type="radio"/>
		</div>
		<div>
			颜色：
			<input type="color"/>
		</div>
	</body>
</html>

在这里插入图片描述

十一：标签button

按钮插件
方法一：<button>按钮1</button>
方法二：<input type="button" value="按钮二"/>
在这里插入图片描述

十二：CSS-标签选择器

前端三大件：
1、HTML ---- 各种标签
2、CSS ---- 对标签的形容，样式
3、JavaScript ---- 利用脚本进行控制

标签：style：<style></style>
通过style中的各种选择器控制元素；
标签选择器：把所有同样的标签都赋予这个样式

<style>
选择器{样式：样式值；样式：样式值}
</style>

div{
width:200PX;//PX:基本单位，像素
height:200PX;
background:red;//背景色
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Web学习----CSS</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background: blueviolet;
			}
		</style>
	</head>
	<body>
		<div>
			哈喽
		</div>
	</body>
</html>

在这里插入图片描述

十三：CSS引入方式

CSS，基于HTML样式
优先级区分，就近原则：
行内式 > 内嵌式 > 外链式
代码至上而下执行

1、内嵌式（同12）
2、外联式：
在外写个css文件：

div{
	height: 200px;
	width: 200px;
	background: yellow;
}

在html中调用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/css2.css">
	</head>
	<body>
		<div></div>
	</body>
</html>

3、行内式：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="width: 200px;height: 200px;background: green;"></div>
	</body>
</html>

十四：CSS基本选择器

1、标签选择器
2、id选择器：
唯一的标签
权重最高
3、；类选择器class：
用的多，没有唯一性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background: green;
			}
			#AA{
				width: 200px;
				height: 200px;
				background: blueviolet;
			}
			.BB{
				width: 200px;
				height: 200px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="AA"></div>
		<div class="BB"></div>
		<div></div>
	</body>
</html>

十五：CSS选择器深入

后代选择器：
选择标签下面的内容进行修饰，更精准的选择元素
选择器越精准，权重越高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div p{background: peachpuff;}
			.Myclass p{
				background: violet;
			}
			.Myclass .NB p{
				background: darkcyan;
			}
			.Myclass .NB p{
				background: darkcyan;
			}
			.Myclass .NB #a{
				background: red;
			}
			#a{
				background: black;
			}
		</style>
	</head>
	<body>
		<div>
			<p>努力自律</p>
		</div>
		
		<div class="Myclass">
			<p>今天天气不错</p>
			<p>今天心情不错</p>
			<div class="NB">
				<p>哈哈哈哈</p>
				<p id="a">啦啦啦啦啦</p>
			</div>
		</div>
	</body>
</html>

群组选择器：
多内容选择，有通用样式即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a1,.a2,div,div p{
				background: darkgoldenrod;
			}
		</style>
	</head>
	<body>
		<div>
			<p>
				dadadadadadaddaad
			</p>
		</div>
		<div>afhakbiadkafvka</div>
		<div class="a1">今天感觉不错</div>
		<p class="a1">今天感觉不错</p>
		<p class="a1">今天感觉不错</p>
		<p class="a1">今天感觉不错</p>
		<p class="a1">今天感觉不错</p>
		<p class="a2">今天感觉不错</p>
		<p class="a2">今天感觉不错</p>
		<p class="a2">今天感觉不错</p>
		<p class="a2">今天感觉不错</p>
	</body>
</html>

十六：属性：外边距及浮动样式

浮动：float
主要作用：让元素横着开始排列
float：left–从左往右
float：right–从有往左

外边距：margin
当前元素距离外边的边距，上下左右4个
margin-top/bottom/left/right
缩写方法：
1、margin：上px 右px 下px 左px
2、margin：上px 左右px 下px
3、margin：上下左右
4、margin：上下左右一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.My{
				width: 200px;
				height: 200px;
				background:red;
				float:left
			}
			.mar{
				margin-right:20px;
				margin-top:30px;
			}
			.mmm{
				margin:100px 50px 50px 50px
			}
		</style>
	</head>
	<body>
		<div class="My mar">1</div>
		<div class="My mmm">2</div>
	</body>
</html>

十七：内边距padding

padding内边距：
使用margin修改外边距，原元素大小不变
使用padding修改内边距，元素增加相应大小
其他与外边距一致

十八：块状元素与行内元素及熟悉拓展

所有html元素分为3大类，两类常用+可变元素
1、块状元素：div，p
支持宽高 margin，padding
weight宽度默认100%（一整行）
2、行内元素：span（最基本行内元素）
不支持宽高
宽高随着内容变化而变化

十九：元素深入，border属性-边框

嵌套问题：
块状元素可以随意嵌套
行内元素只能嵌套行内元素

边框border：
占元素大小，往外长
缩写样式：

border:10px solid black

border：大小实线颜色；
实线-solid 虚线-dashed

非缩写：
border-width：
border-color：
border-style：
border-top-color：
border-left-width：
border-right-style：
border-bottom-color：

二十：背景样式的缩写/非缩写

background背景
background-color：背景颜色
background-image：url（）背景图片，默认平铺
background-size：**px **px背景图大小
background-repeat：背景图平铺
background-repeat：no-repeat不平铺
background-repeat：repeat-y竖着平铺，纵坐标
background-repeat：repeat-x横着平铺，横坐标
background-position:10px 30px;背景坐标（两个参数，第一个X轴，第二个y轴，第二个默认center）