HTMl基本标签
HTML规范：
1.标签都是在尖括号里面
2.一般书写单标签时要在标签内容后面加反斜号使得标签闭合 ，h5申明就不需要了
3.标签关系有包含和并列
HTML页面也叫HTML文档
在这份文档中记载：
1.HTML文档结构
2.HTML标签的lang属性
3.head标签的快捷子标签作用
4.html基本标签：
div标签，span标签， h标签，p标签，a标签（href属性 target属性），ul/ol标签，文本格式化标签（strong标签:加粗 ，em标签：倾斜 ，del标签：删除线，ins标签：下划线）
hr标签，br标签，img标签（src属性，alt属性，title属性）
在a标签中介绍：内部链接，外部链接，网页元素链接，下载链接，锚点链接，空链接的使用，同时介绍了target属性的_self和_blank两个值的使用
在 <img>标签中介绍了路径（相对路径和绝对路径），alt和title属性的使用
在结尾介绍在html中的特殊字符书写：空格，大于号，小于号，&
<!-- 英文状态下！+TAB键位或者html:5出现html文档结构 -->
<!DOCTYPE html>
<!--文档类型申明标签 DOC:document:文档 TYPE:类型 这个标签用来申明使用哪个版本的HTML-->
<html lang="en">
<!--html:页面中最大标签，也叫根标签-->
<!--
lang属性：language语言单词缩写 HTML语言声明属性，用来定义当前文档显示的语言。
如：lang="en"表示定义语言为英文；lang="zh-CN"表示定义语言为中文
英文网页也可以显示中文，中文网站也可以显示英文，只是弹出的翻译插件默认选择当前语言进行翻译
-->
<head>
<!--charset：字符集 UTF-8：万国码，包含世界全部语言用到的字符 此属性用来编码-->
<meta charset="UTF-8">
<!-- 网页头部小图标，shortcut icon:小图标 href：图片地址 type：文件类型，可以不写 -->
<!--这里是淘宝小图标为例-->
<link rel="shortcut icon" href="http://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png" type="image/png"/>
<!-- 如果用IE浏览器打开网页默认使用edge浏览器 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 移动端开发设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签</title><!--head标签中必须要设置的标签-->
</head>
<body><!--元素包括文档的全部内容，页面内容基本都是放在body里面-->
<!-- 1.div标签，用来布局，无具体含义，可以理解为容器盒子，层级的意思，组合其他HTML元素的容器，可以嵌套使用,每个div标签单独占用一行-->
<div>
jj
11
<div>77</div>
<div>
hh
<div>66</div>
</div>
<div>55</div>
5566778899
</div>
<!-- 2.span:与div一样用来布局，跨度，跨距的意思。区别：div单独占据一行，span不会,它主要用于行内布局，无具体含义-->
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>
<!-- 3.h标签--标题的意思，为标题标签，每个标题独占一行，从一到六级，一级最大，六级最小，有默认字号，自动加粗 -->
<h1>55</h1>
<h2>666</h2>
<h6>大前端</h6>
<!-- 4.P标签，段落标签。表示段落，其中的内容是一段话，它相当于一个回车，用来换行内容，使得当前内容在一个段落。文字内容的回车和空格不会显示，不用P标签时所有的内容都是在一起显示，不会换行。 -->
<!--文本在段落中会随浏览器窗口大小自动换行，段落和段落间空隙较大-->
<p>xxxxxxxxxxxxxxxxx
xxxxxxxxxxxx
xxxxxxxxx
xxxxxxcccccccccccccccccc
tttttttttttttttt</p>
<p>aaaaaaaaaaaaaaaaaa
fffffffffffffff
hhhhhhhhhhhhhhhhh</p>
ffffffffffffffffffffffhhhhhhhhhhhhhh
ggggggggggggggggggggggggfffffffffddddd。
<!-- 5.br标签，break。生成一个换行符，强制换行，另起一行。单标签，以它为起始开始换行-->
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx，
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxxxx<br/>
xxxxxxxxxxxxxxx</p>
<!-- 因为P标签中内容是一段连续的话，将其进行换行时不可能找内容 单独使用它一个个的换行 -->
<!-- 6.hr标签，生成一条水平线，主要起一个装饰作用，单标签，写的时候尽量对其闭合使用<hr/>而不是<hr>与br标签一样 -->
<hr/>
<hr width="80%" align="center" color="red" height="2px"/>
<!--hr为标签，width为属性，80%为值用双引号括起来，写下一个属性时用空格隔开.width为宽度，align为对齐的意思，center为居中,color为颜色，height为高度，px为像素，/闭合放在最后-->
<!-- 7.a标签，anchor:锚。超链接标签。用来做超级链接的，实现链接跳转。href是其重要属性为超链接的意思，中间内容为跳转文字 -->
<!-- href是必须写的标签，值为一个URL -->
<div>
<a href="http://baidu.com">百度</a> <!-- 外部链接 http://www.开头 -->
<a href="http://baidu.com" title="百度">百度1</a>
<!-- 内部链接：在网站中包含的HTML文件间跳转，如果全部HTML文件在一个文件夹中，herf的值可以直接是:名字.html -->
<a href="D:\桌面\MD文件\DAY1\01html文档格式.html">文档结构</a>
<!-- target为目标的意思，它有几个值有各自作用，默认值为_self -->
<!-- _self:当点击超链接跳转时网页会在当前页直接打开 -->
<!-- _blank:它的作用是另外加载一个网页来显示跳转后内容.总结：新开一个窗口-->
<a href="http://baidu.com" target="_blank">百度2</a>
<a href="http://baidu.com" target="_self">百度3</a>
<!-- 下载链接：地址链接指向为.exe或者.zip等压缩文件 -->
<a href="D:\桌面\MD文件\DAY1\img.zip">img下载</a>
<a href="img.zip">img下载</a>
<div>
<!-- 网页元素链接：跳转关键字可以是图片 -->
<a href="http://baidu.com" target="_blank"><img src="img.jpg" alt="小姐姐"></a>
<!-- 点击图片来跳转到百度 -->
</div>
<!-- 锚点链接：点击链接后直接跳转到页面相应的位置，实现快速定位到页面的某一位置 这时href属性的值为#名字。h标签的id属性为名字-->
<a href="#live">个人生活</a>
<h3 id="live">个人生活</h3>
<a href="#ex">个人经历</a>
<h3 id="ex">个人经历</h3>
<!-- 空链接：当没有确定链接目标时,点击后还在当前页面 -->
<a href="#">空链接</a>
</div>
<!-- 8.img标签，单标签用来加载图片。
重要属性：属性都是在标签名字后面的，属性不分前后顺序，属性之间用空格隔开 ，属性=“值”，key="value",键值对格式
src:图片路径或者图片，必须写。
alt:是当图片加载不出来时显示的提示文字，而当图片加载成功则不显示。
title是当鼠标移动到图片位置时出现的提示框
width：给图像设置宽度
height：给图像设置高度 注意：宽度和高度单独设置一个，另外一个让它自动等比例缩放，不会造成图片失真
border：设置边框
-->
<!--
相对路径：图片相对HTML文件的位置
同级：图像文件和HTML在同一级目录 <img src="img.jpg"/>
下一级：符号：/ 表示图像位于HTML文件的下一级 <img src="images/img.jpg"/>
上一级：符号：../ 表示图像位于HTML文件的上一级目录 <img src="../img.jpg"/>
绝对路径：图片相对盘符的绝对位置，很少使用 符号\
E:\Agoni\Pictures\Saved Pictures\img.jpg
<img src="E:\Agoni\Pictures\Saved Pictures\img.jpg"/>
网络绝对路径：网络中的绝对位置
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA?w=257&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7" />
-->
<div>
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA?w=257&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7" alt=""/>
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA?w=257&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7" title="景色" alt="景色"/>
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.M9CUntHQGPvSO5JkAbbbbn5Y4AHaFA?w=257&h=180&c=7&r=0&o=5&dpr=1.25&pid=1111哈哈111.7" alt="景色"/>
</div>
<!-- 9.ul/ol:列表，ul是无序，ol是有序列表。他们的列表内容都是li标签 -->
<!-- ul>li{li$}*5它的意思是ul列表下有5个li标签，$是序号，他们的内容是从li1到li5 -->
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<ol>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ol>
<!-- 通过效果可知，无需列表内容前是点，表示无序，有序列表内容前是排序序号 -->
<!--10.文本格式化标签：加粗 倾斜 下划线-->
<strong>加粗</strong> <b>加粗</b>
<em>倾斜</em> <i>倾斜</i>
<del>删除线</del> <s>删除线</s>
<ins>下划线</ins> <u>下划线</u>
<!--前面的标签语义强，后面的标签语义弱-->
<!--11.注释标签，不会显示。快捷键：ctrl+/ -->
<!-- 特殊字符：在HTML中有一些符号很难或者不方便直接使用，此时我们应该使用下面字符代替,全部需要分号结尾 -->
<!-- 空格 ： -->
<div>讲究人 哈哈</div>
<!-- 小于号 < :< 大于号>:> -->
<P> <p>
<!-- 和 &：& -->
&&
<br><br><br><br><br>
</body>
</html>
3230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
