Introduction of HTML(3): CSS, Link, Image, Table and List

Published: by Creative Commons Licence

类别 ... ...
HTML
CSS
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
                
内部样式表
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
                
内联样式 <pre style="text-align: left;""> <p style="color: red; margin-left: 20px"> This is a paragraph </p> </pre>
样式定义 <style>
资源引用 <link>
文档中的节或者区域(块级) <div>
文档中行内的小块或区域 <span>
HTML
链接
两种使用<a>标签的方式 1. 通过使用 href 属性 - 创建至吸纳更另一个文档的链接
2. 通过使用 name 属性 - 创建文档内的书签
链接语法 <a href="url">Link text</a>
Link text不必一定是文本。图片或者其他HTML元素都可以成为链接
target属性 定义被链接的文档在何处显示,如:
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
                
name属性 该属性规定锚(anchor)的名称 - 创建HTML页面中的书签
书签对读者不可见;使用命名锚时,可创建跳转至该named anchors的链接,
<a name="tips">基本的注意事项 - 有用的提示</a>
我们可以在同一个文档中创建指向该anchor的链接
<a href="#tips">有用的提示</a>
也在其他页面创建指向该anchor的链接
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个命名锚了。
                
HTML
图像
图像 <img src="url"/>
<img>是空标签;
要在页面上显示图像需要源属性(src)
src至"source".源属性的值是图像的URL地址。
属性 <img src="boats.gif" alt="Big Boats">
为图像定义一串预备的可替换文本,替换文本的值由用户定义。
定义图像地图 <map>
定义图像地图中的可点击区域 <area>
HTML
表格
定义表格 <table>
定义表格标题 <caption>
定义表格表头 <th>
定义表格的行 <tr>
定义表格单元 <td>
定义表格页眉 <thead>
定义表格主体 <tbody>
定义表格页脚 <tfoot>
定义表格列的属性 <col>
定义表格列的组 <colgroup>
HTML
列表
列表项内部可以使用段落p、换行符br、图片img、链接a以及其他链表,自行套娃
无序列表 无序列表始于<ul>.每个列表项始于<li>
                    <ul>
                    <li>Coffee</li>
                    <li>Milk</li>
                    </ul>
                
有序列表 有序列表始于<ol>.每个列表项始于<li>
                    <ol>
                    <li>Coffee</li>
                    <li>Milk</li>
                    </ol>
                
定义列表 自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。
每个自定义列表项以 <dt> 开始。
每个自定义列表项的定义以 <dd> 开始。
                <dl>
                    <dt>Coffee</dt>
                    <dd>Black hot drink</dd>
                    <dt>Milk</dt>
                    <dd>White cold drink</dd>
                </dl>