W.T.的博客

Every day to be a little better

前端-HTML学习笔记02-HTML常见元素

发表于 更新于 分类于
本文字数： 11k 阅读时长 ≈ 10 分钟
html文档结构：html元素，head元素，body元素
html常见元素：h，p，img，a，iframe，div，span
块级元素，行内级元素
字体实体

1. 完整的HTML结构

  • 一个完整的HTML结构包括哪几部分
    • 文档声明
    • html元素
      • head元素
      • body元素
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
<head>
 <title>Document</title>
</head>
<body>
  <h1>标题</h1>
</body>
</html>

2. 文档声明

  • HTML最上方的一段文本称之为文档类型声明，用于声明文档类型

  • <!DOCTYPE html>

    • HTML文档声明，告诉浏览器当前页面是HTML5页面
    • 让浏览器用HTML5的标准去解析识别内容
    • 必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题

  • HTML5的文档声明比HTML 4.01、XHTML 1.0简洁非常多

    1
    2
    3
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/loose.dtd">

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3. html元素

  • <html> 元素表示一个 HTML文档的根(顶级元素)，所以它也被称为根元素

    • 所有其他元素必须是此元素的后代

      1
      2
      3
      <!DOCTYPE html>
      <html lang="zh-CN">
      </html>

  • W3C标准建议为html元素增加一个lang属性，作用是

    • 帮助语音合成工具确定要使用的发音

    • 帮助翻译工具确定要使用的翻译规则

  • 比如常用的规则

    • lang="en"表示这个HTML文档的语言是英文
    • lang="zh-CN"表示这个HTML文档的语言是中文

4. head元素

  • HTML head 元素规定文档相关的配置信息(也称之为元数据)，包括文档的标题，引用的文档样式和脚本等，代码不会作为页面内容呈现给浏览器
    • 什么是元数据(meta data)，是描述数据的数据
    • 可以理解成对整个页面的配置
  • 常见的设置有哪些
    • 网页的标题：title元素
    • 网页的编码：meta元素

4.1. title元素

  • 网页的标题，显示在浏览器标题栏或是收藏夹，历史浏览记录等位置
1
<title>网页的标题</title>

4.2. meta元素

  • meta元素用于定义元数据

    • 比如标题title、样式style、link外部资源等
    • meta用于定义那些不能使用其他定元相关(meta-related)元素定义的任何元数据信息

  • meta元素定义的元数据类型包括以下几种

    • 如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码
    • 如果设置了 http-equiv 属性，meta 元素则是编译指令
    • 如果设置了 name 属性，meta 元素提供的是文档级别(document-level)的元数据，应用于整个页面

4.2.1. charset字符编码

  • 标识网页的字符编码

  • 作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码

  • 常见字符编码

    • UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
    • GB2312：6000+汉字
    • GBK：20000+汉字

  • 注意点：开发中统一使用UTF-8

1
<meta charest="utf-8">

4.2.2. name元数据名称

  • name属性的值非常多，具体的内容可以查看文档

  • robots：爬虫、协作搜寻器，或者 “机器人”，对此页面的处理行为，或者说，应当遵守的规则

  • author：文档作者的名字

  • copyright：版权声明

  • description：一段简短而精确的、对页面内容的描述

    • 一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述
    1
    <meta name="description" content="这是一张HTML5前端页面">

  • keywords：与页面内容相关的关键词，使用逗号分隔。某些搜索引擎会进行收录

    1
    <meta name="keywords" content="HTML5 前端">

  • viewport：视口。网页不允许缩放，应对手机端双指放大操作

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- 
        width=device-width 显示窗口宽度等于设备宽度
        initial-scale=1.0 窗口默认不缩放
        user-scalable=no 用户不可缩放
        maximum-scale=1.0 最大缩放值
    -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,
            user-scalable=no,maximum-scale=1.0">

4.2.3. http-equiv编译指令

  • X-UA-Compatible，官方文档的解释

    • 告知IE浏览器去模仿哪一个浏览器的行为
    • IE=edge，告知IE8使用最高有效模式来模仿
    1
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

  • 每过一段时间刷新

    1
    <meta http-equiv="refresh" content="300">

  • 页面在规定时间以后，页面加载的同时立刻跳转到其他主页

    1
    <meta http-equiv="refresh" content="30;URL=http://www.baidu.com">

4.3. link元素

  • link元素是外部资源链接元素，规范了文档与外部资源的关系

    • link元素通常是在head元素中

  • 最常用的链接是样式表(CSS)

    • 此外也可以被用来创建站点图标(比如 “favicon” 图标)

4.3.1. link元素常见的属性

1
2
<link rel="icon" href="./favico.ico">
<link rel="stylesheet" href="./style.css">

