HTML语法

HTML元素以成对的标签表示，代表开始和关闭。例如：<p>一个段落</p>。
部分标签可以在开始标签内进行关闭：

1
<img src="/images/logo.png" width="258" height="39" />

在HTML中，我们可以为标签设置属性。属性以name="value"的形式写在标签内。

1
<a href="http://www.bilibili.com">这是一个链接</a>

HTML基础学习

标题

标题通过<h1>到<h6>一共六个标签定义。<h1>是最大的标题，<h6>是最小的标题。

1
2
3
4
5
6
<h1>我是一号标题</h1>
<h2>我是一号标题</h2>
<h3>我是一号标题</h3>
<h4>我是一号标题</h4>
<h5>我是一号标题</h5>
<h6>我是一号标题</h6>

我是一号标题

我是一号标题

我是一号标题

我是一号标题

我是一号标题
我是一号标题

不要仅仅为了粗体和大号字体滥用标题。标题用于编制索引，可以方便的呈现文档结构。

水平分割线

我们可以使用<hr>标签来生成水平分割线。

1
2
3
<p>我们可以使用<hr>标签来生成水平分割线。</p>
<hr>
<p><hr>标签用于分割内容。</p>

<hr>标签用于分割内容。

注释

注释可以方便我们更好的理解代码。浏览器会忽略注释并且不会显示注释。

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

段落

段落通过<p>标签定义：

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

我是一个段落

