首页

HTML 基础

概述

HTML 是 Hyper Text Markup Language 的缩写，中文称为超文本标记语言。

HTML 文档是指用 HTML 写成的扩展名为 .html 的文件，HTML 文当能够被浏览器识别，并翻译成对人类友好的形式展现出来，浏览器上的网页就是 HTML 文档，打开浏览器的调试模式（一般是按F12），就能看到 HTML 文档的源码。

HTML 标签是由尖括号包围的关键词，如 <html>，HTML 标签分为两种：

  • 空标签：空标签内没有内容，如 <br /> 标签。
  • 非空标签：非空标签内可以写入内容，如 <h1> 标签，一个完整的非空标签由开始标签、结束标签和标签内容组成，如 <h1>晚上标签内容</h1>。包裹在非空标签内的标签内容就是网页上展示的东西。

一般来说每个 HTML 标签都具有一定的含义，用于描述文档的内容，如 <title> 标签就表示文档的标题，当浏览器翻译 <title> 标签的内容时就能知道，文档的标题是什么。如一个文档 <title> 标签是 <title>我是网页的标题</title>，当浏览器翻译它是就会知道这个文档的标题是 我是网页的标题 。

一个简单的 HTML 文档示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档标题</title>
  </head>
  <body>
    文档内容
  </body>
</html>
  1. <!DOCTYPE> 用于声明文档使用的 HTML 版本，<!DOCTYPE html> 表示使用 HTML5 ，这个标签可以不写，但一般写上会比较好。
  2. <html> 用于声明一个 HTML 文档，一个文档中只能有一个 <html> 元素，除了<!DOCTYPE> 以外，其他的 HTML 元素都应该包裹在 <html></html> 中，注意 <html> 是用来声明 HTML 文档的，不可忽略，虽然有时候忽略掉也不会有影响，但一般写上比较好。
  3. <head> 用于声明文档的头部部分，文档的头部部分一般还包含 <title> 、<mate> 、<base> 等用于描述文档基本信息的标签。
  4. <body> 用于声明文档的内容，<body></body> 中的内容会作为文档的内容显示。
  5. <body> 和 <head> 是同级标签，不要相互嵌套使用。

一个 HTML 文档的格式大概就是这样子的，剩下的就是在 <head>、<body> 标签中添加内容来丰富文档了。

一些标签

  1. <!DOCTYPE>：位于文档最前面的位置，处于 <html> 标签之前，它不是一个标签，只是用来告知浏览器文档使用了哪种 HTML 版本。

    • HTML 5

      <!DOCTYPE html>

    • HTML 4.01 Strict

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    • HTML 4.01 Transitional

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

    • HTML 4.01 Frameset

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

      不同版本的 HTML 对标签的支持程度不同，现在一般使用最新的版本，即 HTML5 版本。

  2. <abbr>：定义缩写，当鼠标悬浮在缩写上时会显示完整的信息。例：

    <abbr title="HyperText Markup Language">HTML</abbr>

  3. <base>：<base> 标签为页面上的所有的相对链接规定默认 URL 或默认目标，在一个文档中，最多能使用一个 <base> 标签，且必须位于 <head> 元素内部。

    属性：

    • hred ：规定页面中所有相对链接的基准 URL。
    • target ：规定页面中所有的超链接和表单在何处打开。该属性会被每个链接中的 target 属性覆盖。
      • _blank：在新窗口打开。
      • _parent：在父窗口中打开。
      • _self：默认，在当前页面打开。
      • _top：在当前窗口打开，并替换当前窗口。

  4. **<meta> **：示不能由其它HTML元相关元素 （<base>， <link> , <script>， <style>， <title>） 表示的元数据信息，通常位于 <head> 标签内。

    1. charset：当前文档使用的字符编码，可以被任何一个元素的 lang 属性覆盖，推荐使用 utf-8

    2. content：包含 http-equiv 或 name 属性的值。

    3. http-equiv：这个属性已经过期，不要使用。

    4. name：定义文档级元数据的名称。与 content 属性包含的值相关联，参数如下：

      • application-name：定义正运行在该网页上的网络应用名称；

      • author：这个文档的作者的名称。

        <meta name="author" content="aioverg" />

      • description：页面内容的简短描述。 一些浏览器，会将其用作为书签页面的默认描述。

      • generator：包含生成页面的软件的标识符。

      • keywords：定义文档关键字，用逗号分隔的与页面内容相关的单词。

        <meta name="keywords" content="HTML, CSS, meta" />

      • viewport：提供有关视口初始大小的提示，仅供移动设备使用。值为：

        <meta name="viewport" content="key=value, key=value" />

        keyvalue描述
        width正整数、device-width以 px 为单位， 定义视口的宽度
        height正整数、device-height以 px 为单位， 定义视口的高度
        initial-scale0.0 ~ 10.0之间的数定义设备宽度与视口大小之间的缩放比率
        maximum-scale0.0 ~ 10.0之间的数定义缩放的最大值；必须大于或等于minimum-scale的值，不然会导致不确定的行为发生。
        minimum-scale0.0 ~ 10.0之间的数定义缩放的最小值；它必须小于或等于maximum-scale的值，不然会导致不确定的行为发生。
        user-scalableyes、no如果设置为 no，用户将不能放大或缩小网页。默认值为 yes。

  5. HTML媒体：

    HTML5 提供了 <video> 和 <audio> 元素以便在网页中嵌入富媒体，通过这些元素自带的 API 可以来控制音频、视频的播放、进度等。其中 controls 属性会启用浏览器默认的播放设置，但在不同的浏览器中默认播放设置可能存在差异，若想在不同的浏览器中使播放设置保持一致，可用使用 HTMLMediaElement API 来以编程式的方式自定义控制视频。

  6. <template>：创建一个模板来保存文档内容，一般来说模板内的内容是由 JavaScript 实例化的，注意模板内容不会显示在页面上，若要将模板的内容显示在页面上，需要提取模板的内容放入页面中的其他元素内。例如：

    <div id="ex"></div>