4.3.2. link图标

  • Favicon是favorites icon的缩写，亦被称为website icon(站点图标)、page icon(页面图标)

  • 用法

    1
    <link rel="icon" href="./favico.ico">

  • 事实上它还有很多兼容性的写法

    Edge Firefox Google Chrome Internet Explorer Opera Safari
    <link rel="shortcut icon" href="https://example.com/myicon.ico"> √ √ √ √ √ √
    <link rel="icon" type="image/vnd.microsoft.icon" href="https://example.com/image.ico"> √ √ √ √(from IE9) √ √
    <link rel="icon" type="image/x-icon" href="https://example.com/image.ico"> √ √ √ √(from IE9) √ √
    <link rel="icon" href="https://example.com/image.ico"> √ √ √ √(from IE11) √ √
    <link rel="icon" type="image/gif" href="https://example.com/image.gif"> √ √ √ √(from IE11) √ √
    <link rel="icon" type="image/png" href="https://example.com/image.png"> √ √ √ √(from IE11) √ √

  • 为什么有些网站没有link元素也可以正常显示图标呢?

    <link rel="alternate" href="https://pvp.qq.com/m/">

    • link使用方法表示有另一个可替换的网站供选择
    • 代码局限就是把favicon关联到了某个特定的HTML或XHTML文档上
    • 为避免这一点，favicon.ico 文件应置于根目录下。多数浏览器将自动检测并使用它

4.3.3. dns-prefetch

  • 告知浏览器为目标资源的来源预先执行 DNS 解析

  • 如在京东商城中

    1
    <link rel="dns-prefetch" href="//static.360buyimg.com">

5. body元素

  • body元素里面的内容将是在浏览器窗口中看到的东西，也就是网页的具体内容和结构

6. HTML元素

7. h元素

  • 在一个页面中通常会有一些比较重要的文字作为标题，这个时候可以使用h元素

  • <h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题

    • Heading是头部的意思，通常会用来做标题

    • <h1> 级别最高，而 <h6> 级别最低

    1
    2
    3
    4
    5
    6
    <h1>我是h1标题</h1>
    <h2>我是h2标题</h2>
    <h3>我是h3标题</h3>
    <h4>我是h4标题</h4>
    <h5>我是h5标题</h5>
    <h6>我是h6标题</h6>

  • 特点

    • 文字都有加粗
    • 文字都有变大，但按层次 <h1><h6> ，字号逐层递减
    • 元素都是独占一行的

  • 注意：h元素通常和SEO优化有关系

  • <h1>-<h6>元素的本质不同是css样式中设置的字体大小不同

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    h1 {
        /* 独占一行 */
      	display: block;
        font-size: 2em;
      	/* 字体加粗 */
        font-weight: bold;
    }
    h2 {
        font-size: 1.5em;
    }
    h3 {
        font-size: 1.17em;
    }
    h4{
        font-size: 1em;
    }
    h5{
        font-size: 0.83em;
    }
    h6{
        font-size: 0.67em;
    }

8. p元素

  • 如果想表示一个段落，可以使用p元素

  • p元素(或者说 HTML 段落元素)表示文本的一个段落

    • p元素是paragraph单词的缩写，是段落、分段的意思
    • p元素多个段落之间会有一定的间距
    1
    2
    <p> HTML5 </p>
    <p> paragraph </p>

  • 特点

    • 段落之间存在间隙
    • 独占一行

9. img元素

  • 使用img元素：告诉浏览器来显示一张图片

  • img元素将一份图像嵌入文档

    • img是image单词的缩写，是图像的意思
    • 事实上img是一个可替换元素( replaced element )

9.1. img元素属性

  • src属性：source单词的缩写，表示源。是必须的，它包含了图片的文件路径

  • alt属性：不是强制性的，有两个作用

    • 作用一：当图片加载不成功(错误的地址或者图片资源不存在)，那么会显示这段文本
    • 作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，知道图像的含义

  • 某些其他属性目前已经不再使用

    • 比如width、height、border

9.2. img元素图片路径

  • 设置img的src时，需要给图片设置路径

    • 网络图片：一个URL地址
      • 网络图片的设置非常简单，给一个地址即可
    • 本地图片：本地电脑上的图片，后续会和html一起部署到服务

  • 本地图片的路径有两种方式

    • 方式一：绝对路径(几乎不用)
      • 从电脑的根目录开始一直找到资源的路径
    • 方式二：相对路径(常用)
      • 相当于当前文件的一个路径
      • . 代表当前文件夹，可以省略
      • .. 代表上级文件夹

  • 对于网页来说，不管什么操作系统(Windows、Mac、Linux)，路径分隔符都是 /，而不是 \

9.3. img元素图片格式

  • img元素支持的图片格式非常多
