HTML基础

HTML标签成对存在，第一个是开始标签，第二个是结束标签。

HTML属性

属性会以键值对的形式出现，并在开始标签中规定。

实例：

链接 This is a link

标题居中

常用标签

水平线  
<hr />:在页面中创建水平线

注释  
<!-- This is a comment -->

空行  
<br />

在不产生新段落的情况下进行换行
<p>This is <br /> a para <br /> graph </ p>

文本格式化

<b> </b>：加粗
<i> </i>：斜体
<pre> </pre>：预格式文本，会保留空格与换行
<blockquote> </blockquote>：这是长引用
<q> </q>：这是 短引用

列表

# dl定义一个列表，dt定义了术语部分，dd定义了内容部分
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

data-*

在HTML元素上嵌入自定义数据，可以被页面的javascript使用。
data-* 属性包括两部分：

属性名：不含大写字母；
属性值：任意字符串；

<html>
<head>
<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
    alert(animal.innerHTML + "是一种" + animalType + "。");
}
</script>
</head>
<body>

<h1>物种</h1>

<p>点击某个物种来查看其类别：</p>

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="鸟类">喜鹊</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="鱼类">金枪鱼</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蝇虎</li>  
</ul>

</body>
</html>