「HTML 」入门笔记（ html起手式、表章节标签、全局属性、内容标签）超文本标记语言（英语：HyperText Ma

HTML 是谁发明的

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

它最初于 1989 年由 CERN 的 Tim Berners-Lee 发明。

HTML 起手应该写什么

<!DOCTYPE html>
<!--文档类型-->
<html lang="zh-CN">
<!--html标签，lang最开始为en，改为中文-->
<head>
    <meta charset="UTF-8">
    <!--文件字符编码-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!--禁用缩放，兼容手机，宽度跟设备宽度一样，默认的缩放比例是1倍，最小缩放比例等于1，最大缩放比例等于1，用户不准缩放-- >
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--告诉IE使用最新内核-->
    <title>yiWeiShuaiGe</title>
    <!--标题-->
</head>
<body>
~~~~~~~~~~
</body>
</html>

常用的表章节的标签

=================================
  <!--标题-->
<h1> 标题1 <\h1>
<h2> 标题2 <\h2>
<h3> 标题3 <\h3>
<h4> 标题4 <\h4>
<h5> 标题5 <\h5>
......
=================================
    <!--章节-->
<section> 章节 <\section>
=================================
    <!--文章-->
<article> 文章 <\article>
=================================
    <!--顶部内容，一般用于广告-->
<header> 这是广告位 <\header>
=================================
    <!--主要内容标签-->
<main> 主要内容 <\main>
=================================
    <!--旁支内容-->
<aside> 旁支内容 <\aside>
=================================
    <!--区域划分-->
<div> 区域划分 <\div>
=================================

全局属性

class

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

contenteditable
让用户可以直接编辑内容
hidden
隐藏标签
id
加上 id 以后可以调 css
加上 id 以后可以用 js
divid.style.border = "1px solid red"
- 但不提倡用这种写法，因为这种写法对 id 的命名有要求，比如用 parent, top, self 等命名 id 就不行。因为 window 里有很多已经定义好的全局属性，不可以和这些属性同名。所以不到万不得已不要用 id，用 class
style
设置内联样式
对于 style 的优先级：
- JS > HTML 的 style 标签 > CSS
tabindex
正数，如 tabindex=1 / 2/ 3/，表示按顺序访问
0，表示最后访问
-1，表示不要用 tab 访问
title
用来显示完整内容
应用场景：文字超长变省略号
单行文字溢出：
调整 css
- white-space: nowrap; 不要换行
- text-overflow: ellipsis 溢出的部分用....
- overflow: hidden; 溢出的部分隐藏但我希望，当鼠标移动到省略的地方上时，可以浮动地显示完整内容，就可以在 title="完整内容"，即可

常用的内容标签

HTML 代码里的多处空格、回车、tab 等内容，默认会被转化为一个空格
如果想保留多处空格、回车、tab 等，就要用 pre

< pre></ pre>
保留空格、回车键；其他标签会把多余的空格和回车键转换为一个空格
< code></ code>
等宽英文字体，如果需要写换行的代码，嵌套一个 pre 标签即可
<pre><code>var aaa = 1; console.log(a)</code></pre>
< hr> 水平分隔线
< br> 换行
ol li 有序列表
ul li 无序列表
dl + dt 要描述的对象 + dd 要描述的内容
< em>和< strong> 表示强调
- em 表示语气上的强调
- strong 表示内容本身很重要
quote 行内引用
blockquote 换行的引用