html教程

参考w3school html教程

什么是html

HTML(Hyper Text Markup Language)是一种超文本标记语言,由标签(tag)纯文本组成。浏览器接收html后,根据tag来对纯文本排版。

标签tag

  • tag是由尖括号包围的关键词,e.g. <html>
  • tag通常成对出现,分别为开始标签(opening tag)和结束标签(closing tag),e.g.<b> </b>

html元素

opening tag + 纯文本 + closing tag组成html元素

元素的类型有:

  • <html> this is a html.</html>
  • <body>html文档主体</body>
  • <h1> this is a header</h1>, 标题可以有h1-h6六级
  • <p>this is a paragraph.</p>
  • <a href="http://www.w3school.com.cn">This is a link</a>
  • <img src="w3school.jpg" width="104" height="142" />
  • <br />,空元素,换行./表示关闭。如果写成<br></br>好像起到的是换两行的作用

虽然现在没有强制要求,但是从规范和未来变化看,应该严格遵守:

  • 小写
  • 所有元素必须被关闭

html属性

为html元素提供更多信息

  • 总是以键值对形式出现,name="value"
  • 总是出现在开始标签中

下面列出了适用于大多数html元素的属性:

属性 描述
class classname 规定元素的类名(classname)
id id 规定元素的唯一 id
style style_definition 规定元素的行内样式(inline style)
title text 规定元素的额外信息(可在工具提示中显示)

html参考手册

html标准属性参考手册

html样式

style属性提供了一种改变所有html元素的样式的通用方法。

1
2
3
4
5
6
7
8
<html>

<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

</html>

html格式化

文本格式化可以通过特定的标签来实现。

html引用

标签 描述
定义缩写或首字母缩略语。
定义文档作者或拥有者的联系信息。
定义文本方向。
定义从其他来源引用的节。
定义项目或缩略词的定义。
定义短的行内引用。
定义著作的标题。

html计算机代码

需要注意:

  • 通常,html会将文本中多余的空格或者空行自动转为一个空格。
  • 通常,html使用可变的字母尺寸,以及可变的字母间距。

而计算机代码格式中<code> <kbd> <samp>支持固定的字母尺寸和间距。<pre>支持文本内容中的多空格、空行。

标签 描述
定义计算机代码文本
定义键盘文本
定义计算机代码示例
定义变量
定义预格式化文本

html注释

<!--这是一段注释-->

html链接

使用<a>创建链接,有两种使用方式:

  • 使用href属性——创建指向另一个文档的链接
  • 使用name属性——创建文档内的书签

在使用href属性时,请始终将正斜杠添加到子文件夹。这句话没太懂,反正尽量加反斜杠结尾就对了。。

name属性可以打书签,然后在其他地方使用href就可以指向该书签。

1
2
3
4
<a name="tips">书签</a>
<p>...</p>
<a href="#tips">link</a>
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">跨网页链接</a>

指向书签时需要在数钱名前加#。指向其他网页内部的书签也是可以的,需要url+#name。

html图像

1
<img src="http://www.w3school.com.cn/i/w3school_logo_white.git" alt="alt" />

src属性指定图片位置

alt属性指定图片信息,当图片无法加载时则显示alt的文本内容

html表格

1
2
3
4
5
6
7
8
9
10
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

其中,&nbsp;是空占位符,分号需要有。

html列表

标签 描述
    定义有序列表。
      定义无序列表。
    • 定义列表项。
      定义定义列表。
      定义定义项目。
      定义定义的描述。

      例子:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      <!--无序列表-->
      <ul>
      <li>Coffee</li>
      <li>Milk</li>
      </ul>

      <!--有序列表-->
      <ol>
      <li>Coffee</li>
      <li>Milk</li>
      </ol>

      <!--自定义列表-->
      <dl>
      <dt>Coffee</dt>
      <dd>Black hot drink</dd>
      <dt>Milk</dt>
      <dd>White cold drink</dd>
      </dl>

      html分组标签

      标签 描述
      定义文档中的分区或节(division/section)。
      定义 span,用来组合文档中的行内元素。

      起到分组的作用,可以对该分组内的元素统一设置样式。

      html类

      针对<div> <span>定义类,抽象出一种样式模式,方便后续直接通过类名指代样式模式。

      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
      48
      49
      50
      51
      <!--定义div的类-->
      <!DOCTYPE html>
      <html>
      <head>
      <style>
      .cities {
      background-color:black;
      color:white;
      margin:20px;
      padding:20px;
      }
      </style>
      </head>

      <body>

      <div class="cities">
      <h2>London</h2>
      <p>London is the capital city of England.
      It is the most populous city in the United Kingdom,
      with a metropolitan area of over 13 million inhabitants.</p>
      </div>

      <div class="cities">
      <h2>Paris</h2>
      <p>Paris is the capital and most populous city of France.</p>
      </div>

      <div class="cities">
      <h2>Tokyo</h2>
      <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
      and the most populous metropolitan area in the world.</p>
      </div>

      </body>
      </html>

      <!--定义span的类-->
      <!DOCTYPE html>
      <html>
      <head>
      <style>
      span.red {color:red;}
      </style>
      </head>
      <body>

      <h1>My <span class="red">Important</span> Heading</h1>

      </body>
      </html>