HTML入门笔记1HTML是谁发明的？ Tim Berners-Lee 李爵士李爵士还做了啥？自己写了第一个浏览器

HTML是谁发明的？

Tim Berners-Lee 李爵士

李爵士还做了啥？

自己写了第一个浏览器
自己写了第一个服务器

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

获得了图灵奖

HTML 起手应该写什么？

开局先打个英文感叹号 ! ，然后按Tab键自动生成代码

lang ="en" 可以改成 zh-CN 其他不用改

章节标签

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

版权符号 ©

<footer>&copy; wsmnnmm</footer>
<!--© wsmnnmm -->

全局属性

class

分个类，做个标记

contenteditable

设置成可编辑的元素可以让style能编辑

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>编辑style</title>
</head>

<body>
  <style contenteditable>
    style{display: block;}
    .a{
      border: 1px solid pink;
      background: black;
      color:white;
    }
  </style>
  <div class="a">
    <p>段落吧啦吧啦巴拉巴哔哩哔哩</p>
  </div>
  <footer>&copy; wsmnnmm</footer>
</body>

</html>

style

行内样式属性

hidden

将元素隐藏

唯一标记，但有两个相同的id也不会报错
所以尽量不用id

tabindex

设置Tab键跳转序号
tabindex=0，表示最后才被 tab 访问
tabindex=-1，表示不可被 tab 访问

title

鼠标放在有超出隐藏的元素上，会显示全部内容

默认样式

为什么有默认样式

因为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 描述内容

HTML会显示多个连续的空格和换行
pre标签用来保留空格
一般放其它标签里面

分割线

换行

超链接

表示强调语气很重要

strong

表示强调内容本身重要

code

使英文代码等宽

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>
      <sesction>
        <h2>
          <pre>第一章：    工作内容</h2>
        </pre>
        <p>前端每天要做的事</p>
        <ol>
          <li>发邮件</li>
          <li>跟老板吵架</li>
          <li>写页面</li>
          <li>吃饭</li>
          <li>打游戏</li>
        </ol>
        <ul>
          <li>发邮件</li>
          <li>跟老板吵架</li>
          <li>写页面</li>
          <li>吃饭</li>
          <li>打游戏</li>
        </ul>
        <dl>
          <dt>老板</dt>
          <dd>真好吖</dd>
        </dl>
        访问网站<a href="http://qq.com">QQ</a>
        <code>
          iiii<br>
          wwww
        </code>
        <br/> 
        欧阳修说<quote>三上：马上、枕上、厕上</quote>
        欧阳修说<blockquote>三上：马上、枕上、厕上</blockquote>
      </sesction>
    </main>
  </div>
  <footer>&copy; wsmnnmm</footer>
</body>

</html>