标签：
HTML基础
HTML是用来制作网页的标记语言
HTML是Hypertext Markup Language的英文缩写,即超文本标记语言
HTML语言是一种标记语言,不需要编译,直接由浏览器执行
HTML文件是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀
HTML是大小写不敏感的,HTML与html是一样的
HTML是由W3C的维护的
文件类型:文本文件,二进制文件,可执行文件(我们的程序)
HTML的标签
html -- 定义html文档 body -- 定义文档体body
head -- 定义文档头信息head title -- 定义文档的标题title
a -- html链接标签a img -- html图像标签img
div -- html层div table -- 定义html表格table
tr -- 定义表格行tr td -- 定义表格列td
form -- html表单标签form input -- 定义表单的输域
HTML标签属性
HTML属性一般都出现在HTML标签中, 是HTML标签的一部分。
标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。
标签可以拥有多个属性。
属性由属性名和值成对出现。
示例
<a href="http://www.mengnanjizhongying.com">萌男集中营</a> <!-- 定义一个萌男集中营网站的超级链接 -->
<img src="images/linux_logo.jpg" width="80" height="40"/> <!-- 插入一张"linux_logo.jpg"图片,并设置图片显示的高度和宽度 -->
HTML文head档头部元素
head标签代表HTML文档的头信息，以<head>开始,</head>结束。
头(head)和含了当前文档的一些信息,例如标题信息,meta信息等,正常情况下头信息是不会显示在HTML文档中的.
head元素包含的常用标签:
title标签 -- 代表HTML文档的标题
base标签 -- 将相对URL转换为完整的绝对URL
meta标签 -- 用于定义文件信息的名称、内容等信息
link标签 -- 当在文档中声明使用外接资源(如CSS)时使用此标签
style标签 -- 在文档中声明样式时使用此标签
script标签 -- 在文档中使用JavaScript脚本
示例
<head>
<base href="http://www.mengnanjizhongying.com ">
<title>萌男集中营,最萌,超萌</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name=“keywords” content=“最萌/超萌">
<meta name=“description” content=“最萌" />
<meta name=“author” content=“萌男集中营">
<script type="text/javascript" src="js/pngforie6.js"></script>
<link type="text/css" rel="stylesheet" href="./css/index.css"/>
<style>
body{
margin:0px;
padding:0px;
background:red;
color:green;
}
</style>
</head>
HTML文字页面的编辑
文字页面分两种:1是格式标签 2是文本标签
格式标签
<br> 换行标签，完成文字的紧凑显示。可以使用连续多个<br>标签来换行
<p> 段落标签,里面可以加入文字,列表,表格等，可以<p></p>或<p />使用
<center> 居中对齐标签，使段落或文字相对于上一层标记居中显示
<pre> 按原文显示标签，可以把原文件中的空格,回车,换行,tab键表现出来
<li> 代表HTML列表项目，每个列表项使用一对<li></li>标记
<ul> 代表HTML无序列表 ，里面每一列表项使用<li>标签定义
<ol> 代表HTML有序列表 ，里面每一列表项使用<li>标签定义
<hr> 水平分割线标签，用于段落与段落之间的分割
示例
无顺序列表： <!-- 在页面中输出一个文本 -->
<ul> <!-- 无顺序列表的开始标记 -->
<li>萌</li> <!-- 无顺列表第一个列表项目 -->
<li>最萌</li> <!-- 无顺列表中第二个列表项目 -->
<li>超级萌</li> <!-- 无顺列表中第三个列表项目 -->
</ul>
有顺序列表： <!-- 有顺序列表的开始标记 -->
<ol> <!-- 有顺序列表的开始标记 -->
<li>萌</li> <!-- 有顺列表中第一个列表项目 -->
<li>最萌</li> <!-- 有顺列表中第二个列表项目 -->
<li>超级萌</li> <!-- 有顺列表中第三个列表项目 -->
</ol>
文本标签
<hn> 标题字标签，n为1-6，定义六级标题，而且会自动换行插入一个空行
<b> 粗体字标签
<i> 斜体字标签
<u> 下划线字体标签
<sub> 文字下标字体标签
<sup> 文字上标字体标签
<font> 字体标签，可以通过标签的属性指定文字的大小、颜色及字体等信息
<tt> 打字机文字
<cite> 用于引证、举例、通常为斜体字
<em> 表示强调，通常为斜体字
<strong> 表示强调，通常为粗体字
<small> 小型字体标签
<big> 大型字体标签
示例
<html>
<head><title>文本标记测试网页</title></head>
<body>
<h1>使用<H1>输出一号标题字体</h1>
<h2>使用<H2>输出二号标题字体</h2>
<h3>使用<H3>输出三号标题字体</h3>
<h4>使用<H4>输出四号标题字体</h4>
<h5>使用<H5>输出五号标题字体</h5>
<h6>使用<H6>输出六号标题字体</h6
</body></html>
创建图像和链接
创建图像和链接分两个步骤分别是插入图片,建立锚点和超链接
插入图片
img标签 -- 代表HTML图像
img标签是单独出现的：<img />， img是image(图像)的缩写
常用属性:
alt -- 代表图像的替代文字
src -- 代表一个图像源(就是图像的位置)(href)
border – 代表图片边框的宽度
height -- 代表一个图像的高度
width -- 代表一个图像的宽度
示例
<img src="images/linux_logo.jpg" alt="这是Linux图标"> <!-- 使用alt属性的图片 -->
<img src="images/linux_logo.jpg" border="2"> <!-- 设置图片的边框宽度2px -->
<img src="images/linux_logo.jpg" width="80"> <!-- 只设置宽度高度自动适应 -->
<img src="images/linux_logo.jpg" width="80" height="40">
<!-- 图片高度和宽度一起设置 -->
建立超链接和锚点
a标签 -- 代表HTML链接
a,是anchor(锚)的第一个字母，a标签是成对出现的,即<a>…</a>。
常用属性：
href -- 代表一个url链接源(就是链接到什么地方去)
url除了是网页外,还可以是其它的文件(如文本文件,pdf文件等)。
url还可以是指向HTML文件中的一个位置。
url还可以是Email地址。
target -- 用来指出哪个窗口或框架应该被此链接打开
target=_blank： 将链接内容在新的浏览窗口中打开。
target=_parent：将链接的内容，当成文件的上一个画面。
target=_self： 将链接的内容，显示在目前的窗口中。
target=_top：这个参数可以解决新内容被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。
title -- 代表链接的附加提示信息
示例
<a href="url" target="_blank">显示的文字</a>
超链接范例:
网站链接：<a href=“http://www.javauser.net”>Java专家</a>
电子邮件链接：<a href="mailto:java@126.com">写信给我</a>
ftp链接： <a href="ftp://ftp.javauser.com">下载档案</a>
表格中的常用标签
<table> 代表HTML表格，table是成对出现的,以<table>开始,以</table>结束
<caption> 用于定义表格标题的位置，可由align和valign属性来设置。
<tr> 代表HTML表中的一行，此标签也要求成对出现。
<th> 代表HTML表格中的表头，一般位于表格的首行。要求成对。
<td> 代表HTML表格中的一个单元格。用于存放具体数据内容。
<table width="80%" border="1"
cellpadding="3" cellspacing="0"
align="center">
<caption><h1>学员表</h1></caption>
<tr>
<th colspan="3"> 学员基本信息</th>
<th colspan="2">成 绩</th></tr>
<tr>
<th>姓 名</th><th>性 别</th>
<th>专 业</th><th>课 程</th>
<th>分 数</th>
</tr><tr align="center">
<td>小萌男</td><td>男</td>
<td rowspan="2">计算机</td>
<td rowspan="2">PHP开发</td>
<td>86</td></tr>
<tr align="center">
<td>小萝莉</td>
<td>女</td><td>98</td>
</tr>
</table>
HTML框架简述和优缺点
HTML框架简述
一个浏览器窗体可以通过几个页面的组合来显示。我们可以使用框架来完成(frames)这项工作。(框架可以把HTML文档分为多个页面)。也就是将一个浏览器文档窗口分隔成多个窗口，每个窗口都可以显示一个独立的网页文件。
框架页使用了表格的方式组合，可以分为数行与数列。
框架的优点
重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)。
方便制作导航栏。
框架的缺点
会产生很多页面，不容易管理。
不容易打印。
浏览器的后退按钮无效。
代码复杂,无法被一些搜索引擎索引到。
多数小型的移动设备（PDA 手机）无法完全显示框架。
多框架的页面会增加服务器的http请求。
由于上面诸多缺点，因此不符合标准网页设计的理念.
HTML框架标签
<frameset>标签 -- 代替body标签定义了框架页,并且定义了框架将分为多少行与多少列。常用属性如下:
cols -- 定义了框架含有多少列与列的大小(每个值使用逗号分隔),取值为象素px或者百分比%
rows -- 定义了框架含有多少行与行的大小(每个值使用逗号分隔),取值为象素px或者百分比%
border -- 定义frame定义的框架页的边框(单位像素),使用css实现
frameborder -- 定义框架页是否边框(此属性应写在frame标签内部,不应在此出现)
framespacing -- 定义框架页之间间隔的距离,使用css实现
<noframes>标签
可为那些不支持框架的浏览器显示文本，和<body>组合使用
<iframe>标签
创建一个包含另外一个文档的内联框架，iframe标签内的内容可以做为浏览器不支持iframe标签时显示
示例
<html> <!-- 网页开始标记 -->
<head>
<title>萌男集中营</title>
</head> <!-- 设置网页标题 -->
<frameset rows="80,*" frameborder="1" border="5"> <!-- 划分两行 -->
<frame src="top.html" name="top" scrolling="no" noresize/> <!-- 顶部大类窗体 -->
<frameset cols="200, *"> <!-- 划分左右两列 -->
<frame src="menu.html" name="menu" scrolling="no" noresize/>
<!-- 左边菜单窗体 -->
<frame src="main.html" name="main" noresize />
<!-- 右边内容窗体 -->
</frameset> <!-- 内层框架结束 -->
<noframes>
<body><p>啊啊啊啊啊啊</p></body>
</noframes>
</frameset> <!-- 外层框架结束 -->
</html>
HTML表单设计
HTML的form标签form 标签 -- 代表HTML表单
form标签是成对出现的,以<form>开始,以</form>结束
常用属性.
action -- 浏览者输入的数据被传送到的地方,如一个jsp页面(dofm.jsp)
method -- 数据传送的方法
get -- 此方式传递数据量少,但是传递的信息显示在网址上。
post --此方式传送信息多,而且不会把传递信息显示在网址上 (https://..)
enctype -- 表示将数据发送到服务器时浏览器使用的编码类型
application/x-www-form-urlencoded -- 窗体数据被编码为名称/值对.这是标准的编码格式.默认的。
multipart/form-data -- 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分.
text/plain -- 以纯文本形式进行编码,其中不含任何控件或格式字符
input 标签 -- 代表HTML表单的单行输入域
input标签是单独出现的,<input />
属性.
type -- 代表一个输入域的显示方式(分为输入型,选择型,点击型)
name – 此表单项名称
value -- 输入域的值
size -- 输入域的长度
maxlength -- 输入域最多可以输入文字的长度 (个数)
checked -- 如果是选择型的输入域,代表已经被选择，值为checked
readonly -- 输入域可以选择,但是无法修改 ，值为readonly
disabled -- 输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用。如：disabled="disabled"
accesskey -- 表单的快捷键访问方式，如值为h即按Alt+h快捷键。
tabindex -- 输入域的"tab"键遍历顺序
src -- 当使用图片来表示按钮时,代表图片的位置(URI)
alt -- 用来替换提交按钮的图片(当在input的src属性定义的图片无法显示时)提示信息。
select 标签 -- 选择列表标签
select标签是成对出现的,以<select>开始,以</select>结束
此标签中的每对option标签代表一个选择项
属性:
name – 表单项名称
size -- 选择域的高度
multiple -- 可以有多个选择
disabled -- 以灰色显示,在表单中不起任何作用
tabindex -- 使用"tab"键的遍历顺序
option 标签 -- 代表选择列表的一个选择项
option标签是成对出现的,以<option>开始,以</option>结束
属性:
label -- 说明选择项
value -- 说明选择项的值
selected -- 此选择项已经被选择
disabled -- 输入框无法获得焦点,以灰色显示,在表单中表示禁用
tabindex -- 使用"tab"键的遍历顺序
示例
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS属性饮用综合举例--定义栏目的区块</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="layout.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div class="tit">
<h3>
<a href="">栏目标题</a>
</h3>
</div>
<div class="list">
<ul>
<li><a href="">第一个选项列表</a></li>
<li><a href="">第二个选项列表</a></li>
<li><a href="">第三个选项列表</a></li>
<li><a href="">第四个选项列表</a></li>
<li><a href="">第五个选项列表</a></li>
<li><a href="">第六个选项列表</a></li>
<li><a href="">第七个选项列表</a></li>
<li><a href="">第八个选项列表</a></li>
<li><a href="">第九个选项列表</a></li>
<li><a href="">第十个选项列表</a></li>
<li><a href="">第11个选项列表</a></li>
<li><a href="">第12个选项列表</a></li>
</ul>
<div class="nav"></div>
</div>
</div>
</body>
</html
刚刚接触的小虾米如有不足请大家指点评价
标签：
原文地址：http://www.cnblogs.com/BZAINIANSHAO/p/4681054.html
