HTML/CSS/JavaScript学习笔记【持续更新】
HTML <font> 标签
定义和用法
<font> 规定文本的字体、字体尺寸、字体颜色。
实例
规定文本字体、大小和颜色:
1 <font size="3" color="red">This is some text!</font>
2 <font size="2" color="blue">This is some text!</font>
3 <font face="verdana" color="green">This is some text!</font>
HTML 与 XHTML 之间的差异
在 HTML 4.01 中,font 元素不被赞成使用。
演示效果
HTML <ul> 标签
定义和用法
<ul> 标签定义无序列表。
实例
无序 HTML 列表:
1 <ul>
2 <li>Coffee</li>
3 <li>Tea</li>
4 <li>Milk</li>
5 </ul>
HTML 与 XHTML 之间的差异
在 HTML 4.01 中,ul 元素的 "compact" 和 "type" 属性是不被赞成使用的。
在 XHTML 1.0 Strict DTD 中,ul 元素的 "compact" 和 "type" 属性是不被支持的。
演示效果
HTML <ol> 标签
定义和用法
<ol> 标签定义有序列表。
实例
有序 HTML 列表:
1 <ol>
2 <li>Coffee</li>
3 <li>Tea</li>
4 <li>Milk</li>
5 </ol>
HTML 与 XHTML 之间的差异
在 HTML 4.01 中,ol 元素的 "compact"、"start" 以及 "type" 属性是不被赞成使用的。
在 XHTML 1.0 Strict DTD 中,ol 元素的 "compact"、"start" 以及 "type" 属性是不被支持的。
演示效果
HTML <dl> 标签
定义和用法
<dl> 标签定义了定义列表(definition list)。
<dl> 标签用于结合 <dt>(定义列表中的项目)和 <dd>(描述列表中的项目)。
实例
1 <dl>
2 <dt>计算机</dt>
3 <dd>用来计算的仪器 ... ...</dd>
4 <dt>显示器</dt>
5 <dd>以视觉方式显示信息的装置 ... ...</dd>
6 </dl>
HTML 与 XHTML 之间的差异
NONE
演示效果
HTML <hr> 标签
定义和用法
<hr> 标签在 HTML 页面中创建一条水平线。
水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。
实例
被水平线分隔的标题和段落:
1 <h1>This is header 1</h1>
2 <hr />
3 <p>This is some text</p>
HTML 与 XHTML 之间的差异
在 HTML 中,<hr> 标签没有结束标签。
在 XHTML 中,<hr> 必须被正确地关闭,比如 <hr />。
在 HTML 4.01 中,hr 元素的所有呈现属性均不被赞成使用。
在 XHTML 1.0 Strict DTD 中,hr 元素的所有呈现属性均不被支持。
演示效果
HTML <table> 标签
定义和用法
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
实例
一个简单的 HTML 表格,包含两行两列:
1 <table border="1">
2 <tr>
3 <th>Month</th>
4 <th>Savings</th>
5 </tr>
6 <tr>
7 <td>January</td>
8 <td>$100</td>
9 </tr>
10 </table>
HTML 与 XHTML 之间的差异
在 HTML 4.01 中,table 元素的 "align" 和 "bgcolor" 属性是不被赞成使用的。
在 XHTML 1.0 Strict DTD,table 元素的 "align" 和 "bgcolor" 属性是不被支持的。
演示效果
HTML <caption> 标签
定义和用法
caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
实例
1 <table border="6">
2 <caption>我的标题</caption>
3 <tr>
4 <td>100</td>
5 <td>200</td>
6 <td>300</td>
7 </tr>
8 <tr>
9 <td>400</td>
10 <td>500</td>
11 <td>600</td>
12 </tr>
13 </table>
HTML 与 XHTML 之间的差异
在 HTML 4.01 中,caption 元素的 align 属性是不被赞成使用的。
在 XHTML 1.0 Strict DTD 中,caption 元素的 align 属性是不被支持的。
演示效果
HTML <tbody> 标签
定义和用法
<tbody> 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。
tbody 元素应该与 thead 和 tfoot 元素结合起来使用。
thead 元素用于对 HTML 表格中的表头内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。
注释:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
提示:在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。
详细描述
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。
实例
带有 thead、tbody 以及 tfoot 元素的 HTML 表格:
1 <table border="1">
2 <thead>
3 <tr>
4 <th>Month</th>
5 <th>Savings</th>
6 </tr>
7 </thead>
8
9 <tfoot>
10 <tr>
11 <td>Sum</td>
12 <td>$180</td>
13 </tr>
14 </tfoot>
15
16 <tbody>
17 <tr>
18 <td>January</td>
19 <td>$100</td>
20 </tr>
21 <tr>
22 <td>February</td>
23 <td>$80</td>
24 </tr>
25 </tbody>
26 </table>
HTML 与 XHTML 之间的差异
NONE
演示效果
HTML <a> 标签
定义和用法
<a> 标签定义超链接,用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性,它指示链接的目标。
在所有浏览器中,链接的默认外观是:
- 未被访问的链接带有下划线而且是蓝色的
- 已被访问的链接带有下划线而且是紫色的
- 活动链接带有下划线而且是红色的
提示:您可能已经注意到了,W3School 站点内的链接外观与默认的链接外观非常不同。您可以使用 CSS 伪类 向文本超链接添加复杂而多样的样式。
实例
指向 w3school 的超链接:
<a href="http://www.cnblogs.com/ECJTUACM-873284962/">Angel_Kitty</a>
HTML 4.01 与 HTML5 之间的差异
在 HTML 4.01 中,<a> 标签可以是超链接或锚。在 HTML5 中,<a> 标签始终是超链接,但是如果未设置 href 属性,则只是超链接的占位符。
HTML5 提供了一些新属性,同时不再支持一些 HTML 4.01 属性。
演示效果
- Caliburn.Micro学习笔记(五)----协同IResult
- 一个Pythoner的自我修养系列(一)
- 众里寻她千百度,蓦然回首,那bug却在灯火阑珊处
- Github|Python开源项目漫游指南(一)
- Caliburn.Micro学习笔记(四)----IHandle<T>实现多语言功能
- .NET 4 System.Threading.CountdownEvent
- java与ruby的直观比较
- 每天一个Linux命令:chmod
- SparkSql 中外连接查询中的谓词下推规则
- Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle<T>
- Python进行数据可视化分析快速教程实例
- 一个抓取豆瓣图书的开源爬虫的详细步骤
- Java 8 Stream 教程 (三)
- silverlight ListBox 多列图片效果
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- YII框架行为behaviors用法示例
- 浅谈Python里面None True False之间的区别
- python如何导入依赖包
- 深入理解Python 多线程
- Yii2框架自定义验证规则操作示例
- 浅析PHP 中move_uploaded_file 上传中文文件名失败
- 结束运行python的方法
- 解析Tensorflow之MNIST的使用
- 面向新手解析python Beautiful Soup基本用法
- 基于keras中的回调函数用法说明
- PHP实现读取文件夹及批量重命名文件操作示例
- Python多线程threading创建及使用方法解析
- django rest framework 过滤时间操作
- 浅谈TensorFlow之稀疏张量表示
- 解决Keras 中加入lambda层无法正常载入模型问题