HTML-构建web

一、HTML简介

1.HTML概述

HTML是一种超文本标记语言，由一个个元素组成，用于将页面结构化（也就是说，标记哪些内容是段落、哪些是表格、哪些是图片……）。

2.HTML入门

关键字：元素（element）、标签（tags）、属性（attribute）、HTML文档基本结构、注释符、实体引用。

（1）元素

元素的结构：通常一个元素由开始标签（opining tag）、内容（content）、结束标签（closing tag）组成。

  • 开始标签含有元素名称，有些还可以有属性和属性值，例如<a href="www.baidu.com" title="百度">；

    • 属性由属性名称、属性值（用引号）、空格组成，用于提供元素的额外信息；
    • 布尔属性。

  • 结束标签有一个正斜杠。

元素的嵌套：例如<p> My cat is <strong>very</strong> lazy.</p>

块级元素与内联元素：

  • 块级元素：以“块”的形式展示，其内容会出现在新的一行，可以嵌套块级元素，但是不可以被内联元素嵌套；
  • 内联元素：其内容不会换行，通常出现在一堆文字中间，例如超链接、斜体、粗体。

空元素（void element）：只含有开始标签的元素，用于在该位置插入一些东西，例如插图<img>。

（2）基本的HTML文档结构

一个HTML文档由<!DOCTYPE html>、<html></html>元素 、<head></head>元素、<body></body>元素组成。

  • <!DOCTYPE html>：声明文档类型；
  • <html></html>元素：根元素，包括了整个页面；
  • <head></head>元素：包括了对页面的描述，例如网页名称、图标、CSS样式等；
  • <body></body>元素：包括了用户看到的所有内容。
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>This is title</title>
    ……
  </head>
  <body>
    <p>This is the page.</p>
  ……
  </body>
</html>

（3）注释

HTML使用<!--注释内容-->进行注释

（4）实体引用

3.元数据（metadata）

关键字：

（1）head元素与元数据

head元素内存储的是元数据，用于描述页面。HTML主要使用<meta>元素来引入元数据，此外还有<title>、<link>等。

（2）常用的元数据

  • <title>元素：用于描述整个网页的标题，不同于h1（添加书签、搜索结果等也是默认用title元素的内容）；
  • <meta charset="utf-8">：指定文档的字符编码；
  • <meta name="" content="">：
    • name指定meta元素的类型，content指定具体的元数据内容；
    • name：author、description等。
  • 网页图标（favicon）：<link rel="icon" href="" type="image/x-icon">。
  • 引入CSS：使用<link rel="" href="">元素，rel表明CSS类型，href给定路径；
  • 引入JavaScript：使用<script src="" defer></script>元素，defer告诉浏览器在解析完HTML文件后再加载javascript。
    • script不是空元素，因此也可以直接在内容之中写入脚本。

（3）网页主语言

直接添加在html开始标签内，<html lang="zh-CN">。

4.HTML文本处理

（1）语义

使用正确的元素来表示给定的内容。例如，<h1>表明包裹的内容是主标题（你也可以使用CSS来使得一段文本看起来和主标题一模一样，但是这样做就会缺失语义：程序并不知道这是一个主标题）。

（2）标题和段落

  • 标题标签：<h1></h1>

    • 每个页面最好只使用一次主标题；

    • 每个页面使用的标题级数最好不要超过3个；

  • 段落标签：<p></p>

（3）列表

  • 无序列表（unordered list）：无序列表用<ul>标签开始，包裹列表内的所有项目；然后用<li>元素把每个项目单独包裹起来；
  • 有序列表（ordered list）：有序列表用<ol>标签开始，包裹列表内的所有项目；然后用<li>元素把每个项目单独包裹起来；
  • 列表嵌套（nesting lists）。
  • 描述列表（description list）：用于标记一组术语及其定义，用<dl>标签开始，然后用<dt>（description term）元素把每个术语单独包裹起来，再用<dd>（description definition）元素把每个定义单独包裹起来。一个术语可以有多个定义。

（4）强调

  • 斜体：<em></em>，改变句子意思；

  • 粗体：<strong></strong>，强调；

  • 下划线：一般只用于超链接。

    <i>、 <b>、 <u>

（5）引用

  • 块引用：使用<blockquote>元素进行块引用，并在其cite属性中用URL指明被引用的资源的地址。浏览器渲染时会默认增加缩进；

    1
    2
    3
    <blockquote cite="url">
    	被引用的内容
    </blockquote>

  • 行内引用：与块引用类似，只是使用的是<q>元素。浏览器将被引用的内容自动放入引号内；

  • 显示引用来源的引用：使用<cite>元素，然后在外面附上链接。引文默认是斜体。

    1
    <a href="URL"><cite>blockquote usage</cite></a>

