HTML (Hyper Text Markup Language):
HTML就是超文本标记语言的简写,是最基础的网页语言
HTML的版本:
2.0(IETF)
3.0(W3C)
4.01(W3C)
5.0(W3C)IETF: Internet Engineering Task Force
W3C:World Wide Web Consortium
HTML的特点:是通过标签来定义的语言,
代码都是由标签所组成,代码不用区分大小写由<html>开始,</html>结束
由头部分<head></head>和体部分<body></body>两部分组成
头部分是给HTML页面增加一些辅助或者属性信息,它里面的内容会最先加载body体部分是真正存放页面数据的地方
1.字体标签:<font>
2.标题标签<h1><h2><....h6>
< |
< |
> |
> |
" |
" |
® |
® |
© |
© |
™ |
™ |
|
空格 |
标签:<dl>列表、<dt>标题、<dd>列表项
数字标签:
<ol>列表、<li>列表项
type属性更改项目符号(a A 1 i I)
符号标签:
<ul>列表、<li>列表项
type属性更改项目符号(circle、disc、square)
图像标签<img>: <img src="1.jpg" align="right" border="3" alt="图片说明文字" />
src: 图片路径
align: 对齐方式
border: 边框粗细
<img src="Sunset.jpg" alt="图片说明文字" usemap="#Map" />
<map name=”Map”>
<area shape="rect" coords="50,59,116,104" href="1.html" />
<area shape="circle" coords="118,203,40" href="2.html" />
</map>
链接标签<a>:
<a href="http://www.itheima.com" target="_blank">黑马程序员</a>
href:要链接的地址
target:显示位置
<a name="mark" />
在页面的某个位置做出标记
<a href="#mark">跳转到标记</a>
点击链接跳转到标记位置
框架集合标签<frameset>:
<frameset>中可以放入多个<frame>框架,把页面分成几个部分
<frameset>不能放在body中
<frameset rows="20%,*">
<frame src="1.html" name="top" />
<frameset cols="20%,*">
<frame src="2.html" name="left" />
<frame src="3.html" name="right" />
</frameset>
</frameset>
rows:框架集合每行的高度
cols:框架集合每列的宽度
src:框架中显示的页面
name:框架的名字,可用做超链接的target 表单标签<form>:
内部可以包含文本框、单选、多选、下拉列表等表单项
可以把用户在页面中的输入和选择提交到一个地址
常用属性:
action:提交地址
method:提交方式
<form action="http://www.itheima.com/LoginSetvlet" method="get">
<input type="text" name="username">
<input type="password" name="password">
</form>
输入项<input>:
通过指定type属性可以定义不同的输入项:
text:普通文本框
password:密码框
radio:单选按钮
checkbox:多选按钮
file:文件
hidden:隐藏字段
submit:文本提交按钮
image: 图片提交按钮
reset:重置按钮
button:普通按钮
下拉列表<select>
默认为单选,multipe属性指定是否为多选
size属性指定显示个数
内部用<option>标签指定其中选项
文本域<textarea>
rows属性指定行数
cols属性指定列数
标签<label>
可以用来方便点击或者设置快捷键
<label><input type="radio"> 男</label>
<label for="user" accesskey="u">用户名(u)</label>
<input type="text" id="user" />
定义方式:
style属性:
直接在HTML标签的style属性中定义,例如:
<div style="color: red;">DIV中的文本</div>
style标签:
在<head>标签中加入<style>标签,例如:
<head>
<style type="text/css">
div { color: red; }
</style>
</head>
import:
将CSS代码定义在一个文件中,在<style>标签中引入,已不推荐使用
<style>
@import url(theme.css);
</style>
link:
将CSS代码定义在一个文件中,使用<link>标签引入
<link rel="stylesheet" type="text/css" href="theme.css"