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 属性。
演示效果
转载于:https://www.cnblogs.com/ECJTUACM-873284962/p/7471146.html
HTML/CSS/JavaScript学习笔记【持续更新】相关推荐
- CSS(3)学习笔记——持续更新
本篇皆是本人长期记录并整理出来的笔记,如有记录得不对的地方,欢迎探讨.记录的很少,将不断学习不断补充. 1 选择器 CSS(3)中提供的选择器手册(w3school):http://www.w3sch ...
- 重拾CCNA,学习笔记持续更新ing......(4)
重拾CCNA,学习笔记持续更新ing......(4) 路由器作用功能的经典解说(笑)(非原创) 假设你的名字叫小不点,你住在一个大院子里,你的邻居有很多小伙伴,在门口传达室还有个看大门的李大爷,李大 ...
- HTML,CSS,JavaScript学习笔记--导航
陆陆续续花了一个月的时间,把前端三大件HTML,CSS,JavaScript的基本语法学完了,感觉还是收益颇丰的.但是其中的知识远远不止这些,以后学习的过程中在进行补充吧. HTML,CSS学习笔记 ...
- Admin.NET管理系统(vue3等前后端分离)学习笔记--持续更新
我的学习笔记 - 9iAdmin.NET 欢迎学习交流 (一)前端笔记 1.1 关于.env的设置 1.2 关于路由模式问题 1.3 关于 vue.config.ts 1.4 关于 打包(pnpm r ...
- JS逆向学习笔记 - 持续更新中
JS逆向学习笔记 寻找深圳爬虫工作,微信:cjh-18888 文章目录 JS逆向学习笔记 一. JS Hook 1. JS HOOK 原理和作用 原理:替换原来的方法. (好像写了句废话) 作用: 可 ...
- 专升本 计算机 公共课学习笔记(持续更新中...)
计算机公共课学习笔记 第一章 计算机基础知识(30分) 1.计算机概述 计算机(Computer)的起源与发展 计算机(Computer)也称"电脑",是一种具有计算功能.记忆功能 ...
- typescript-----javascript的超集,typescript学习笔记持续更新中......
Typescript,冲! Typescript 不是一门全新的语言,Typescript是 JavaScript 的超集,它对 JavaScript进行了一些规范和补充.使代码更加严谨. 一个特别好 ...
- html,CSS,JavaScript学习笔记
<html> <head><title>练习1.1</title> </head> <body><p align='cen ...
- html5+CSS+JavaScript学习笔记(小甲鱼)
第一个程序 <!DOCTYPE html> <html><head><title>第一个程序</title></head> &l ...
最新文章
- linux gcc安装
- 观点 | 通往通用人工智能的路上,我们少不了无监督学习
- Sql Server系列:触发器
- matlab频分复用,基于MATLAB的频分复用系统的仿真_.doc
- arm-linux-gcc 裸机程序,Linux下ARM裸机开发-交叉工具链
- [渝粤教育] 西南科技大学 数据库应用 在线考试复习资料(5)
- 使用java发送邮件(支持多人)
- 太完整了!塞班java软件下载
- 计算机工程与应用出版时间,计算机工程与应用
- c#谷歌 json转对象_利用Google Gson实现JSON字符串和对象之间相互转换
- Java 生成二维码 zxing生成二维码 条形码 服务端生成二维码 Java生成条形码
- mit app中计算器制作程序_“个税APP”,防不胜防啊
- OSChina 周二乱弹 —— 老司机表示右手无处安放
- 代码整洁之道-读书笔记之整洁的代码
- shiro实现APP、web统一登录认证和权限管理
- python保留四位小数_保留四位有效数字python
- 医疗仪器中几种常用图形系统
- ur3+robotiq ft sensor+robotiq 2f 140配置rviz仿真环境
- 如何让电脑快速关机?
- 春天来了......