<template id="temp"></template>
<script>
    if('content' in document.createElement('template')){//判断<template>是否支持
        let temp = document.querySelector('#temp')
		temp.innerHTML = "<h4>aioverg</h4>"//将内容插入到模板中
		let ex1 = document.querySelector('#ex')
		ex1.appendChild(temp.content)//将模板内容插入到<div>中展示
    }else{}
</script>

  7. <slot>：占位符，与 <template> 配合使用，在实例化组件的时候插入内容。例如：

    <element-define>
    <span slot="two">slot</span>
</element-define>

<template id="element-define">
    <p>aioverg</p>
    <slot name="one"><p>默认显示内容</p></slot>
    <slot name="two"><slot>
</template>
<script>
    customElements.define('element-define',
        class extends HTMLElement {
            constructor() {
            super();
            var template = document.getElementById('element-define').content;
            const shadowRoot = this.attachShadow({mode: 'open'}).appendChild(template.cloneNode(true));
        }
})
</script>

其它

  1. <p> 元素不能嵌套块级元素，嵌套的块级元素不会成为 <p> 的子元素，且 <p> 的开始和闭合标签会变成两个完整的 <p> 元素。

  2. src 是指向物件的来源地址，是引入。在 <img> 、<script>、<iframe> 等元素上使用。 当浏览器解析到该资源时会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕， 图片和框架等元素也是如此，类似于该元素所指向的资源嵌套到当前标签内，这也是为什么要把js放在底部而不是头部。

  3. href 是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。在 <link> 和 <a> 等元素上使用。 当浏览器解析到该资源时会下载但不会停止对当前文档的处理。

  4. HTML中引入SVG的几种方法：

    1. 作为图片使用

      <img src = 'name.svg' />

    2. 作为CSS背景图片

      background: url(name.svg)

    3. 作为一个嵌入对象<object>标签

      <object type='image/svg+xml' data='name.svg'>
    <!-- 浏览器不支持时的备选内容-->
</object>

    4. 使用 <iframe> 标签

      <iframe src='name.svg'>
    <!--浏览器不支持时的备选内容-->
</iframe>

    5. 使用 <embed> 标签

      <embed type='image/svg+xml' src='name.svg' />

    6. 使用内联 <svg> 标签

      <svg><!--svg内容--></svg>
上一篇 Git 基础
目录
下一篇 CSS 基础