创建项目文件夹
在正式写项目的时候,需要有三个文件夹
img–>把图片放在里面
css–>把css代码放在里面
js–>把javaScript代码放在里面
网站是由很多的网页组成
网站的主页一般命名为 index.html
高内聚低耦合
高内聚–做事情专一 一个模块专心做好一件事情 本分工作
低耦合–程序 功能之间的链接尽量要少 避免一个错步步错
绝对路径与相对路径
绝对路径: 从盘符出发完整的具体位置
相对路径: 简单位置 有一个参考的坐标
标签属性
标签是由我们标签名 标签属性 文本内容 三部分组成
标签属性就是对标签进行一种描述的方式(颜色,大小,描述)
<标签名 属性1 = ‘值1’ 属性2 = ‘值2’>内容</标签>
<小明 性别 = ‘男’ 爱好 = ‘打游戏’>小明特别喜欢打游戏</小明>
注:
1.标签属性写在开始标签内部
2.标签上可以同时存放多个属性
3.属性之间以空格分开
4.属性之间没有顺序之分
通用属性
1.id:用来给标签取一个唯一的名字(重复的话 就是先来的为准)
2.style:用来设置该标签的行内样式(配合css样式)
3.title:鼠标放在上时,所显示的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p style="color:brown;">小明在睡觉</p>
<p title="这是小明">小明在睡觉</p>
</body>
</html>
图片标签
在当前网页中插入图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p style="color:brown;">小明在睡觉</p>
<p title="这是小明">小明在睡觉</p>
<img src="图片路径" alt="图片描述" width="宽度" height="高度" title="图片标题">
</body>
</html>
img是image图片的缩写
src是source的缩写 src='图片路径'
width="宽度" height="高度" 可以不用px单位
alt=图片描述
当图片丢失 显示文字 视力不方便就可以知道指定的图片显示的是什么
title=当鼠标放上去显示的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="./1.jpg" alt=""><!-- 从当前文件夹进行上传使用 -->
<img src="1.jpg" alt=""><!-- 如果在当前文件夹可以直接输入图片名称 -->
<img src="./img/1.jpg" alt=""><!-- 使用img中的图片需要输入相对路径 -->
<img src="E:\项目文件夹\img\1.jpg" alt=""><!-- 使用绝对路径 -->
<img src="https://pic.sogou.com/d?query=%E5%A5%B3%E7%94%9F%20%E5%A4%B4%E5%83%8F&forbidqc=&entityid=&preQuery=&rawQuery=&queryList=&st=191&did=14" alt=""><!-- 必须有网才可以用网络图片 -->
<img src="1.jpg" alt="剪刀手" width="300" title="剪刀手自拍">
</body>
</html>
绝对路径一般不常用 换了环境就没有了 一般都是使用相对路径
直接选中文件 右键选择复制图片路径
注意:
1.图片必须是要项目文件夹中(好管理)
2.Image Preview查看插入图片的缩片图
3.如果只设置宽或者高中的一个 另一个没设置会自动等比例缩放
4.一般情况下直接有一个src就可以了 最好alt
5.更推荐相对路径
超链接标签
超链接类似于机器猫的传送门 可以通过a标签指定停留的位置
a标签 超级链接标签 当移动到链接区域鼠标会成小手
href=‘链接的路径’
target 表示以什么方式打开网页
_blank 新窗口 原窗口不变
_self 默认 覆盖原窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="1.jpg" target="_blank">跳转下一界面>></a>
<a href="1.jpg" target="_self" title="点击跳转">欢迎看美女图片</a>
</body>
</html>
锚点
页面中添加锚点功能跳转到页面特定的位置
1.给元素设置id名
2.使用a标签设置href属性名为#id名字 点击a标签就可以跳转到所需要的位置
1.跳转到一个指定的网站
2.跳转到网页里的一个指定位置
3.跳转到一个指定的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="1.jpg" target="_blank">跳转下一界面>></a>
<a href="1.jpg" target="_self" title="点击跳转">欢迎看美女图片</a>
<a href="https://pic.sogou.com/pics?query=%E5%A5%B3%E7%94%9F%20%E5%A4%B4%E5%83%8F&st=191&ie=utf8">即将跳转</a>
<a href="图片标签.html">点击跳转</a>
href="#three" target="_blank">在该页面跳转</a>
<p><strong>妖精的尾巴</strong><em>日本动漫</em></p>
<h2 id="one">第一集</h2>
<p>在一个名叫菲欧雷的魔法王国里,存在著许多专门替魔导士中介任务的魔导士公会,
其中最有名的公会就是“妖精的尾巴”,这里聚集了许多厉害的魔导士。
少女露西一直希望能加入云集众多厉害魔导士的名为“妖精尾巴”的公会,
在纳兹的引导下,露西终于得偿所愿,随后,露西跟纳兹、格雷、艾露莎和哈比组成最强队伍,
他们的旅程就此展开。故事叙述在一个充满魔法的世界——“阿斯兰特
(EARTH LAND)”中,位于菲奥雷王国的一个众多厉害魔导士云集
的魔导士公会“FAIRY TAIL”。露西一直希望能加入,成为其中的成
员。在纳兹的引导下,露西终于得尝所愿,并结识了许多厉害的魔导
士。随后,露西跟纳兹、格雷、艾露莎和哈比组成“最强队伍”,在
这个全世界最吵闹、最暴力,但也是最快乐的公会里,创造出数不清
的传说的,借着各种委托人的任务而不断变强,伙伴也一个一个加
入,故事就这样渐渐揭开。</p>
<h2 id="two">第二集</h2>
<p>故事叙述在一个充满魔法的世界——“阿斯兰特(EARTH LAND)”中,位于菲奥雷王国的一
个众多厉害魔导士云集的魔导士公会“FAIRY TAIL”。露西一直希望能加入
,成为其中的成员。在纳兹的引导下,露西终于得尝所愿,并结识了许多
厉害的魔导士。随后,露西跟纳兹、格雷、艾露莎和哈比组成“最强队伍”
,在这个全世界最吵闹、最暴力,但也是最快乐的公会里,创造出数不清
的传说的,借着各种委托人的任务而不断变强,伙伴也一个一个加入,故
事就这样渐渐揭开。故事叙述在一个充满魔法的世界——“阿斯兰特
(EARTH LAND)”中,位于菲奥雷王国的一个众多厉害魔导士云集的
魔导士公会“FAIRY TAIL”。露西一直希望能加入,成为其中的成员。
在纳兹的引导下,露西终于得尝所愿,并结识了许多厉害的魔导士。
随后,露西跟纳兹、格雷、艾露莎和哈比组成“最强队伍”,
在这个全世界最吵闹、最暴力,但也是最快乐的公会里,
创造出数不清的传说的,借着各种委托人的任务而不断变强,
伙伴也一个一个加入,故事就这样渐渐揭开。</p>
</body>
</html>
列表
无序列表
没有顺序的列表(购买清单)
展示无序的列表内容 ul li必须组合出现代表无序列表
li不能单独使用 只能放在ol和ul作为他们的子标签
规范上 子标签只能是li
li里可以放其他标签
列表嵌套(里面会是白的小圆点)
type=“square” 方块
type=“disc” 实心圆点
type=“circle” 空心圆点
type=“none” 不显示符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul type="disc">王者荣耀
<li>亚瑟
<p>亚瑟是战士</p>
</li>
<li>海月
<p>海月是法师</p>
</li>
<li>蔡文姬
<p>蔡文姬是辅助</p>
</li>
</ul>
<ul>
<li>
<h3>美食</h3>
<ul>
<li>烧烤</li>
</ul>
</li>
<li>
<h3>特产</h3>
</li>
</ul>
</body>
</html>
有序列表
通过type属性 设置编号类型
a 表示小写英文字母编号 多出来的是aa ab
A 表示大写英文字母编号
i 表示小写罗马数字编号
I 表示大写罗马数字编号
1 表示数字编号 (默认)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol type="1">成绩排名
<li>小明</li>
<li>小红</li>
<li>小刚</li>
<li>小李</li>
<li>小胖</li>
<ol reversed>成绩排名
<li>小明</li>
<li>小红</li>
<li>小刚</li>
<li>小李</li>
<li>小胖</li>
</body>
</html>
自定义列表
单纯写个p标签是不能表现他们的关系
结合dl标签去使用dd,dt标签 dd,dt标签同级 不能相互嵌套
dd内容是用来描述dt的 dd可以有多个
dl的子标签只能是dt dd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 快捷方法:dl>dt>dd*7就是以下代码行 -->
<dl>动植物展示
<dt>动物
<dd>老虎</dd>
<dd>狮子</dd>
<dd>大象</dd>
</dt>
<dt>植物
<dd>松树</dd>
<dd>杨树</dd>
<dd>枯藤</dd>
<dd>槐树</dd>
</dt>
</dl>
</body>
</html>