### 换行 如果我们不想一段话分成多个段落，可以使用`
`标签换行： 
1
<p>这个段落<br>展示了如何换行</p>

这个段落
展示了如何换行

链接

链接通过 <a>标签创建，通常用于从一个页面导航到另一个页面、从一个部分跳转到页面中的另一个部分、下载文件、打开其他应用、执行JavaScript等等。

1
<a href="www.bilibili.com">访问bilibili</a>

访问bilibili

链接属性

  1. href：该标签用于定义链接跳转的目标，例如网页、文件等。
  2. target：定义链接的打开方式。
    • _self：默认使用该方式。在当前页面打开目标。
    • _blank：在新页面打开目标。
    • _parent：在父框架中打开目标。
    • _top：在窗口中打开目标，无任何框架。 
      1
      <a href="www.bilibili.com" target="_blank">访问bilibili</a>
  3. rel：定义链接与目标的关系。
    • nofollow：浏览器不跟踪该目标，常用于访问外部文件。
    • oopener: 防止新页面访问window.opener属性和open方法。
    • noreferrer: 不告诉新目标从哪里访问到它的。 
      1
      <a href="www.dangerous.com" target="_blank" rel="noopener noreferrer">我是安全链接</a>
  4. download：定义下载目标而不是跳转到该目标。 
    1
    <a href="filename.extension" download="下载时保存的文件名.扩展名"></a>
  5. title：定义鼠标悬停在链接上时显示提示内容。 
    1
    <a href="www.bilibili.com" title="点我访问bilibili">bilibili</a>
    bilibili
  6. id：链接锚点，定义链接跳转到页面的特定位置。 
    1
    2
    3
    4
    5
    <a href="#jump">点我跳转到后面</a>
    ...
    ...
    ...
    <div id="jump">我是被跳转的目标</div>

图片

图片使用<img>标签，其属性和<a>差不多，src表示图片URL地址。

1
<img src="images.png">

  • alt：当图片无法加载时，我们可以设置alt属性，来显示替换文本。

    1
    <img src="images.png" alt="我是加载不出来时显示的文本">
    我是加载不出来时显示的文本

  • width和height：为图片设置宽和高。

    1
    <img src="images.png" width="1080" height="1920">

文本格式化

文本格式化标签可以设置字体的样式。

标签 描述
<b> 粗体文本
<i> 斜体
<small> 小号字体
<sub> 下标
<sup> 上标
<ins> 下划线
<del> 删除线 
1
<p><b>粗体文本</b><sup>2</sup><del>你看不到这个</del></p>

粗体文本2你看不到这个

HTML进阶学习

表格

表格的定义如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table>
  <caption>标题</caption>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1，列1</td>
      <td>行1，列2</td>
      <td>行1，列3</td>
    </tr>
    <tr>
      <td>行2，列1</td>
      <td>行2，列2</td>
      <td>行2，列3</td>
    </tr>
  </tbody>
</table>
  • <table>：定义表格。
  • <caption>：表格标题。
  • <thead>：表格。table head。
  • <tr>：行。table row。
  • <th>：表头数据。table header。
  • <td>：单元格数据。table data。
  • <tbody>：表体。
    ......信息表
    列标题1 列标题2 列标题3
    行1，列1 行1，列2 行1，列3
    行2，列1 行2，列2 行2，列3
    如果我们想要为表格添加边框，可以为``添加一个`border`属性。如果我们不需要单元格之间的边框，可以通过`cellspacing`设置为0。 
    1
    2
    <table border="5" cellspacing="0">
    ...
    我是一个标题
    列标题1 列标题2 列标题3
    行1，列1 行1，列2 行1，列3
    行2，列1 行2，列2 行2，列3
    通过``，我们可以单独为单元格设置格式。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <table width="80%" border="5" cellspacing="0">
      ...
      <tbody>
    	  <colgroup>
    	    <col style="background-color:red">
    	    <col style="background-color:yellow">
            <col style="background-color:blue">
    	  </colgroup>
        <tr>
          <td>行1，列1</td>
          <td>行1，列2</td>
          <td>行1，列3</td>
        </tr>
        <tr>
          <td>行2，列1</td>
          <td>行2，列2</td>
          <td>行2，列3</td>
        </tr>
      </tbody>
    </table>
    我是一个标题
    列标题1 列标题2 列标题3
    行1，列1 行1，列2 行1，列3
    行2，列1 行2，列2 行2，列3

单元格的合并

在<td>标签内使用colspan和rowspan属性，可以设置跨行/列单元格。

我是一个标题
列标题1 列标题2 列标题3 列标题4
跨列合并 跨行合并 行1，列4
行列合并 行2，列4
行3，列1 行3，列4

列表

列表分为有序列表和无序列表，有序列表使用<ul>标签，无序列表使用<ol>标签。列表的每一项使用<li>标签。

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 无序列表 -->
<ul>
  <li>无序列表：第一行</li>
  <li>无序列表：第二行</li>
  <li>无序列表：第三行</li>
</ul>
<!-- 有序列表 -->
<ol>
  <li>有序列表：第一行</li>
  <li>有序列表：第二行</li>
  <li>有序列表：第三行</li>
</ol>
  • 无序列表：第一行
  • 无序列表：第二行
  • 无序列表：第三行

- - - - - - - -

  1. 有序列表：第一行
  2. 有序列表：第二行
  3. 有序列表：第三行
### 自定义列表 自定义列表使用`
`、`
`和`
`标签。 
1
2
3
4
5
6
7
8
<dl>
  <dt>Color</dt>
  <dd>- black</dd>
  <dd>- white</dd>
  <dt>RGB</dt>
  <dd>- R:0, G:0, B:0</dd>
  <dd>- R:255, G:255, B:255</dd>
</dl>
Color
- black
- white
RGB
- R:0, G:0, B:0
- R:255, G:255, B:255
### 嵌套列表 `
  • `标签内还可以继续嵌套列表： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <ul>
      <li>无序列表：第一行</li>
      <li>无序列表：第二行
    	  <ol>
    		<li>有序列表：第一行</li>
    		<li>有序列表：第二行</li>
    		<li>有序列表：第三行</li>
    	</ol>
      </li>
      <li>无序列表：第三行</li>
    </ul>
    • 无序列表：第一行
    • 无序列表：第二行
      1. 有序列表：第一行
      2. 有序列表：第二行
      3. 有序列表：第三行
    • 无序列表：第三行

    HTML扩展内容

    HTML头部

    一个HTML完整标签如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>html</title>
    </head>
     
    <body>

    </body>
     
    </html>

    <head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在<head>内的标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>和<base>。

    • <title>标签在HTML中是必需的。其定义了浏览器工具栏的标题，当网页被添加到收藏夹时，也会在显示在收藏夹中。在使用搜索引擎时，还会显示在搜索结果页面。
    • <style>标签用于添加样式或样式文件。
    • <meta>标签内的元素用于浏览器解析，不会显示。 
      1
      2
      3
      4
      5
      6
      7
      8
      <!--为搜索引擎定义关键词:-->
      <meta name="keywords" content="HTML, CSS, XML, JavaScript">
      <!--为网页定义描述内容:-->
      <meta name="description" content="我是一个描述内容">
      <!--定义网页作者:-->
      <meta name="author" content="Soria">
      <!--每10分钟刷新当前页面:-->
      <meta http-equiv="refresh" content="600">
    • <link>标签用于链接外部文件，例如样式文件和脚本文件。
    • <base>标签作为本HTML文档中所有链接的默认链接。