教程 HTML 指的是超文本标记语言 (Hyper Text Markup Language)、使用标记标签来描述网页
HTML 提示:使用小写标签属性属性参考手册HTML颜色HTML颜色名
h1:大标题 / <h1> - <h6>
p:文本段落
a:链接(可以是本地网页也可以是互联网上的页面) / <a href="。。。">。。。</a>
*没有下划线的链接 <a href="。。。" style="text-decoration:none">。。。</a>
*新窗口打开链接(target属性): <a href="。。。" target="_blank">。。。</a>
*锚点(name属性):
<p><a href="#C4">查看 Chapter 4。</a></p>
。。。。
<h2><a name="C4">Chapter 4</a></h2>
*电子邮件链接:(要先有邮箱客户端)略
img:图像 /<img src="。。。" width=X height=Y />
注释:<!-- 。。。 -->
pre:标签很适合显示计算机代码
address:在HTML中写地址
del:删除文本 /Jenny
ins:插入文本 /Hui
<br /> 就是没有关闭标签的空元素(<br。。。/> 标签定义换行)。
<hr /> 标签在 HTML 页面中创建水平线。 /hr 元素可用于分隔内容。
实现缩写或首字母缩写:
<abbr title="etcetera">etc.</abbr>
<acronym title="World Wide Web">WWW</acronym>
改变文字的方向:
·<bdo dir="rtl">。。。</bdo>
引用:使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。 //q会加上引号
HTML属性:总是在 HTML 元素的开始标签中规定。 /属性值加引号
<h1 align="。。。"> 拥有关于对齐方式的附加信息。 /left、center、right
<body bgcolor="。。。"> 拥有关于背景颜色的附加信息。
<table border="1"> 拥有关于表格边框的附加信息。
文本格式化:b,strong,big,em,i,small,sub,sup
================================
head进行样式设置:
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
内联样式:<p style="color: red; margin-left: 20px"
>。。。</p>
外部样式表:<head><link rel="stylesheet" type="text/css" href="xxx.css">
</head>
内部样式表:
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
====================================================
背景图:<body background="。。。"></body>
插入图,并设置位置:<p>图像 <img src="。。。" align="bottom"> 在文本中</p> /Y轴上的有top,bottom,middle //X轴上的有left,right
为图片显示替换文本(如果图片没了会显示文本信息):<img src="。。。" alt="文本信息" />
图片映射(图像上的某个区域都与超级链接)
====================================================
每个表格由 table 标签开始。每个表格行由 tr 标签开始。每个表格数据由 td 标签开始。 /一个表格一个table,一行一对tr,行内有多少数据,就有多少对td
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
*表格的边框属性:<table border="XX">。。。</table>
*表头:<th>。。。</th>
*空单元格:<td> </td>
*表的标题:<table><caption>XXOO</caption>。。。</table>
*定义跨行或跨列的表格单元格(一个单元格占别的N个行/列):<td colspan="X">。。。</td>、<th rowspan="Y">。。。</th>
*表内的标签:<td><li>A</li><li>B</li><li>C</li></td>
*使用 Cell padding 来创建单元格内容与其边框之间的空白:<table border="X" cellpadding="Y">。。。</table> //cellspacing 变成单线条
*向表格添加背景:<table border="1" bgcolor="red"> //background=“图片路径” //单元格同理
*框架属性:<table frame="。。。">。。。</table> //使用 "frame" 属性来控制围绕表格的边框。 //box、above、below、hsides、vsides
*有序列表:<ol start="X">。。<li>。。</li>。。</ol> //无序用<ul>。。。</ul> //属性<ul type="square/circle/disc/A/a/I">
*定义列表:dl-dt-dd
====================
div:定义文档中的分区或节(division/section)。
span:定义 span,用来组合文档中的行内元素。
*给div配属性id~在头部可对不同的div进行style配置
*div/table都可以对网页布局
============================
表单、输入框:form - <input type="text" name="。。。">
*密码的输入框 - type="password"
*单选按钮(name要一致):<input type="radio" name="。。" value="。。" />
。。。 //复选框 type="checkbox"不用value
*表单的动作属性(Action)和确认按钮:<form name="input" action="跳转页面地址" method="get">
。。。<input type="。" value="。" />
*下拉框:select(属性name) - option(属性value) //<select name="cars"><option value='A'>A</option></select>
默认选中的话加一个属性selected="selected" //checked="checked"
*文本域:<textarea rows="X" cols="Y">文本。。</textarea>
*type:button(属性value)
*在数据周围绘制一个带标题的框:fieldset
*重置:<input type="reset" value="重置">
=============================
框架:竖直、水平
- 框架结构标签(<frameset>)定义如何将窗口分割为框架
- 每个 frameset 定义了一系列行或列
- rows/columns 的值规定了每行或每列占据屏幕的面积
<frameset cols/rows="25%,50%,25%"><frame src="页面路径"></frameset>
*frameset - noresize 属性。框架是不可调整尺寸的。在框架间的边框上拖动鼠标,你会发现边框是无法移动的。
*内联框架 iframe 属性src //<iframe src="/i/eg_landscape.jpg"></iframe>
*iframe边框属性frameborder
*一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用 <a name="C11"> 进行标识。 // <frame src="。。。html#C11">
*使用 iframe 作为链接的目标
iframe 可用作链接的目标(target)。
链接的 target 属性必须引用 iframe 的 name 属性
=================================
<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
- 背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
- 背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。
=================================
HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。 //DOCTYPE 参考手册
=================================
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。
以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。
*title 元素在所有 HTML/XHTML 文档中都是必需的。
*<base> 标签为页面上的所有链接规定默认地址或默认目标(target)。
*<link> 标签定义文档与外部资源之间的关系。<link> 标签最常用于连接样式表。
*<style> 标签用于为 HTML 文档定义样式信息。您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式。
*元数据(metadata)是关于数据的信息。<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。
=================================
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p>
</body>
*<script> 标签用于定义客户端脚本,比如 JavaScript。script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。JavaScript 最常用于图片操作、表单验证以及内容动态更新。
==================================
HTML 中的预留字符必须被替换为字符实体。 //HTML 实体符号参考手册
==================================
如果希望向世界发布您的网站,那么您必须把它存放在 web 服务器上。 //网站主机教程
==================================
HTML Object 元素:<object> 的作用是支持 HTML 助手(插件)。//不是很理解这个
在 HTML 中播放声音的方法有很多种。//可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面。
*embed:三个属性width,height,src(插件路径)
*object:三个属性 width,height,data(插件路径)
*<audio> 元素是一个 HTML5 元素:一个属性<audio controls="controls"><source src="。。。.xxx" type="audio/xxx"/></audio>
*使用雅虎播放器(js调用):<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
只需简单地把 MP3 文件链接到您的 HTML 中,JavaScript 会自动地为每首歌创建播放按钮。
*直接使用超链接也可以。(浏览器自带播放器)<a href="。。。">。。。</a>
====================================
<video> 标签的作用是在 HTML 页面中嵌入视频元素。//obejce,embed也可以用
*<video width="320" height="240" controls="controls" autoplay="autoplay"><source src="。。。.xxx" type="video/xxx"/></video>
*在网页中播放视频,那么您可以把视频上传到优酷等视频网站,然后在您的网页中插入 HTML 代码即可播放视频:
<embed src="视频swf地址" width="X" height="Y" type="application/x-shockwave-flash"></embed>
*直接使用超链接也可以。(浏览器自带播放器)<a href="。。。">。。。</a>
=====================================
XHTML 是以 XML 格式编写的 HTML。 /XHTML 指的是可扩展超文本标记语言/XML教程
文档结构
- XHTML DOCTYPE 是强制性的
- <html> 中的 XML namespace 属性是强制性的
- <html>、<head>、<title> 以及 <body> 也是强制性的
元素语法
- XHTML 元素必须正确嵌套
- XHTML 元素必须始终关闭 /空元素也必须关闭
- XHTML 元素必须小写
- XHTML 文档必须有一个根元素
属性语法
- XHTML 属性必须使用小写
- XHTML 属性值必须用引号包围
- XHTML 属性最小化也是禁止的
如何从 HTML 转换到 XHTML
- 向每张页面的第一行添加 XHTML <!DOCTYPE>
- 向每张页面的 html 元素添加 xmlns 属性
- 把所有元素名改为小写
- 关闭所有空元素
- 把所有属性名改为小写
- 为所有属性值加引号