阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      HTML标签的书写规范和全局属性

      常用的全局属性(所有标签都有的属性)

      • class
      • id
      • title

      class:一个名字可以多个class公用;

      id:一个ID名在一个页面里,只能被一个标签使用、ID名具有唯一性;

      title:title里是自定义的内容,表现是鼠标放上去时候的,文字提示;

      更多 HTML 全局属性

      a标签中的 href

      href是Hypertext Reference的缩写。意思是指定超链接目标的URL。

      href已经是缩写了,很多不知道其中原理的人会念成"赫尔夫",其实这是不正确的;href并不是一个单词,而是一个缩写;

      HTML书写规范规则

      其实个人觉得为了总结而总结是一件很痛苦的事情,记得用zencoding生成的就是标准的书写规范,然后注意下面这句话就可以了;

      • 标签要闭合
      • 层级要明确
      • 单引号和双引号不要混用;

      全局属性的使用

      <!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>Document</title>
          <style>
              .div-class{
                  color: red;
              }
              #div2{
                  background-color: red;
              }
              #div2{
                  background-color: orange;
              }
          </style>
      </head>
      <body>
      <div class="div-class">1</div>
      <div class="div-class">3</div>
      <div class="div-class">4</div>
      <div class="div-class">5</div>
      <div class="div-class">5</div>
      
      <p>22222</p>
      <p>22222</p>
      <div id='div1' title="这是title by div">这是DIV1的内容</div>
      <div id="div2">222</div>
      <span title="这是span的说明信息">这是span</span>
      
      <a href="#" title="这是title里面的文字">百度一下</a>
      
      <p>dads</p>
      <ul>
          <li>
              ddd
          </li>
      </ul>
      <script>
          var oDiv1=document.getElementById("div1");
          var oDiv2=document.getElementById("div2");
          oDiv1.innerText="我已经被JS改变了";//通过JS来改变html
          oDiv2.style.color="red";//通过JS来改变CSS;
          console.log("ID",oDiv1);
      
          var oDivClass=document.getElementsByClassName("div-class");//这是一对标签的集合
          console.log(oDivClass);
          console.log(oDivClass[0]);
      </script>
      </body>
      </html>
      
      目录
      目录