刘华佼的全栈学习记录

HTML自学作业

| Comments

div / span 的不同

HTML <div> 元素是块级元素,在浏览器中起新行显示。如<p>,<h1>,<table>,<ul>;
HTML <span> 元素是内联元素,不会以新行显示。如<td>,<a>,<img>;

HTML <div> 元素可作为组合其他HTML元素的容器;
HTML <span> 元素可作为文本的容器。

HTML <div> 元素如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
HTML <span> 元素当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

class 与 id 的不同

class是一个样式集,定义方式:

.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 

使用方式:

<div class="cities">

id 属性规定 HTML 元素的唯一的 id,可用作链接锚(link anchor),通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式。例如:

<html>
<head>
<script type="text/javascript">
function change_header()
{
document.getElementById("myHeader").innerHTML="Nice day!";
}
</script>
</head>

<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="change_header()">Change text</button>
</body>

</html>

p 与 br 的不同

p是段落标记;用法是<p>一段文本</p>
br是换行符; 用法是<br>或<br />(后者更保险)

如何使用 table 排版

<table border="1">
  <tr>
    <th>第一列标题</th>
    <th>第二列标题</th>
  </tr>
  <tr>
    <td>第一行第一列单元格</td>
    <td>第一行第二列单元格</td>
  </tr>
   <tr>
    <td>第二行第一列单元格</td>
    <td>第二行第二列单元格</td>
  </tr> 
</table>

点击进去亲自测试一下!
排版效果图:

Comments

comments powered by Disqus