WEB_HTML基础
2013-08-04 23:54
330 查看
html:是一种超文本标记语言：
一个HTML文档的基本结构分为两大部分（头、体）
头：描述的是页面的数据
体：描述页面显示的内容
<!-- 根标记是html -->
<html>
<head>
<!--
这其中描述的是页面的数据 -->
</head>
<body>
<!--
这里描述的是页面显示的内容 -->
</body>
</html>
上面就是一个html文档的基本结构
描述页面数据的标记：
<title>标题</title>
这个描述的是页面的标题
<meta></meta>
这是一个消息头
消息头，这是服务器发送的一些键值对，比如：
<meta http-equiv="content-type"
content="text/html;charset=utf-8">
</meta>
上面就是一个消息头，表示浏览器读到的是一个html文档，字符编码是utf-8
http-equiv属性：这个用来设置消息头
content属性：用来设置消息头对应的值
<html>
<head>
<!--
这其中描述的是页面的数据 -->
<title>标题</title>
<meta
http-equiv="content-type"
content="text/html;charset=utf-8"></meta>
<meta
http-equiv="refresh"
content="3">
</head>
<body>
<!--
这里描述的是页面显示的内容 -->
hello web
</body>
</html>
比如上面的这个例子就是表示浏览器读到的是一个html文档，字符编码是utf-8,而且这个文档3秒会刷新一次
<meta
http-equiv="refresh"
content="3;url=http://www.baidu.com">
可以像上面这样写表示这个文档3秒后会刷新并且会跳转到http://www.baidu.com
CSS：主要是用来为html文档中的各元素设定样式来用的css文件又叫做样式文件
一个CSS文件没有什么特别，对应的元素写上相应的样式就可以了比如有一个style.css文件其内容如下：
body{
font-size:
60px;
color:red;
font-style:
italic;
}
如何把这个css文件关联到相应的html文档当中呢？这里还是要在html头中进行链接
<link
rel="stylesheet"
type="text/css"
href="style.css">
这里表示表链接一个样式表，它类型是css文档，链接的文档的位置当前目录下的style.css
注意直接写上<link 属性名=“属性值”>，而不要写成<link></link>或是<link/>
<html>
<head>
<!--
这其中描述的是页面的数据 -->
<title>标题</title>
<meta
http-equiv="content-type"
content="text/html;charset=utf-8"></meta>
<meta
http-equiv="refresh"
content="3">
<link
rel="stylesheet"
type="text/css"
href="style.css">
</head>
<body>
<!--
这里描述的是页面显示的内容 -->
hello web
</body>
</html>
样式文件的内容如果是：
body{
font-size:
60px;
color:red;
font-style:
italic;
}
则表示<body>标记下的元素的字体设为60px;字体的颜色为red样式为斜体
这是在头中引用外部的样式文件也可以直接把样式文件的内容写在头当中
<html>
<head>
<style>
body{
font-size:60px;
}
</style>
</head>
<body>
hello web
</body>
</html>
在这个html文档中就直接把CSS的内容写了<head>当中了，一样可以达到控制文档中相应元素样式的效果
那么这个时候有一点要注意的如果在html文档中引入了外部的css文件而且又在html的<head>中定义了相应的样式内容则这个时候会对于重复的样式内容以直接写在<head>中的样式为准
在头中还可以引用<script>脚本
<html>
<head>
<!--
这里可以引用脚本 -->
<script
src="c.js"></script>
<!--
在这里也可以直接写脚本 -->
<script>
//脚本内容
</script>
</head>
<body>
</body>
</html>
<script
src="c.js"></script>
表示引入一个脚本，这个脚本是当前目录下的c.js文件
<script>
//脚本内容
</script>
这个表示直接在<head>当中写脚本内容
在<body>当中比较常用的标签有如下几个：
1， 链接<a href=””></a>
2， 表格<table></table>
3， 表单<form></form>
4， 列表 无序列表<ul> 有序列表<ol>
5， 窗口划分<iframe> <frameset>
<a href>:
这个表示一个链接
<a href=”地址” target=”” title=””>描述性的文字</a>
href属性：指定要链接的地址
target属性：指定在哪个窗口打开链接
_slef:在当前窗口打开这个链接（默认值）
_blank:在新的窗口中打开这个链接
title:提示信息
<html>
<head>
</head>
<body>
<a
href="01.html"
target="_self"
title="打开01.html">click
me</a>
</body>
</html>
上面的这个例子就表示有一个链接，它会在当前窗口中打开当前目录下的01.html文件
这里target=”_self”表示在当前窗口打开，默认值就是_self因而如果这个属性省略的话也是一样的在当前窗口打开这个链接的文件
target=”_blank”表示在新的窗口中打开一个链接
title=”打开01.html”这是一个提示性的文字，表示当鼠标放在这个链接上的时候会给出相应的提示
常常会使用图片作为链接：
<a href=”链接地址”>
<img src=”图片的位置” width=”图片的宽度” height=”图片的高度” border=”0”/>
</a>
<html>
<head>
</head>
<body>
<a
href="01.html"
target="_self"
title="打开01.html">click
me</a>
<a
href="02.html">
<img
src="go.gif"
border="0"/>
</a>
</body>
</html>
上面的例子加上一个图片的链接
<a href=”这里可以是任意的文档”></a>
<html>
<head>
</head>
<body>
<a
href="01.html"
target="_self"
title="打开01.html">click
me</a>
<a
href="02.html">
<img
src="go.gif"
border="0"/>
</a>
<a
href="../../../../儿歌串烧50首.flv">
儿歌串烧50首
</a>
</body>
</html>
这里链接了一个文档是flv格式的，这个时候点击儿歌串烧50首会弹出下载框，因为浏览器无法试别这个档不知道怎么打开这个文档。
<a href=”mailto:advent-86@163.com?subject=”hello”>发送邮件</a>
点击这个链接会弹出一个邮件默认软件进行邮件发送
锚点：
实现在页面内部的跳转，在同一个页面中先设置一个链接点位置，然后在希望链接过来的地方可以跳转过来
<a name=”top”>这里是顶部</a>
这里就在页面中设置了一个链接点
<a href=”#top”>跳到顶部</a>
可以从这里跳到链接点
表格：
<table border=”” width=”” cellpadding=”” cellspacing=””>
<tr align=””>
<td align=””></td>
<td></td>
</tr>
</table>
border:表示边框的宽度，单位是像素（默认值是0）
width：表格的宽度
cellpadding:表示单元格内容与单元格之间的间隔
cellspacing:表示单元格之间的间隔
align表示水平对齐方式（center,right,left）
<html>
<head>
</head>
<body>
<!--
创建一个表格 -->
<table
border="1px"
width="40%"
cellpadding="0"
cellspacing="0">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>30</td>
</tr>
</table>
</body>
</html>
单元格中的对齐方式默认是左对齐的，可以指定相应的对齐方式在<td align=”指定对齐方式”>或者可以使用<tr align=”对齐方式”>
上面建立的表格是规则的表格几行几列都是很完整的下面可以建立不规则的表格：
使用到的属性
colspan:跨列合并单元格
rowspan:跨行合并单元格
valign:垂直对齐
<html>
<head></head>
<body>
<!--
规则表格 -->
<table
border="1"
width="80%"
cellpadding="0"
cellspacing="0">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<br
/>
<!--
不规则表格 -->
<table
border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th
rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855
<br></td>
</tr>
</table>
</body>
</html>
一个表格的完整结构是：
<table>
<caption>表格的标题</caption>
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
</table>
thead,tfoot这两个标记可以不出现就算是出现的话也只能出现一次
tbody可以出现多次
caption只可以出现一次或是不出现
对于表格来说它是可以嵌套的，在一个单元格中再写一个表格是可以的通常在早期做网页的时候有人会常常用表格来做整个页面的布局常常会进行表格的嵌套先用一个表格做一个整体的框架再在各个单元格中嵌套表格来显示数据，现在一般的布局会使用DIV来实现
表单：
<form action=”” method=”” enctype=””>
多个表单元素标记
</form>
表单元素的主要标记：
input标记：
<input type=”text” name=”” value=””/>
type属性：input标记的具体类型，默认是文本框
name属性：标记的一个名称，这个名称用来向服务器生成一个请求参数，如果没有名称则不会向服务器发送这个数据
value属性：表示这个标单元素的缺省值
<input type=”password” name=”pass”/> 这是一个密码输入框
<input type=”radio” name=”radio” value=”” checked=”checked”/>
这是一个单选按钮，单选按钮有可能有一组中选择其中一个则这一组中的单选按钮应该是互斥的并且要注意一组单选按钮的话它们的name属性值是一样的
value属性:表示要提交给服务端的数据
checked属性：它只有一个值表示被选上的
<input type=”checkbox” name=”” value=”” checked=””/> 这是一个复选按钮
<input type=”file” name=””/> 这是一个文件上传标记
<input type=”submit” value=”确定”/> 这是一个提交按钮
<input type=”reset” value=”重置”/> 这是一个重置按钮
<input type=”hidden” name=”” value=””/> 这是一个隐藏域
它不会在界面显示出来，一般用于向服务端发送数据
name属性：向服务端传数据时的参数名
value属性：传的值
<input type=”button” value=””/> 这是一个普通的按钮，value中的值是显示在按钮上的文字，点击它什么都不会做
<select name=”” multiple=””>
<option value=””></option>
</select>
value属性是提交给服务端的值
multiple属性：就只有一个值”multipart”,设置后下拉列表变成了一个多选框
<textarea name=”” cols=”” rows=””></textarea>
这是一个多行文本的输入框，cols表示列数，rows表示列数
窗口的划分：
<frameset rows=”20%,*”>
<frame name=”topFrame” src=”top.html”/>
<frameset cols=”30%,*”>
<frame name=”leftFrame” src=”left.html”/>
<frame name=”mainFrame” src=”main.html”/>
</frameset>
</frameset>
frameset标记不能够与body标记同时出现
rows表示把窗口划分成几行
cols表示把窗口划分成几列
frame标记定义子窗口，其中src指定要加载的页面
iframe:
表示在当前窗口中嵌入子窗口
<iframe src=”” width=”” height=””></iframe>
src:指定要加载的页面
iframe是可以在body标记里的
<html>
<head></head>
<body
style="font-size:
20px;font-style:
italic;">
top...
</body>
</html>
一个HTML文档的基本结构分为两大部分（头、体）
头：描述的是页面的数据
体：描述页面显示的内容
<!-- 根标记是html -->
<html>
<head>
<!--
这其中描述的是页面的数据 -->
</head>
<body>
<!--
这里描述的是页面显示的内容 -->
</body>
</html>
上面就是一个html文档的基本结构
描述页面数据的标记：
<title>标题</title>
这个描述的是页面的标题
<meta></meta>
这是一个消息头
消息头，这是服务器发送的一些键值对，比如：
<meta http-equiv="content-type"
content="text/html;charset=utf-8">
</meta>
上面就是一个消息头，表示浏览器读到的是一个html文档，字符编码是utf-8
http-equiv属性：这个用来设置消息头
content属性：用来设置消息头对应的值
<html>
<head>
<!--
这其中描述的是页面的数据 -->
<title>标题</title>
<meta
http-equiv="content-type"
content="text/html;charset=utf-8"></meta>
<meta
http-equiv="refresh"
content="3">
</head>
<body>
<!--
这里描述的是页面显示的内容 -->
hello web
</body>
</html>
比如上面的这个例子就是表示浏览器读到的是一个html文档，字符编码是utf-8,而且这个文档3秒会刷新一次
<meta
http-equiv="refresh"
content="3;url=http://www.baidu.com">
可以像上面这样写表示这个文档3秒后会刷新并且会跳转到http://www.baidu.com
CSS：主要是用来为html文档中的各元素设定样式来用的css文件又叫做样式文件
一个CSS文件没有什么特别，对应的元素写上相应的样式就可以了比如有一个style.css文件其内容如下：
body{
font-size:
60px;
color:red;
font-style:
italic;
}
如何把这个css文件关联到相应的html文档当中呢？这里还是要在html头中进行链接
<link
rel="stylesheet"
type="text/css"
href="style.css">
这里表示表链接一个样式表，它类型是css文档，链接的文档的位置当前目录下的style.css
注意直接写上<link 属性名=“属性值”>，而不要写成<link></link>或是<link/>
<html>
<head>
<!--
这其中描述的是页面的数据 -->
<title>标题</title>
<meta
http-equiv="content-type"
content="text/html;charset=utf-8"></meta>
<meta
http-equiv="refresh"
content="3">
<link
rel="stylesheet"
type="text/css"
href="style.css">
</head>
<body>
<!--
这里描述的是页面显示的内容 -->
hello web
</body>
</html>
样式文件的内容如果是：
body{
font-size:
60px;
color:red;
font-style:
italic;
}
则表示<body>标记下的元素的字体设为60px;字体的颜色为red样式为斜体
这是在头中引用外部的样式文件也可以直接把样式文件的内容写在头当中
<html>
<head>
<style>
body{
font-size:60px;
}
</style>
</head>
<body>
hello web
</body>
</html>
在这个html文档中就直接把CSS的内容写了<head>当中了，一样可以达到控制文档中相应元素样式的效果
那么这个时候有一点要注意的如果在html文档中引入了外部的css文件而且又在html的<head>中定义了相应的样式内容则这个时候会对于重复的样式内容以直接写在<head>中的样式为准
在头中还可以引用<script>脚本
<html>
<head>
<!--
这里可以引用脚本 -->
<script
src="c.js"></script>
<!--
在这里也可以直接写脚本 -->
<script>
//脚本内容
</script>
</head>
<body>
</body>
</html>
<script
src="c.js"></script>
表示引入一个脚本，这个脚本是当前目录下的c.js文件
<script>
//脚本内容
</script>
这个表示直接在<head>当中写脚本内容
在<body>当中比较常用的标签有如下几个：
1， 链接<a href=””></a>
2， 表格<table></table>
3， 表单<form></form>
4， 列表 无序列表<ul> 有序列表<ol>
5， 窗口划分<iframe> <frameset>
<a href>:
这个表示一个链接
<a href=”地址” target=”” title=””>描述性的文字</a>
href属性：指定要链接的地址
target属性：指定在哪个窗口打开链接
_slef:在当前窗口打开这个链接（默认值）
_blank:在新的窗口中打开这个链接
title:提示信息
<html>
<head>
</head>
<body>
<a
href="01.html"
target="_self"
title="打开01.html">click
me</a>
</body>
</html>
上面的这个例子就表示有一个链接，它会在当前窗口中打开当前目录下的01.html文件
这里target=”_self”表示在当前窗口打开，默认值就是_self因而如果这个属性省略的话也是一样的在当前窗口打开这个链接的文件
target=”_blank”表示在新的窗口中打开一个链接
title=”打开01.html”这是一个提示性的文字，表示当鼠标放在这个链接上的时候会给出相应的提示
常常会使用图片作为链接：
<a href=”链接地址”>
<img src=”图片的位置” width=”图片的宽度” height=”图片的高度” border=”0”/>
</a>
<html>
<head>
</head>
<body>
<a
href="01.html"
target="_self"
title="打开01.html">click
me</a>
<a
href="02.html">
<img
src="go.gif"
border="0"/>
</a>
</body>
</html>
上面的例子加上一个图片的链接
<a href=”这里可以是任意的文档”></a>
<html>
<head>
</head>
<body>
<a
href="01.html"
target="_self"
title="打开01.html">click
me</a>
<a
href="02.html">
<img
src="go.gif"
border="0"/>
</a>
<a
href="../../../../儿歌串烧50首.flv">
儿歌串烧50首
</a>
</body>
</html>
这里链接了一个文档是flv格式的，这个时候点击儿歌串烧50首会弹出下载框，因为浏览器无法试别这个档不知道怎么打开这个文档。
<a href=”mailto:advent-86@163.com?subject=”hello”>发送邮件</a>
点击这个链接会弹出一个邮件默认软件进行邮件发送
锚点：
实现在页面内部的跳转，在同一个页面中先设置一个链接点位置，然后在希望链接过来的地方可以跳转过来
<a name=”top”>这里是顶部</a>
这里就在页面中设置了一个链接点
<a href=”#top”>跳到顶部</a>
可以从这里跳到链接点
表格：
<table border=”” width=”” cellpadding=”” cellspacing=””>
<tr align=””>
<td align=””></td>
<td></td>
</tr>
</table>
border:表示边框的宽度，单位是像素（默认值是0）
width：表格的宽度
cellpadding:表示单元格内容与单元格之间的间隔
cellspacing:表示单元格之间的间隔
align表示水平对齐方式（center,right,left）
<html>
<head>
</head>
<body>
<!--
创建一个表格 -->
<table
border="1px"
width="40%"
cellpadding="0"
cellspacing="0">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>30</td>
</tr>
</table>
</body>
</html>
单元格中的对齐方式默认是左对齐的，可以指定相应的对齐方式在<td align=”指定对齐方式”>或者可以使用<tr align=”对齐方式”>
上面建立的表格是规则的表格几行几列都是很完整的下面可以建立不规则的表格：
使用到的属性
colspan:跨列合并单元格
rowspan:跨行合并单元格
valign:垂直对齐
<html>
<head></head>
<body>
<!--
规则表格 -->
<table
border="1"
width="80%"
cellpadding="0"
cellspacing="0">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<br
/>
<!--
不规则表格 -->
<table
border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th
rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855
<br></td>
</tr>
</table>
</body>
</html>
一个表格的完整结构是：
<table>
<caption>表格的标题</caption>
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
</table>
thead,tfoot这两个标记可以不出现就算是出现的话也只能出现一次
tbody可以出现多次
caption只可以出现一次或是不出现
对于表格来说它是可以嵌套的，在一个单元格中再写一个表格是可以的通常在早期做网页的时候有人会常常用表格来做整个页面的布局常常会进行表格的嵌套先用一个表格做一个整体的框架再在各个单元格中嵌套表格来显示数据，现在一般的布局会使用DIV来实现
表单：
<form action=”” method=”” enctype=””>
多个表单元素标记
</form>
表单元素的主要标记：
input标记：
<input type=”text” name=”” value=””/>
type属性：input标记的具体类型，默认是文本框
name属性：标记的一个名称，这个名称用来向服务器生成一个请求参数，如果没有名称则不会向服务器发送这个数据
value属性：表示这个标单元素的缺省值
<input type=”password” name=”pass”/> 这是一个密码输入框
<input type=”radio” name=”radio” value=”” checked=”checked”/>
这是一个单选按钮，单选按钮有可能有一组中选择其中一个则这一组中的单选按钮应该是互斥的并且要注意一组单选按钮的话它们的name属性值是一样的
value属性:表示要提交给服务端的数据
checked属性：它只有一个值表示被选上的
<input type=”checkbox” name=”” value=”” checked=””/> 这是一个复选按钮
<input type=”file” name=””/> 这是一个文件上传标记
<input type=”submit” value=”确定”/> 这是一个提交按钮
<input type=”reset” value=”重置”/> 这是一个重置按钮
<input type=”hidden” name=”” value=””/> 这是一个隐藏域
它不会在界面显示出来，一般用于向服务端发送数据
name属性：向服务端传数据时的参数名
value属性：传的值
<input type=”button” value=””/> 这是一个普通的按钮，value中的值是显示在按钮上的文字，点击它什么都不会做
<select name=”” multiple=””>
<option value=””></option>
</select>
value属性是提交给服务端的值
multiple属性：就只有一个值”multipart”,设置后下拉列表变成了一个多选框
<textarea name=”” cols=”” rows=””></textarea>
这是一个多行文本的输入框，cols表示列数，rows表示列数
窗口的划分：
<frameset rows=”20%,*”>
<frame name=”topFrame” src=”top.html”/>
<frameset cols=”30%,*”>
<frame name=”leftFrame” src=”left.html”/>
<frame name=”mainFrame” src=”main.html”/>
</frameset>
</frameset>
frameset标记不能够与body标记同时出现
rows表示把窗口划分成几行
cols表示把窗口划分成几列
frame标记定义子窗口，其中src指定要加载的页面
iframe:
表示在当前窗口中嵌入子窗口
<iframe src=”” width=”” height=””></iframe>
src:指定要加载的页面
iframe是可以在body标记里的
<html>
<head></head>
<body
style="font-size:
20px;font-style:
italic;">
top...
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- WEB基础__HTML 概述及常用标签
- HTTP协议、正则表达式、HTML，WEB数据采集基础
- WEB前端-HTML-基础
- Web学习-html基础
- HTML5零基础学习Web前端需要知道哪…
- HTML Web图形样式基础4
- Web基础(1 html)
- web基础（HTML、JavaScript、JQuery、Bootstrap）(有些图片有空再引入）
- HTML+CSS基础+web前端编码规范
- Web前端基础----HTML
- Web基础之HTML入门
- web前端-HTML基础知识
- Web学习篇之---html基础知识（一）
- HTML(超文本标记语言)-----WEB开发基础之二
- [置顶] 【html 走进web】Web基础 网页的骨骼HTML
- web前端－HTML基础－001
- web基础 (二) html标签
- 学习Web基础（HTML/CSS/JS)+服务器端技术(LAMP)
- Web学习篇之---html基础知识（一）
- Slickflow.NET 开源工作流引擎基础介绍(三) -- 基于HTML5/Bootstrap的Web流程设计器