HTML笔记二

HTML计算机代码

HTML键盘格式

kbd元素定义键盘输入

<p>打开一个文件，选择</p>
<p><kbd>File |Open...</kbd></p>

HTML样本格式

HTML<samp>元素定义计算机输出示例：

<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>

HTML代码格式

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

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

注：code元素不保留多余的空行和折行;
如需解决该问题，必须在<pre>元素中包围代码。

HTML变量格式化

HTML<var>元素定义数学变量

<p>Einstein wrote:</p>
<p><var>E = m c2</var></p>

HTML CSS

如何使用样式

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

外部样式表

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

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


内部样式表

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

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


内联样式

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

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

HTML链接

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

HTML链接语法

<a href="url">Link text</a>

实例

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


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>

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

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

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

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

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

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

在上面的代码中，我们将#符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

HTML图像

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

在HTML中，图像由<img>标签定义。
<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。指“source”。源属性的值是图像的URL地址。
定义图像的语法是：

<img src="url"/>

URL指存储图片的位置。
实例

替换文本属性（Alt）

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

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

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。

实例

HTML表格

表格

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

<table >
<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>

在浏览器显示：


表格和边框属性

如果不定义边框属性，表格将不显示边框。
使用边框属性来显示一个带有边框的表格：

<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加；，就可以将边框显示出来。

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

显示：


HTML列表

无序列表

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

<html>
<body>
<h4>一个无序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>

显示：


有序列表

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


定义列表

自定义列表不仅仅是一个项目，而是项目及其注释的组合。
自定义列表以<dl>标签开始；
每个自定义列表项以<dt>开始；
每个自定义列表项的定义以<dd>开始。


HTML块

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

HTML块元素

块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>,<p>,<ul>,<table>

HTML内联元素

内联元素在显示时通常不会以新行开始。
例子:<b>,<td>,<a>,<img>

HTML<div>元素

div是块级元素，是可用于组合其他HTML元素的容器。
定义文档中的分区或节。

HTML<span>元素

span是内联元素，可用作文本的容器。
用来组合文档中的行内元素。

HTML类

对HTML进行分类，使我们能够为元素的类定义CSS样式。

HTML布局

使用<div>元素的HTML布局

div元素常用作布局工具，因此能够轻松地通过CSS对其进行定位。

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London

Paris

Tokyo

</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright W3School.com.cn
</div>
</body>

结果：


CSS

HTML响应式Web设计

什么是响应式Web设计？

  • RWD指的是响应式Web设计（Responsive Web Design）
  • RWD能够以可变尺寸传递网页
  • RWD对于平板和移动设备是必须的

HTML框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

框架结构标签<frameset>

  • <frameset>定义如何将窗口分割成框架
  • 每个frameset定义了一系列行或列
  • rows/columns的值规定了每行或每列占据屏幕的面积

框架标签（Frame）

Frame标签定义了放置在每个框架中的HTML文档。
实例：垂直框架

<<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>

水平框架

<html>
<frameset rows="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>

注意：1. 不能将<body></body>标签与<frameset></frameset>标签同时使用！
2.假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况，可以在<frame>标签中加入：noresize="noresize".

HTML内联框架

iframe语法

<iframe src="URL"></iframe>

iframe定义内联的子窗口（框架）；
URL指向隔离页面的位置。

iframe-设置高度和宽度

height和width属性规定iframe的高度和宽度。
属性值的默认单位是像素，但也可以用百分比来设定（比如“80%”）

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

iframe-删除边框

frameborder属性规定是否显示iframe周围的边框。
设置属性值为“0”就可以移除边框；

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用iframe作为链接的目标

iframe可用作链接的目标（target）。
链接的target属性必须引用iframe的name属性：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

HTML背景

背景颜色（bgcolor)

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB值或颜色名。

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">

<body bgcolor="black">

以上的代码均将背景颜色设置为黑色。

背景（background)

<body>拥有两个配置背景的标签。背景可以是颜色或者图像。
背景属性将背景设置为图像。 属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。

注意

<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。
应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

HTML脚本

JavaScript使HTML页面具有更强的动态和交互性。

HTML script元素

<script>标签用于定义客户端脚本，比如JavaScript。
script元素即可包含脚本语句，也可通过src属性指向哇哦不脚本文件。
必须的type属性规定脚本的MIME类型。
JavaScript最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出“helloworld"

<script type="text/javascript">
document.write("Hello World!")
</script>

<noscript>标签

<noscript>标签提供无法使用脚本时的替代内容。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

HTML头部元素

<head>元素

<head>元素是所有头部元素的容器。
<head>内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到head部分：<title>、<base> <link> <meta> <script> <style>.

<title>元素

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>


<base>元素

为页面上的所有链接规定默认地址或默认目标（target）：

<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>

<link>元素

<link>标签定义文档与外部资源之间的关系，最常用于连接样式表：

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

<style>元素

为HTML文档定义样式信息
可以在style元素内规定HTML元素在浏览器中呈现的样式：

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

<meta>元素

元数据（metadata）是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

定义页面的描述：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

定义页面的关键词：
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

HTML头部元素

标签 描述
<head> 定义关于文档的信息
<title> 定义文档标题
<base> 定义页面上所有链接的默认地址或默认目标
<link> 定义文档与外部资源之间的关系
<meta> 定义关于HTML文档的元数据
<script> 定义客户端脚本
<style> 定义文档的样式信息

HTML速查手册

HTML基本文档

<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
可见文本
</body>
</html>

HTML基本标签

<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>

<p>这是一个段落。</p>
< br> （换行）
< hr> （水平线）
< !-- 这是注释 -->

HTML文本格式化

<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>

<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
< sub> （下标文本）
< sup> （上标文本）

HTML链接

普通的链接：<a href="https://liuying0111.github.io/">小可爱</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

图片

<img src="URL" alt="替换文本" height="42" width="42">

样式/区块

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

无序列表

<ul>
<li>项目</li>
<li>项目</li>
</ul>

有序列表

<ol>
<li>第一项</li>
<li>第二项</li>
</ol>

定义列表

<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>

表格

<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>

框架

<iframe src="demo_iframe.htm"></iframe>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,444评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,421评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,036评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,363评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,460评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,502评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,511评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,280评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,736评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1赞 342
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,848评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,531评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2赞 352

推荐阅读更多精彩内容

  • 网络技术与应用
    HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的，因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,875评论 0赞 0
  • HTML标签
    HTML标签解释大全 一、HTML标记 标签：!DOCTYPE 说明：指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,236评论 1赞 41
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,747评论 1赞 92
  • HTML笔记 2.CSS
    CSS（层叠样式表）作用：规定HTML文档的呈现形式（外观和格式编排）。 CSS 是在HTML 4开始使用的,是为...
    独木舟的木阅读 596评论 1赞 0
  • web学习之html基础（一）
    前言 本系列文章主要是基于W3school这个学习网站来总结的，之所以会自己总结一番，一来是因为网站中的实例效果，...
    AR7_阅读 4,049评论 4赞 70