W3C HTML学习笔记(二)

HTML引用

  • <q> 元素定义短的引用,浏览器通常会为 <q> 元素包围引号。
  • <blockquote> 元素定义被引用的节,浏览器通常会对 <blockquote> 元素进行缩进处理。
  • <abbr>元素定义缩写或首字母缩略语。对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
  • <dfn>元素定义项目或缩写的定义。如果希望简而化之,请设置 <dfn>元素的 title属性或使用 <abbr>代替。
  • <address> 元素定义文档或文章的联系信息(作者/拥有者)。
    此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。
  • <cite>元素定义著作的标题。浏览器通常会以斜体显示 <cite> 元素。
  • <bdo>元素定义双流向覆盖(bi-directional override)。

<bdo> 元素定义文本方向,用于覆盖当前文本方向:

<bdo dir="rtl">My Bolg</bdo>

gloB yM

HTML链接

HTML使用标签<a>来设置超文本链接,使用超级链接与网络上的另一个文档相连。

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线。
  • 访问过的链接显示为紫色并带有下划线。
  • 点击链接时,链接显示为红色并带有下划线。
  • 当把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

有两种使用 <a> 标签的方式:

  1. 通过使用 href 属性(规定链接的目标)- 创建指向另一个文档的链接。
  2. 通过使用 name 属性(规定锚(anchor)的名称)- 创建文档内的书签。

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

  1. 请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.runoob.com/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.runoob.com/html/"
  2. 也可以使用 id 属性来替代 name 属性,命名锚同样有效。
    命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚,然后把链接到这些锚的链接放到文档的上部。
  3. 假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。

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

_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标_self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

提示:这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略,因此,不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

使用a链接发送邮件:

<p>
这是一个电子邮件链接:
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>

<p>
<b>注意:</b> 单词直接空格使用 %20 代替,以确保浏览器可以正常显示文本。
</p>

HTML头部

HTML <head>元素

  • <head>元素是所有头部元素的容器。
  • <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta元信息。
  • 以下标签都可以添加到 head 部分:<title><base><link><meta><script> 以及 <style>

HTML<title> 元素

  • <title>标签定义文档的标题。
  • <title>元素在所有 HTML/XHTML 文档中都是必需的。
  • <title> 元素能够:

1.定义浏览器工具栏中的标题
2.提供页面被添加到收藏夹时显示的标题
3.显示在搜索引擎结果中的页面标题

HTML<base> 元素

  • <base>标签为页面上的所有链接规定默认地址或默认目标(target):
<head>
<base href="http://www.xxxx.com/images/" target="_blank">
</head>

HTML<link> 元素

  • <link>标签定义了文档与外部资源之间的关系。
  • <link>标签通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML<style> 元素

  • <style> 标签用于为 HTML 文档定义样式信息。
  • 可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式:
<head>
<style type="text/css">
body {background-color:red}
p {color:blue}
</style>
</head>

HTML <meta>元素

  • 元数据(metadata)是关于数据的信息。
  • <meta>标签提供关于 HTML 文档的元数据,元数据不会显示在页面上,但会被浏览器解析。
  • 元素通常用于指定网页的描述,关键词,文档的作者、最后修改时间和其他元数据。
  • <meta>标签始终位于 head 元素中。
  • 元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
<meta> 标签- 使用实例

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面,name 和 content 属性的作用是描述页面的内容。

为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒中刷新当前页面:
<meta http-equiv="refresh" content="30">

HTML<script> 元素

  • <script> 标签用于定义客户端脚本,比如 JavaScript。

HTML 图像

图像标签(<img />)和源属性(Src)

<img /> 是空标签,意思是说,它只包含属性,并且没有闭合标签。
定义图像的语法是:![](url)

  • 要在页面上显示图像,需要使用源属性src ("source")来指明图像的 URL 地址。
  • 加载页面时,如果页面的图像路径没有被正确设置,浏览器则无法加载图片,图像标签就会显示一个破碎的图片。

替换文本属性(Alt)

alt 属性用来为图像定义一串预备的可替换的文本,替换文本属性的值是用户自定义的。
![](rose.jpg)

  • 在浏览器无法载入图像时,替换文本属性告诉读者他们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。
  • 为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
  • 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。

创建图片映射笔记:
<img>定义图像,<map>定义图像地图,<area>定义图像地图中的可点击区域

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

该段代码中的shape指的是点击区域的形状,coords指的应该是链接区域在图片中的坐标(像素为单位)。
1、距形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>

2、圆形:(圆心坐标为(X1,y1),半径为r)
<area shape="circle" coords="x1,y1,r" href=url>

3、多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

HTML表格

表格由<table> 标签来定义。每个表格均有若干行(由 <tr>标签定义),每行被分割为若干单元格(由 <td>标签定义)。

  • 字母td指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
  • 如果不定义边框属性,表格默认将不显示边框。有时这很有用,但是大多数时候,我们使用border属性来显示边框。
  • 表格的标题使用 <caption> 标签进行定义,位于<table>开始标签与<tr><thead>标签之间。
  • 表格的表头使用 <th> 标签进行定义,大多数浏览器会把表头显示为粗体居中的文本。
  • 在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。
  • 横向跨列属性:colspan 纵向跨行属性:rowspan 如果是又横向又纵向的合并,这个时候同时标示colspanrowspan(空格隔开)。合并后的单元格归属原则都是左上原则,即下归上,右归左,越往左上角越优先。
  • 单元格边距(Cell padding), 用来创建单元格内容与其边框之间的空白。
  • 单元格边距(Cell spacing), 用来增加单元格之间的距离。

HTML列表

HTML 支持有序、无序和自定义列表,三种列表项内部都可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表

  • 有序列表是一列项目,列表项目默认使用数字进行标记。
  • 有序列表始于 <ol> 标签。每个列表项始于 <li>标签。
  • 有序列表可根据<ol>type属性的值为A、 a、 I、 i 来分别使用大写字母,小写字母,大写罗马字母,小写罗马字母来标记列表项目。

无序列表

  • 无序列表也是一个项目的列表,默认使用粗体圆点(典型的小黑圆圈)进行标记。
  • 无序列表始于<ul> 标签。每个列表项始于<li>标签。
  • 无序列表可根据<ul>type属性的值为disc、 circle、 square 来分别使用实心小黑圆圈(默认),空心小黑圆圈,实心小黑方块来标记列表项目。

定义列表

  • 自定义列表不仅仅是一列项目,而是项目及其注释的组合。
  • 自定义列表以 <dl>标签开始,每个自定义列表项以<dt>开始,每个自定义列表项的定义以 <dd> 开始。
<dl> //自定义列表
<dt>Coffee</dt>  //列表项
<dd>- black hot drink</dd>  //列表项的注释
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,224评论 1 41
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,596评论 18 139
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,512评论 32 459
  • How ‘Intellectual Humility’ Can Make You a Better Person ...
    JSTiger阅读 820评论 0 0