1. 万维网起源

www=URL+HTTP+HTML

诞生：

1990年左右

Tim Berners Lee 李爵士

写了第一个浏览器
写了第一个服务器
用自己写的浏览器访问自己写的服务器

2. 互联网的本质：信息共享

3. 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">
    <!--禁用缩放，兼容手机-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--告诉IE使用最新内核-->
    <title>yiWeiShuaiGe</title>
    <!--标题-->
</head>
<body>
~~~~~~~~~~
</body>
</html>

标注：CRM学习法

Copy 抄代码
Run 机器上运行
Modify 加入自己想法再运行

学习网站

mdn
w3school

4. 重点！！章节标签!

=================================
  <!--标题-->
<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>
=================================

5. 同样是重点！！全局属性!

class

属性用来对网页元素进行分类。如果不同元素的class属性值相同，就表示它们是一类的。

<p class="para"></p>
<!-- 为p分类，若class相同，则为同一类-->

<p class="p1 p2 p3"></p>
<!--一个网页元素有多个分类-->

contenteditable

允许用户修改网页内容，该属性是枚举属性，不是布尔属性，规范的写法是最好带上属性值。

<p contenteditable="true">
鼠标点击，本句内容可修改。
</p>

id属性是元素在网页内的唯一标识符。比如，网页可能包含多个标签，id属性可以指定每个标签的唯一标识符。

id属性的值必须是全局唯一的，同一个页面不能有两个相同的id属性。另外，id属性的值不得包含空格。

<p id="p1">  </p>
<p id="p2">  </p>
<p id="p3">  </p>

style

style属性用来指定当前元素的 CSS 样式。具体的设置，请看 CSS 教程。

<p style="color: red;">hello</p>

tabindex

用于网页tab切换网页元素。

1. 当值为-1时代表不能切换。

2. 正数时按数的大小从小到大切换。

3. 值为0代表最后的切换位。

<p tabindex="0"> ~~~ </p>

title

title属性用来为元素添加附加说明。大多数浏览器中，鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。

<div title="版权说明">
  <p>本站内容使用创意共享许可证，可以自由使用。</p>
</div>

6. 常用内容标签！！！

1. 列表

ol+li

ordered list+list item

<ol>
  <li>列表项 A</li>
  <li>列表项 B</li>
  <li>列表项 C</li>
</ol>

上面代码会在列表项 A、B、C 前面，分别产生1、2、3的编号。

<ol>
  <li>列表项 A</li>
  <li>列表项 B
    <ol>
      <li>列表项 B1</li>
      <li>列表项 B2</li>
      <li>列表项 B3</li>
    </ol>
  </li>
  <li>列表项 C</li>
</ol>

多级嵌套，结果如下：

1. 列表项 A
2. 列表项 B
  1. 列表项 B1
  2. 列表项 B2
  3. 列表项 B3
3. 列表项 C

ul+li

unordered list+list item

用法同上，只是1.2.3变为· · ·

dl+dt+dd

description list(术语列表)+term（术语）+detail（解释）

<dl>
  <dt>CPU</dt>
  <dd>中央处理器</dd>

  <dt>Memory</dt>
  <dd>内存</dd>

  <dt>Hard Disk</dt>
  <dd>硬盘</dd>
</dl>

显示为：

CPU
  中央处理器

Memory
  内存

Hard Disk
  硬盘

2. 其他常用内容标签

pre

HTML不能多个连续的空格、tab、Enter并存，只会保留一个

<h2>
<pre>
1.2        这是标题
</pre>
</h2>

分割线

break的缩写，表示换行

十分重要！

链接通过a标签表示，用户点击后，浏览器会跳转到指定的网址。下面就是一个典型的链接。

<a href="https://wikipedia.org/">维基百科</a>

em 和 strong
emphasis的意思，用于语气强调，强调部分会以以斜体显示
strong也用于强调，强调部分会以粗体显示

code

用于代码，会以等宽字体显示,若有换行，则需要搭配pre

<pre>
<code>
  let a = 1;
  console.log(a);
</code>
</pre>

HTML 入门 笔记——简介、起手式、基本标签