缩写 文件格式 MIME类型 文件拓展名 浏览器兼容性
APNG Animated Portable Network Graphics
动态便捷式网络图像		 image/apng .apng Chrome，Edge，Firefox，Opera，Safari
AVIF AV1 Image File Format
AV1 图像文件格式		 image/avif .avif Chrome，Opera，Firefox(feature flag)
BMP Bitmap file
位图文件		 Image/bmp .bmp Chrome，Edge，Firefox，Internet Explorer，Opera，Safari
GIF Graphics Interchange
图像互换格式		 image/gif .gif Chrome，Edge，Firefox，Internet Explorer，Opera，Safari
ICO Microsoft Icon
微软图像		 image/x-icon .ico,.cur Chrome，Edge，Firefox，Internet Explorer，Opera，Safari
JPEG Joint Photographic Expert Group Image
联合影像专家小组图像		 image/jpeg .jpg.jpeg,.jfif,.pjpeg,.pjp Chrome，Edge，Firefox，Internet Explorer，Opera，Safari
PNG Portable Network Graphics
便捷式网络图像		 image/png .png Chrome，Edge，Firefox，Internet Explorer，Opera，Safari
SVG Scalable Vector Graphics
可播放矢量图形		 image/svg+xml .svg Chrome，Edge，Firefox，Internet Explorer，Opera，Safari

10. a元素

  • 在网页中需要跳转到另外一个链接，这个时候使用a元素
  • a元素(或称锚(anchor)元素)
    • 定义超链接，用于打开新的URL

10.1. a元素属性

  • href：指定要打开的URL地址
  • target：该属性指定在何处显示链接的资源
    • _self：默认值，在当前窗口打开URL
    • _blank：在一个新的窗口中打开URL
    • 以下两个应用结合iframe元素使用
    • _parent：在父窗口中打开URL
    • _top：在顶层窗口中打开URL

10.2. 锚点链接

  • 锚点链接可以实现跳转到网页中的具体位置
  • 锚点链接有两个重要步骤
    • 在要跳到的元素上定义一个id属性
    • 定义a元素，并且a元素的href指向对应的id
1
2
3
4
5
6
7
<p id="top">top</p>
<p id="center">center</p>
<p id="bottom">bottom</p>

<a href="#top">top</a>
<a href="#center">center</a>
<a href="#bottom">bottom</a>

10.3. 图片链接

  • 在很多网站会发现图片也是可以点击进行跳转的
  • img元素跟a元素一起使用，可以实现图片链接
  • 实现思路
    • a元素中不存放文字，而是存放一个img元素
    • 也就是img元素是a元素的内容
1
2
3
<a href="/01">
  <img src="./images/01.jpg" />
</a>

10.4. 其他URL地址

  • a元素一定是用来跳转到新网页的？

  • 文件下载

    1
    <a href="https://github.com/coderwhy/HYMiniMall/archive/master.zip">zip</a>

  • 连接邮件

    1
    <a href="mailto:12345@qq.com">邮件</a>

11. iframe元素

  • 利用iframe元素可以实现

    • 在一个HTML文档中嵌入其他HTML文档

      1
      2
      <iframe src="https://www.taobao.com" frameborder="0"></iframe>
      <iframe src="https://www.baidu.com" frameborder="0"></iframe>

    • 百度网页不允许被嵌入

      在百度的响应头中定义X-Frame-Options:sameorigin，要求同源域名请求

11.1. frameborder属性

  • 用于规定是否显示边框
    • 1：显示
    • 0：不显示

11.2. 结合a的target属性

  • html/index.html

    1
    2
    <h1>iframe1</h1>
    <iframe src="./iframe/index.html" frameborder="1"></iframe>

  • html/iframe/index.html

    1
    2
    <h1>iframe2</h1>
    <iframe src="./other/index.html" frameborder="1"></iframe>

  • html/iframe/other/index.html

    1
    2
    <a href="https://www.taobao.com" target="_parent">打开链接</a>
    <a href="https://www.taobao.com" target="_top">打开链接</a>

  • _parent：在父窗口中打开URL

  • _top：在顶层窗口中打开URL

12. div、span元素

12.1. div、span元素的历史

  • 在HTML中有两个特殊的元素div元素、span元素

    • div元素：division，分开、分配的意思
    • span元素：跨域、涵盖的意思

  • 这两个元素有什么作用呢?

    • 无所用、无所不用

  • 产生的历史

    • 网页的发展早期是没有css，必须通过语义化元素来告知浏览器一段文字如何显示
    • 后来出现了css，结构和样式需要分离，这个时候html只需要负责结构即可
    • 比如h1元素可以是一段普通的文本+CSS修饰样式
    • 这个时候就出现了div、span来编写HTML结构所有的结构，样式都交给css来处理

  • 所以，理论上来说

    • 页面可以没有div、span
    • 也可以全部都是div、span

