<!doctype html> //！doctype是防止出现乱码
<html>
<head>
//在学习网页前我们首先要了解一些基本的概念
Internet 代表的是网络
www 万维网
url 网址
DNS 域名解析系统
Http超文本传输协议
https ssl+http可进行加密传输
web 网页
w3c 万维网联盟
//head是一个头部标签它是用来定义css样式的以及程序员来写一写注释之类的
//不会显示在浏览器上
<title></title>放的是网页的标题要包含在head标签内
</head>
<body>
//身体标签是用来写网页的东西的会在浏览器中显示
HTML中的标签又分为两类 双标签和单标签/又叫自结束标签/体标签
在HTML中的标签有
1:网页中的段落小标题
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
//html中的标签分为6个段落标签
2：<b></b>和<strong></strong>设置字体加粗显示
<i></i>和<em></em>标签设置字体倾斜
<s></s>和<del></del>标签设置字体删除线
<u></u>和<ins></ins>标签设置字体下滑线
3：在HTML中的体标签
<br/>换行标签
<hr/>分隔线标签
4：在HTML中的字体标签
<span></span>
段落标签
<p></p>
字体标签
<font></font>
时间标签
<time></time>
时间标签有两个属性
datetime属性 和pubtime属性
datetime属性一般是设置时间的 pubtime属性默认是pubtime
5：在html中我们为标签中的内容设置属性和样式
一般我们是这样讲
html控制的是网页的结构
css控制的是网页的表现
javascript控制的是网页的表现
什么是结构内结构就是一个框架就是你的表现和行为都要放在结构里面
就好像是一个房子里面什么也没有
css就像是房子里的家具和装修
js就像是我们人在使用这些东西
6：网页中的img标签它是在网页中引用图片的标签
<img></img>
该标签中包含两个主要的属性一个是 src属性，一个是 alt
src属性是解析图片的路径用的
而图片的路径又分为绝对路径和相对路径
绝对路径你又可以将它理解为带盘符的路径和一个完整的网址
相对的路径就是相对有目录而言的
alt添加对图片的描述的在图片不显示的时候会显示alt的描述也可以讲时让搜索引擎更好
的解析图片
7：HTML中的块状元素
<div>我是一个块元素我独占一行</div>
8：在HTML中的特殊的字符标签
< 小于号< , > 大于号 > , © 版权符号 ® 注册商标 ° 摄氏度 &rmp 和号  是空格
9：html网页中的属性
width 图片的宽度
height 图片的高度
vspace 垂直边距
hspace 水平边距
src 图片的路径
alt 图片的描述
border 图像边框的宽度
align
它包含多个属性left 左对齐
right 右对齐
top 图像顶端和文本第一行文字对齐其它的位于图像的下面
middle 图像的中部和文本的第一行文字对齐其他的位于图像的下方
此外它还有 center属性值等......
10：图片的三种格式 gif png jpf
gif 它支持动画是无损的图片格式支持 全透明和全部透明 颜色图像的颜色不能超过256中
png 它不支持动画它支持alpha透明（全透明 ，半透明 ，全不透明）颜色图像的颜色不能超过256中
jpg 有损的图像格式可以保存超过256中颜色的图像类似于照片
三种格式的的基本使用情况
小图片考虑gif或是png-8 半透明的考虑是png 类似照片类的图像考虑jpg
</body>
<html>
</head>
<body>
<p>我是一个p标签</p>
<a href="#">我是一个超链接</a>
<span>我是span我是一个span标签</span><br />
<mark>我是一个mark标签我用来给文字的字体设置高亮显示</mark><br />
<em>我是一个em标签我我用来为字体设置为斜体</em><br />
<i>我是一个i标签我也是为字体设置一个斜体</i><br />
<b>我是一个b标签我为字体设置加粗显示</b><br/>
<strong>我是一个strong标签我也是为字体设置加粗显示</strong><br/>
<s>我是一个s标签我为字体设置删除线</s><br />
<del>我是del标签我也是为字体设置删除线</del><br />
<u>我是一个u标签我的作用是为字体添加下划线</u><br />
<ins>我是ins标标签我的作用也是为字体添加下划线</ins><br />
<time>我是一个时间标签我包含两个属性一个是datetime属性一是pubtime在时间的标签中pubtime的默认值就是pubtime</time>
<img />
<div>我是一个div标签我是一个块状标签</div>
<font>我是用来设置字体的标签我有三个属性第一个属性size设置字体的粗细第二个是face字体的类型第三个是color字体的颜色</font>
<hr />
<mark>在html中还有一个mark标签是可以为字体设置高亮显示的</mark>
<!--
作者：offline
时间：2020-07-14
描述：在html中的hr标签它的作用是输出一条分隔线它有四种属性 1：size尺寸，大小 2：color 颜色 3：align 4：width线的宽度
-->
<!--
作者：offline
时间：2020-07-14
描述：在HTML中ing标签是一个自结束标签它有两个属性一个是 src属性 一个是alt属性 src属性设置图片的路径 alt是对图片的描述
-->
<!--
作者：offline
时间：2020-07-14
描述 在html中的小标题分为6级分别用<h1></h1>----<h6></h6>表示
-->
<!--
作者：offline
时间：2020-07-14
描述：于此同时我们还要了解HTML中的一些符号
 是空格 ， © 是版权 ， ® 是商标 ，< 是 <号 , > 是 > 号 ° 是摄氏度 &rmp是和号 即是&
