HTML笔记【2】

最新推荐文章于 2022-09-08 22:54:28 发布

Belores

最新推荐文章于 2022-09-08 22:54:28 发布

阅读量500

点赞数

分类专栏： HTML笔记

本文链接：https://blog.csdn.net/u013032340/article/details/53786916

版权

HTML笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML <q> 用于短的引用

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

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

用于长引用的 HTML <blockquote>

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

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

<p>以下内容引用自 WWF 的网站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

用于缩略词的 HTML <abbr>

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

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

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

用于联系信息 HTML <address>

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

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

<address>
Written by Donald Duck.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

用于双向重写的 HTML <bdo>

HTML <bdo> 元素定义双流向覆盖

<bdo> 元素用于覆盖当前文本方向：

<bdo dir="rtl">This text will be written from right to left</bdo>

HTML 代码格式

<code> 元素不保留多于的空格和折行

HTML <code> 元素定义编程代码示例：

<p>Coding Example:</p>

<code>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</code>

如需解决该问题，您必须在<pre>元素中

<p>Coding Example:</p>

<code>
<pre>
var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>

HTML 条件注释

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

条件注释定义只有 Internet Explorer 执行的 HTML 标签。

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>

——————————————————————————————————

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

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

——————————————————————————————————

HTML 链接 - target 属性

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

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

<a href="http://www.baidu.com/" target="_blank"> 百度 </a>

HTML 链接 - name属性

H5已经不支持了。

——————————————————————————

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

——————————————————————————

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

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

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

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

定义图像的语法是：

<img src="url" />

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

替换文本属性（Alt）

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

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

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

<img> 定义图像

<map> 定义图像地图

<area> 定义图像地图中的点击区域。

——————————————————————————

你可以使用 HTML 创建表格

——————————————————————————

表格

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

<table border="1">
<tr>
<td>1行1列</td>
<td>1行2列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
</tr>
</table>

在浏览器显示如下：

1行1列 1行2列

2行1列 2行2列

表格和边框属性

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

表格的表头

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

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

<h4>表头：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th>电话</th>
  <th>电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直的表头：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 855</td>
</tr>
</table>





在浏览器显示如下：

表头：

姓名	电话	电话
Bill Gates	555 77 854	555 77 855

垂直的表头：

姓名	Bill Gates
电话	555 77 854
电话	555 77 855

表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

<table border="1">
<tr>
<td>1行1列</td>
<td>1行2列</td>
</tr>
<tr>
<td></td>
<td>2行2列</td>
</tr>
</table>

浏览器可能会这样显示：
表格中的空单元格

注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<table border="1">
<tr>
  <td>Some text</td>
  <td>Some text</td>
</tr>
<tr>
  <td></td>
  <td>Some text</td>
</tr>
</table>

浏览器中显示如下：

Some text	Some text
	Some text

——————————————————————————

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

——————————————————————————

无序列表

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

无序列表始于<ul>标签。每个列表项始于<li>。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下：

Coffee
Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表

有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于<ol>标签。每个列表项始于<li>标签。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器显示如下：

1.Coffee

2.Milk

列表项内部可以使用段落、换行符、图片、链接以及替他列表等等。

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

结果如下：

计算机

用来计算的仪器 ... ...

显示器

以视觉方式显示信息的装置 ... ...

不同类型的 无序列表

<h4>Disc 项目符号列表：</h4>
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
</ul>  

<h4>Circle 项目符号列表：</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
</ul>  

<h4>Square 项目符号列表：</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
</ul>

结果如下：

Disc 项目符号列表：

苹果
香蕉

Circle 项目符号列表：

苹果
香蕉

Square 项目符号列表：

苹果
香蕉

不同类型的 有序列表

<h4>数字列表：</h4>
<ol>
 <li>苹果</li>
 <li>香蕉</li>
</ol>  

<h4>字母列表：</h4>
<ol type="A">
 <li>苹果</li>
 <li>香蕉</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>苹果</li>
 <li>香蕉</li>
</ol>  

<h4>罗马字母列表：</h4>
<ol type="I">
 <li>苹果</li>
 <li>香蕉</li>
</ol>  

<h4>小写罗马字母列表：</h4>
<ol type="i">
 <li>苹果</li>
 <li>香蕉</li>
</ol>

结果如下：

数字列表：

苹果
香蕉

字母列表：

苹果
香蕉

小写字母列表：

苹果
香蕉

罗马字母列表：

苹果
香蕉

小写罗马字母列表：

苹果
香蕉

——————————————————————————

可以通过<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> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器在其前后显示折行。

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

HTML <span> 元素

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

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

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

——————————————————————————

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

——————————————————————————

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

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

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

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

定义图像的语法是：

<img src="url" />

Belores

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML笔记【2】

HTML 用于短的引用浏览器通常会为元素包围引号。WWF 的目标是：构建人与自然和谐共存的世界。用于长引用的 HTML HMTL 元素定义被引用的节。浏览器通常会对元素进行缩进处理。以下内容引用自 WWF 的网站：五十年来，WWF 一直致力于保护自然界的未来。世界领先的环保组织，WWF 工作于 100 个国家，并得到美国一百二十万会
复制链接

扫一扫

专栏目录