HTML整理
通过HTML源码及对应网页对HTML知识进行整体,方便查看!
HTML网站:http://www.w3school.com.cn/index.html
<!--
1、HTML:Hyper Text Markup Language:超文本标记语言。HTML标签对大小写不
敏感,推荐小写。
2、元素:从开始标签到结束标签的所有代码
3、属性:以 name="value" 的形式出现
属性:class 值:classname 描述:规定元素的类名
属性:id 值:id 描述:规定元素的唯一id
属性:style 值:style_definition 描述:规定元素的行内样式
属性:title 值:text 描述:规定元素的额外信息
HTML标准属性:http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
4、计算机输出标签,引用、引用和术语定义:
http://www.w3school.com.cn/html/html_formatting.asp
5、样式:外部样式表、内部样式表、内联样式
6、空格:用 表示
7、背景图像:background, 背景颜色:bgcolor, 边框:border,
排列方式:align 替换文本属性:alt
8、大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束),如:<h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始,如<b>, <td>, <a>, <img>
9、<span> 元素是内联元素,可用作文本的容器,
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
<div> 元素是块级元素,可用于布局,
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
10、框架及内联框架:frameset:http://www.w3school.com.cn/html/html_frames.asp
11、HTML颜色:http://www.w3school.com.cn/html/html_colors.asp
HTML颜色名:http://www.w3school.com.cn/html/html_colornames.asp
12、<address> 标签定义文档或文章的作者/拥有者的联系信息。
<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
13、<noscript> 标签提供无法使用脚本时的替代内容
14、如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体,
如显示小于号:<或<
HTML实体符号参考手册:http://www.w3school.com.cn/tags/html_ref_entities.html
15、尽量不要使用HTML废弃的元素比如<font>
XHTML:
1、XHTML 指可扩展超文本标签语言(EXtensible HyperText Markup Language)
XHTML 与 HTML 4.01 几乎是相同的。XHTML 是更严格更纯净的 HTML 版本。
XHTML 与 HTML 4.01 兼容。所有新的浏览器都支持 XHTML。
2、XHTML与HTML最主要的不同:
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名、元素、属性必须用小写字母。
XHTML 文档必须拥有根元素。
3、更多的 XHTML 语法规则:
属性名称必须小写
属性值必须加引号
属性不能简写
用 Id 属性代替 name 属性
XHTML DTD 定义了强制使用的 HTML 元素
在 XHTML 文档中必须存在html、head、body元素,而 title 元素必须位于在 head 元素中。
4、重要的兼容性提示:你应该在 "/" 符号前添加一个额外的空格,
以使你的 XHTML 与当今的浏览器相兼容。
5、存在三种XHTML文档类型:
STRICT(严格类型)
TRANSITIONAL(过渡类型)
FRAMESET(框架类型)
-->
<html><!--html元素定义了整个HTML文档-->
<head><!--所有头部元素的容器,里面可以添加标签:title/base/link/,meta/script/style,
其中meta提供关于HTML文档的元数据(关于数据的信息),script用于定义客户端脚本 -->
<!--内部样式,设置页面居中
<style type="text/css">
body{margin: 0 auto; width:1000px; text-align:center;}
</style>-->
<title>文档标题</title>
<!--base标签为页面上所有链接规定默认地址或目标(target)-->
<base target="_blank" />
</head>
<!--body元素定义了HTML文档的主体,body之间是可见页面内容 background为背景图片-->
<body background="image/1.jpg">
<h1>HTML整理</h1><!--这里显示标题h1,共分为h1-h6-->
<br/><!--这里为换行,空元素直接在开始标签关闭,也可不带/,推荐带上-->
<hr/><!--水平线/分隔线,可用于分隔-->
<br/>
音频:<audio controls="controls" height="100" width="100" autoplay="autoplay">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio><br/>
==================================链接=====================================<br/>
<a href="http://blog.csdn.net/wtfmonking" target="_blank">这里是链接,用a标签标示,<br/>
把target属性设置为_blank,该链接会在新窗口打开,不设置则在当前页面打开</a>
<br/><br/>
下面是等效的以图像作为链接,border为边框<br/>
<a href="http://blog.csdn.net/wtfmonking" target="_blank">
<img border="2" src="image/3.gif"/></a><br/><br/>
<a href="#mao">这里创建指向最下面的锚的链接,可以直接跳到最下面的锚的位置</a>
<br/><br/>
==================================图像======================================<br/>
<!--插入图像,用img标签表示,alt属性用于图像无法显示时显示文本-->
<img src="image/2.jpg" width="102" height="76" alt="图像错误"/><br/><br/>
<p><img src ="image/3.gif" align="left">图像浮动在文本左侧</p>
<br/>
<p>图像下部<img src="image/3.gif" align="bottom">在文本中对齐(默认对齐方式)</p>
<p>图像中部<img src ="image/3.gif" align="middle">在文本中对齐</p>
<p>图像上部 <img src ="image/3.gif" align="top">在文本中对齐</p>
<p><img src ="image/3.gif" align="right">图像浮动在文本右侧</p>
===================================文本======================================<br/>
<p>这里显示段落</p><br/>
<p>文本格式化标签:
<b>粗体</b> <big>大号</big> <small>小号</small> <em>着重</em>
<i>斜体</i> <strong>加重语气</strong>
<sub>下标</sub> <sup>上标</sup> <ins>插入字</ins> <del>删除字</del>
</p>
===================================表格=======================================<br/>
<table border="2"> <!--border为表格边框-->
<caption>这里是表格的标题</caption>
<tr> <!--这里是行-->
<th>这里是表头</th>
<th>第二个表头</th>
</tr>
<tr>
<td bgcolor="red" align="left">行1,列1</td> <!--bgcolor为背景颜色,align为排列方式-->
<td bgcolor="green" align="right">行1, 列2</td>
</tr>
<tr>
<td></td> <!--空单元格-->
<td>行2, 列2</td>
</tr>
</table>
==================================列表========================================<br/>
<ul type="disc">
<li>苹果</li>
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
</ul>
<li>香蕉</li>
</ul>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
</ul>
<h4>有序列表,默认为数字</h4>
<ol>
<li>苹果</li>
<li>香蕉</li>
</ol>
<ol type="A">
<li>字母</li>
<li>列表</li>
</ol>
<ol type="a">
<li>小写字母</li>
<li>列表</li>
</ol>
<ol type="I">
<li>罗马字母</li>
<li>列表</li>
</ol>
<ol type="i">
<li>大写罗马</li>
<li>列表</li>
</ol>
<dl> <!--定义列表:-->
<dt>定义项目</dt>
<dd>此处为定义的描述 ... ...</dd>
<dt>HTML</dt>
<dd>HTML是超文本标记语言... ...</dd>
</dl>
==================================表单========================================<br/>
<form name="input" action="xxx.jsp" method="post"><!--action动作属性定义目的文件-->
<fieldset> <!--设置表单边框-->
<legend>表单边框</legend>
输入域:<input type="text" name="textname"/>
</fieldset>
单选按钮:<input type="radio" name="sex" value="male"
checked="checked"/>男 <!--checked为默认选择-->
<input type="radio" name="sex" value="female" />女<br/>
复选框:<input type="checkbox" name="bike" />自行车
<input type="checkbox" name="car" />汽车<br/>
<select name="xxxx">
<optgroup label="选项组1">
<option value="xiala">下拉列表</option>
<option value="liebiao">第二个</option>
</optgroup>
<optgroup label="选项组2">
<option value="moren" selected="selected">默认选择的</option>
<option value="liebiao">最后一个</option>
</optgroup>
</select><br/><br/>
文本域:<br/>
<textarea name="content" cols="55" rows="4"></textarea><br/>
<button type="button">这是一个按钮</button><br/>
<input type="submit" value="确认"/><br/>
</form>
=============================================================================<br/>
<a name="mao">这里命名一个HTML链接的锚,上面的链接可以直接跳到这里!</a>
</body>
</html>
对应网页:
文件: