延绪的水上书
0%

HTML简明教程

发表于 分类于 Disqus：

基本结构

添加注释快捷键：ctrl + /

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- DOCTYPE：告诉浏览器我们使用什么规范，省略亦可 -->
<!-- 写在html标签里的内容才会显示 -->
<!DOCTYPE html>
<html>
<head>
    <!-- meta：描述性标签，描述网页的一些信息，一般用来做SEO（搜索引擎优化） -->
    <meta charset="UTF-8">
    <meta name="keyword" content="HTML example">
    <meta name="description" content="This is an example of HTML">
    <title>我的第一个HTML页面</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>Hello World!</p>
    <p>这是一个简单的HTML页面。</p>
</body>
</html>
  • <html>称为开放标签，</html>称为闭合标签。
  • <meta> charset="UTF-8"称为自闭合标签。
  • title是指浏览器顶部页眉方框所显示的，并不是页面内的标题。

hello world

标签

输入p并按tab键，会自动生成<p></p>标签。其余类似。

基本标签

  • <h1></h1>：标题
  • <p></p>：段落
  • <hr>或<hr/>：水平线
  • <br>：换行
  • <b></b>或<strong></strong>：粗体
  • <i></i>或<em></em>：斜体
  • &...;：转义字符（&表示转义）
  • &nbsp;：空格
  • <img src="" alt="">：图像
  1. 空格键无论多少，都视为一个空格。多空格需用转义字符&nbsp。
  2. 图像引用中src和alt必不可少。其余字段可以添加或省略。
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
    <!-- 标题标签 -->
    <h1>欢迎来到我的网页</h1>
    <h2>一首小诗</h2>
    <!-- 段落标签 -->
    <p>Do not go gentle into that good night</p>
    <p>Old age should burn and rave at close of day</p>
    <p>Rage, rage against the dying of the light</p>
    <!-- 水平线 -->
    <hr>
    <!-- 换行 -->
    两只老虎	两只老虎	跑得快 <br>
    一只没有眼睛	一直没有尾巴 <br>
    真奇怪		真奇怪 <br>
    <!-- 粗体与斜体 -->
    <b> I love you. </b>
    <strong> I love you. </strong>
    <i> I miss you. </i>
    <em> I miss you. </em>
    <!-- 特殊符号 -->
    &copy; 版权归延绪所有（版权符号） <br>
    &lt; &gt; &amp; &quot; &nbsp;（小于、大于、与、引号、空格） <br>
    空&nbsp;&nbsp;&nbsp;格 <br>
    <!-- 图像标签 -->
    <img src="../resources/images/SummerGhost3.png" alt="替代文字" title="悬停文字" width="960" height="540">
</body>
</html>

tags

超链接标签