HTML
超文本标记语言
html语言是由标签组成的。
html中的数据都会封装在标签中，因为可以通过标签中的属性值的改变对封装内的数据进行操作。
html代码范围 <html> </html>
由两部分组成 ：头、体
<html>
<head> </head>
<body> </body>
</html>
head:网页的一些属性信息。比如：标题
body:网页显示的数据。
XHTML:
Extensible HyperText Markup Language是可扩展的超文本标记语言。
XHTML是W3C组织在2000年为了增强HTML推出的。
XHTML的代码结构更为严谨，是基于XML的一种应用。
XML：
Extensible Markup Language 是可扩展标记语言。
XML是对数据信息的描述，HTML是数据显示的描述。
XML代码规定的更为严格，如：标签不结束视为错误，而HTML不会。
XML规范可以被更多的应用程序所解释，将成为一种通用的数据交换语言。
各个服务器，框架都将XML作为配置文件。
标签特点：
对数据进行封装，有开始标签和结束标签。
但有一些标签只体现单一功能，所以不需要结束标签。由于规定必须要结束标签，所以这样的标签在内部结束。
如：<br /> <hr /> <img /> <imput /> 等
标签格式：<标签名 属性名=“属性值” 。。。>数据< /标签名>
<标签名2 属性名=“属性值”。。。 />
标签分类
标签分为两大类：
1，块级标签：标签结束后带有自动换行 div p dl table title ol ul ...
2，行内标签：标签结束后没有自动换行 font span img input select a ...
div ：表示区域
span ：表示区域
p ：表示段落
常见标签：
1，字体：<font>
<font size="7" color="#ffffoo">数据</font>
特殊部分：如果要在页面显示一些特殊符号，需要进行转义
如：
< : <
> : >
& : &
空格：  
2,列表标签：<dl>
上层项目：<dt>
下层项目：<dd>
项目符号标签：
<ul>
<ol> 可用属性进行编号
这两个标签都须要由<li>进行封装
3，图像标签：<img>
<img src="" alt="图像说明文字" />
4，表格标签：<table>
表格由行组成，行由单元格组成。
表格中默认都有一个tbody标签。
<table border="1" bordercolor="red" width="60%" cellpadding="10" cellspacing="0" >
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
表格是最常用的标签，用于对数据进行格式化。
5，超链接：<a>
<a href="http://www.sina.com.cn" target="_blank" >新浪网站< /a>
当被点击后，会启动引擎所对应解析程序。去查找指定主机。
1，先找本地主机的hosts文件，如果没有找到该主机对应的ip地址。
2，去公网DNS服务器上找对应的ip地址。
<a href="maitl:abc@sohu.com?subject=haha&cc=qq@163.com ">联系我们< /a>
当点击超链接时，就会出现邮件相关联的解析程序，本机默认的是outlock
超链接的另一个作用：定位标记 专业术语：锚
用于跳转到指定位置，如：网页中用到回到首页位置
<a name="top">标记位置</a>
<a href="#top">获取标记位置</a> 这里top前加上#表示这个是一个标记
注意： href="JavaScript:void(0)" 表示无返回，是一个空链接。
6，表单标签：<form>
该标签是可以和服务端进行交互的.
注意：如果表单要向服务端提交数据，则每个表单组件都需要定义name和value属性。
因为服务端只有知道了该name的值才可以对提交的数据进行分别获取。
form标签中的常见属性：
action:指定数据提交的目的地。
如：< form action=”http://www.baidu.ocm” method = “post”>
method:提交方式，两种常用值：get和post 。get为默认值
get和post的区别：
1，get会将提交的数据显示在地址栏上
post不会显示
2，get提交的数据的体积受地址栏的限制。
post可以提交大体积数据
3，get对于敏感信息不安全
4，get会将提交信息封装在请求行，也就是http消息头之前
post会将提交信息封装在数据体中，也就是http消息头之后的空行后。
对于服务端而言。表单提交尽量用post，因为涉及到编码问题。
1，对于post提交的中文，在服务端可以直接使用setCharcterEncoding("gbk")就可以解决
2，对于get提交的中文，在服务端只能通过ISO8859-1将数据编码一次，在通过指定的码表如GBK解码。
使用表单的组件不一定要定义form标签，只有需要将数据进行服务端的提交的时候才会用到form标签。
表单标签中的元素：
<input>
该标签因为type属性的不同，所对应的组件也不一样。
type属性：
1，text: 文本框
2，password: 密码框
3，radio: 单选框，注意：要被选中，必须给单选框定义一个属性name.
当有多个时，通过name值相同来分组
4，checkbox: 复选框
5，file: 文件选择组件，通常用于文件上传等
6，hidden: 隐藏组件，该组件不会显示在页面上，但是其定义的name和value可以传到服务器
7，button: 按钮组件，自定义一个按钮默认是没有任何效果的,可以通过注册事件并加入自定义效果。
8，reset: 重置按钮， 清除表单中数据
9，submit: 提交按钮，可以通过image的src属性连接一个好看的按钮图片完成提交效果
10,image:插入图片组件，该组件具有提交效果，可以做成提交按钮。
<select>下拉菜单
每一个下拉菜单项都由option进行封装
<select>
<option> < /option>
</select>
文本区域：<textarea>
7，< base >
href属性：指定网页中所有的超链接的目录，也可以是网络目录。
注意：值的结尾处一定要用 / 表示目录。只作用于相对路径的超链接文件。
target属性：指定打工超链接的方式。
8，< meta >
向服务器和客户端传达关于文档的隐藏信息。
name属性：网页的描述信息，当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。
http-equiv属性：模拟HTTP协议的响应消息头。
9，< link >
LINK 元素只能在 HEAD 标签内使用。
rel属性：描述目标文档与当前文档的关系。
type属性：文档类型
media:指定目标文档在哪种设备上起作用。
例：
<link rel=stylesheet href="styles.css" type="text/css" media=”screen,print”>
10,< marquee >
让内容动起来。
direction属性：内容移动方向。
behavior属性：移动样式。
11，< pre >
可以将文本内容按原样式显示在页面上。
如：
<pre>
class Demo()
{
public void method()
{ }
}
</pre>
如何获取标签后跟的文字？
如：< div id = “divid”> 须要获取的文字 </div>
使用innerHTML获取
如: document.getElementById(“divid”).innerHTML;
HTML框架标签：< frameset >
通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
· 开发人员必须同时跟踪更多的HTML文档
· 很难打印整张页面
注意：框架标签不可以放在<body>内，一般为了代码的可读性，放在<head>和<body>之间
rows:用于设置窗口行 如：rows="20%,*" 窗口分为两行，第一行占20%，第二行占余下的
cols:用于设置窗口列 如：cols="20%,*" 分为两列，第一列占20%，第二列占余下
例：
将一个网页窗口，分为上、左、右三部分。分别是：top.html,left.html,right.html.
<frameset rows="20%,*"> <!-- 窗口分为两行，第一行占20%，第二行占余下的 -->
<frame src="top.html" name="top" /> <!-- 第一行，即第一个网页页面，指定为top.html页面 注意：须要指明name-->
<frameset cols="20%,*" > <!-- 第二行，又分为两列，第一列占20%，第二列占余下 -->
<frame src="left.html" name="left" />
<frame src="right.html" name="right" /> <!-- str:设置或返回应被加载到框架中的文档的 URL
name:设置或返回框架的名称。-->
</frameset>
</frameset><noframes></noframes>
左边页面连接写法：
<a href="http://www.baidu.com/" target="right" >连接一 百度</a> <br /><br />
<a href="http://www.itheima.com/" target="right" >连接二 黑马官网</a> <br /><br />
<a href="http://bbs.itheima.com/forum.php" target="right" >连接三 黑马论坛</a> <br />
<!-- target指明在何处显示，注意：这里不能写成right.html-->
画中画标签 < iframe >
在网页中开一个区域打开另一个页面。
例：
<iframe src="http://www.baidu.com" width="600" height="500"> <!--这里如果将高宽设置为0 则是不可见的-->
这是画中画标签，如果该浏览器不支持该标签，则会显示该文字
</iframe>
扫一扫
866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
