HTML计算机代码
HTML键盘格式
kbd元素定义键盘输入
打开一个文件，选择
File |Open...
HTML样本格式
HTML元素定义计算机输出示例：
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
HTML代码格式
HTML 元素定义编程代码示例:
var person = { firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue" }
注：code元素不保留多余的空行和折行;
如需解决该问题，必须在
元素中包围代码。
HTML变量格式化
HTML元素定义数学变量
Einstein wrote:
E = m c2
HTML CSS
如何使用样式
当浏览器读到一个样式表，它就会按照这个样式来对文档进行格式化。有以下三种方式：
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。
以下实例以下实例显示出如何改变段落的颜色和左外边距：
This is a paragraph
HTML链接
我们通过使用标签创建链接：
1.通过使用href属性-创建指向另一个文档的链接
2.通过使用name属性-创建文档内的书签
HTML链接语法
实例
HTMl链接-target属性
使用target属性，你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档：
HTMl链接-name属性
name 属性规定锚（anchor）的名称。
可以使用name属性创建HTML页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳到该命明锚的链接。
命明锚的语法
实例
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
然后，我们在同一个文档中创建指向该锚的链接：
您也可以在其他页面中创建指向该锚的链接：
在上面的代码中，我们将#符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
HTML图像
图像标签（![]()
）和源属性（Src）
在HTML中，图像由![]()
标签定义。
![]()
是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。指“source”。源属性的值是图像的URL地址。
定义图像的语法是：
URL指存储图片的位置。
实例
替换文本属性（Alt）
alt 属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的。
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
实例
HTML表格
表格
表格由
标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由
标签定义）。字母td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
row 1,cell 1 row 1,cell 2 row 2,cell 1 row 2,cell 2
在浏览器显示：
表格和边框属性
如果不定义边框属性，表格将不显示边框。
使用边框属性来显示一个带有边框的表格：
Row 1, cell 1 Row 1, cell 2
表格的表头
表格的表头使用
标签进行定义。
大多数浏览器会把标头显示为粗体居中的文本：
Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
浏览器显示：
表格中的空单元格
如果某个表单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。
在空单元格中添加一个空格占位符 加；，就可以将边框显示出来。
row 1, cell 1 row 1, cell 2 row 2, cell 2
显示：
HTML列表
无序列表
无序标签始于
标签。
每个列表项始于- 。
一个无序列表：
- 咖啡
- 茶
- 牛奶
显示：
有序列表
有序列表始于
标签。
每个列表项始于- 标签。
定义列表
自定义列表不仅仅是一个项目，而是项目及其注释的组合。
自定义列表以
标签开始；
每个自定义列表项以- 开始；
每个自定义列表项的定义以 - 开始。
HTML块
可以通过
和将HTML元素组合起来。
HTML块元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：
,
,
,HTML内联元素
内联元素在显示时通常不会以新行开始。
例子:,
,,![]()
HTML元素
div是块级元素，是可用于组合其他HTML元素的容器。
定义文档中的分区或节。
HTML元素
span是内联元素，可用作文本的容器。
用来组合文档中的行内元素。
HTML类
对HTML进行分类，使我们能够为元素的类定义CSS样式。
HTML布局
使用元素的HTML布局
div元素常用作布局工具，因此能够轻松地通过CSS对其进行定位。
City Gallery
London
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.
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.
结果：
CSS
HTML响应式Web设计
什么是响应式Web设计？
- RWD指的是响应式Web设计（Responsive Web Design）
- RWD能够以可变尺寸传递网页
- RWD对于平板和移动设备是必须的
HTML框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
框架结构标签
- 定义如何将窗口分割成框架
- 每个frameset定义了一系列行或列
- rows/columns的值规定了每行或每列占据屏幕的面积
框架标签（Frame）
Frame标签定义了放置在每个框架中的HTML文档。
实例：垂直框架
<
水平框架
注意：1. 不能将标签与标签同时使用！
2.假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况，可以在标签中加入：noresize="noresize".
HTML内联框架
iframe语法
iframe定义内联的子窗口（框架）；
URL指向隔离页面的位置。
iframe-设置高度和宽度
height和width属性规定iframe的高度和宽度。
属性值的默认单位是像素，但也可以用百分比来设定（比如“80%”）
iframe-删除边框
frameborder属性规定是否显示iframe周围的边框。
设置属性值为“0”就可以移除边框；
使用iframe作为链接的目标
iframe可用作链接的目标（target）。
链接的target属性必须引用iframe的name属性：
HTML背景
背景颜色（bgcolor)
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB值或颜色名。
以上的代码均将背景颜色设置为黑色。
背景（background)
拥有两个配置背景的标签。背景可以是颜色或者图像。
背景属性将背景设置为图像。 属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。
注意
标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。
应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。
HTML脚本
JavaScript使HTML页面具有更强的动态和交互性。
HTML script元素
HTML头部元素
元素
元素是所有头部元素的容器。
内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到head部分：
、<base> <link> <meta> <script> <style>.</p>
<h4><title>元素</h4>
<blockquote>
<p><!DOCTYPE html><br> <html><br> <head><br> <title>Title of the document
The content of the document......
为页面上的所有链接规定默认地址或默认目标（target）：
元素
标签定义文档与外部资源之间的关系，最常用于连接样式表：
元素
元数据（metadata）是关于数据的信息。
标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
定义页面的描述：
定义页面的关键词：
HTML头部元素
标签
描述
定义关于文档的信息
</td>
<td>定义文档标题</td>
</tr>
<tr>
<td><base></td>
<td>定义页面上所有链接的默认地址或默认目标</td>
</tr>
<tr>
<td><link></td>
<td>定义文档与外部资源之间的关系</td>
</tr>
<tr>
<td><meta></td>
<td>定义关于HTML文档的元数据</td>
</tr>
<tr>
<td><script></td>
<td>定义客户端脚本</td>
</tr>
<tr>
<td><style></td>
<td>定义文档的样式信息</td>
</tr>
</tbody>
</table>
<h3>HTML速查手册</h3>
<h4>HTML基本文档</h4>
<blockquote>
<p><!DOCTYPE html><br> <html><br> <head><br> <title>文档标题
可见文本
HTML基本标签
最大的标题
. . .
. . .
. . .
. . .
最小的标题
这是一个段落。
< br> （换行）
< hr> （水平线）
< !-- 这是注释 -->
HTML文本格式化
粗体文本
计算机代码
强调文本
斜体文本
键盘输入
预格式化文本
更小的文本
重要的文本
（缩写）
（联系信息）
（文字方向）
（从另一个源引用的部分）
（工作的名称）
（删除的文本）
（插入的文本）
< sub> （下标文本）
< sup> （上标文本）
HTML链接
图片
样式/区块
文档中的块级元素
文档中的内联元素
无序列表
- 项目
- 项目
有序列表
- 第一项
- 第二项
定义列表
- 项目 1
- 描述项目 1
- 项目 2
- 描述项目 2
表格
表格标题 表格标题 表格数据 表格数据
框架
你可能感兴趣的:(HTML笔记二)
