目录

[TOC]

准备

在vscode中安装插件

  1. Chinese (Simplified)
  2. Auto Rename Tag/Auto Close Tag : 前者可以自动重命名配对的HTML/xml标签，后者自动配对HTML/XML标签
  3. open in (default) browser 在浏览器中打开

然后 ！+tab 可以生成一个默认的模板

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>   <!-- 声明HTML5文档，不区分大小写，还有其他html版本 -->  
<html lang="en">   <!-- 根元素 -->  
<head>   <!-- 包含文档的元数据(meta) -->  
    <meta charset="UTF-8">   <!--声明utf-8编码，不然中文乱码/好吧我实验了一下，这个不写也没事吗，估计是浏览器太牛逼了-->  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>   <!--标题-->  
</head>  <!--元数据(meta)-->  
<body> 
     <!--可见的页面内容-->  
</body>   
</html>  <!-- 根元素 -->

什么是HTML

  1. HTML是三件套的骨架
  2. 是一种标记语言
  3. HTML 包含 标签和文本内容
  4. HTML文档也叫做web页面
  5. 标签成对出现，第一个是开始标签，后面的是结束标签
  6. 参考文档https://www.runoob.com/html/html-examples.html

HTML基础

  • 标题 header

1
2
3
4
5
6
7
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
<!--然后就是大小不一的输出-->

  • 段落 paragraph

1
<p>这是一个段落</p>

一个换行只是一个空格，一堆空格只是一个空格，一堆空格加一个换行只是一个空格

段落的行数依赖于browser窗口的大小

1
2
<!--下面演示换行的行为,使用  <br> break意思换行  -->
   <p>这里<br>演示<br>换行<br>行为</p>

记得注意格式问题

  • 链接 anchor

1
<a href="https://echin.github.io">这里输入链接的话/名称</a>

href是一种必需属性，用于指定链接的目标

  • 图片 image

1
<img src="https://tse2-mm.cn.bing.net/th..." width="258" height="39" />

注意要写宽和高以及 />的标志

  • 注释

1
<!-- 这是注释 -->

  • 水平线 horizontal rule

1
<hr />

  • 换行

1
<br>

文本操作

感觉不常用的会在后面加一个”略”,等以后写项目了再去熟悉吧

  • 加粗 bold/strong

1
2
<b>加粗bold</b>
<strong>加粗strong</strong>

  • 斜体

1
2
<em>斜体</em>
<i>斜体</i>

  • 缩小（略）

1
<small>缩小</small>

  • 上标/下标（略）

1
2
<sub>下标</sub>
<sup>上标</sup>

  • 空格/空行控制

1
<pre>这    是      空  格</pre>

  • 引号

1
2
3
<p>WWF's goal is to: 
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

  • 下划线

1
<ins>hehe</ins>

  • 删除线

1
<del>hehe</del>

  • 地址

1
2
3
4
5
6
7
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

在 HTML 中，**<address>** 标签用于包含联系信息，例如作者的姓名、电子邮件地址、网址或其他联系信息。

  • 不同类型的文本内容（略）

1
2
3
4
5
6
7
8
9
10
<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />

  • 缩略词 (略)

1
2
3
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

  • 改变段落文字的显示方向（略）

1
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>

HTML样式

  • 背景颜色 background-color

1
2
3
4
5
<!--记住，这个style是夹在第一个头部，然后两个之间写文字-->
<body style="background-color: yellow;">
    <h1 style="background-color: aqua;">这是一个aqua颜色</h1>
    <p style="background-color: blueviolet;">这是一个颜色blueviolet颜色</p>
</body>

各个选项之间用；分隔，如果是键值对之间用：表示

  • 文字字体/字体颜色/字号 font-family / color / font-size

1
2
<h1 style="font-family: Verdana;">一个标题</h1>
<p style="font-family: arial;color: red;font-size: 20px;">这是一个段落</p>

  • 对齐 text-align

1
<h1 style="text-align: center;">一个标题</h1>

  • 不同格式的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--就是把style写到meta元素中-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css"> h1 {color:red} p {color: blue;} </style>
</head>
<body style="background-color: yellow;">
    <h1>一个标题</h1>
    <p>这是一个段落</p>
</body>
</html>

  • 没有下划线的链接 text-decoration:none

1
<a href="https://www.runoob.com/try/try.php?filename=tryhtml_linknoline" style="text-decoration: none;">没有下划线的链接</a>

HTML链接

  • 创建超级链接 

1
<p ><a href="https://chat.jarvis73.com/" style="text-decoration: none;">GPT</a>是个好东西</p>

  • 图片链接 就是把img嵌入a中

1
2
3
4
<p>创建图片链接：
        <a href="http://www.runoob.com/html/html-tutorial.html"><img src="smiley.gif" alt="HTML 教程" width="32" height="32"></a>
    </p>
</body>

  • 在新的浏览器窗口打开链接 target:”__blank”

1
2
3
<p>创建图片链接：
        <a href="http://www.runoob.com/html/html-tutorial.html" target="_blank">在新的浏览器窗口打开页面</a>
    </p>

  • 链接到同一页面的不同位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h1>链接到同一页面的不同位置</h1>
    <p><a href="#C4">查看章节2</a></p>
    <h2>章节1....</h2>
    <p>
        内容1....
    </p>
    <h2><a id="C4">章节2</a> </h2>
    <p>
        内容2....
    </p>
<!--就是通过两个链接来实现
	一个是<a href="#C4">....</a>
	<h2><a id="C4">...</a></h2>
-->

  • 跳出框架 target=”_top”

1
2
3
<p>跳出框架？
    <a href="http://www.runoob.com" target="_top">跳出框架</a>
</p>

  • 电子邮件

1
2
3
4
5
<p>
这是一个电子邮件链接：
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p>

注意：单词之间的空格用 %20 代替，确保浏览器可以正常显示文本

HTML图像

插入动图和静图语法一致

  1. src – 输入URL
  2. alt – 图像的代替文本，当图像无法显示，会显示这段文本
  3. width 宽度
  4. height 高度

  • 图片映射 map/area

1
2
3
4
5
<img src="planets.jpg" alt="Planets" usemap="#planetMap">
<map name="planetMap">
    <area shape="rect" coords="0,0,82,126" href="sum.html" alt="Sun">
    <area shape="circle" coords="90,58,3" href="mercur.html" alt="mercur">
</map>

整体靠 usemap=”#…”来映射

HTML 表格

一行 一列 一个表格
表头
标题

  • 表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1"> <!--但是border已经废弃了，所以使用CSS--> 
    <tr>  
      <td>第一行，第一列</td>  
      <td>第一行，第二列</td>  
    </tr>  
    <tr>  
      <td>第二行，第一列</td>  
      <td>第二行，第二列</td>  
    </tr>  
    <tr>  
      <td>第三行，第一列</td>  
      <td>第三行，第二列</td>  
    </tr>  
  </table>

  • 表头 

1
2
3
4
5
6
7
8
9
10
11
12
13
<h4>水平标题:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th>Telephone</th>
  <th>Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

  • 标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr> 
</table>

1 2 3

4 5 6

7 8 9