HTML

使用 $html5$ 

1
<!DOCTYPE html>

html

$language$

1
<html lang="zh">...</html>

编码

1
<meta charset="UTF-8">

title

更改标题

1
2
3
4
5
<head>
    <title>
        Learning HTML
    </title>
</head>

body

排版

标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<h1>
一级标题
</h1>
<h2>
二级标题
</h2>
<h3>
三级标题
</h3>
<h4>
四级标题
</h4>
<h5>
五级标题
</h5>
<h6>
六级标题
</h6>

段落

1
2
3
<p>
段落
</p>

划分

div 分割划分作用

1
<div>...</div>

文本标签

<em> 元素将文本标记为强调（emphasis）格式。<em> 元素可以嵌套，嵌套层次越深，则强调的程度越深。

<strong> 表示文本十分重要，一般用粗体显示。

<span> HTML 元素是一个通用的行级容器，本身不具备特殊含义。它可被用于对元素进行编组，以便于添加样式（通过使用 class 或 id 属性），或共享属性值（例如 lang 属性）。该元素仅应在无其他合适语义元素时使用。<span> 与 `` 元素非常相似，但是 `` 是块级元素，而 <span> 是一个行级元素。

<cite> 表示一个作品的引用，且必须包含作品的标题。这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写。

<dfn> 表示术语的一个定义。

<del> 标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。<ins> 标签的作用恰恰于此相反：表示文档中添加的内容。这个标签通常（但不一定要）在文字上显示删除线。

<ins> 元素定义已经被插入文档中的文本。

<sub> 元素用于指定应显示为下标的行内文本，这完全是出于排版的原因。下标通常使用较小的文本以较低的基线显示。

<sup> 元素定义仅出于排版目的而显示为上标的行内文本。上标通常以较小的文本在高出基线的位置呈现。

<code> 元素为其显示的内容添加用以表明其中的文本是一段简短的计算机代码的样式。

<pre> 按原文显示。

图片标签

<img> 元素将一张图像嵌入文档。

1
<img src = "star.jpg">
  • src 属性是必须的，它包含了你想嵌入的图片的路径。
  • alt 属性包含一条对图像的文本描述，这不是强制性的。
  • width 宽度，单位像素。
  • height 高度。

超链接

<a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。

1
<a href="https://www.bilibili.com/">Bilibili</a>

target 关键词对加载 URL 的位置有特殊含义：

  • _self：当前页面加载。（默认）
  • _blank：通常在新标签页打开，但用户可以通过配置选择在新窗口打开。
  • _parent：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与 _self 相同。
  • _top：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 _self 相同。
1
<a href="https://www.bilibili.com/" target="_blank">Bilibili</a>

页内跳转。

跳转到相应的 $name$ 处。

1
2
3
<a href="#pos"> To pos </a>

<a name="pos"></a>

列表

有序列表

<ol> 元素表示有序列表，通常渲染为一个带编号的列表。

<li> 元素用于表示列表中的项目。它必须包含在一个父元素中：有序列表、无序列表或菜单。

1
2
3
4
5
6
7
8
9
10
11
<ol>
    <li>
        步骤一
    </li>
    <li>
        步骤二
    </li>
    <li>
        步骤三
    </li>
</ol>

无序列表

1
2
3
4
5
6
7
8
9
10
11
<ul>
    <li>
        a
    </li>
    <li>
        b
    </li>
    <li>
        c
    </li>
</ul>

表格

表格标题

1
2
3
4
5
<table>
    <caption>
     表格标题
    </caption>
</table>

表格头部

<thead> 表示表格头部。

<tr> 表示一行。

<th> 表示头部这一格。

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

表格主体

<tr> 表示一行。

<td> 表示表格主体这一格。

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
<tbody>
    <tr>
        <td>
            bob
        </td>
        <td>
            f
        </td>
        <td>
            12
        </td>
        <td>
            1
        </td>
    </tr>
    <tr>
        <td>
            alice
        </td>
        <td>
            m
        </td>
        <td>
            10
        </td>
        <td>
            2
        </td>
    </tr>
</tbody>

表格脚注

<tfoot> 表示脚注。

<tr> 表示一行。

<td> 表示表格脚注这一格。

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

        </td>
        <td>

        </td>
        <td>

        </td>
        <td>
            4
        </td>
    </tr>
</tfoot>

表格属性

border="10 px" 表示外边界线 10 px。

width="10 px" 宽度。

height="10 px" 高度。

cellspacing="0" 相邻格边框距离。

单个格或行或 body 等。

align="center" 水平方向对齐方式，left center right 。

valign="middle" 垂直方向对齐方式，top middle bottom 。

th td 内

colspan="2" 表示横跨两列。

rowspan="2" 表示竖跨两行。

单标签

<br> 换行。

<hr> 水平分割线。

表单

<form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

<button> 元素表示一个可点击的按钮，可以用在表单或文档其他需要使用简单标准按钮的地方。

<input> 元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。

1
2
3
4
5
6
<form action="https://search.bilibili.com/all" target="_blank">
    <input type="text" name="keyword">
    <button>
        search
    </button>
</form>

input

<input> 属性。

1
<input type="text" name="keyword" value="scut" minlength="4" maxlength="10">

单选形式： $name$ 需要设置成一样，需要给出默认值 $value$ 。

1
type="radio"

多选形式：$name$ 需要设置成一样，需要给出默认值 $value$ 。

1
type="checkbox"

单/多选默认选中加上 $checked$

1
checked

input 作为按钮 submit 属性。

1
<input type="submit" value="confirm">

button

button 重置填入的内容。

1
2
3
<button type="reset">
    reset
</button>

普通按钮 （按钮默认 type="submit"）

1
2
3
<button type="button">
    normal button
</button>

textarea

多行输入（文本域）

1
<textarea name="other" cols="10" rows="'10"></textarea>

select

下拉框

1
2
3
4
5
<select name="place">
    <option value="gd">guangdong</option>
    <option value="jx">jiangxi</option>
    <option value="cd">chengdu</option>
</select>

让某个选项默认选中。

1
<option value="jx" selected>jiangxi</option>

禁用某个控件，只展示。

1
<input type="text" name="keyword" value="bilibili" disabled>

<label> 元素（标签）表示用户界面中某个元素的说明。

<fieldset> 元素用于对表单中的控制元素进行分组（也包括 label 元素）。

<legend> HTML 元素表示其父元素fieldset内容的标题。

框架标签嵌入 web，文件等。

1
<iframe src="https://www.bilibili.com/" width="900" height="600" frameborder="0">