HTML入门笔记1

HTML 是谁发明的

HTML 是李爵士发明的

HTML 起手应该写什么

VSCode内新建 HTML 文件，输入英文!号，等出现提示后按 Tab 键

章节标签

<!DOCTYPE html>
<!-- DOCTYPE 是文档类型的意思 -->
<html lang="en">
  <!-- en 可以改为 zh-CN -->
  <head>
    <meta charset="UTF-8" />
    <!-- UTF-8 文件的字符编码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 禁止缩放兼容手机 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- 如果使用 IE 浏览器，使用最新内核 -->
    <title>Document</title>
    <!-- 浏览器打开标签的标题 -->
  </head>
  <body>
    <header>顶部广告</header>
    <div>
      <main>
        <h1>文章标题</h1>

        <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; xxx版权所有</footer>
  </body>
</html>

表示文章/书的层级

标题 h1 ~ h6
章节 section
文章 article
段落 p
头部 header
脚部 footer
主要内容 main
旁支内容 aside
划分 div

全局属性

所有标签都有的属性

class

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

上面的选择器没有选中，正确写法如下：

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

因为如果以 [] 的方法做选择器， "middle bordered" 是一个整体属性，所有这种写法非常不方便

新的写法如下：

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

这种写法，写一部分就匹配到对应的标签

contenteditable

<div class="middle bordered" contenteditable></div>

div 嵌套的文字内容在网页显示时候，是可以编辑

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

将 style 标签放到 body 标签内，加上 contenteditable 和
style { display: block; border: 1px solid red; }
这部分代码，可以让 sytle 标签显示出来，
实时修改 CSS 看到效果，一个简单的编辑器

hidden

让标签隐藏

<header hidden>顶部广告</header>

但可以通过 CSS 重新显示出来

id

<header id="xxx">顶部广告</header>

如果是全页面唯一的，可以用 id, 不是就用 class
其实不到万不得已，不要用 id,因为可能会不报错

<head>
  <style>
    #xxx {
      border: 10px solid yellow;
    }
  </style>
</head>

<body>
  <header id="xxx">顶部广告</header>
  <div></div>
  <footer id="xxx">&copy; xxx版权所有</footer>
</body>

上面的 header 和 footer 都是相同的 CSS 效果。所以不到万不得已，不要用 id

<header id="xxx">顶部广告</header>

xxx.style.border = "1px solid green";

如果是唯一的 id，可以直接像上面一样修改 CSS
等价于：

<header id="xxx" style="border: 1px solid green">顶部广告</header>

但不到万不得已，不要这样写
因为如果 id 用 JavaScript 的保留字段，这个方法不生效，如下：

<header id="self">顶部广告</header>

self.style.border = "1px solid green";

上面这样写就不生效了

<header id="top">顶部广告</header>

document.getElementById("top");

xxx.style 直接获取对应属性，只有老司机敢用，一般上面方法稳点

style

<head>
  <style>
    #xxx {
      border: 10px solid yellow;
    }
  </style>
</head>

<header id="xxx" style="border: 1px solid green">顶部广告</header>

xxx.style.border = "10px solid black";

样式优先级，javascript > 内联样式 > head 的 style 标签样式

tabindex

<header id="xxx" tabindex="1">顶部广告</header>
<div class="middle bordered" tabindex="2"></div>
<footer tabindex="3">&copy; xxx版权所有</footer>

按 Tab 键按顺序切换到对应位置
但 0 是最后，-1 表示永远不要到这个位置

title

<head>
  <style>
    #xxx {
      border: 10px solid yellow;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>

<header
  id="xxx"
  title="完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容"
>
  顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告
</header>

CSS 省略号的写法如上
title 的作用是鼠标浮到对应位置可以显示完整的内容

默认样式

为什么有默认样式

因为 HTML 被发明的时候，CSS 还没有出生

怎么看默认样式

Chrome 开发者工具
Elements -> Styles -> user agent stylesheet

User Agent

就是浏览器

CSS reset

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

常见 CSS reset

个人常用的代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6{
    font-weight: normal;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

可以抄大厂的代码

进入大厂首页
Chrome 开发者工具，找到类似代码
复制到自己的项目
命名为 reset.css

内容标签

ol + li
有序列表
ul + li
无序列表
dl + dt + dd
描述列表
pre
保留空格、回车、Tab 就用 pre
code
用来放代码，字体等宽的
hr
分割线
br
换行
a
链接, targer="_blank" 新标签打开
em
强调，语气方面,字体是斜体
strong
重要，本身，字体加粗
quote
引用，行内的
blockquote
引用，换行的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <div>
    <main>
      这是分割线
      <hr>
      <h1>前端是什么</h1>

      <section>
        <h2>
          第一章:<br>
          工作内容
        </h2>
        <p>前端每天要做的事情有</p>

        <ul>
          <li>发邮件</li>
          <li>跟产品经理撕逼</li>
          <li>写页面</li>
          <li>吃饭</li>
          <li>休息</li>
          <li>学习</li>
        </ul>

        我的同事有
        <dl>
          <dt>Ben</dt>
          <dd>技术爱好者</dd>
        </dl>

        我会写 JavaScript,下面演示：
        <pre>
            <code>
var a = 1
console.log(a)
            </code>
        </pre>
        <p>
          访问网站 <a href="http://qq.com" target="_blank">QQ</a>
        </p>

        <p>
          我们 <em>期末考试</em> 重点是<strong>JavaScript</strong>
        </p>

        李白的诗：<quote>床前明月光</quote>
        <br>
        欧阳修说过<blockquote>马上 枕上 厕上</blockquote>

        <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; xxx版权所有</footer>
</body>

</html>

版权：归饥人谷所有