06·灵魂前端工程师养成-HTML标签

HTML 前戏
HTML起手式
HTML标签

-曾老湿, 江湖人称曾老大。

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

HTML 前戏

HTML所需英文单词

英文	翻译
heading	标题
body	身体
paragraph	段落
section	章、节
article	文章
main	主要
aside	旁边的
anchor	锚，定点
strong	强壮、重要
emphasis	强调、重读
order	顺序、秩序
ordered	有顺序的
unordered	无顺序的
description	描述
term	术语
data	数据
quote	引用
block	块
inline	行内、[计]内联
break	打断

HTML电子书籍

网道HTML教程

VScode插件

给VScode安装一个自动格式化的插件:prettier

代码练习工具

1.JSBIN

2.饥人谷

3.代码沙盒

HTML起手式

创建一个新的项目，并创建一个index.html

感叹号

输入一个感叹号，可以看到emmet的提示，此时按Tab键即可，代码如下：

代码语言：javascript复制

<!--文档类型，类似于shell中 #!/bin/bash-->
<!DOCTYPE html>

<!--声明语言，一般改为 zh-cn -->
<html lang="zh-cn">

<!-- 一般来说，head和body不缩进，里面写的是，页面上看不见的元素 -->
  <head>

<!-- 字符编码 -->
    <meta charset="UTF-8" />

<!-- 字符集 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- 防止页面缩放，ie=edge 表示如果是ie浏览器，请升级成最新版本 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

<!-- 网页的标题 -->
    <title>Document</title>
  </head>
  <body></body>
</html>

HTML标签

章节标签

表示文章/书的层级

代码语言：javascript复制

1.标题:       h1~h6
2.章节:       section       
3.文章:       article
4.段落:       p
5.头部:       header
6.脚部:       footer
7.主要内容:    main
8.旁支内容:    aside
9.划分:       div

代码语言：javascript复制

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <header>顶部广告</header>
  <div>
    <main>
      <h1>文章标题</h1>
      <h2>副标题</h2>

      <section>
        <h2>第一章</h2>
        <p>这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p>

        <section>
          <h3>1.1节</h3>
          <p>一段话</p>
        </section>

        <section>
          <h3>1.2节</h3>
          <p>一段话</p>
        </section>
      </section>
    </main>
    <aside>
      参考资料 1 2 3
    </aside>
  </div>
  <footer>&copy;DriverZeng版权所有</footer>
</body>

</html>

全局属性

什么叫做全局属性？

就是所有标签，都可以有这些属性。

代码语言：javascript复制

1.class
2.contenteditable
3.hidden
4.id
5.style
6.tabindex
7.title

class 结合 style使用

在div中设置一个 class="middle"

然后将header中添加style,代码如下，可以看到上图只要是middle的，背景都变成黑色，字体都是黄色了。

代码语言：javascript复制

<style>
    [class=middle]{
        background: black;
        color: yellow;
    }
</style>
  
  
<div class="middle">

但是，我们可以给class设置多个名称，如果还用上面的方式，则无法调用，所以我们可以写成 .middle

错误写法：

代码语言：javascript复制

<style>
    [class=middle]{
        background: black;
        color: yellow;
    }
    
    [class=bordered]{
        border: 3px solid red;
    }
</style>
  
  
<div class="middle bordered">

正确写法：

代码语言：javascript复制

<style>
    .middle{
        background: black;
        color: yellow;
    }
    
    .bordered{
        border: 3px solid red;
    }
</style>
  
  
<div class="middle bordered">

所有内容：

代码语言：javascript复制

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .middle{
      background: black;
      color: yellow;
    }
    
    .bordered{
      border: 3px solid red;
    }
  </style>
</head>

<body>
  <header>顶部广告</header>
  <div class="middle bordered">
    <main>
      <h1>文章标题</h1>
      <h2>副标题</h2>

      <section>
        <h2>第一章</h2>
        <p>这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p>

        <section>
          <h3>1.1节</h3>
          <p>一段话</p>
        </section>

        <section>
          <h3>1.2节</h3>
          <p>一段话</p>
        </section>
      </section>
    </main>
    <aside>
      参考资料 1 2 3
    </aside>
  </div>
  <footer>&copy;DriverZeng版权所有</footer>
