首页 > 代码库 > HTML
HTML
1.html基础
(1)什么是html？
hypertext markup language,超文本标记语言。
用于开发网页的语言，由浏览器解释执行。（W3C tim berners lee创立的 web之父html也是他发明的，我们要纪念一下，要怀着感恩的心去理解他的发明。）
html文件以.html/.htm结尾。(8.3早期window点号后面只能有三个字符，所以只能用htm)
(2)html的文件的基本结构
<html>
<head>
<title>标题</title>
<!--用于模拟服务器http消息头-->
<!--比如以下消息头的作用，是
告诉浏览器，返回的是一个html并且
应该以gb2312的编码来显示该页面
，html文件保存的编码应该与meta
声明的编码一致-->
<meta http-equiv="content-type"
contnet="text/html;charset=gb2312">
<!--引入脚本js-->
<script>干嘛的！以后再说
<!--定义样式-->
<style>
<!--引入外部样式-->
<link>
</head>
<body>
<!--页面显示数据-->
</body>
</html>
(3)web开发标准
w3c (www.w3cschool.com)
建议开发一个页面，应该这样子设计：
页面的结构(包括了数据)，由html文档来负责
页面的外观,由css文档来负责。
页面的行为,由javascript文档来负责。
(4)列表
a.无序列表
b.有序列表
c.列表嵌套
(5).其它标记
<h1>...<h6>:标题
行内标记：
不单独占一行的标记
<span></span>
<strong>加粗</strong>
块级标记：
另起一行的标记
<h1>.....<h6>
<p>
<div>(用来布局)
(6)html/xhtml
xhtml：扩展的超文本标记语言。
w3c按照xml语法要求重新定义了html中的标记与相应的属性。
比如:1.标签必须层层嵌套
2.属性必须用""引起来
3.标签必须要有结束标签
4.尽量使用小写。
<font size=red>:error!
<font size="red">:ok！
<br>:error!
<br/>:ok!
html/xhtml文档类型声明 (加上好但是不加也无所谓)
xhtml过渡型
xhtml严格型
html严格型
html松散型(一般就加这个)
2.
链接
基本语法
<a href="http://www.mamicode.com/链接打开的位置" target="链接内容在哪里打开">描述文字或者加图片</a>
target=链接内容在哪里打开 _blank:在新的窗口打开 _self:在当前窗口打开
如果不设置target属性，默认值为_self
锚链接、锚点
命名一个锚点
<a name="top"></a>
跳转到锚点
本页面跳转到锚点
<a href="http://www.mamicode.com/#top">to top</a>
从另一个页面跳转到当前页面的锚点
<a href="http://www.mamicode.com/h.html#top">to top</a>
功能链接
发送邮件！
<a href="mailto:电子邮箱">[联系我们]</a>
特殊符号
在页面中年，如果有空格出现( )引号(") >(>) <(<) @(©)要使用相应的实体来代替，主要目的是避免浏览器的解析出错
两个空格相当于一个汉字
一个空格相当于一个英文字母
表单
表单基本结构
<form action="abc.do"method="">
input标记
非input标记
</form>
<input name="表单元素名称" type="类型" value="http://www.mamicode.com/值" size="显示宽度" maxlength="对大长度" checked="是否选中" />
action属性:表单提交的内容由哪个程序来处理
method属性：表单提交的方法
input标签
input type="text"/"password"/"button"/"checkbox"/"radio"/"hidden"/"file"/"reset"/"submit"
非input标签
select既可以用于下拉菜单，也可以用于多选框（multiple） textarea button img
列表
无序列表
<ul>
<li>内容填充在列表项里</li>
</ul>
有序列表
<ol>
<li>内容填充在列表项里</li>
</ol>
列表的嵌套
框架
什么是框架
将一个窗口划分为多个子窗口，每一个子窗口可以放置一个页面。
frameset：
iframe:
frameset页面中不能出现body，而iframe可以用在body标签里
3.
块级元素可以分为以下几类：块级元素按照其应用于结构还是内容分为三种：结构化块状元素，终端块状元素，多目标块状元素。
一.结构化块状元素
这类元素用于构造文档的结构，一个好的文档结构对于搜索引擎和应用其他技术（如JavaScript）都是十分有利的。它们没有语义上的含义，仅仅划分出了文档的组织方式，并 没有体现文档的内容。
主要的结构化块状元素
<ol> <ul> <dl> <table>
支持结构化的元素
<li> <dt> <dd> <caption> <thead> <tbody> <tfoot> <colgroup> <col>
二.终端块状元素
这类元素用于从结构转向内容，它们拥有语义上的含义，能够表明内容的性质。终端块状元素属于结构的终点，它们不能再包含其他块级元素，只能包含文本或行级元素。
终端块状元素
<h1>...<h6> <p> <blockquote> <dt> <address> <caption>
三.多目标块状元素
所谓多目标指的是可以自由的扩展或嵌套文档的结构，以可以终端的形式出现。当多目标块状元素以结构化的方式使用时就含有结构化的内涵，以终端的形式使用就含有语义的内涵。
多目标块状元素既可以包含块状元素，也可以包含内容（文本与行级元素的组合为内容），但不能同时包含两者。应该把内容放在块状元素中。块状元素不应作为行级元素与文本的兄弟元素，受HTML校验器的限制，目前还没办法检验出此种情况，但是应该避免。
多目标块状元素
<div> <li> <dd> <td> <form> <noscript>
从这里可要看到，HTML提供了7种元素——<div>、<li>、<dd>、<td>、<th>、<form>和<noscript>——来扩展或终止结构。所以，我把它们叫做多目标块状元素，因为它们是最多才多艺的元素。可以用它们来确定文档分区、列表项、词典释义、表格数据单元格、表格头部单元格、表单和当脚本无法运行时的可替换内容。
当多目标块状元素以结构化的方式使用时，它就拥有结构化的内涵。当以终端的方式使用它，它就拥有语义化的内涵。例如，当一个列表项作为终端的时候，其中的内容就成为某个列表中的一项。当列表项包含了一个结构化块状元素（例如表格或另一个列表）时，它从结构上就作为一个大的嵌套结构中的小节点起作用。
多目标块状元素既可以包含块状元素也可以包含内容，但是不能同时包含两种。文本与内联元素（图片、对象、控制元素和语义化的标记）的组合才构成了内容。块状元素不应该作为内联元素和文本的兄弟元素。我们把它称之为混合内容（mixed content）。应当把内容放在块状元素中——而不是放在它们之间。因为HTML文档类型定义语言中的限制，HTML校验器时常不能检测出拥有混合内容的文档，但是这不意味着就可以让此种情况出现。当浏览器遇到混合内容的时候，它会给内容套上一个匿名容器。这是因为当块状元素是按顺序排列的，而其中又穿插内容的时候，浏览器不能同时解析块状元素和内容。CSS选择符不能选择匿名块状元素，它会阻止你对其赋予样式。在使用这七类多目标块状元素的时候可以考虑经下细节：
<div>是一个分区。它通常是结构化的，但是它也能含有内容。如例子中所示，由分区创建的块状结构是不可见的，除非为每个分区赋予外边距、边框和/或内边距。
<li>是一个列表项。一般来说，它是一个包含内容的终端块状元素，不过它也能包含结构化块状元素（比如表格和列表）或终端块状元素（比如标题和段落）。
<dd>是定义列表中的一个定义。通常它是作为一个可包含内容的终端块状元素，但是它也可以含有结构化或终端的块状元素。
<td>和<th>是表格单元格。<td>是数据单元格，<th>是标题单元格。通常单元格是包含内容的终端块状元素，但是它们也可以包含结构化或终端的块状元素。
<form>是输入数据的表单。它可以含有结构化的块状元素，用于组织表单控制元素（如例中所示），或者直接包含内联表单控制元素（如“HTML结构”的那个例子所示）。它也能够包含终端元素（例如标题和段落）。
当浏览器不支持脚本的时候，就会显示<noscript>。它可以包含简单的内联内容或者拥有完整结构的文档。
xhtml和html的区别
xhtml:可扩展的文本标记语言
html:是一种松散的语言，大小写不敏感。
html有文档声明
第一行，写文档类型声明(可以省略)
XHTML 过渡型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 严格型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML严格型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML松散型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html书写规范
(1)标记有开始，也有结束，对于单个标签<br/><hr/>
(2)标记层层嵌套，并且嵌套要正确
(3)全部用小写
(4)属性值要用双引号引起来
如：width="200px"
HTML