作为前端的开发人员我们还要了解的就是一些协议和符号的含义
internet 就是网络
www 万维网
url 网址
http 超文本传输协议
httpd 使用ssl+http组合构成可实现加密传输
w3c 万维网联盟
web 网页
-->
</body>
</html>
案例演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>每日提升一点点</title>
<style>
mark{
background-color: aquamarine;
}
</style>
</head>
<body>
<!--
作者：offline
时间：2020-07-10
描述：> huang
-->
<h2 align = "center">书单</h2>
<img src="picture/u=3140948597,2600938108&fm=15&gp=0.jpg" alt="影响力" width="80px"/>
<hr color=#7FFFD4 size="2"/>
<p align="left"><影响力>©作者:[美]罗伯特.B.西奥迪尼<time dataetime="2020-07-10" pubtime="pubtime"></time></p>
<font size="3"face="微软雅黑">商人运用<mark>影响力</mark>来兜售商品，推销员运用影响力诱惑你乖乖地把金钱捧上
在这本书中，作者为我们解释了为什么有些人极具<ins >说服力</ins>，而我们总是容易上当
受骗 隐藏在冲动地顺从他人行为背后的<b>6大心理秘笈</b>，正是这一切的根源。</font>
<hr color=#7FFFD4 size="2"/>
<img src="picture/u=3007191037,3154212419&fm=15&gp=0.jpg" alt="怪诞心理学" width="100px"/>
<p><怪诞心理学>©理查德·怀斯曼</p>
<hr size="2" color="aqua"/>
<font align="right" face="微软雅黑" size="3">作者是英国著名的大众心理学教授、超级畅销书作家，
也是英国各大报刊杂志最常引述的心理学家，拥有“英国大众心理学传播第一教授”的头衔
内容简介：本书通过大量案例、现场试验解读日常生活中存在的种种怪诞现背后的心理秘密，
剖析了那些不易察觉的非理性行为。诠释了生活的本质与真相，并为读者提供了相应的应对措施，
从而帮助读者更好<strong>了解自己、读懂他人、透现社会，做到“见怪不怪</strong>”“以怪治怪生活的”“非常态”为“常态”，
更好的驾驭学习、工作和生活</font>
<hr size="3" color="aqua"/>
<img src="picture/u=818825824,3790821517&fm=26&gp=0.jpg" alt="小狗钱钱" width="110px" />
<p><小狗钱钱>©欧洲首席金钱教练博多·舍费尔</p>
<hr color="red" size="3"/>
<font face="微软雅黑">一口气看完了此前储备的理财书籍——《小狗钱钱》，这是有着“欧洲巴菲特”之称的欧洲首席金钱教练博多·舍费尔创作的理财童话，也是欧洲最畅销的理财书籍。
告别以往理财书喋喋不休的沉闷说教，本书采用让人耳目一新的讲故事形式，深入浅出地解释“金钱法则”。
主人公—12岁小女孩吉娅，在会说话的小狗“钱钱”的帮助下逐步改变以往错误的财富观，认识到从小养成理财好习惯的重要性，
并利用梦想储蓄罐、梦想相册、成功日记等工具坚定地走在实现财务自由的道路上，还因此结识了汉内坎普夫妇、金先生、陶穆太太、海内女士等理财道路上的“贵人”，
在他们以及堂哥马塞尔、朋友莫妮卡的支持下最终成长为小小“金钱魔法师”，完成了自己此前列的“梦想清单”上的所有项目！</font>
<hr color="red" size="3"/>
<a href="https://blog.csdn.net/qq_45973003/article/details/107239373">跳转到我的博客</a>
<br/>
</body>
</html>
案例二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>明月天涯</title>
<!--
作者：涛
时间：2020-07-14
描述：这是一个html静态网页歌曲
-->
</head>
<body>
<!--
作者：offline
时间：2020-07-14
描述：在HTML中我们可以给字体 设置尺寸和使字体居中使字体居中使用align属性
在html中我们的属性和属性值之间是一种名只对之间的关系
在HTML中我们还可以为字体设置字体的类型设置字体的类型使用face属性
-->
<h2 align="center"><明月天涯></h2>
<p align="center"><font size="3" color="aqua" face="serif">五音JW</font></p>
<p align="center"><mark style="color: red; background-color: rgb(0,255,0);">游侠某 名远传 而今江湖谈</mark></p><!--在这个地方我为字体设置了内联样式-->
<p align="center">雨尽碎 风如潮 出手引狂澜</p>
<p align="center">未收招 三声笑 皆醉了</p>
<p align="center">远风急 忽回首 明月漫千山</p>
<hr size="3" color="aqua"align="center" width="180px" />
<p align="center">天地渺 意气满 踏歌至长安</p>
<p align="center">灯影繁 酒正暖 满座均贪欢</p>
<p align="center">众人酣 拂衣散 乌云然</p>
<p align="center">唯此间江湖年少 偏爱纵横天下</p>
<hr size="3" color="aqua"align="center" width="180px" />
<p align="center">恩仇趁年华轻剑快马</p>
<p align="center">红尘未破也无甚牵挂 只恋生杀</p>
<p align="center">醉里论道 醒时折花</p>
<p align="center">游侠某 名远传 而今江湖谈</p>
<hr size="3" color="aqua"align="center" width="180px" />
<p align="center">仇者多 友两三 相逢皆恨晚</p>
<p align="center">檐上霜 窗边月 为我留一盏</p>
<p align="center">过江南 踏天山 不曾还</p>
<p align="center">剑影翩 血光寒 似鬼亦似仙</p>
<hr size="3" color="aqua"align="center" width="180px" />
<p align="center">说书人 应笑我 既疯也如癫</p>
<p align="center">辩正邪 如明月 今圆别时缺</p>
<p align="center">倒不如 一拍案 入寒渊</p>
<p align="center">唯此间江湖年少 偏爱纵横天下</p>
<hr size="3" color="aqua"align="center" width="180px" />
<p align="center">恩仇趁年华轻剑快马</p>
<p align="center">红尘未破也无甚牵挂 只恋生杀</p>
<p align="center">醉里论道 醒时折花</p>
<p align="center">唯此间江湖年少 偏爱纵横天下</p>
<hr size="3" color="aqua"align="center" width="180px" />
<p align="center">恩仇趁年华轻剑快马</p>
<p align="center">红尘未破也无甚牵挂 只恋生杀</p>
<p align="center">醉里论道 醒时折花</p>
<p align="center">传言道江湖年少 不谙世事繁华</p>
<hr size="3" color="aqua"align="center" width="180px" />
<p align="center">是敌是友不妨一战罢</p>
<p align="center">待何人何年有心与我 拭血论茶</p>
<p align="center">梦里依旧 明月天涯</p>
<a href="https://blog.csdn.net/qq_45973003/article/details/107306839">联系我们</a>
</body>
</html>
1331
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