</body>

</html>

contenteditable用法

可以将代码框中的内容，进行编辑

代码语言：javascript复制

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .middle{
      background: black;
      color: yellow;
    }
    
    .bordered{
      border: 3px solid red;
    }
  </style>
</head>

<body>
  <header>顶部广告</header>
  <div class="middle bordered" contenteditable>
    <main>
      <h1>文章标题</h1>
      <h2>副标题</h2>

      <section>
        <h2>第一章</h2>
        <p>这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p>

        <section>
          <h3>1.1节</h3>
          <p>一段话</p>
        </section>

        <section>
          <h3>1.2节</h3>
          <p>一段话</p>
        </section>
      </section>
    </main>
    <aside>
      参考资料 1 2 3
    </aside>
  </div>
  <footer>&copy;DriverZeng版权所有</footer>
</body>

</html>

我们将style写在head中，之前说过，在head中，会写一些看不见的元素，那如何让style显示出来呢?

代码如下，我们将style写在body中

代码语言：javascript复制

<body>
  <style>
    .middle{
      background: black;
      color: yellow;
    }
    
    .bordered{
      border: 3px solid red;
    }
  </style>
</body>

但是，如下图所示，在右边展示中，我们还是看不见style。

解决代码如下：添加一个 style{display: block;}

代码语言：javascript复制

<body>
  <style>
    style{display: block;}
    .middle{
      background: black;
      color: yellow;
    }
    
    .bordered{
      border: 3px solid red;
    }
  </style>

这样的作用是什么？

我们可以加上contenteditable，让他可以编辑，如此一来，用户就可以一边调试一边看效果

代码语言：javascript复制

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>

</head>

<body>
  <style contenteditable>
    style{display: block; border: 1px solid black;}
    .middle{
      background: black;
      color: yellow;
    }
    
    .bordered{
      border: 3px solid red;
    }
  </style>

  <header>顶部广告</header>
  <div class="middle bordered" contenteditable>
    <main>
      <h1>文章标题</h1>
      <h2>副标题</h2>

      <section>
        <h2>第一章</h2>
        <p>这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p>

        <section>
          <h3>1.1节</h3>
          <p>一段话</p>
        </section>

        <section>
          <h3>1.2节</h3>
          <p>一段话</p>
        </section>
      </section>
    </main>
    <aside>
      参考资料 1 2 3
    </aside>
  </div>
  <footer>&copy;DriverZeng版权所有</footer>
</body>

</html>

hidden的用法

hidden可以让代码，快速看不见

id的用法

id 和 class 差不多，一般来说，id全局只会有一个，class可以有多个，但是要注意，不到万不得已的时候，千万不要用id，因为id不会报错。所以，用class就足够了

id第一个用法，和class差不多，与CSS相关

example：

代码语言：javascript复制

<!-- 写法一 -->

<style>
    [id=xxx]{
        background: black;
        color: yellow;
    }
</style>
  
  
<div id="xxx"> 
  
  
  
<!-- 写法二 -->

<style>
    #xxx{
        background: black;
        color: yellow;
    }
</style>
  
  
<div id="xxx">

id第二个用法，与JS相关

代码语言：javascript复制

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .middle{
      background: black;
      color: yellow;
    }
    
    .bordered{
      border: 3px solid red;
    }
  </style>
</head>

<body>

  <header id='xxx'>顶部广告</header>
  <div class="middle bordered" contenteditable>
    <main>
      <h1>文章标题</h1>
      <h2>副标题</h2>

      <section>
        <h2>第一章</h2>
        <p>这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p>

        <section>
          <h3>1.1节</h3>
          <p>一段话</p>
        </section>

        <section>
          <h3>1.2节</h3>
          <p>一段话</p>
        </section>
      </section>
    </main>
    <aside>
      参考资料 1 2 3
    </aside>
  </div>
  <footer>&copy;DriverZeng版权所有</footer>
</body>

</html>

注意：id 不到万不得已，千万不要使用，

就好比在python中，不要以方法命名，

