HTML整理
浏览数：29 /
时间：2015年06月09日
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>对应网页：
文件：
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
