什么是HTML
1. HTML(英文:HyperText Markup Language):即超文本标签语言
2. HTML标签是包含一些标签的文本文件
3. 这些标签告诉浏览器如何在页面上显示
编写一个最简单的HTML文件
1. 新建一个文本文件并打开,输入如下代码:
<html>
<head>
<title>这是页面标题</title>
</head>
<body>
这里是页面内容
</body>
</html>
2. 保存该文件并修改文件名后缀为.html或.htm
3. 双击该文件然后浏览,可以看到标题和内容分别显示了出来
例子解释
1. html标签是用来标记html元素的
2. html标签成对出现<xxx></xxx>
3. 在两个标签之间的为这个标签下的内容
4. html标签的名称是固定的,如上面的html、head、title、body等等,不同的标签有不同的意义
基本的html标签
1. html、定义html文档,所有的html标签都必须在html标签对内
2. body、定义文档的主体,即显示内容
3. <!—注释-->、注释
4. <br />、换行
注意事项
html标签应该使用小写,因为在最新的标准中都要求标签使用小写
什么是HTML元素及其属性
在用户浏览网页时,页面会有链接、输入框、下拉列表等功能控件,而这些控件对应的是固定的html标签,有了这些标签,浏览器就知道要呈现什么给用户了。
而每个元素都有自己的属性,比如一个链接需要链接到哪个页面上去,就是通过设置链接的href属性来实现的,不同的属性有不同的意义,例:<a href=”…”>链接文本</a>
HTML主要元素及其属性:
一、链接<a>
1. html使用<a>来创建链接到另一个文档的链接
2. target属性:以何种方式打开链接
a) _blank、以新页面的形式打开链接
b) _self、在自身打开新链接
c) _top、在最顶层打开链接
3. id属性:链接名称
4. href属性:设置链接指向的地址
例:<a id=”link” name=”show” taget=”_blank” href=”…”></a>
二、框架<frameset>
1. 使用<frameset>可以在一个窗口中载入多个不同的页面,也就是显示多个页面
2. 框架分垂直框架与水平框架
3. <frameset>定义如何将窗口分割为框架
a) rows/cols定义了行/列所占据的屏幕面积
b) 不能将body与frameset同时使用
c) <frame>框架标签,定义了框架集下的某个单个框架
i. Src定义链接地址
ii. noresize=”noresize”,属性可使边框不可被拖动
iii. frameborder属性定义是否显示边框
例:
<frameset rows="20%,*">
<frame src="http://www.hao123.com" noresize="noresize" />
<frameset cols="50%,50%">
<frame src="http://www.hao123.com" />
<frame src="http://www.hao123.com" frameborder="0" />
</frameset>
</frameset>
<noframes>
<body>不支持框架</body>
</noframes>
三、内联框架或叫浮动框架<iframe>
1. iframe框架同上面的框架一样通过window.Frames[]集合访问
2. src定义链接地址
3. width/height、定义frame的宽度高度
4. scrolling、定义滚动条
5. frameborder、定义边框
例:<iframe src="…" frameborder="0" scrolling="auto" width="500px" />
四、表格<table>
1. <table>定义表格
a) cellpadding、单元格内容与边框间的补白
b) cellspacing、单元格间距离
c) style、定义表格样式
2. <tbody>定义表格主体,注意一般不使用,但是在.net中gridview生成的表格会有<tbody>,请注意
3. <tr>定义行
4. <td>定义单元格
例:<table width="200" border="1" cellspacing="10">...</table>
五、列表<ul><ol><li>
1. <ul>、无序列表
2. <ol>、有序列表
3. <li>、列表项
例:看了结果才知道
<div>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
</div>
六、表单<form>
1. <input>输入:type、定义文本域的类型:(button:按钮、checkbox:复选框、file:上传文件、hidden:隐藏、password:密码、radio:单选框、reset:重置、submit:提交、text:文本)
2. <textarea>多行文本
3. <select>定义一个选择列表
4. <option>定义下拉列表中的选项
七、 图象<img>
1. src、图象地址
2. alt、替换文本