12.2. div、span元素的区别

  • div元素和span元素都是“纯粹的” 容器，也可以理解成“盒子”，它们都是用来包裹内容的

    • div元素

      • 多个div元素包裹的内容会在不同的行显示

      • 一般作为其他元素的父容器，把其他元素包住，代表一个整体

      • 用于把网页分割为多个独立的部分

    • span元素

      • 多个span元素包裹的内容会在同一行显示
      • 默认情况下，跟普通文本几乎没差别
      • 用于区分特殊文本和普通文本，比如用来显示一些关键字

13. i元素

  • 内容倾斜
  • 通常斜体会使用css样式来完成
  • 开发中偶尔会用它来做字体图标(因为看起来像是icon的缩写)

13.1. 认识字体图标

  • 把字体直接设计成图标的样子 - 字体图标

  • 字体图标的好处

    • 放大不会失真
    • 可以任意切换颜色
    • 用到很多个图标时，文件相对图片较小

  • 字体图标的使用

  • 将字体文件和默认的css文件导入到项目中

13.2. 字体图标的使用

  • 字体图标的使用步骤

    1. 通过link引入iconfont.css文件
    2. 使用字体图标

  • 使用字体图标常见的有两种方式

    • 通过对应字体图标的Unicode来显示代码
    • 利用已经编写好的class, 直接使用即可
    1
    2
    <i class="iconfont">&#xe6f6;</i>
    <i class="iconfont icon-music"></i>

14. 不常用元素

14.1. strong元素

  • 内容加粗、强调
  • 通常加粗会使用css样式来完成
  • 开发中很偶尔会使用一下

14.2. code元素

  • 用于显示代码
  • 偶尔会使用，用来显示等宽字体

14.3. br元素

  • 换行元素
    • 开发中已经不使用

15. HTML元素的类型

  • 经常提到div是块级元素会独占一行，span是行内级元素会在同一行显示

  • 什么是块级元素, 什么是行内级元素呢?

    • 块级元素(block-level elements)：独占父元素的一行
    • 行内级元素(inline-level elements)：多个行内级元素可以在父元素的同一行中显示

  • 事实上元素没有本质的区别

    • div之所以是块级元素仅仅是因为浏览器默认设置了display属性而已

      1
      2
      3
      div {
        display: block;
      }

  • 可以通过CSS中的 display 属性来改变元素的特性

16. 标准流

标准流又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

  • 块级元素：从上往下，垂直布局，独占一行
  • 行内元素/行内块元素：从左往右，水平布局，空间不够自动拆行

17. HTML嵌套规范

  • 块级元素

    • 一般情况下，可以包含其他任何元素，块级元素，行内元素，行内块元素等
    • 特殊情况，p元素中不要嵌套div，p，h系列等块级元素

  • 行内块元素（a，span，strong等）

    • 一般情况下，只能包含行内级元素

18. HTML全局属性

18.1. id

  • 定义唯一标识符(ID)，该标识符在整个文档中必须是唯一的

  • 其目的是在链接(使用片段标识符)，脚本或样 式(使用 CSS)时标识元素

18.2. class

  • 一个以空格分隔的元素的类名(classes )列表

  • 允许 CSS 和 Javascript 通过类选择器或者DOM方法来选择和访问特定的元素

18.3. style

  • 给元素添加内联样式

18.4. title

  • 包含表示与其所属元素相关信息的文本
  • 这些信息通常可以作为提示呈现给用户，但不是必须的

19. 字符实体

  • 编写的HTML代码会被浏览器解析

  • 如下代码是如何被解析的呢?

    • 使用小于号(<)，浏览器会将其后的文本解析为一个tag
    • 但是某些情况下，确实需要编写一个小于号(<)
    • 这个时候可以使用字符实体

  • HTML 实体是一段以连字号(&)开头、以分号(;)结尾的文本(字符串)

    • 实体常常用于显示保留字符（这些字符会被解析为 HTML 代码）和不可见的字符（如“不换行空格”）
    • 也可以用实体来代替其他难以用标准键盘键入的字符
    1
    <span>&lt;Hello&gt;</span>

    显示为

    1
    <Hello>

  • 常见的字符实体

显示样式 描述 实体名称 实体编号
&nbsp; 空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 双引号 &quot; &#34;
&apos; 单引号 &apos; &#39;
&cent; 分 &cent; &#162;
&pound; 镑 &pound; &#163;
&yen; 元 &yen; &#165;
&euro; 欧元 &euro; &#8364;
&sect; 小节 &sect; &#167;
&copy; 版权 &copy; &#169;
&reg; 注册商标 &reg; &#174;
&trade; 商标 &trade; &#8482;
&times; 乘号 &times; &#215;
&divide; 除号 &divide; &#247;
本文结束  感谢您的阅读