1、HTML的概述:
hypertext markup language 超文本标记语言。
超文本:音频,视频,图片称为超文本。
标记 :<英文单词或者字母>称为标记. 一个HTML页面都是由各种标记组成。
备注:HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程).HTML页面直接由浏览器解析执行。
2、HTML的一些网络术语:
a、xhtml:符合XML语法标准的HTML。
b、dhtml:dynamic,动态的。javascript + css + html 合起来的页面就是一个dhtml。
c、http:协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。
SMTP 邮件传输协议。
ftp:文件传输协议。
备注:编辑html可以使用notepad++ editplus dreamweaver等。
3、html的结构描述:
HTML是一个弱势语言,不区分大小写,页面的后缀名是html或者htm。
主要有3个部分组成
a、声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。<!doctype html>是HTML5标准。
b、head部分: 不会显示在页面上。作用是告诉浏览器一些页面的额外信息。
c、body部分:我们缩写的代码必须放在此标签內。
例如:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>排版标签</title>
</head>
<body>
你好
</body>
</html>
4、html的各种标签-排版标签:
有的标签是成对的有的是单个的。
所有的浏览器默认情况下都会忽略空格和空行。
<p>:p代表一个段落。
属性: align:对齐方式. 取值:left,right,center
例如:<p align = "center">你好</p>
<br>:代表是换行。
<hr>:平分隔线 horizontal rule 。
里面有一些属性可以设置
color: 线的颜色
size : 线的粗细
width: 线的长短
align: 对齐方式 取值: left,right,center
例如:<hr width = "50%" size = "10" color = "red" noshade>//占屏幕的50%的横线,10个像素宽,红色,没有阴影
<center>:内容居中。
center标签里面的所有元素都是居中的,例如:
<center>
<p align = "left">刘德华</p>
<p>刘德华</p>
</center>
注意:center里面的标签属性优先级更大,第一个p标签就是靠左的。
<pre>:预定义格式标签。告诉浏览器不要忽略空格和空行。
例如:正常在p标签里面是显示在一行的,但是在<pre>里面就是2行
<pre>
你好
中国
</pre>
<div>:块级标签 必须单独占据一行。把标签中的内容作为一个块来对待。
例如:
<div align = "left">
林志玲
<p>刘德华</p>
</div>
这个会显示2行
<span>: 块级标签 不换行字体标记。
例如:
<span>你好</span>
<span>你好</span>
这个是一行显示,两个之间有个空格。
5、html的各种标签-字体标签:
<h1>...<h6>:定义字体大小,h1最大,html中只定义了这6个大小,如果还要更大只能用css来设置了。
例如:
<h1 align = "center">刘德华</h1>
<h2>刘德华</h2>
<h3>刘德华</h3>
<h4>刘德华</h4>
<h5>刘德华</h5>
<h6>刘德华</h6>
<font>:
font里面可以设置一些属性
color:颜色
size:大小
face:字体类型
例如:
<font face = "华文彩云" size = "7" color = "red">刘德华</font>
备注:color可以有3中写法
a、英文单词: red
b、十六进制:#00ffcc
c、RGB(三原色) : new RGB(124,156,23)
<b>:加粗
<strong>:加粗
<i>:斜体
<em>: 斜体
<u>: 下划线
<s>: 中划线(删除线)
<sup>: 上标
<sub>: 下标.
特殊字符:
<小于
>大于
& &符号
"双引号
'单引号
© 版权
™商标
空格
扩展:绐
6、html的各种标签-图像标签:
<img>:代表是一副图片。
里面有一些属性需要设置
src : 图片的路径
a、相对路径 路径是相对页面所在的路径 两个标记.和.. ,分表代表当前目录和父路径
b、绝对路径
1) : 以盘符开始的路径
eg: C:\Documents and Settings\Administrator\桌面/images/1.jpg
2) : 网络路径
eg: http://www.baidu.com/images
width: 宽度
height:高度
Alt:当图片显示不出来的时候代替图片显示的内容
title: 提示性文本
border: 边框
例如:
<img src = "images/1.jpg" width = "300" height = "300" alt = "美女" border = "10" title = "这是一个美女">
注意:title属性很多标签都有,鼠标放上面会提示你设置的内容。
热点:就是特定的位置添加超链。
例如:
<img src="images/1.jpg" width="300" height="300" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="circle" coords="122,81,38" href="demo_字体标签.html" />
</map>
7、html的各种标签-清单标签:
3种:
a.无序列表ul
属性:type : 值: disc(默认,实心原点),square(实心方点),circle(空心圆)
例如:
<ul type = "circle">
<li>中国</li>
<li type = "square">美国</li>
<li>日本</li>
</ul>
b.有序列表(OL)
属性: type:取值:1(阿拉伯数字,默认),a,A,i,I
start: 从几开始
例如:
<ol type = "a" start = "10">
<li>中国</li>
<li>美国</li>
<li>日本</li>
</ol>
从10开始
c.定义列表(dl)
dt: 列表项的标题
dd: 列表项
例如:
<dl>
<dt>第一条</dt>
<dd>不得随地吐痰</dd>
<dd>不得爆粗口</dd>
<dt>第二条</dt>
<dd>上课不的迟到</dd>
</dl>
8、html的各种标签-超链接:
3种超链接:
a. 外部连接: 连接到一个外部文件。
b. 锚连接: 是指连接到本页面或者其他页面的特定位置。指给超链接起一个名字,使用name属性给超链起名字。
c. 邮件连接:mailto:xugang@itcast.cn。
属性:target: 告诉浏览器怎么显示目标页面
HTML中已定义4个值:
_self :在同一个浏览器中显示
_blank: 打开新的浏览器显示
_parent: 在父窗口中显示
_top: 在顶级窗口中显示
例如:
<a href = "01-排版标签.html" name = "a" target = "_blank">01-排版标签.html</a>//锚连接
<a href = "mailto:xugang@itcast.cn">进入我的邮箱</a>//邮件连接
9、html的各种标签-表格标记:
<table>:表格
属性:
border:边框
width:宽度
height:高度
align:表格的对齐方式
cellpadding:单元格内容到边的距离
cellspacing:单元格和单元格之间的距离
bgcolor:背景颜色
background:背景图片
bordercolorlight:表格的上,左边框,以及单元格的右,下边框的颜色
bordercolordark: 表格的右,下边框,以及单元格上,左的边框的颜色
dir:单元格内容的排列方式 取值:ltr 从左到右, rtl:从右到左
<tr>:行
属性:
dir:
bgcolor:
<td>:单元格
属性:
align: 内容的横向对齐方式
valign: 内容的纵向对齐方式 top,middle,bottom
width: 绝对值或者相对值(%)
height:单元格的高度
单元格的合并:
colspan: 横向合并
rowspan: 纵向合并
<caption>: 表格的标题.
<th>: 相当于<td> + <b>
属性同<td>
<tbody> :表的body
<thead>:表头
<tfoot>:表尾
备注:
1. 当表格非常大的时候,如果不写,则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话,那么边下载边显示。 2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了,那么顺序任意,浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容
例如:
<table border = "1" width = "500" height = "300" align = "center" cellpadding = "" cellspacing = "20"
bordercolordark = "red" bordercolorlight = "green" bgcolor = "" background = "" dir = "rtl">
<tbody>
<tr bgcolor = "#00cc00" >
<td bgcolor = "red" >刘德华</td>
<td background = "images/2.gif">51</td>
<td align = "center">男</td>
<td valign = "bottom">香港</td>
</tr>
<tr>
<td rowspan = "2">成龙章子怡</td>
<td>58</td>
<td>男</td>
<td>香港</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>35</td>
<td colspan = "2">北京</td>
</tr>
</tfoot>
<thead>
<tr >
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地址</th>
</tr>
</thead>
<caption align = "bottom">学员信息</caption>
</table>
10、html的各种标签-框架标记:
框架页面上不允许有body标签
frameset: 框架的集合
rows: 纵向分部框架.
cols: 横向分部框架.
写法有两种:
1) 绝对值 "200,*" ,*代表剩余的
2) 相对值 "30%,*"
frame: 框架. 一个框架显示一个页面
scrolling: 是否需要滚动条。默认是true
noresize : 固定框架大小
bordercolor: 给框架边框起一个颜色
name : 给框架起一个名字
内嵌框架: 嵌入在一个页面上的框架.(仅仅IE支持)
iframe:
属性:
width: 宽度
height: 高度
scrolling : 是否需要滚动条
例如:
<frameset rows = "200,*">
<frame src = "top.html"></frame>
<frame src = "bottom.html"></frame>
</frameset>
11、html的各种标签-表单标记:
<form></form>:表单标记
例如:
<form action = "02-字体标签.html" method = "get">
<input>:
type = "text" 普通输入框
例如:
姓名:<input type = "text" value = "请输入姓名" size = "50" name = "name" ><br>
注意:name是提交给服务器的字段,value是提交给服务器的值
type = type = "password" 密码输入框
例如:
密码:<input type = "password" value = "请输入姓名" size = "50" ><br>
type = "hidden" 隐藏框
例如:
隐藏框:<input type = "hidden" value = "请输入姓名" size = "50"><br>
type = "radio" 单选框
例如:
性别:<input type = "radio" name = "gender" value = "male" checked>男<input type = "radio" name = "gender" value = "female">女<br>
注意:name必须要一致才能作为一个组。checked设置默认选择
type = "checkbox" 复选框
例如:
爱好:<input type = "checkbox" name = "love" value = "eat" checked>吃饭
<input type = "checkbox" name = "love" value = "sleep" checked>睡觉
<input type = "checkbox" name = "love" value = "study" checked>学java<br>
type = "button" 普通按钮
例如:
<input type = "button" value = "普通按钮" onclick = "alert(this.type)">
就是普通的一个按钮,不会携带数据
第二种写法:
<button onclick = "alert('大家好')">普通按钮</button>
type = "submit" 提交按钮
例如:
<input type = "submit" value = "提交按钮">
将页面填写的信息提交给其它页面,会放到url的后面
例如: file:///D:/BaiduYunDownload/day01_html/day01_html/上课示例/02-字体标签.html?gender=male&country=china&love=eat&love=sleep&love=study&xueli=大学&xueli=高中&xueli=小学
type = "reset" 重置按钮
例如:
<input type = "reset" value = "重置按钮">
重置页面的填写信息
type = "image" 图片按钮
例如:
<input type = "image" src = "images/1.jpg" width = "80" height = "30">
<select></select>:清单列表。
例如:
学历:<select name = "xueli" multiple>
<option value = "大学">大学</option>
<option value = "高中">高中</option>
<option value = "小学">小学</option>
</select>
<textarea></textarea>说明文本
例如:
备注:<textarea rows = "5" cols = "20" >大神留点话吧</textarea><br>
5行20列
<fieldset></fieldset>:显示一个边框区域
里面有个<legend>选填信息</legend>显示提示信息的
一个完整的例子参考:
<form action = "02-字体标签.html" method = "get">
<fieldset>
<legend>必填信息</legend>
姓名:<input type = "text" value = "请输入姓名" size = "50" readonly disabled><br>
密码:<input type = "password" value = "请输入姓名" size = "50" ><br>
隐藏框:<input type = "hidden" value = "请输入姓名" size = "50"><br>
性别:<input type = "radio" name = "gender" value = "male" checked>男<input type = "radio" name = "gender" value = "female">女<br>
</fieldset>
<br>
<fieldset>
<legend>选填信息</legend>
国籍:<input type = "radio" name = "country" value = "china" checked>中国<input type = "radio" name ="country" value = "america">美国<br>
爱好:<input type = "checkbox" name = "love" value = "eat" checked>吃饭
<input type = "checkbox" name = "love" value = "sleep" checked>睡觉
<input type = "checkbox" name = "love" value = "study" checked>学java<br>
学历:<select name = "xueli" multiple>
<option value = "大学">大学</option>
<option value = "高中">高中</option>
<option value = "小学">小学</option>
</select>
备注:<textarea rows = "5" cols = "20" >大神留点话吧</textarea><br>
</fieldset>
<input type = "button" value = "普通按钮" onclick = "alert(this.type)">
<input type = "submit" value = "提交按钮">
<input type = "reset" value = "重置按钮">
<input type = "image" src = "images/1.jpg" width = "80" height = "30">
</form>
12、html的各种标签-多媒体标记:
<bgsound>:播放背景音乐
例如:
<bgsound src = "test.mp3" loop = "3"></bgsound>
<embed>:播放多媒体文件。
例如:
<embed src = "天仙子.mp3" autostart = "false" volume = "0" loop = "5"></embed>
volume是默认的音量大小
<marquee>:文本的移动
属性:
direction 移动目标方向 left,right ,up,down ,up,down移动距离是固定的200px
behavior: 行为方式 取值:slide,alternate,scroll
scrollamount : 移动速度
loop: 循环多少圈。负值表示无限循环
scrolldelay: 移动一次休息多长时间。单位是毫秒
一个完整的例子参考:
<body>
<embed src = "天仙子.mp3" autostart = "false" volume = "0" loop = "5"></embed>
<marquee behavior = "alternate" >我来啦</marquee>
<marquee behavior = "scroll" scrollamount = "50" loop = "3" scrolldelay = "1000">我来啦</marquee>
<marquee direction = "up" behavior = "slide" width = "300" height = "300" bgcolor = "#ff9999" >我来啦</marquee>
</body>
12、html的各种标签-头标记:
一个完整的例子参考:
<body bgcolor = "" background = "" text = "red" link = "red" alink = "blue" vlink = "yellow" leftmargin = "0" topmargin = "0">
大家好
<a href = "#">你好</a>
<label onclick = "alert(this.innerHTML)">林志玲</label>
</body>
里面的一些属性
link 链接的颜色
alink 鼠标点击链接但没有松开的颜色
vlink 点击链接之后的颜色