HTML中的基础标签

HTML中的基础标签

标题标签

标题标签 h
这是没有标题标签的文字
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
特点 ：
1、随着h标签的数字越来越大，然后标题的大小变小
2、h标签 独占一行
通常来说 h1标签 在一个网页只定义一个，h1的内容是搜索引擎的关键字

段落标签

俗称 p 标签   使用方法  <p>...</p>  ...表示段落内容
<p>君不见，黄河之水天上来，奔流到海不复回。
   君不见，高堂明镜悲白发，朝如青丝暮成雪。</p>
<p>人生得意须尽欢，莫使金樽空对月。
   天生我材必有用，千金散尽还复来。</p>

说明：p标签可以划定一个段落
特点：p标签定义的段落之间有一个空隙，将所包裹的内容单独成段，随着窗口大小自动换行

换行标签

换行标签 ： <br/>
君不见，黄河之水天上来，奔流到海不复回。<br/>
君不见，高堂明镜悲白发，朝如青丝暮成雪。<br/>
人生得意须尽欢，莫使金樽空对月。<br/>
天生我材必有用，千金散尽还复来。<br/>

横线标签

生成一条横线：<hr/>

文本格式化标签

加粗:   <strong>...<strong/> 或者 <b>...<b/>
这是<strong>加粗</strong>的字体
这是<b>加粗</b>的字体
<!-- 开发中尽量使用 strong 因为语境更适合，开发更明确 -->
倾斜：<em>...<em> 或者  <i></i>
<!-- i : italy 意大利斜体 -->
这是<em>倾斜</em>的字体
这是<i>倾斜</i>的字体
删除 ：<del>...</del>  或者 <s>...<s>
这是<del>删除</del>的内容
这是<s>删除</s>的内容
下划线<ins>...<ins>  或者 <u></u>
这是<ins>下划线</ins>的内容
这是<u>下划线</u>的内容

盒子标签

大盒子标签  <div>...</div> 独占一行 / 一行只能写一个
小盒子标签  <span>...</span>  一行只能占一个
<!-- 大盒子 -->
<div>我是大盒子</div>
<div>我是大盒子</div>

<!-- 小盒子 -->
<span>我是小盒子</span>
<span>我是小盒子</span>

图像标签

img ：图像标签
<!-- 一个标签的属性 通常写在标签名称之后，用空格隔开 -->
<img src="../../images/cat.png" />
<!-- <img src="file:///C:/Users/Administrator/Desktop/cat.png" /> -->
<!-- 绝对路径 file:///C:/Users/Administrator/Desktop/cat.png -->
<!-- 本地连接前 加上 file:/// -->
<!-- 相对路径 : 相对于当前文件所在目录的位置 的相对相对位置关系 -->
<!-- 绝对路径 : 从根文件出发  相对路径： 从所在的当前文件出发 -->
图片标签的属性：
<!-- alt 当图片不能正常显示的时候，就加载alt中的文字 -->
<!-- <img src="./images/cat1.png" alt="猫猫的图片" /> -->
<!-- title 当鼠标悬浮在图片上时，会有提示的文字 -->
<!-- <img src="./images/cat.png" title="猫猫的图片" /> -->
<!-- width 图像宽度的属性 height 图像高度的属性 -->
<!-- 长度值的单位是像素  px  pixel 像素  -->
<!-- 1920*1080  每一个像素 三原色-->
<!-- <img src="./images/cat.png" width="100px" height="100px"/> -->
<!-- border 设置边框的大小 单位像素 -->
<!-- <img src="./images/cat.png" border="10px" /> -->
<!-- 一个标签可以有多个属性 -->
<!-- 属性和属性之间最好用空格隔开 -->
<img src="./images/cat.png" width="100px" alt="猫猫" title="猫猫" 
height="100px" border="10px" />
<!-- 注释.img 除了加载本地图片，还可以加载网络图片 -->
<!-- 网络图片  https://www.baidu.com/a.jpg -->

链接标签

俗称 a 标签
<!-- 链接的作用 ：1、跳转到其它网页（html文件） -->
<!--            2、下载文件 -->
<!--            3、导航 （滚动到指定位置）-->

<!-- 跳转到指定的网页 -->
<!-- 按下时是红色 未点击时是蓝色 点击后是紫色 -->
<a href="https://www.baidu.com">百度一下</a>
<a href="https://www.sina.com">新浪网页</a>

