WEB前端学习笔记-HTML(中)

最新推荐文章于 2022-09-19 17:03:16 发布

w343516704

最新推荐文章于 2022-09-19 17:03:16 发布

阅读量1k

点赞数

分类专栏： web前端文章标签： web前端 css html

本文链接：https://blog.csdn.net/w343516704/article/details/73467039

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML 样式

style 属性用于改变 HTML 元素的样式。

HTML 的 style 属性

style 属性的作用：

提供了一种改变所有 HTML 元素的样式的通用方法。

样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

由于HTML前期版本的混乱，在CSS出现之后，一些属性或标签在HTML未来的版本中被标记为废弃的，这些被废弃的属性和标签相应的实现的功能都应该由CSS来实现。

例如：style 属性淘汰了“旧的” bgcolor 属性（对应css的background-color）；style 属性淘汰了旧的 <font>标签(对应CSS的font-family);style 属性淘汰了旧的 “align” 属性（对应CSS的text-align）。

HTML 文本格式化

以下实例表示HTML的文本格式化：

<b>: 定义粗体文本。
<big>: 定义大号字。
<em>: 定义着重文字。
<i>: 定义斜体字。
<small>: 定义小号字。
<strong>: 定义加重语气。
<sub>:_{定义下标字。
<sup>:^{定义上标字。
<ins>:}} 定义插入字。
<del>: ~~定义删除字。~~

“计算机输出”标签

<code>定义计算机代码。 <kbd>: 定义键盘码。

<tt>:定义打字机代码。

<samp>:定义计算机代码样本。 <var>: 定义变量。

 定义预格式文本。

HTML 引用

HTML<q> 用于短的引用

HTML <q> 元素定义短的引用。

浏览器通常会为 <q>元素包围引号。

<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>

会为<q>周围用引号

用于长引用的 HTML<blockquote>

HTML<blockquote>元素定义被引用的节。

浏览器通常会对<blockquote> 元素进行缩进处理。

用于缩略词的 HTML <abbr>

HTML<abbr>元素定义缩写或首字母缩略语。

对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

用于定义的 HTML <dfn>

HTML<dfn>元素定义项目或缩写的定义。

<dfn> 的用法，按照 HTML5 标准中的描述，有点复杂：

如果设置了 <dfn>元素的 title 属性，则定义项目：

<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>

如果 <dfn> 元素包含具有标题的元素，则 title 定义项目：

<p><dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于 1948 年。</p>

否则，<dfn> 文本内容即是项目，并且父元素包含定义。

<p><dfn>WHO</dfn> World Health Organization 成立于 1948 年。</p>

用于联系信息的 HTML <address>

HTML <address>元素定义文档或文章的联系信息（作者/拥有者）。

此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

用于著作标题的 HTML<cite>

HTML <cite> 元素定义著作的标题。

浏览器通常会以斜体显示 <cite>元素。

用于双向重写的 HTML <bdo>

HTML <bdo> 元素定义双流向覆盖（bi-directional override）。

<bdo>元素用于覆盖当前文本方向：ltr或者rtl（就是left to right或者right to left）

HTML 计算机代码元素

HTML 计算机代码格式

通常，HTML 使用可变的字母尺寸，以及可变的字母间距。

在显示计算机代码示例时，并不需要如此。

<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和间距。

<kbd>:表示计算机键盘输出
<samp>:表示计算机输出示例
<code>：编程的代码示例，该元素不保留多余的空格和拆行，，您必须在 pre 元素中包围代码

HTML CSS

通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。

如何使用样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

①外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

②内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过<style>标签定义内部样式表。

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

③内联央样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

可以看出css的样式之间要用分号隔开。

<style>: 定义样式定义。
<link> :定义资源引用。
<div>:定义文档中的节或区域（块级）。
<span>: 定义文档中的行内的小块或区域。
<font>: 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
<basefont>:定义基准字体。不赞成使用。请使用样式。
<center>:对文本进行水平居中。不赞成使用。请使用样式。

也就是说，在CSS提倡使用style（内联）、link（外联）、div（块级的样式）、span（行内级别的样式）来对HTML文档的渲染外观进行定制。

HTML 链接

HTML 使用超级链接与网络上的另一个文档相连。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
HTML 超链接（链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用<a>标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式：
1.通过使用 href 属性 - 创建指向另一个文档的链接
2.通过使用name属性 - 创建文档内的书签

HTML 链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

HTML 链接 - name 属性

name 属性规定锚（anchor）的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

<a name="label">锚（显示在页面上的文本）</a>

提示：锚的名称可以是任何你喜欢的名字。

提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效。

示例：
①首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

②然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

您也可以在其他页面中创建指向该锚的链接：

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

总体来说，使用锚的过程就是第一，创建锚（用name），第二，指向锚（用#）。

HTML 图像

通过使用 HTML，可以在文档中显示图像。

图像标签（<img>）和源属性（Src）

在 HTML 中，图像由 <img> 标签定义。

<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" />

URL 指存储图像的位置。如果名为 “boat.gif” 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

基本的注意事项 - 有用的提示：

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以建议是：慎用图片。

HTML 表格

你可以使用 HTML 创建表格。

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

表格的表头

表格的表头使用<th>标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

表格中的空单元格

浏览器的不同，空单元格的显示可能会有错误，那么，可以用&nbsp；占位符来填充一个空的表格。
这里写图片描述

HTML 列表

HTML 支持有序、无序和定义列表无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <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>

这里写图片描述

HTML`<div>` 和`<span>`

可以通过<div>和 <span> 将 HTML 元素组合起来。

HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。

编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

HTML <div>元素

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。

HTML <span> 元素

HTML<span> 元素是内联元素，可用作文本的容器。

<span>元素也没有特定的含义。

当与 CSS 一同使用时，<span>元素可用于为部分文本设置样式属性。

w343516704

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
WEB前端学习笔记-HTML(中)

HTML 样式style 属性用于改变 HTML 元素的样式。HTML 的 style 属性style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。由于HTML前期
复制链接

扫一扫