HTML | 白桦树皮纸

version control system

track our project history work collaboratively with others

how the web work

URL uniform resource location

resources

web pages (html documents)
images
video files
fonts (字体)

result

browser/ client server

<html lang="en"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

The basic knowledge

The Head Section

头部元素元素是用来给浏览器和搜索引擎提供页面下信息的技巧：在 VSCode 中输入 ! 然后按下 Tab 就可以快速创建 HTML Boilerplate （HTML 基本模板），如下所示。

<!DOCTYPE html>
<html lang="en"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
</html>

lang 页面语言

lang用来描述页面语言，中文规范是zh-cmn-Hans，但也常见zh-CN 。 <html lang="en">

meta元素

必要元数据

charset，字符编码集是各种文字和符号的总称，包括各国家文字、标点符号、图形符号、数字等。通常使用 UTF-8，这是最全面的字符集。除此之外还有很多，例如ASCII等。
viewport，可视窗口大小，用来显示网页的那部分区域。
viewport 后面的content内容是为了确保获得最佳显示而设定的（目前不做深究）。以上两点是 HTML 基本框架必须包括的两个元数据。

可选元数据

<meta name="keywords" content="HTML, CSS">
<meta name="desription" content="...">```

keywords，过去常用来给搜索引擎提供关键词索引，但现如今好像过时了，不过仍然可用。
description，用来描述网页内容，搜索引擎会根据提供的内容展示在其页面中。例如百度搜索结果页面中，某一个标题下的描述内容

VSCode 小技巧：输入 meta:desc 即可快速补全标签

title

<title>Document</title>

title 用来描述页面标题

TEXT文本

<p>I love to teach you HTML!</p>
<p>I love to teach you <em>HTML</em>!</p>
<p>I love to teach you <i>HTML</i>!</p>
<p>I love to teach you <strong>HTML</strong>!</p>
<p>I love to teach you <b>HTML</b>!</p>

p，常规文本标签。
bem，强调标签，通常用来强调HTML文档中重要的内容，但是不意味着需要强调就使用该标签。因为这个标签主要是用来给搜索引擎快速索引用的。任何样式都得使用 CSS 完成，这样才是规范的作法！
i，意大利斜体标签，改变字体为意大利斜体。
strong，粗壮标签，通常用来强调非常重要或非常紧急的内容，同理是给搜索引擎使用的。
b，粗体标签，加粗字体。以上除了 p 都不建议使用。

VSCode 小技巧：选中要包裹住的文本，按下 ctrl + p，输入>warp，然后输入要用来包裹住文本的标签，最后回车即可。

Heading 标签

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

从 h1 到 h6 相当于是一级标签到六级标签的意思。不同级别的字体样式不一样，但是！不可以为了改变样式来用这些标签，所有样式必须在 CSS 中实现。
为了规范，一个页面只允许有一个 h1 标签。
为了规范，这些标签不允许跳级。
总得来说，像写毕业论文一样使用这些文本标签即可，那绝对不会错。

Entities 转义符号

<p>I love to teach you &lt;HTML&gt;!</p>

为了让 HTML 大于号正常显示，就要用到实体编码，十分类似于转义字符的感觉。
实体编码通常以 & 开头，以 ; 结尾。
代码框中的 lt 本意是 less than 的缩写， gt 是 greater than 的缩写（这样一来就非常好记忆了）。
还有更多实体编码，但不需要记忆，例如 © 是 copy，更多可以百度或谷歌 html entities 。

常用转义符号

&lt; &gt; &copy; &nbsp;

乱数假文

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate voluptatum vero sapiente, eveniet natus&nbsp;dolorum qui iure voluptatibus maiores at ad nemo odio sunt dolores laboriosam quod, iusto ullam aliquid! Excepturi, recusandae fugit? Est nam delectus unde, sapiente ex minima possimus alias sint architecto eveniet iste aliquid tenetur repellat consectetur.
</p>

Lorem ipsum，中文又称“乱数假文”，是指一篇常用于排版设计领域的拉丁文文章，主要的目的为测试文章或文字在不同字型、版型下看起来的效果，通常网站还没建设好时会出现这段文字
输入 lorem + 数字（你要生成的词数）然后按下 enter 或 tab ，例如lorem50。
在生成的乱文中，若想要 natus dolorum 出现在同一行上而不是默认边缘换行的话，就使用 nbsp 实体编码。
nbsp ，None-breaking Space，不间断空格，nbsp 连接的两个单词将在同一行上显示，强制不在这俩词中间换行。

Hyperlinks 超文本

<a herf="http://fancyshawn.com/" target="_blank">希望的链接内容</a>
<a herf="http://fancyshawn.com/"download>希望的链接内容</a>
<a herf="#section-1"></a>
<h1 id="section-1">
    这是一句很长很长的标题
</h1>

a+tab，Anchor，标签可以是超链接或锚。
herf，Hypertext Reference，意思是指定超链接目标的URL。href 属性的值可以是任何有效文档的相对或绝对URL，包括片段标识符和JavaScript代码段。
相对路径，从当前文件位置出发去另一个位置 …/coffee
绝对路径，fancyshawn.com/coffee
回到上一级目录： ../ 在非常深的层次：../../../ 开始从/index
target，一般跟在跳转页面的标签中，内容输入blank 意思是打开新的标签页。
锚点，用于页面内定点定位（点击就自动滑倒对应位置），首先得创建锚点，选择一个要定位的标签，赋予 id=“section-name”，然后在 a 标签中输入 #section-name 即可。（若留空只有#，则跳回页面顶部）
下载：在名称之后download，只需要保存属性名称

images

<img src="../images/cat.jpg" alt="">
<style>
    img {
          width: 200px;
        height: 200px;
        object-fit: cover;
        }
       </style>
  <img src="../images/cat.jpg" alt=""  width=" " height=" ">

有用照片网页 unsplash
图片大小：手机端和电脑端应该考虑放不同的照片，后面讲
图片名称：更有描述性的话可以让搜索引擎更好理解图片内容
alt属性一般用来给图片增加附加的文字说明，它不是必须的，但是强烈建议使用
- 让页面对视力障碍认识更加友好，需要时描述性的
- 当搜索引擎读取这个属性，他就能明白这到底在讲什么
- 如果图片不能显示，替换信息就会显示
调整尺寸：width heighth,两种调整形状方式
图像拉伸问题
- CSS 有种属性叫做对象适应 object-fit， CSS属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
- cover可以让图片覆盖整个容器盒子

video and Audio(视频和音频)

  <body>

    <video controls src="../videos/还愿.mp4">

      your browser dosen't support videos

    </video>

    <audio src=""></audio>

  </body>

pexels.com

如果视频太大，用户联网速度很慢，那么体验就会很差
没有控制按钮的话就是只有图片的页面，需要显示控制按钮
控制按钮就是布尔值，只有是和否两个值，出现布尔属性就表示真，不出现就表示为假
自动播放 controls autoplay 自动播放循环controls autoplay loop
caniuse.com可以询问浏览器是否支持什么属性或者CCS特性
需要给不支持的网站一个替换属性

list (列表)

<body>
<dl>
<dt>内容</dt>
 <dd>内容</dd>
 </dl>
 <ul>
 <li></li>
 </ul>
 
 </body>

ul：unorder list 展示顺序不重要的列表
- 相关 CSS 样式 list-style-type: square; 列表前的小圆点就会变成方框，改成 none 就没有了。
ol：order list 有序列表有先后顺序的列表 1. 2. 3.
- 快捷创建ol>li * 3
dl: discreption list 描述列表
- dl discreption list
- dt discreption term
- dd discreption detail

Tables（表格）

<table>

      <thead>

        <tr>

         <th colspan="2">Expense</th>

        </tr>

        <tr>

          <th>category</th>

          <th>amount</th>

        </tr>

      </thead>

      <tbody>

        <tr>

          <td>marketing</td>

          <td>200</td>

        </tr>

        <tr>

          <td>accounting</td>

          <td>200</td>

        </tr>

        <tfoot>

          <tr>

            <th>total</th>

            <th>300</th>

          </tr>

        </tfoot>

      </tbody>

    </table>

<style>

      table,

      td,

      th {

        border: 1px solid grey;

        border-collapse: collapse;

        padding: 5px;

      }

      tfoot {

        text-align: left;

      }

    </style>

table，表格标签。
tr，Table Row，表行。
th，Table Heading，表格标题列。
td，Table Data Shell，表格数据列。
thead，Table Head，与上面 th 不一样，这个是表的名称（一般是为了方便搜索引擎，结构也更明了）。有了 thead 以后就需要把 tr>th 标签放在 thead 里面。
tbody，Table Body，同 thead 功能类似，规则同理。
tfoot，Table Footer，同 thead 功能类似，规则同理。
相关 CSS 样式：border、border-collapse、padding 分别是指表格外边框、表格空隙以及内间距（应用在文字上，是文字与边框的距离）。其中 th 有个 colspan 是指占列宽，默认是1。tfoot 的 text-align 是指文字对齐方向。

semantic(语义) html——让引擎和读屏器优化汇总行中居中，单元数据格左对齐，让300左对齐

DON’t copy yourself 不要复制自己的代码

containers（容器

<div class="product">
    <p>这里是容器装的内容</p>
</div>

<style>
    .product {
        background-color: gold;
    }
</style>

hero unit主要单元，一个背景，标题，文字，和一些链接容器在网页中很常见 html中有很多常见的容器

div

分区元素 division element 没有任何视觉呈现，保存修改在浏览器里也看不见可以在CSS里面将样式应用的某一类的div上，div是块级元素（block-level element）永远要占一行，填充所有可用的宽度，新的div会占据新的一行。

span

<p><div class="heightlight">Lorem</div> ipsum dolor sit amet consectetur adipisicing elit.</p>
<p><span class="heightlight">Lorem</span> ipsum dolor sit amet consectetur adipisicing elit.</p>

<style>
    .heightlight {
        background-color: gold;
    }
</style>

经常用来给文字增加样式 inline element 行内元素，不会自己占据一整行

快捷方式选择之后control+d，一次性修改两个地方，esc两次退出多重编辑模式

semantic Elements

  <body>

    <article class="article">

      <h1>heading</h1>

      <p>

        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero ipsa

        nobis quia explicabo repudiandae nisi ex ullam qui omnis nostrum, iste

        officiis in doloribus voluptate ducimus veritatis quo doloremque soluta.

      </p>

      <figure>

        <img src="../images/idle.gif" alt="idle" />

        <figcaption>idle</figcaption>

      </figure>

    </article>

  </body>

GENERIC

div
span

SEMANTIC

article
figure
mark
time 使用语义元素代替通用容器，能让搜索引擎更好理解页面包含什么内容，语义元素就能让结构更加具有描述性

article element

an independent, self-contained content(任何独立、自述的内容)

forum post
Commments
Reviews
Product cards

可以包括图片，表格，列表

figure element

只是外观的容器，没有任何可视化的外观，只是告诉页面这是插图，不是单独图片

figcaption 插图配文标签——插图文字说明

mark

<p>
   <span class="highlight">Lorem</span> ipsum dolor sit amet consectetur, 
</p>

 <p>
  <mark>Lorem</mark> ipsum dolor sit amet consectetur, adipisicing elit
 </p>

mark高亮标签，自带的高亮(黄色）效果，不用像上一章那样再添加 CSS 样式了。

time

      <p>
       publish <time datetime="2021-01-01 17:00">January 1 2021 05:00pm</time>
      
   </p>

显示效果与常规文字无区别，通常会加上 datetime 选项，其格式为“2021-01-01 17:00”，必须是两位的月份和日期。

struturing a web page

  <body>

   <header>

     <nav>

       <ul>

         <li></li>

         <li></li>

         <li></li>

       </ul>

     </nav>

   </header>

   <main>

     <section>

       <h2>testimanial</h2>

       <article></article>

     </section>

      </main>

   <aside></aside>

   <footer>

     <nav>

       <ul>

         <li></li>

       <li></li>

       <li></li>

      </ul>

     </nav>

   </footer>

  </body>

标签通常用来介绍网页的结构，一般还是装导航栏。

nav

标签通常用来装导航栏。

nav

标签通常用来装导航栏。

main

标签通常用来装网页主要内容，且一个页面只能有一个 main 标签，否则在规范验证的时候报错。

section

标签通常用来对相关的内容进行排序管理。使用 section 必须有 heading 标签，不然去规范验证的时候就会报错。

aside

标签通常用来区别与main 中内容无直接关系的内容。

version control system#

how the web work#

result#

The basic knowledge#

The Head Section#

lang 页面语言#

meta元素#

必要元数据#

可选元数据#

title#

TEXT文本#

Heading 标签#

Entities 转义符号#

常用转义符号#

乱数假文#

Hyperlinks 超文本#

images#

video and Audio(视频和音频)#

list (列表)#

Tables（表格）#

containers（容器#

div#

span#

semantic Elements#

GENERIC#

SEMANTIC#

article element#

figure element#

mark#

time#

struturing a web page#

header#

nav#