【JavaWeb新手入门】开启篇之HTML文本

HTML文本

目录

---

1.静态页面与动态页面的区别
2.段落标签、文本标签、图片标签
3.自闭合标签
4.块元素和行内元素
5.网页特殊符号

---

静态页面与动态页面的区别

静态页面和动态页面的区别在于：是否与服务器进行数据交互
以下4种情况不一定是动态页面：

• 带有音频和视频
• 带有Flash动画
• 带有CSS动画
• 带有JavaScript特效

1.1 文本简介

• 在HTML中，共有6个级别的标题标签：h1、h2、h3、h4、h5、h6。其中h是“header”的缩写
• 这6个标题标签在页面的重要性是有区别的，其中h1标签的重要性最高，h6标签的重要性最低
• 一个页面一般只能有一个h1标签，而h2~h6标签可以有多个

网页不是有title标签来定义标题了吗？为什么还要用h1标签呢？
title标签和h1标签是不一样的。title标签用于显示地址栏的标题，而h1标签用于显示文章的标题

---

文本标签、段落标签、语义化标签、图片标签

2.1文本标签

2.1.1文本标签使用

• 在HTML中，我们可以使用“p标签”来显示一段文字，然后可以使用“br标签”来对段落进行换行
  2.1.2 文本标签的作用

1. 用于包裹： 词汇、短语等。
2. 通常写在排版标签里面。
3. 排版标签更宏观 (大段的文字) ，文本标签更微观 (词汇、短语) 。
4. 文本标签通常都是行内元素。
   2.1.3 标签类型

类型
粗体标签：strong、b
斜体标签：i、em、cite
上标标签：sup
下标标签：sub
划线标签：s、u
字号标签：big、small

div是大包装、span是小包装

2.2段落标签

2.2.1水平线标签

• 我们可以使用“hr标签”来实现一条水平线。hr，“horizon（水平线）”的缩写

2.2.2div标签

• div，全称“division（分区）”，用来划分一个区域
• div标签最重要的用途：划分区域，然后结合CSS针对该区域进行样式控制

2.3语义化标签

2.3.1 概念：用特定的标签， 去表达特定的含义。

2.3.2 原则： 标签的默认效果不重要 (后期可以通过CSS 随便控制效果) ，语义最重要！
2.3.3 举例： 对于h1标签， 效果是文字很大，(不重要) ，语义是网页主要内容 (很重要) 。
2.3.4 优势:

• 代码结构清晰可读性强。
• 有利于 SEO (搜索引擎优化)
• 方便设备解析 (如屏幕阅读器、盲人阅读器等) 。

2.4图片标签

2.4.1 基本使用

标签名	标签语义	常用属性	单/双标签
img	图片	src  图片路径 (又称： 图片地址) --图的具体位置   alt  图片描述   width  图片宽度, 单位是像素, 例如: 200px或 200   height  图片高度, 单位是像素, 例如: 200px 或 200	单

2.4.2 总结：

1. 像素 (px)是一种单位， 学到CSS时， 我们会详细讲解。
2. 尽量不同时修改图片的宽和高， 可能会造成比例失调。
3. 暂且认为 img是行内元素 (学到CSS时， 会认识一个新的元素分类， 目前咱们只知道： 块、行内)。
4. alt属性的作用：

• 搜索引擎通过 alt属性， 得知图片的内容。——最主要的- 作用。
• 当图片无法展示时候， 有些浏览器会呈现 alt属性的值。
• 盲人阅读器会朗读 alt属性的值。

2.4.3 相对路径，绝对路径

1. 相对路径： 以当前位置作为参考点， 去建立路径。

已有结构	符号	含义	举例 (在测试.html中)
1_HTML	./	同级	引入【怪兽. jpg】:  < img src=“./怪兽. jpg”>
	/	下一级	引入【喜羊羊. jpg】:  < img src=“./a/喜羊羊. jpg”>
	…/	上一级	引入【奥特曼. jpg】:  < img src=“…/奥特曼. jpg”>

注意点：
相对路径中的 ./可以省略不写。
相对路径依赖的是当前位置， 后期若调整了文件位置， 那么文件中的路径也要修改。

2. 绝对路径
   绝对路径： 以根位置作为参考点， 去建立路径。
   1. 本地绝对路径: E:/a/b/c/奥特曼. jpg。 (很少使用)
   2. 网络绝对路径:  http://www.atguigu.com/images/index_new/logo.png  。

注意点：
1.使用本地绝对路径， 一旦更换设备， 路径处理起来比较麻烦， 所以很少使用。
2.使用网络绝对路径， 确实方便， 但要注意： 若服务器开启了防盗链， 会造成图片引入失败。

2.4.4 常见图片格式

格式类型	概述	主要特点	使用场景
jpg格式	扩展名为. jpg或 . jpeg， 是一种有损的压缩格式 (把肉眼不容易观察出来的细节丢弃了)	支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图	对图片细节没有极高要求的场景， 例如： 网站的产品宣传图等。——该格式网页中很常见。
png 格式	扩展名为 . png， 是一种无损的压缩格式， 能够更高质量的保存图片	支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图	①想让图片有透明背景； ②想更高质量的呈现图片； 例如 ： 公司 logo图、重要配图等。
bmp格式	扩展名为 . bmp，不进行压缩的一种格式， 在最大程度上保留图片更多的细节	支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图	对图片细节要求极高的场景， 例如： 一些大型游戏中的图片。 (网页中很少使用)
gif格式	扩展名为 . gif， 仅支持256种颜色， 色彩呈现不是很完整	支持的颜色较少、支持简单透明背景、支持动态图	网页中的动态图片
webp格式	扩展名为 . webp， 谷歌推出的一种格式， 专门用来在网页中呈现图片	具备上述几种格式的优点， 但兼容性不太好， 一旦使用务必要解决兼容性问题	网页中的各种图片。

base64格式
1.本质： 一串特殊的文本， 要通过浏览器打开， 传统看图应用通常无法打开。
2.原理： 把图片进行base64编码， 形成一串文本。
3.如何生成： 靠一些工具或网站。
4.如何使用： 直接作为 img标签的 src属性的值即可， 并且不受文件位置的影响。
5.使用场景： 一些较小的图片， 或者需要和网页一起加载的图片。

---

自闭合标签

1. 一般标签(双)：由于有开始符号和结束符号，因此可以在内部插入其他标签或文字
2. 自闭合标签(单)：由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符号来关闭，然而它却“自己”关闭了

---

块元素和行内元素

• 块元素的特点：
  （1）块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行；
  （2）块元素内部可以容纳其他块元素和行内元素；
• 行内元素的特点：
  （1）行内元素可以与其他行内元素位于同一行；
  （2）行内元素内部可以容纳其他行内元素，但不可以容纳块元素；

---

网页特殊符号

• 在HTML中，如果想要显示一个特殊符号，也是需要通过代码形式来实现的
• 网页特殊符号对应的代码，都是以“&”开头、并且以“;”（英文分号）结尾的
• 我们只需要记住一个：*&*nbsp;