HTML与网页

java 前端

标题标签

 <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题

这是六级标题

特点 ：1、随着h标签的数字越来越大，然后标题的大小变小

段落标签

<p>
    段落内容
</p>

说明：p标签可以划定一个段落

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

换行

说明：br 标签是html中唯一可以换行的标签 实际开发中很多程序员会写成

横线

<hr/>

说明：hr是横线标签

特点：hr横线与所在网页的宽度一致，随着窗口的宽度改变而改变。

文本格式化标签

//加粗尽量用<strong></strong>
<strong>文字加粗</strong>
<b>文字加粗</b>

//倾斜
<em>倾斜</em>
<i>倾斜</i>

//删除
<del>删除</del>
<s>删除</s>

//下划线
<ins>下划线</ins>
<u>下划线</u>

div和span标记

//大盒子
<div>
    通常是独占一行的，所以是大盒子
</div>

//小盒子
<span>
    一行可以有多个，因此是小盒子
</span>

图像标签和路径

 <!-- img是图像标签 是单标签 -->
    <!-- 一个标签的属性 通常写在标签名称之后，用空格隔开 -->
    <!-- <img src="file:///C:/Users/Administrator/Desktop/cat.png" /> -->
    <!-- 绝对路径 file:///C:/Users/Administrator/Desktop/cat.png -->
    <!-- 本地连接前 加上 file:/// -->

<img src="链接地址"/>

相对路径 : 相对于当前文件所在目录的位置 的相对相对位置关系

绝对路径：从根文件出发 相对路径： 从所在的当前文件出发 -

图像标签的属性

一个标签可以有多个属性

属性和属性之间最好用空格隔开

<img src="图片链接" alt="图片加载不出来应该显示的文字"/>
<img src="图片链接" title="鼠标悬浮在图片上时出现的文字"
// width图像宽度的属性  height 图像高度的属性
// 长度值的单位是像素px
<img src="图片链接" width="100px"  height="100px"
  

<!-- 注释.img 除了加载本地图片，还可以加载网络图片 -->
    <!-- 网络图片  https://www.baidu.com/a.jpg -->
    <img src="https://img1.baidu.com/it/u=1119344087,3393580185&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=480" />

链接标签

• 链接的作用

1.跳转到其它网页（html文件）

2.下载文件

3.导航（滚动到指定的位置）

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

<a href="第一个网页".html>跳转到第一个网页</a>

• targe

  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 />