HTML概述
1. 什么是HTML
HTML:HyperText Markup Language超文本标记语言,是一种描述性的标记语言(不是编程语言),用于描述超文本中内容的显示方式。比如字体什么颜色,大小等。它是由W3C组织所制定的一套专门用于显示网页的规范,不负责处理业务逻辑,只用于显示。
W3C:万维网联盟(World Wide Web Consortium),其宗旨是通过促进通用协议的发展并确保其通用型,以激发 web 世界的全部潜能。
HTTP:Hyper Text Transfer Protocol,超文本传输协议。
2. HTML的发展历程
- HTML2.0(1995)
- HTML3.2(1997)
- HTML4.0(1997)
- HTML4.01、XHTML1.0(2000)
- XHTML1.1(2001)
- HTML5(2014)
目前比较常用的为HTML4.01或XHTML1.0,但是长远看HTML5将会大放异彩。
3. 开发工具
- 编辑器:如notepad++,editplus,sublime text等
- IDE:如DreamWeaver(DW)
4. 编写规范
- 文件扩展名均为.htm或.html。
- 标签尽量使用小写字母,大多数都有开始和结束标签,成对使用。
- 文档主要结构以<html>开始,以</html>结束。
- 未来的HTML标准不允许没有结束标签,所以对于没有主体内容的标签,在末尾添加/表示结束
- 标签的属性只能写在开始标签内,属性值需要用""包围。
- 标签名和<间不能有空格。
HTML标签
1. 排版标签
- 注释标记
<!--这里是注释-->
- 段落标签
<p align="center">段落内容</p>
属性:align(left、center、right)
- 换行标签
<br />
- 水平线标签
<hr align="center" size="2" width="70%" noshade />
属性:
align(left、center、right)
size:宽度
width:长度
noshade:去除阴影效果。 - 预格式化标签
<pre></pre>:把已经分好段落的文字预格式化
- 层标签(换行)
<div></div> - 块标签(不换行)
<span></span> - 居中标签
<center></center>:相对外层元素居中。
2. 字体标签
- 字体
<font color="red" size="12pt" face="宋体">文字</font>
属性:
color:颜色,可以使十六进制数,可以是RGB颜色,可以使英文单词。
size:大小,单位可以使像素px,磅数pt,或者无单位1~7。
face:字体 - 标题
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6> - 加粗
<b>加粗内容</b>
<strong>强调内容</strong> - 特殊字符
<:小于号
>:大于号
:空格
©:版权号
™:商标
3. 图片标签<img />
- <img src="girl.gif" width="100" height="112" border="0" alt="beautiful girl" />
- 属性:
src:图像的路径,支持相对路径,绝对路径和网络路径
width:宽度
height:高度
border:边框
usemap:引用热点区域
alt:提示信息
图片的热点区域的引用
<img src = "resource/2.jpg" width = "100%" height = "200px" border = "1" alt = "2014北京车展" useMap = "#Map" /><map name = "Map" ><area shape = "circle" coords = "322,108,50" href = "resource/4.gif" ></map>
4. 清单标签
- 有序列表<ol></ol>
属性:
start:开始序号,值只能是数字。
type:序号的类型,支持英文字母,数字和罗马文。 - 无序列表<ul></ul>
属性:
type:序号的类型(disc,circle,square) - 有序或无序列表的项<li></li>
- 自定义清单
dl:自定义清单
dt:自定义清单的标题头
dd:自定义数据
5. 超链接标签<a></a>
属性:
- href:访问资源的位置(地址),地址也支持相对路径,绝对路径和网络路径,可以是mailto:xxxx@163.com。
- target:在何处打开访问的URL。
_blank:打开一个新的窗口
_self:在自身打开
_top:在顶层窗口打开
框架名:在指定的框架中打开 - name:给超链接起个名字,设定一个锚点,调用锚点使用href="#锚点的名字"。
示例:
<a name = "top" ></a><a href = "1.html" > 跳转到1.html </a><a href = "#top" > 返回顶部 </a>
6. 表格标签
- 表格<table></table>
属性:
border:设置表格边框的大小
bordercolor:设置边框颜色
width:宽度
height:高度
align:设置表格的显示位置(center,left(默认),right)
cellspacing:单元格间距
cellpadding:控制内容与单元格边框的距离 - 表格行(tr,必须在table内)
属性:
align:设置表格的显示位置(center,left(默认),right) - 表格单元格(td,必须在tr内)
属性:
align:设置表格的显示位置(center,left(默认),right)
colsapn:跨列
rowspan:跨行 - 标题头(th,必须在tr内)
- 表格标题(caption,必须在table内)
示例
<table border = "1" width = "300px" height = "300px" align = "center" cellspacing = "5px" cellpadding = "5px" ><caption> 黑马训练营 </caption><tr><td rowspan = "5" > 安卓55期 </td><td colspan = "4" > 学生信息表 </td></tr><tr><th> 学号 </th><th> 姓名 </th><th> 性别 </th><th> 年龄 </th></tr><tr align = "center" ><td> 1 </td><td> 姓名1 </td><td> 男 </td><td align = "right" > 18 </td></tr><tr><td> 2 </td><td> 姓名2 </td><td> 女 </td><td> 22 </td></tr><tr><td> 3 </td><td> 姓名3 </td><td> 男 </td><td> 23 </td></tr></table>
7. 框架标签
- 框架集<frameset></frameset>(和body标签只能二选一)
属性:
cols:左右排列
rows:上下排列
cols和rows里面的值可以是像素,也可以是百分比,还可以是*
frameborder:是否显示边框(0、1)
noresize:设置框架不可重置大小,该值既是属性又是值
scrolling:设置是否使用滚动条(yes、no)
- 框架(frame,必须在frameset内)
属性:
name:指定每个frame窗体的名称,可以通过超链接控制每个窗体的显示内容
noresize:设置框架不可重置大小,该值既是属性又是值
scrolling:设置是否使用滚动条(yes、no)
示例
<frameset rows = "20%,*,15%" ><frame src = "1.html" name = "topFrame" noresize /><frameset cols = "180px,*" ><frame src = "2.html" name = "toolFrame" scrolling = "yes" /><frame src = "3.html" name = "mainFrame" /></frameset><frame src = "4.html" name = "footFrame" /></frameset>
- 内联框架<iframe />
属性:
src:嵌入内容的地址
name:内联框架的名字
width:宽度
height:高度
scrolling:设置是否使用滚动条(yes、no)
可以使用<a />超链接来切换内敛框架中页面显示。
示例
<!DOCTYPE html><html><head><meta charset = "UTF-8" ><title> Insert title here </title></head><body><div><a href = "frame1.html" target = "pic" > 男士背包 </a></div><br/><div><a href = "frame2.html" target = "pic" > 女士背包 </a></div><br/><div><a href = "frame3.html" target = "pic" > 儿童背包 </a></div><br/><hr/><div id = "area" > 商品展示<br/><iframe src = "frame1.html" name = "pic" width = "450px" height = "450px" ></iframe></div></body></html>
8. 表单标签
8.1 表单标签<form></form>
属性:
- action:请求到的地址
- method:请求的方式(get、post)
get方式提交会显示在地址栏(默认)
post方式提交不会显示在地址栏
get和post提交是把表单输入域中属性的名称和值提交了,所以有名字的输入域,输入域的内容才会被提交。 - enctype:请求正文的类型,默认:application/x-www-form-urlencoded
8.2 表单输入域<input />
属性:
- type:类型,取值有10种。
- name:输入域的名称,表单是否提交仅取决于是否定义了name属性。
- value:输入域的值
type:
- text:普通文本框
- password:密码框
- submit:提交按钮,有内置的提交事件
- reset:重置按钮,有内置的重置事件
- file:文件选择域
- image:用于替代提交按钮,src属性是指定图像的位置。
- radio:单选按钮,依据name属性来区分组,使用checked属性设置默认
- checkbox:多选按钮,依据name属性来区分组,使用checked属性设置默认
- button:普通按钮,需要事件的支持
- hidden:隐藏域,用户不可见
8.3 下拉列表<select></select>
属性:
- size:设置下拉列表显示的项数
- multiple:支持多选
下拉列表项<option></option>(子标签)
属性:
- selected:下拉列表的默认选择属性
8.4 文本域<textarea></textarea>
属性:
- rows:显示的行数
- cols:显示的列数
8.5 标注<lable></lable>
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
属性:
- for:绑定表单元素
8.5 语义化标签
- fieldset:语义化标签,在一个区域内表达一个事情。
- legend:语义化内容的描述。
示例
9. 多媒体标签<embed />(HTML5支持)
属性:
- src:多媒体内容地址
- width,height:宽度和高度
10. 头标签<head></head>
- title:指定浏览器的标题。
- base:为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。
- meta:可提供有关页面的基本信息
属性:
charset:设置文件编码,一般为"UTF-8" - link:定义文档与外部资源的关系。