HTML/CSS/JavaScript学习笔记【持续更新】

简介: HTML 标签 定义和用法 规定文本的字体、字体尺寸、字体颜色。 实例 规定文本字体、大小和颜色: 1 This is some text! 2 This is some text! 3 This is some text! HTML 与 XHTML 之间的差异 在 HTML 4.01 中,font 元素不被赞成使用。

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 元素应该与 theadtfoot 元素结合起来使用。

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 属性。

演示效果

 

 

 

目录
相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
23天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
23天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
14天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
14天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
61 1
|
19天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
33 3
|
22天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
35 4
|
23天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
21天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
49 0
html5+three.js公路开车小游戏源码