HTML概述
什么是HTML?
- HTML是 hypertext markup language 超文本标记语言的简称
a. 超文本:音频,视频,图片称为超文本
b. 标记 :<英文单词或者字母>称为标记. 一个HTML页面都是由各种标记组成 - HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程).HTML页面直接由浏览器解析执行
HTML的网络术语
- 网页 :由各种标记组成的一个页面就叫网页 .
- 主页(首页) : 一个网站的起始页面或者导航页面 .
- 标记:<p>称为开始标记 </p>称为结束标记. 也叫标签.每个标签都规定好了特殊的含义。
- 元素: <p>内容</p> 称为元素.
- 属性: 给每一个标签所做的辅助信息。
- xhtml: 符合XML语法标准的HTML。
- dhtml:dynamic,动态的。javascript + css + html 合起来的页面就是一个dhtml
- http:协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。
- SMTP: 邮件传输协议,
- ftp:文件传输协议.
HTML的规范
- HTML是一个弱势语言
- html 不区分大小写
- html页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符,比如dos系统)
- html 的结构
1)声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。<!doctype html>
是HTML5
标准。
2)head
部分: 不会显示在页面上。作用是告诉浏览器一些页面的额外信息。
3)body
部分:我们写的代码必须放在此标签內。
HTML的各种标签(掌握)
- 每个标签都有私有属性。也都有公有属性。
- html中表示长度的单位都是像素。HTML只有一种单位就是像素.
排版标签
所有的浏览器默认情况下都会忽略空格和空行
1. 注释标签
<!- -content - ->
2.段落标签
<p>:p代表一个段落
属性: align
:对齐方式.align ="#" , #=
left,
right,
center
3.<br>换行标记。
4.<hr>:水平线标记
属性:color
: 线的颜色
size
:设定线条厚度,以像素作单位,内定为 2
width
: 线的长短: 1) 绝对值 eg: 500 2) 相对值: 50% . 内定为100%
noshade
: 不要阴影 设定线条为平面显示,若删去则具阴影或立体,这是内定值
align:
对齐方式 取值: left,right,center
5.<center>: 内容居中标记
- <pre>: 预定义格式标签 .告诉浏览器不要忽略空格和空行
- <div>: 块级标签 必须单独占据一行
- <span>: 块级标签 不换行字体标记
字体标签
- <font>:
color
:字体颜色 颜色的写法有3种: 1)英文单词: red
2)十六进制:#00ffcc
3)RGB(三原色) : new RGB(124,156,23)size
:字体大小 字号 取值(1-7)
设置:用’+2’代表值是5 或直接给值face
:字体类型- 特殊字符: <小于 ;>大于; & &符号;"双引号;&apos单引号;
©版权 ;&trade商标; 空格; - 加粗标记<b>:or <strong>
- 斜体标记<i>or <em>
- 划线标记<u>: 下划线 ;
: 中划线(删除线) - 上下标标记<sup>: 上标;<sub>: 下标.
图像标记
- img: 代表是一副图片
属性:src
: 图片的路径
两种写法:a) : 相对路径 路径是相对页面所在的路径 两个标记.
和..
,分表代表当前目录和父路径
b) :绝对路径
1) : 以盘符开始的路径
eg: C:\Documents and Settings\Administrator\桌面\html/images/1.jpg
2) : 网络路径 eg: http://www.baidu.com/images
width
: 宽度
height
:高度
Alt
:当图片显示不出来的时候代替图片显示的内容
title
: 提示性文本
border
: 边框
热点
: 就是特定的位置添加超链
<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>
清单标记
列表标签:3种
a.无序列表<ul>
属性:type
: 值: disc
(默认,实心原点),square
(实心方点),circle
(空心圆)
b.有序列表<ol>
属性: type
:取值:1(阿拉伯数字,默认),a,A,i,I
start
: 从几开始
c.定义列表<dl>
<dt>
: 列表项的标题
<dd>
: 列表项
超链接
3种超链接:
- 连接到其他页面
- 锚: 指给超链接起一个名字,作用是连接到本页面或者其他页面的特定位置。使用name属性给超链起名字
- 连接到邮件:
<a href = "mailto:to whose emaail ">进入我的邮箱</a>
属性:target
: 告诉浏览器怎么显示目标页面
HTML中已定义4个值:
_self
:在同一个浏览器中显示
_blank
: 打开新的浏览器显示
_parent
: 在父窗口中显示
_top
: 在顶级窗口中显示
表格标记
1.<table>
: 表格
属性:
border
:边框
width
:宽度
height
:高度
align
:表格的对齐方式
cellpadding
:单元格内容到边的距离
cellspacing
:单元格和单元格之间的距离
bgcolor
:背景颜色
background
:背景图片
bordercolorlight
:表格的上,左边框,以及单元格的右,下边框的颜色
bordercolordark
: 表格的右,下边框,以及单元格上,左的边框的颜色
dir
:单元格内容的排列方式 取值:ltr
从左到右, rtl
:从右到左
2.<tr>
: 行
属性:
dir
:
bgcolor
:
3.<td>
: 单元格
属性:
align
: 内容的横向对齐方式
valign
: 内容的纵向对齐方式 top,middle,bottom
width
: 绝对值或者相对值(%)
height
:单元格的高度
单元格的合并:
colspan
: 横向合并
rowspan
: 纵向合并
<th>
: 相当于<td>
+ <b>
属性同<td>
<caption>
: 表格的标题
属性:align: 取值:left,center,right,top,bottom
<thead>
<tbody>
<tfoot>
写与不写的区别:
1. 当表格非常大的时候,如果不写,则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话,那么边下载边显示。 2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了,那么顺序任意,浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容
框架标记
<iframe>
框架页面上不允许有body标签 ,在一个页面实现多个页面的访问frameset
: 框架的集合
<frame>
: 框架. 一个框架显示一个页面
rows
: 纵向分部框架.
cols
: 横向分部框架.
写法有两种: 1) 绝对值 “200,*” ,代表剩余的 2) 相对值 "30%,"
scrolling
: 是否需要滚动条。默认是true
noresize
: 固定框架大小
bordercolor
: 给框架边框起一个颜色
name
: 给框架起一个名字
表单标记及语义化
<form>
-用于与服务器端的交互- 属性:
action
:规定当提交表单时,向何处发送表单数据。
method
:属性规定如何发送表单数据 .
表单数据可以作为 URL 变量(method=“get”)或者 HTTP post (method=“post”)的方式来发送。如果采用 POST 方法,浏览器将会按照下面两步来发送数据。首先,浏览器将与 action 属性中指定的表单处理服务器建立联系,一旦建立连接之后,浏览器就会按分段传输的方法将数据发送给服务器。采用 GET 方法,这时浏览器会与表单处理服务器建立连接,然后直接在一个传输步骤中发送所有的表单数据. <input>
输入标签 ,接收用户输入- 属性:
type= #
#
=text
,password
,radio
,checkbox
,hidden
,submit
,reset
,button
,file
,image
- -
<select>
选择标签 - –
<option>
选项标签;value
选项值属性 <textarea>
文本区域,可设置文本的大小rows
,cols
<fieldset>
标签内容的周围将绘制边框,可将表单内的相关元素分组- -
<legend>
为 fieldset 元素定义标题(caption)
.多媒体标记
<bgsound>
: 设置网页背景音乐的元素- 属性:
loop
,
src
:url,必须是以下格式之一:.wav,.au,.mid
volume
:-10,000到0,它决定背景音乐的音量大小
loop
该属性表明音频被播放的次数,是一个数值或infinite。 <embed>
: 播放多媒体文件.<marquee>
: 移动 属性:
direction
移动目标方向 left,right ,up,down ,up,down移动距离是固定的200px
behavior
: 行为方式 取值:slide,alternate,scroll
scrollamount
: 移动速度
loop
: 循环多少圈。负值表示无限循环
scrolldelay
: 移动一次休息多长时间。单位是毫秒
头标记
<html>
<head>
<body>
<title>
-alink=color
点击链接未放下鼠标
-vlink=color
链接点击后
-link=color
链接点击前
-alert
弹窗提示