标签：
html主要学习四个方面的内容：
第一：html的基本概念，它能做什么
第二：html的基本标签
第三：html中的表单标签
第四：html中的框架标签和其它标签
a.html是超文本标记语言,不同于普通的文本语言,它可以实现普通文本语言不能实现的功能
b.html不是编程语言,只是一种标记语言
c.标记语言是由一套标记标签组成来实现网页
html就文档等同于网页，html就是通过标签和纯文本来描述一个网页,所以Html其实就是一个网页。
a.html有三层结构
最外层的主结构位html标签,包裹head和body标签
<html>(根标签)
<head>
head标签中是头标签，显示网页的标题，整个网页的属性信息，引入外部文件(比如css,js文件等)
</head>
<body>
body标签是显示给我们内容的标签
</body>
</html>
b.html标签的书写方式
(1)html标签是以尖括号包裹一个英文单词成对出现的,又开始标签，有结束标签(</单词>表示结束标签)，支持标签之间的正确嵌套。
格式：
<标签名 属性内容> 包裹的内容 </标签名>
(2)html标签不区分大小写,默认小写
(3)很多标签都有属性,属性是以键值对的方式出现的，多个属性之间以空格隔开，例：属性=”值“，属性都是写在开始标签中；
(4)有些标签没有结束标签，因为它不需要包裹内容，所以是自闭合的，例<br/>:换行标签，注意它的/在后面，结束标签的/.在前面
(5)HTML中不支持 : 空格 回车 制表符.都会被解析成一个空白字符
<html> <head> </head> <body> 你好<br/> html </body> </html>
html元素表示从开始标签到结束标签的所有代码
<html> <head> <title>第一个html页面</title> </head> <body> </body> </html>
<title>定义该页面的标题,显示在浏览器的顶端
文档标签有很多的属性，可以改变显示的样式，如果文档标签中嵌套了其它标签，都设置了同样的属性，那么以嵌套标签的属性为准
a.注释标签
<!-- 注释标签 -->
b.段落标签
<p> 文本内容</p>
段落之间会留一空行
属性:align(对其方式) 值：right，left，center，justify
c.换行标签
<br/>
d.水平线标签
<hr/> 属性:width---长度 size-----高度
尺寸:%表示占屏幕的比例，根据父屏幕的伸缩而伸缩 px:固定的大小，不会根据父屏幕的伸缩而伸缩
<html> <head> <title>第一个html页面</title> </head> <body> <!-- 注释标签 --> 春晓<br/> 作者：孟浩然<br/> <hr width="40%" size="5px" color="green"/> <p align="center"> 春眠不觉晓，处处闻啼鸟。<br/> 夜来风雨声，花落知多少 <p/> </body> </html>
div:行级块标签 有换行功能
span:行内块标签
<html> <head> <title>第一个html页面</title> </head> <body> <div>你好</div> <div>helloworld</div> <span>你好</span> <span>helloword</span> </body> </html>
a.font
属性：颜色 (color) 字体 (face) 大小(size)：1-7 默认值:3
b.<h1>----<h6>标题标签
字体依次减小，默认加粗
<html> <head> <title>第一个html页面</title> </head> <body> <h1>helloword</h1> <h2><font color="red">helloword</font></h2> <h3>helloword</h3> <h4>helloword</h4> <h5>helloword</h5> <h6>helloword</h6> </body> </html>
a.有序和无序清单
ol(有序清单):清单以字母或者数字的顺序排列 type属性:以哪种类型(字母或者数字)排列 start:排列的开始位置
uk(无序清单):清单以圆点,方框排列 type:以哪种类型的方式排列
li(列表的每一项):定义列表中的每一项
<html> <head> <title>第一个html页面</title> </head> <body> <ol type="1" start="1"> <li>html</li> <li>html</li> <li>html</li> </ol> <ul type="circle"> <li>html</li> <li>html</li> <li>html</li> </ul> </body> </html>
b.自定义列表项
自定义列表项是项目与注释的结合，即每个项后都跟一注释
<dl>:自定义列表项
<dt>:自定义列表项每一列的开始
<dd>自定义列表项每一列的定义的开始，即注释的开始
<html> <head> <title>第一个html页面</title> </head> <body> <dl > <dt>html1</dt> <dd>这是自定义列表的第一项</dd> <dt>html2</dt> <dd>这是自定义列表的第二项</dd> </ol> </body> </html>
<img/>标签
src属性:显示图片的地址
alt属性:图片加载不成功时，替代图片的文本
<html> <head> <title>第一个html页面</title> </head> <body> <img alt="一个美女图片" src="../Images/1.jpg" width="25%" height="25%"/> </body> </html>
<a></a>
两个作用：
第一个超链接：通过创建href属性，创建指向另一个文档的连接
第二个创建锚点;通过创建name属性，使其回到顶端等
target属性： _self 在自身页打开 _blank：在空白页打开
超链接:
<html> <head> <title>第一个html页面</title> </head> <body> <a href="http://www.baidu.com" target="_blank">百度链接</a> </body> </html>
锚标签；
name：该属性定义锚
href:链接到锚，注意前民有#，表示当前页面
<html> <head> <title>第一个html页面</title> </head> <body> <a name="top"></a> html<br/> <!-- 很多行前面的内容 --> <a href="#top">回到顶端</a> </body> </html>
table:定义表格标签
tr:定义表格的一行标签
td:定义表格的单元格
<html> <head> <title>第一个html页面</title> </head> <body> <table border="2" width=50%> <tr align="center"> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr align="center"> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table> </body> </html>
caption：定义表格的标题
td标签中的colspan属性和rowspan属性
colspan:列占的单元格数 rowspan:行占的单元格数
<html> <head> <title>第一个html页面</title> </head> <body> <table border="2" width=50%> <caption> 表格标签 </caption> <tr align="center"> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr align="center"> <td colspan=2>第二行第一列</td> <td rowspan=2>第二行第三列</td> </tr> <tr align="center"> <td>第三行第一列</td> <td>第三行第二列</td> </tr> </table> </body> </html>
表单标签就是form中添加一些表单元素实现
name属性：规定表单的名字
action属性:规定提交表单时，把数据发向的地址
method属性：提交方式，默认get提交
get提交：提交加在地址栏的后面，格式?name=value&name=value ,get提交相对不安全，get提交有大小限制(1K)
post提交:提交放在请求体中 post提交相对安全 大小没有限制
input标签是一个输入标签，定义一些表单元素
type属性:规定该输入标签的类型 name属性:规定该标签的标识名 value:该标签的值
有如下类型:
text:普通的文本输入框
password:密码输入框 特点：显示隐藏的密码
radio:单选按钮 注意：组的概念 如果想让一组单选按钮互斥 必须name属性相同
checked：代表默认被选中 必须有value值
checkbox:复选框 注意：组的概念 如果想让一组单选按钮互斥 必须name属性相同
checked：代表默认被选中 必须有value值
file:上传文件
botton:普通按钮 没有任何内置功能
submit:提交按钮 点击表单按照action地址进行提交
reset:重置按钮 点击会将表单清空
image:图片按钮 点击表单按照action地址进行提交
属性： src:图片的地址
alt:图片的文字信息
hidden：隐藏表单 作用：服务端需要但是不需要用户看到
select选项定义一个选择列表，option定义选择列表的单个项
option中必须写明value属性,该属性标明选择的是哪个
selected:标明默认选择哪个
该标签是一个文本域 rows:所占的行数 cols:所占的列数
<frameset>框架结构标签
框架标签使用rows/columns可以使一个页面划分成几个页面。
rows属性:按行占比分割该页面 cols:按列占比分割该页面
注意:不能将frameset标签和body标签在一起使用
<frame>框架标签--自闭合标签
该标签定义了放置在分割区域中的页面
noresize：规定该框架无法拖拉调整大小
target属性:使用超链接的时候，如果想指定连接的页在哪个框架中显示，那么terget属性就填该页的名字。
<meta>标签
该标签提供了有关页面的元信息,比如搜素关键字的关键字等，该标签位于头部
http-equiv和content属性是一键值对,所以必须一起使用,http-equiv提供了该键值对的名称,该名称把content的值关联到http头部中,content提供了该键值对的值。
例：
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> ----------------->http-equiv表示是关键字 ,content 关键字的内容有keyword1,keyword2,keyword3
<meta http-equiv="description" content="this is my page"> ------------------->http-equiv表示描述该网页，content描述的内容
<link>标签
用于文档连接外部元素
type属性:链接资源的类型
href:链接资源的地址
rel:链接资源与文档的关系
转义字符:
|
Html原始码 |
显示结果 |
描述 |
|
|
|
不断行的空白符 |
|
< |
< |
小于号 |
|
> |
> |
大于号 |
|
® |
? |
已注册 |
|
© |
? |
版权 |
标签：
原文地址：http://blog.csdn.net/strong_yu/article/details/51836710