<!-- 跳转到本地的网页 采用相对路径写法 -->
<a href="01-第一个网页.html">跳转到第一个网页</a>

<!-- target属性有两个属性值  _self 当前网页中打开链接_blank 新建的网页中打开链接 -->
<a href="https://www.baidu.com" target="_self">网易</a>
<a href="https://www.baidu.com" target="_blank">网易</a>

<!-- 空链接  自刷新、自跳转-->
<a href="#">这是一个空链接</a>

<!-- 下载链接 -->
<a href="./images/cat.png">点击展示图片</a>
<a href="./sizer334.zip">点击下载文件</a>

锚点标签

具有导航功能的标签： 锚点标签
主要功能 制作目录
<!-- 链接中的导航功能 ： 锚点 -->
<!-- 功能 ： 从目录导航到指定位置; 回到网页顶部 -->

锚点设置的步骤
<!-- 1、给需要导航的标记 设置id属性 id值必须唯一 -->
<!-- 2、在对应链接标记中的href属性 设置属性值为" #id值 " -->
实际应用

<h1 id="top">萌宠</h1>
<h2>目录</h2>
<a href="#a">1 萌宠简介</a> <br />
<a href="#b">2 萌宠种类</a> <br />
<a href="#c">3 猫的生活习性</a>

<h2 id="a">萌宠简介</h2>
传统的宠物是指养着用于玩赏、做伴的动物，也指特别偏爱的东西。宠物不一定单指动物，植物也可以做为宠物。所以今天的宠物定义为：用于观赏、作伴、舒缓人们精神压力带给人心情愉悦的动植物或其他物品。
萌宠就指带有“萌”性特质的宠物。也可以指人，这个在各大网游、网页游戏、及某些单机游戏中会出现萌宠，通常是来陪伴主人的，打发寂寞空虚的。
<h2 id="b">萌宠种类</h2>
贪睡猫一天中有半天处于睡觉状态 猫在一天中有14-15小时在睡眠中度过，还有的猫，要睡20小时以上，所以猫就被称为“懒猫”。 但是，如果仔细观察猫睡觉的样子就会发现，只要有点声响，猫的耳朵就会动，有人走近的话，就会一下子起来了。本来猫是狩猎动物，为了能敏锐地感觉到外界的一切动静，它睡得不是很死，所以不应该称之为“懒”。任性萌宠手机贴膜图集萌宠手机贴膜图集(6张)猫显得有些任性，我行我素。本来猫是喜欢单独行动的动物，不像狗一样，听从主人的命令，集体行动。 因而它不将主人视为主，唯命是从。有时候，你怎么叫它，它都当没听见。猫和主人并不是主从关系，把它们看成平等的朋友关系更好一些。也正是这种关系，才显得独具魅力。另一方面猫把主人看作父母，像小孩一样爱撒娇，它觉得寂寞时会爬上主人的膝盖，或者随地跳到摊开的报纸上坐着，尽显娇态。

<h3 id="c">猫的生活习性</h3>
现实世界的动物。文学作品的动物。二次元、2.5次元、三次元作品里的动物。反应和平衡能力高墙上，优雅散步，轻盈跳跃。看到猫在高墙上若无其事地散步，轻盈跳跃，不禁折服于它的平衡感。这主要得益于猫的出类拔萃的反应神经和平衡感。 它只需轻微地改变尾巴的位置和高度就可取得身体的平衡，再利用后脚强健的肌肉和结实的关节就可敏捷地跳跃，即使在高空中落下也可在空中改变身体姿势，轻盈准确地落地。善于爬高，但却不善于从顶点下落。叫声和猫交往 猫的叫声不仅能传递信息，而且能表达感情，因而主人能通过观察、判断来读懂它，和它交流。 猫有很多种，有嘴挺贫的，有爱沉默的，不能一概而论，要长年和它相处的话，就能读懂它的每句言语。肢体语言所谓“猫的肢体语言”就是猫用耳、尾、毛、口、身子来表达自已的心情和欲望。猫要是腻在人的脚下、身旁，用头蹭你的话是亲热的表现。如果猫把从嘴边分泌出来的一种气味蹭到你身上的话，就表示它想把你占为已有。要是猫的喉咙里发出叽里咕噜的声音，就表明它心情很好，还有要是猫像鸭子孵蛋一样，前脚往里弯的话，就表示它的安心和依赖。猫在人类面前嘴巴张大表示信任。
<br />
<a href="#top">返回到顶部</a>