（6）缩略语

使用<abbr>元素标记一个缩略语，缩略语的解释在其title属性中（把鼠标移到上面就会显示）。例如：USTC

（7）上标和下标

  • 上标：<sup>，例如：x2；
  • 下标：<sub>例如：x2。

（8）代码块

标记代码需要用到多个元素。

  • <code>：标记代码；

  • <pre>：用于保留空白字符（普通的空格会被浏览器忽略，但是在<pre>标签内的空白字符会以文本编辑器内看到的相同方式渲染）；

  • <var>：标记具体变量名；

  • <kbd>：标记键盘（或其它类型）的输入；

  • <samp>：标记程序输出；

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <pre><code>def dayin():
    	a = 5
    	print("this is code")
    	
    dayin()
    </code></pre>
    <p>
        在这段代码中，<var>a</var>是一个变量。按住<kbd>shift</kbd>+<kbd>enter</kbd>运行程序。
    </p>
    <samp>this is code</samp>
def dayin():
    a = 5
    print("this is code")
dayin()

在这段代码中，a是一个变量。按住shift+enter运行程序。

this is code

（9）标记时间和日期

使用<time>元素，datetime属性用``YYYY-MM-dd`的形式表示需要的日期，内容是自定义的日期形式。例如：

1
2
3
4
5
<!-- 简单标准日期 -->
<time datetime="2023-01-26">2023年1月26日</time>
<!-- 时间 -->
<time datetime="19:30:05:255">19:30:05:255</time>
......

（10）标记HTML编写者联系方式

使用<address>元素，仅仅含有联系方式（包括但不限于电话、地址、邮箱、姓名等）。

1
2
3
<address>
    <p>Page written by <a href="URL">SDYZZY</a>.</p>
</address>

5.超链接

统一资源定位系统（Uniform Resource Locator，URL）定义了资源在网络上的位置，用于连接网络上的任何其他资源（html、文本、视频等），其实就是网址。

（1）创建超链接

使用<a>元素创建超链接：<a href="">link</a>

  • title属性：给予超链接补充信息（也就是当鼠标移到链接上的时候显示出的文本），一般用于告知页面内容或注意事项。例如：ustc。

（2）块级链接

不仅可以将文本转换为链接，还可以将块级元素，例如图片，转换为链接，只需要将对应的块级元素放入<a>标签内。

（3）链接文档片段

不仅可以链接网络上的资源，还可以链接文档内的内容。

需要首先为被链接的元素分配一个id属性（这样就知道该链接谁了），然后在URL结尾使用一个井号指向此id，例如：linktest

1
<a href="#linktest">linktest</a>  <!--这里是链接同一个文档的内部，因此可以省略URL

（4）下载链接

某些链接点击的效果并不是打开一个页面，而是下载文件，这就需要设置download属性来提供默认的保存文件名。

1
<a href="......" title="下载HTML教程" download="intro-to-HTML.pdf">HTML教程</a>

（5）电子邮件链接

某些链接点击的效果并不是打开一个页面，而是打开一个新的邮件发送信息，这就需要设置mailto:引导链接，指明收件人的邮件地址。例如：向SDYZZY发送邮件

1
<a href="mailto:sdyzzy@mail.ustc.edu.cn">向SDYZZY发送邮件</a>

（6）一些注意事项

waiting

6.文档组成与网站架构

（1）文档组成

文档基本组成包括：页眉、导航栏、主内容、侧边栏、页脚等。

  • <header>元素：页眉，存在于所有页面，是一个横跨页面顶部的大标题或标志；

    全局页眉与局部页眉

  • <nav>元素：导航栏，是指向各个页面的超链接，在所有页面中应该保持一致；

  • <main>元素：主内容，存放页面的主要内容，一个页面只能使用一次且位于<body>中（主内容里面还可以有各种子内容，例如<article>、<section>、<div>等）；

    • <article>元素：包裹一篇文章，与页面的其他部分无关；
    • <section>元素：类似，但是利于使内容分块，例如把一篇文章分为若干section；
    • 无语义元素：一些内容无法用上述有具体语义的元素包裹，这时可以用无语义元素，配合class属性提供标签，便于查询。
      • <div>：块级无语义元素；
      • <span>：内联无语义元素；

  • <aside>元素：侧边栏，提供作者介绍、参考信息等，经常嵌套在<main>中，默认在页面右侧；

  • <footer>元素：页脚，放置公共信息（联系方式、版权声明等）；

  • 换行元素<br>：在段落内换行，例如：<p>This is an apple.<br>How much is it?</p>；

  • 水平分割线元素<hr>。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!-- 一个例子 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>二次元俱乐部</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>

  <body>
    <header> <!-- 本站所有网页的统一主标题 -->
      <h1>聆听电子天籁之音</h1>
    </header>

    <nav> <!-- 本站统一的导航栏 -->
      <ul>
        <li><a href="#">主页</a></li>
        <!-- 共 n 个导航栏项目，省略…… -->
      </ul>

      <form> <!-- 搜索栏是站点内导航的一个非线性的方式。 -->
        <input type="search" name="q" placeholder="要搜索的内容">
        <input type="submit" value="搜索">
      </form>
    </nav>

    <main> <!-- 网页主体内容 -->
      <article>
        <!-- 此处包含一个 article（一篇文章），内容略…… -->
      </article>

      <aside> <!-- 侧边栏在主内容右侧 -->
        <h2>相关链接</h2>
        <ul>
          <li><a href="#">这是一个超链接</a></li>
          <!-- 侧边栏有 n 个超链接，略略略…… -->
        </ul>
      </aside>
    </main>

    <footer> <!-- 本站所有网页的统一页脚 -->
      <p>© 2050 某某保留所有权利</p>
    </footer>
  </body>
</html>

（2）网站架构

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure#规划一个简单的网站

7.HTML调试

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML

二、多媒体与嵌入

了解如何嵌入图片、视频、其他网页等。

1.HTML中的图片

（1）利用<img>元素

<img>元素可以简单地将图片放在页面上，有如下属性：

  • <src>：source，存放想引入的图片的路径（一般将图片和HTML文件放在同一个服务器上，例如和HTML页面同路径的images文件夹下）；
  • <alt>：当图片显示不出来时的替换文字；
  • <width>：图片宽度，单位默认px；
  • <height>：图片高度（宽度和高度只应该用于告诉浏览器为将要显示的图片留下一定的空间，因此应该与图像本来的大小相同。而不能用于改变图片大小，改变大小应该使用css）；
  • <title>：鼠标悬停在图片上时显示的提示信息；

（2）有说明文字的图片

使用<figure>嵌套<figcaption>元素添加有说明文字的图片，figcaption告诉浏览器它含有的内容描述了figure元素里面的内容。其中figure元素里面可以是图片、代码、音视频、表格、方程等任何东西。

1
2
3
4
5
6
7
<figure>
    <img src=""
         alt=""
         width=""
         height="">
    <figcation>这段文字描述了上面的内容</figcation>  <!-- 可以用这段文字代替title属性 -->
</figure>

（3）利用CSS添加背景图片

CSS添加的背景图片只是用于装饰，没有任何语义上的信息，具体在CSS章节讲。

2.HTML中的视频和音频

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content

3.在HTML中嵌入网页、PDF、Flash等

（1）<iframe>元素嵌入网页

可以将地图、视频、广告等其他页面嵌入当前网页，属性如下：

  • width、height：嵌入页面的大小；
  • frameborder：是否绘制边框，设置为1绘制（默认），0不绘制；
  • allowfullscreen：设置true后允许通过全平API设置为全屏模式；
  • sandbox：更加安全。
1
2
3
4
5
6
7
8
9
10
11
<iframe src=""
        width=""
        height=""
        frameborder=""
        allowfullscreen=""
        sandbox>
    <p>
        若浏览器不支持iframe，则可以使用普通的链接
        <a href="">https://</a>
    </p>
</iframe>

（2）<embed>元素嵌入Flash

flash已经过时。

（3）<object>元素嵌入PDF

PDF更倾向于使用链接而不是嵌入。

1
2
3
4
5
6
7
8
9
10
<object data="文件名.pdf"
        type="application/pdf"
        width="800"
        height="1200"
        typemustmatch>
  <p>
      若浏览器不支持object，则可以使用普通的链接
      <a href="文件名.pdf"></a>
   </p>
</object>

4.HTML中的矢量图（SVG）

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web

5.响应式图片

实现在不同尺寸的屏幕上自适应显示，使用<img>元素的<srcset>和<sizes>属性：

  • <srcset>：给出一组可选择的图片路径及其大小（固有宽度，单位w），以逗号隔开每组；

  • <sizes>：定义一组条件，并指明当某个条件为真时，显示哪幅图片。

    1
    2
    3
    4
    5
    6
    <img
      srcset="1-480w.jpg 480w, 1-800w.jpg 800w"
      sizes="(max-width: 600px) 480px,
             800px"
      src="1-800w.jpg"
      alt="1"/>

——————————————-待更新——————————————-

三、HTML表格

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Tables

1.第一小节（subsection）

（1）subsubsection

主要内容