阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript HTML文档和标签介绍

      HTML的英文全称为 Hyper Text Markup Language,即超文本标记语言(简称HTML,属于标记语言,并不是编程语言)。

      HTML5是HTML的一个新版本。HTML 不是一种编程语言,而是一种标记语言 (简称HTML5;很多人把人把HTML5简称为H5,这只是生活沟通上的简写,不要搞混了;);

      HTML文件是由N个标签组成的,这些标签元素构成了搭建网站的基础,每个标签都可以被多个属性所修饰;

      标签根据它占据其父级元素(容器)的大小分为块级标签内联标签

      • HTML文档的组成
      • HTML4和HTML5的区别
      • 常用标签的简单介绍
      • 常用的全局属性介绍(所有都有的属性)
      • HTML书写规则

      HTML文档的组成

      常见的HTML文件,由类型声明和html标签构成;

      • 类型声明(!DOCTYPE)的作用是告诉浏览器,以什么格式渲染下面的文件;
      • html标签是HTML文件的基础;(HTML标签内一般还会有head和body标签)

      例如上面这张图片中的HTML代码,就是最基础的HTML文件格式;

      HTML4和HTML5的区别

      最重要的标志,就是看类型声明;

      • HTML5是用 <!DOCTYPE html> 这种的声明
      • HTML4是用 <! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 4.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 这种的声明;

      <!DOCTYPE> 声明推荐是放在 HTML 文档的第一行,位于 <html> 标签之前。

      为什么HTML和HTML5声明的类型不同?

      • 在 HTML4 中,<!DOCTYPE> 声明引用 DTD,因为 HTML4 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。
      • HTML5 不基于 SGML,所以不需要引用 DTD。

      注释<!DOCTYPE> 声明没有结束标签,并且对大小写不敏感。

      因为这里是告诉浏览器的渲染方式,所以这里决定此文件是HTML4还是5,不过并没有什么软用,现在一般都是HTML5的声明格式;记住第一个就可以了;这些都不是重点

      另外HTML5为了更好的符合语义化和升级,新增了 headerfootersectionaudiovideo 等标签;

      参考面试题

      常用标签的简单介绍

      divullipspanaimgtabletrthtdbrhrh1h2h3

      常见的一些标签;

      <!doctype html>
      <html>
          <head>
              <meta charset="UTF-8">
              <meta name="viewport"
                    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
              <meta http-equiv="X-UA-Compatible" content="ie=edge">
              <title>浏览器的标题头11</title>
          </head>
          <body>
              <div>这是DIV标签</div>
              <p>这是p标签1</p>
              <br>
              <br>
              <hr>
              <p>这是p标签2</p>
              <a href="https://www.baidu.com/">百度一下,你就知道</a>
              <br>
              <br>
              <a href="#div" target="_blank">百度一下,你就知道2</a>
              <br>
              <p>ddasdasdasdasdasdasd</p>
              <p>ddasdasdasdasdasdasd</p>
              <hr>
              <p>ddasdasdasdasdasdasd</p>
              <ul>
                  <li>1</li>
                  <li>2</li>
                  <li>3</li>
                  <li>4</li>
                  <li>5</li>
              </ul>
          <p>222</p>
              <ol>
                  <li>1</li>
                  <li>222</li>
                  <li>333</li>
                  <li>444</li>
              </ol>
              <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" alt="这是百度的图片">
      
          <h1>这是h1</h1>
          <h2>这是h2</h2>
          <h3>这是h3</h3>
          <h4>这是h4</h4>
          <h5>这是h5</h5>
          <table>
              <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
              </tr>
              <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
              </tr>
          </table>
          </body>
      </html>
      

      常用的全局属性介绍

      全局属性是所有HTML元素共有的属性; 它们可以用于所有元素,即使属性可能对某些元素不起作用。

      常见的有 class/id/title/style

      更多的全局属性参考 HTML 全局属性

      script标签的属性:

      script是属性有 asyncdefercharsetlangugesrctype 六个;

      一般常用的就是src,type;而且type是属于可忽略的属性,推荐不写;

      因为HTML不是这个笔记的总结重点,就先这样了

      一个网站的组成

      一个网站由HTML/CSS/JS三者来组成;

      • HTML可以看做人的骨架和肉体(HTML是标记使用)
      • CSS 可以看做人的衣服,美瞳、化妆品(使人看起来更加的漂亮,看起来更加赏心悦目)
      • JS 可以看做人的技能,比如会眨眼,会吃饭,会跑步,会化妆等等
        • 比如把一块手表戴在自己的手上,使自己看起来更有气质,这可以看做是通过JS来控制CSS
        • 比如感觉自己身体胖了,去减肥;这就相当于通过JS来控制HTML;
        • 这一切都是自己倒腾自己的,如果张三去操作李四,就牵扯到JS中"跨域",权限等问题了,现在仅作了解;只需要知道,在浏览器中,JS操作的是当前这张网页的;
      目录
      目录