《HTML入门笔记1》HTML入门笔记1：HTML是谁发明的；HTML 起手应该写什么；常用的表章节的标签有哪些，分别是

HTML是谁发明的？

Tim Berners Lee 李爵士

李爵士做了什么？

发明了第一个浏览器和第一个服务器
用自己写的浏览器访问了自己写的服务器
发明了WWW，同时发明了HTML、HTTP和URL

HTML 起手应该写什么

开局先打个英文感叹号 ! ，然后按Tab键自动生成代码微信图片_20211120231449.png

常用的表章节的标签有哪些，分别是什么意思？

标题 h1~h6
章节 section
文章 acticle
段落 p
头部 header
脚部 footer
主要内容 main
旁支内容 aside
划分 div &copy； 版权符号

全局属性有哪些?

class 给标签分类，做标记
contenteditable 可以使任何一个元素被编辑；style 也可以被编辑
hidden 可以被用来隐藏元素
id 全局唯一的标签，但全局唯一性没有保障，也不会报错。不到万不得已千万不用
style style 属性可用于任何的 HTML 元素 (它会验证任何HTML元素。但不一定是有用)
tabindex 属性规定当使用 "tab" 键进行导航时元素的顺序。可以是正数，不必是连续的；可以是 0，表示最后才被 tab 访问；可以是 -1，表示不可被 tab 访问。
title 鼠标放在有超出隐藏的元素上，会显示全部内容

<!DOCTYPE html>
<html>

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

<body>

  <header id="xxx" style="border: 10px solid red;"
          tabindex=1 title="完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容完整的内容">顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告</header>
  <div tabindex=2 class="middle bordered" contenteditable>
    <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>
    <asdie>
      参考资料 1 2 3
    </asdie>
  </div>
  <footer tabindex=3>&copy; 饥人谷版权所有</footer>
</body>

</html>

默认样式

为什么有默认样式因为HTML被发明时，CSS还没出生
查看默认样式打开浏览器Elements-> Styles -> user agent stylesheet
清除默认样式 CSS reset默认样式太丑了

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

常见的内容标签

ol+li 有顺序的列表
ul+li 无顺序的列表
dl+dt+dd 描述列表，dt为表述对象，dd为描述内容
pre 标签用来保留空格，一般放其它标签里面
code 会将英文代码等宽
hr 分割线
br 换行
a 超链接
em 表示强调语气很重要
strong 表示强调内容本身很重要
quote 行内引用
blockquote 块内引用

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    pre {
      font: inherit;
    }
  </style>
</head>

<body>

  <div>
    <main>
      <h1>我每天的介绍</h1>
      <hr>

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

        <ul>
          <li>聊天</li>
          <li>摸鱼</li>
          <li>吃饭</li>
          <li>睡觉</li>
        </ol>
                
        <ol>
          <li>聊天</li>
          <li>摸鱼</li>
          <li>吃饭</li>
          <li>睡觉</li>
        </ol>
        
        我的女朋友是
        <dl>
          <dt>婷婷</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>
        
          欧阳修说过<quote>三上：马上、枕上、厕上</quote>
          <br>
          欧阳修说过<blockquote>三上：马上、枕上、厕上</blockquote>
        
        <section>
          <h3>1.1节</h3>
          <p>一段话</p>
        </section>

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

</html>