shell中尽量不要用命令或者函数命名变量，一个道理

在id中也有很多忌讳：

比如：

代码语言：javascript复制

id='parent'
id='top'
id='self'
...

只要在console中，输入window.后面框中，显示的单词，都不能用做于id元素。

style用法

在head中定义CSS样式

代码语言：javascript复制

    #xxx{
      border: 10px solid yellow;
    }

在header标签中，定义style样式

代码语言：javascript复制

  <header id='xxx' style="border: 10px solid red">顶部广告</header>

在JS中定义style样式

代码语言：javascript复制

xxx.style.border = '10px solid pink';

最终结果如下：

不难看出，这三个地方style的定义，优先级： 1.JS中的style样式 2.标签中的style样式 3.CSS中的style样式

tabindex的用法

在一个页面中，所有的元素，都可以被tab选中，当你没有鼠标的时候，我们只有键盘的情况下，我们只能使用tab来切换页面中的元素，然后回车点击。

代码语言：javascript复制

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .middle{
      background: black;
      color: yellow;
    }
    
    .bordered{
      border: 3px solid red;
    }
    
    #xxx{
      border: 10px solid yellow;
    }
  </style>
</head>

<body>

  <header tabindex=1 id='xxx' style="border: 10px solid red">顶部广告</header>
  <div tabindex=2 class="middle bordered" contenteditable>
    <main>
      <h1>文章标题</h1>
      <h2>副标题</h2>

      <section>
        <h2>第一章</h2>
        <p>这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p>

        <section>
          <h3>1.1节</h3>
          <p>一段话</p>
        </section>

        <section>
          <h3>1.2节</h3>
          <p>一段话</p>
        </section>
      </section>
    </main>
    <aside>
      参考资料 1 2 3
    </aside>
  </div>
  <footer tabindex=3>&copy;DriverZeng版权所有</footer>
</body>

</html>

注意：tabindex有几个特殊的值

0：最后一个访问 -1：永远不访问

title的用法

如下图所示，当我们的广告内容很长的情况下。

我们首先，不想让他换行。

代码语言：javascript复制

    #xxx{
      border: 10px solid yellow;
      white-space: nowrap;
    }

如下图所示，但是放在一行又很丑，我们需要用省略号来省略后面的内容。

代码语言：javascript复制

    #xxx{
      border: 10px solid yellow;
      white-space: nowrap;          //不换行，把所有内容放到一行
      overflow: hidden;             //溢出的内容，省略
      text-overflow: ellipsis;      //省略的部分用省略号表示
    }

效果如下：

但是我们看不到完整的内容了，怎么办？这个时候我们就可以用title了

代码语言：javascript复制

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .middle{
      background: black;
      color: yellow;
    }
    
    .bordered{
      border: 3px solid red;
    }
    
    #xxx{
      border: 10px solid yellow;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;       
    }
  </style>
</head>

<body>

  <header tabindex=1 id='xxx' title="顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告 到这之前都是完整内容" style="border: 10px solid red">顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告</header>
  <div tabindex=2 class="middle bordered" contenteditable>
    <main>
      <h1>文章标题</h1>
      <h2>副标题</h2>

      <section>
        <h2>第一章</h2>
        <p>这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p>

        <section>
          <h3>1.1节</h3>
          <p>一段话</p>
        </section>

        <section>
          <h3>1.2节</h3>
          <p>一段话</p>
        </section>
      </section>
    </main>
    <aside>
      参考资料 1 2 3
    </aside>
  </div>
  <footer tabindex=3>&copy;DriverZeng版权所有</footer>
</body>

</html>

将鼠标放上去，就能看到完整内容了。

默认样式

为什么会有默认样式？ 因为HTML被发明的时候CSS还没有出生

怎么看默认样式？ Chrome开发者工具 Elements -> Styles -> user agent stylesheet

User Agent 就是浏览器

CSS reset 默认样式已经不符合我们的需求

手动添加CSS，就会把原有的样式覆盖

很多时候，我们都不想要默认样式，所以我们要把默认样式干掉。

编辑一个resetcss.css文件，里面写出取消默认样式的代码。

代码语言：javascript复制

