小白的HTML笔记

浏览数：23 / 时间：2015年06月09日

元素

<p>段落

<a href="default.htm">链接

<br/>换行

属性

例如上面的链接地址就在href中指定

<h1>定义标题开始

<h1 align="center">拥有关于对齐方式的附加信息

<body>定义HTML文档的主题

<body bgcolor="yellow">拥有关于背景颜色的附加信息

<table>定义HTML表格

<table border="1">拥有关于表格边框的附加信息

属性、属性值和元素对大小写不敏感，推荐使用小写

标题

<h1>是最大的标题<h6>是最小的标题

搜索引擎使用标题为网页结构和内容编制索引，因此用标题来呈现文档结构是很重要的

水平线<hr>标签在HTML页面中创建水平线

注释

查看源代码 只需要右键，查看源代码

HTML 输出 - 有用的提示

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

文本格式化专题

1）<b> bold粗体的意思

2）<strong>加粗，用法和bold用法相似

3）<em>强调，斜体

4）<i>italic斜体

5）<big>大一号

6）<pre>预格式文本，可以保留空格和换行

用于显示计算机/编程代码的标签

<code>computer code

<kbd>keyboard input

<tt>teletype text

<sample>Sample text

<var>computer variable

<addresss>在HTML文件中写地址

在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本

<abbr title="etcetera">etc.<abbr/>该代码可以用于表达title的完整版本

上面的用法和效果与<acronym>和abbr相同

改变文字方向

内容

<bdo/>

其中“trl”的作用应该是使文字从右向左输出

引用

长引用<blockquote>浏览器会插入换行和外边距，而<q>(短引用）元素不会有任何特殊的呈现

删除和下划线

删除<del>内容<del/>,下划线<ins>

文本格式化标签

标签描述

<b> 定义粗体文本。

<big> 定义大号字。

<em> 定义着重文字。

<i> 定义斜体字。

<small> 定义小号字。

<strong> 定义加重语气。

<sub> 定义下标字。

<sup> 定义上标字。

<ins> 定义插入字。

<del> 定义删除字。

<s> 不赞成使用。使用 <del> 代替。

<strike> 不赞成使用。使用 <del> 代替。

<u> 不赞成使用。使用样式（style）代替。

“计算机输出”标签

标签描述

<code> 定义计算机代码。

<kbd> 定义键盘码。

<samp> 定义计算机代码样本。

<tt> 定义打字机代码。

<var> 定义变量。

<pre> 定义预格式文本。

<listing> 不赞成使用。使用 <pre> 代替。

<plaintext> 不赞成使用。使用 <pre> 代替。

<xmp> 不赞成使用。使用 <pre> 代替。

引用、引用和术语定义

标签描述

<abbr> 定义缩写。

<acronym> 定义首字母缩写。

<address> 定义地址。

<bdo> 定义文字方向。

<blockquote> 定义长的引用。

<q> 定义短的引用语。

<cite> 定义引用、引证。

<dfn> 定义一个定义项目。

HTML编辑器

专业的HTML编辑器

Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor

也可以选择使用PC自带的记事本工具

编写完毕之后将文件拓展名改成.html或者.htm

HTML样式

1.通过添加到<head>部分的样式信息对HTML进行格式化

连接到外部样式表
技术分享

没有下划线的链接

、

HTML链接

1.创建超链接

站内链接

<a href="/index.html">内容</a>

站外链接

<a href="http://www.baidu.com/">

2.创建超链接

<a href:“www.baidu.com”><img border="0" src="这里输入图片的引用地址">

</a>\

3.HTML链接-target属性

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

使用target属性，可以定义被连接的文档在何处显示，而例子中的target="_blank"会在新窗口打开文档

4. name属性

因此name属性的作用是设置标签，至于标签的使用就要用到#

___________________________________________________________________________________________________________________________________

插入图像

1.举例

<p>

<img src="图片地址" width="128" height="128"/>

</p>

2.定义图像的语法是

<img src:"url"/> 注：URL（uniform resource locator），统一资源定位器，是www页的地址

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

替换文本属性(图片的替代品)

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

例如

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

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

如何向HTML页面添加背景图片

排列图片