#所有元素不要外边距和内边距
* {
  margin: 0;
  padding: 0;

#所有的元素变成盒模型
  box-sizing: border-box;
}

#伪元素
*::before,
*::after {
  box-sizing: border-box;
}

#标题不需要放大
h1,h2,h3,h4,h5,h6{font-weight: normal;}

#取消a标签的链接样式，默认是蓝色，点击后变成紫色，丑爆了
a {
#当前文章什么色，a标签就什么 颜色
  color: inherit;
#去掉下划线
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}

#取消ol和ul的默认样式
ol,
ul {
  list-style: none;
}

#取消表格的样式，默认是分开的
table {
  border-collapse: collapse;
  border-spacing: 0;
}

还可以抄，大厂代码，比如淘宝，京东...

内容标签

代码语言：javascript复制

ol li
ul li
dl dt dd
pre
hr
br
a
em
strong
code
quote
blockquote

ol li 和 ul li

ol代表有序列表，li代表这个列表中的内容。

ul代表无序列表，li代表这个列表中的内容。

注意：在ol和ul中，内容只能写在li中，不能写在其他地方

代码语言：javascript复制

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div>
    <main>
      <h1>前端是什么</h1>
      <h2>第一章：工作内容</h2>
      <p>前端每天要做的事情有</p>
      
      <ol>
        <li>发邮件</li>
        <li>跟产品撕逼</li>
        <li>写页面</li>
        <li>吃饭</li>
        <li>打LOL</li>
      </ol>
    </main>
  </div>
  <footer>&copy;DriverZeng版权所有</footer>
</body>

</html>

代码语言：javascript复制

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div>
    <main>
      <h1>前端是什么</h1>
      <h2>第一章：工作内容</h2>
      <p>前端每天要做的事情有</p>
      
      <ul>
        <li>发邮件</li>
        <li>跟产品撕逼</li>
        <li>写页面</li>
        <li>吃饭</li>
        <li>打LOL</li>
      </ul>
    </main>
  </div>
  <footer>&copy;DriverZeng版权所有</footer>
</body>

</html>

dl dt dd

dl：全称description list描述列表 dt：全称description term描述术语 dd：全称description data描述数据

代码语言：javascript复制

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div>
    <main>
      <h1>前端是什么</h1>
      <h2>第一章：工作内容</h2>
      <p>前端每天要做的事情有</p>

      <ul>
        <li>发邮件</li>
        <li>跟产品撕逼</li>
        <li>写页面</li>
        <li>吃饭</li>
        <li>打LOL</li>
      </ul>

      我的同事们有

      <dl>
        <dt>邱老师</dt>
        <dd>大帅比</dd>
      </dl>
    </main>
  </div>
  <footer>&copy;DriverZeng版权所有</footer>
</body>

</html>

pre

HTML的特点，如果有连续的空格，默认会为一个，连续的回车，默认也是一个回车

代码语言：javascript复制

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div>
    <main>
      <h1>前端是什么</h1>
      <h2> 
        <pre>
        第一章：                                         工作内容
        </pre>
      </h2>
      <p>前端每天要做的事情有</p>

      <ul>
        <li>发邮件</li>
        <li>跟产品撕逼</li>
        <li>写页面</li>
        <li>吃饭</li>
        <li>打LOL</li>
      </ul>

      我的同事们有

      <dl>
        <dt>邱老师</dt>
        <dd>大帅比</dd>
      </dl>
    </main>
  </div>
  <footer>&copy;DriverZeng版权所有</footer>
</body>

</html>

但是字体会变得怪怪的，所以我们需要取消默认样式。

代码语言：javascript复制

pre{
    font: inherit;
}

和code结合使用

代码语言：javascript复制

      <pre>
      <code>
echo "hello world"
      </code>
      </pre>

水平分割线

换行功能，在HTML中输入回车是没有用的。

超链接

加上target，可以让网站，从新标签打开

代码语言：javascript复制

      <p>
        
        访问网站：<a href="https://blog.driverzeng.com" target='_blank'>点击</a>
      </p>

emphasis 强调

strong

重点

quote

引用

blockquote

css 运维自动化 html

0 人点赞