HTML基本概念
HTML文件（Hypertext Marked Language，超文本标记语言）
扩展名为 (.htm)或( .html)，它不同于一般文本的地方是，它不仅包含文本内容还包含一些Tag（标记）。
第一个Tag（标记）是<html>，它告诉浏览器这是一个HTML文件，而且是从这开始的。
最后一个Tag是</html>，它告诉浏览器HTML文件到此结束。
<head>与</head>之间的内容是Head信息，它不在浏览器中显示。Head信息的作用是：有助于搜索引擎搜索到网页。<title>与</title>之间的内容是文件的标题。<body></body>之间的内容是文件的正文。<b>与 </b>，bold，粗体显示文字。
2、HTML元素（HTML Elements）
1）HTML Elements用来标记文本，表示文本的内容。例如：body, p, title就是HTML元素。
2）HTML Elements用Tag表示，以“<”开始，以“>”结束。
3）Tag通常是成对出现的，例如<html>与</html>。开始的叫opening Tag，结尾的叫closing Tag。
4）Tag不分大小写。
3、HTML Elements的属性
HTML Elements可以拥有属性。属性可以扩展HTML元素的能力。
EXAMPLE：使页面背景色为红色，<body bgcolor=”red”>
将表格设成无边框，<table border=”0”>
属性常由属性名和值成对出现，格式：name=”value”。属性常附加给HTML的Opening Tag。
一些基础的 HTML Tag
1、正文标题Tag
HTML用<h1>到<h6>这6个Tag来定义正文标题。从大到小，自成一段。
<h1>测试HTML 的正文标题，从大到小，自成一段。</ h1>
……
<h6>测试HTML 的正文标题，从大到小，自成一段。</h6>
2、段落划分Tag <p>和</p>。
3、换行Tag <br>。它在不新建段落的情况下换行，<br>没有closing Tag
4、注释Tag “<!—” 和 “-->”之间。
注：1>用<p>换行是个不好的习惯，正确的应该是用<br>换行。
2>HTML文件会自动截去多余的空格，不管多少空格，都被看作一个空格。一个空行也被看作一个空格。（如何显示见下面的“空格的显示”）
3>有些Tag将文本自成一段，不需用<p>分段。例如，标题Tag <h1>之类。
HTML常用格式
</b> <i> <del> <ins>
粗体bold 斜体italic 文字当中划线表示删除 文字下划线表示插入
<sup> <sub> <blockquote> <pre> <code>
上标 下标 缩进表示引用 保留空格和换行 表示计算机代码，等宽字体
HTML特殊字符的显示
1、HTML字符实体（HTML Character Entities）
字符实体分三部分： “&”+“实体名字”或“#实体编号”+“；”
注：1、并不是所有浏览器都支持最新的实体名字。
2、实体名字区分大小写。
EXAMPLE：小于号（<）的表示：“<”或者“< ”
实体entity
2、空格的显示
3、 最常用的字符实体（Character Entities）
显示结果 说明 Entity Name Entity Number
显示一个空格  
< 小于 < <
> 大于 > >
& &符号 & &
" 双引号 " "
4、其它常用字符实体：
显示结果 说明 Entity Name Entity Number
© 版权 © ©
® 注册商标 ® ®
× 乘号 × ×
÷ 除号 ÷ ÷
HTML利用超链接打开链接文件
1、a和href属性。HTML用a来表示超链接，英文叫anchor。它可以指向任何一个源文件，一个HTML网页，一个图片，一个影视文件等。
格式：<a href=”url”>链接的显示文字</a>
点击<a>与</a>当中的内容，即可打开一个链接文件，href属性表示这个链接文件的路径。
EXAMPLE：<a href="http://www.sina.com.cn">新浪网</a>
2、target属性 使用target属性，在新窗口里打开链接文件。
EXAMPLE：
<a href="http://www.sina.com.cn" target=_blank>新浪网</a>
3、title属性 让鼠标停留在超链接上时，显示该超链接的文字注释。可使用“
”作为换行符进行多行注释的显示。
EXAMPLE：<a href="http://www.sina.com.cn" title=点击进入新浪网
练习测试专用>新浪网</a>
4、name属性 跳转到一个文件的指定部位。
设置两部分，一是设定name名称，二是设定一个href指向这个name。
格式：
<a name=”first”>目录</a>
<a href=”#first”>返回目录</a>
注：1、name常用于创建大文件的章节目录(table of contents)。
2、如果浏览器找不到name指定的部分，则显示文章开头，不报错。
5、链接到Email地址 点击链接，触发邮件客户端。
EXAMPLE： <a href = "mailto:info@sina.com">联系新浪</a>
HTML相对路径(RelativePath)和绝对路径(AbsolutePath)
HTML中如何正确引用文件？
HTML中有两种路径写法：相对 路径和绝对[ˈæbsəlu:t]路径。
1、相对路径(RelativePath)
1>同目录的文件引用
如果源文件和引用文件在同一目录，直接引用文件名即可。
如：有以下两个文件：
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\index.html
在info.html中加入index.html的超链接代码应为：
<a href=”index.html”>index.html</a>
2>上级目录的表示
“../ ”表示源文件所在目录的上级目录，“../../ ”表示源文件所在目录的上上级目录，以此类推。
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../index.html">index.html</a>
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../../index.html">index.html</a>
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\wowstory\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../wowstory/index.html">index.html</a>
3>下级目录的表示
引用下级目录的文件，直接写下级目录文件的路径即可。
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "html/index.html">index.html</a>
假设info.html路径是：c:\Inetpub\wwwroot\sites\blabla\info.html
假设index.html路径是：c:\Inetpub\wwwroot\sites\blabla\html\tutorials\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "html/tutorials/index.html">index.html</a>
2、绝对路径(AbsolutePath)
HTML绝对路径(absolute path)指带域名的文件的完整路径。
HTML表格
HTML表格用<table>表示，表格可以分成多行（row），用<tr>表示，每行又可分成多个单元格（cell），用<td>表示。
border属性 默认情况下，不设置表格的边界，表格是不显示边界的，等同于将Border属性的值设为0。Border属性的值越大，表格的边界将越粗。
Cellspacing属性 单元格之间的距离
表格的表头
<th>表示表格的表头，表头的字是粗体显示。
HTML框架
使用框架，可以在游览器窗口同时显示多个网页。每个frame里设定一个网页，彼此相互独立。<frameset>与</frameset>决定如何划分frameset。<frameset>有cols属性和rows属性。
分别表示按列和按行分布。
<frameset cols="25%,75%">
<frame src="1.html">
<frame src="2.html">
</frameset>
（？怎样利用框架引用任意一个网页？）
HTML列表（Lists）
HTML有三种列表形式：排序列表（Ordered List）；不排序列表（Unordered LIST）；定义列表（Definish List）。
排序列表（Ordered List）：每个列表项前标有数字，表示顺序。
排序列表由<O1>开始，每个列表项由<li>开始，
不排序列表不用数字标识每个列表项，而采用一个符号表示每个列表项。
不排序列表由<ul>开始，每个列表项由<li>开始。
定义列表通常用于术语的定义。
定义列表由<dl>开始。
术语由<dt>开始，英文意为Definition Term。
术语的解释说明，由<dd>开始，<dd></dd>里的文字缩进显示。
HTML表单（Forms）
<form action="http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp" method="get">
请输入你的姓名：
<input type="text" name="yourname">
<input type="submit" value="提交">
</form>
表单主要用于采集和提交用户输入的信息。
表单三个要点：
1、表单控件（Form Controls）
通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。（这里的input type="text" name="yourname就是一个表单控件，表示一个单行输入框。）
2、Action
用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。
（action="http://www.admin5.com/html/asdocs/html_tutorials/yourn ame.asp" ）
3、Method
method，表示了发送表单信息的方式。method有两个值：get和post。get的方式是将表单控件的name/value信息经过编码之后，通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。
HTML表单常用控件
表单控件(Form Contros) 说明
input type="text" 单行文本输入框
input type="submit" 将表单(Form)里的信息提交给表单里action所指向的文件
input type="checkbox" 复选框
input type="radio" 单选框
select 下拉框
textArea 多行文本输入框
input type="password" 密码输入框(输入的文字用*表示)
控件1、单行文本输入框（input type=”text”）
<input type="text" name="yourname">
控件2、复选框（input type=”checkbox”）
<input type="checkbox" name="fruit" value ="apple">苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>
用checked表示缺省已选的选项。
<input type="checkbox" name="fruit" value ="orange" checked>桔子<br>
控件3、单选框(input type="radio")
<input type="radio" name="fruit" value = "Apple">苹果<br>
<input type="radio" name="fruit" value = "Orange">桔子<br>
<input type="radio" name="fruit" value = "Mango">芒果<br>
用checked表示缺省已选的选项。
<input type="radio" name="fruit" value = "Orange" checked>桔子<br>
控件4、下拉框(select)
可以单选也可以多选。
<select name="fruit" >
<option value="apple">苹果
<option value="orange">桔子
<option value="mango">芒果
</select>
如果要变成复选，加muiltiple即可。用户用Ctrl来实现多选。例句：
<select name="fruit" multiple>
用户还可以用size属性来改变下拉框(Select)的大小。
控件5、多行输入框(textarea)
<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>
其中cols表示textarea的宽度，rows表示textarea的高度。
<form name="form1" method="post" action="">
请输入：<input type="text" name="textfield"> <!--单行文本框-->
<input type="submit" value="确定">
<br><br>
<!--复选框-->
<input type="checkbox" name="checkbox1" value="apple" checked>apple <br>
<input type="checkbox" name="checkbox2" valeu="orange">orange <br> <br>
<!--单选框-->
<input type="radio" name="radio1" value="radio_apple" checked>apple <br>
<input type="radio" name="radio1" value="radio_orange">orange <br><br>
<!--下拉框-->
请选择：
<select name="select1">
<option value="apple">apple
<option value="orange">orange
<option value="mango">mango
</select> <br><br>
<!--多行文本框-->
<textarea name="textarea1" cols="100" rows="5">
</textarea>
密码输入框 <input type="password">
</form>
HTML图片
格式：<img src=”url” alt=”***”>
Alt属性，如果浏览器没有载入图片，则会显示alt的值。便于搜索引擎抓取网页内容。
align属性
改变图片的垂直（居上top居中middle居下bottom）对齐方式，水平（居左left居中center居右right）对齐方式
改变图片大小
默认情况，图片显示原始大小。可用height,width改变大小，图片会相应放大或缩小。
HTML字体（FONTS）
HTML中用FONT元素及其属性设定字体大小，颜色和字体风格。
大小size风格face颜色color
HTML4中不建议使用FONT及其属性设定字体，用CSS。
HTML背景颜色bgcolor背景图片background
HTML头部信息
HTML头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。
另外，搜索引擎也会查找你网页中的head信息。为了让搜索引擎能够收录你的网页，你也要填写适当的head信息。(网站被搜索引擎收录，还有其它的方法，比如被其它网站链接，这里不赘述，请浏览搜索引擎网站。)
标题(title)是最常用的head信息。它不显示在HTML网页正文里，显示在浏览器窗口的标题栏里。
链接(link)
用链接(link)可以建立和外部文件的链接。常用的是对CSS外部样式表(external style sheet)的链接。示例代码如下：
<link rel="stylesheet" href="mainstyles.css" type="text/css">
样式(style)
用样式(style)可以设值网页的内部样式表(internal style sheet)。示例代码如下：
<head>
<style>
body {background-color:white; color:black;}
h1 {font: 18pt arial bold;}
</style>
</head>
关于网页信息(meta)
在计算机语言里，你经常可以看到一个前缀 -- meta，meta就是“关于”(about)的意思。
这meta解释起来比较拗口，比如metadata，意为描述data的data，英文即data about data。还有一个词叫metalanguage，表示一种描述其它语言的语言。再举一个例子，metafile，表示描述其它文件的文件。
在HTML里，meta标记(meta tags)表示用来描述网页的有关信息。示例代码如下：
<meta name="description" content="HTML中文教程之头部信息">
<meta name="keywords" content="HTML,tutorials,source codes">
<meta name="author" content="站长网 站长学院">
利用meta中的Refresh你还可以实现自动跳转页面的功能。示例代码：
<meta http-equiv="Refresh" content="5;url=http://www.admin5.com/html/html_tutorials/index.html">
最常用字符实体
[img]http://guozi.iteye.com/upload/picture/pic/5965/a1b288f2-32cb-4040-80be-a1bee1216548.jpg [/img]
较常用字符实体
[img]http://guozi.iteye.com/upload/picture/pic/5966/32f09a77-7e74-45a8-add5-dc7303dacc4a.jpg [/img]
常用表单控件
[img]http://guozi.iteye.com/upload/picture/pic/5967/800a8c7b-ff3a-477e-b500-0fd105d43129.jpg [/img]
分享到：
相关推荐
Html2Image html2Image = Html2Image.fromHtml(sb.toString(),null); // 这边如果设置false,图片不会自动根据内容设置长宽默认长1024 ,宽768 //html2Image.getImageRenderer().setAutoHeight(false); ...
html2fpdf 或 html2pdf 是在fpdf上开发的一个可以将html页面转换为pdf文件的PHP类。 官方网址 http://sourceforge.net/projects/html2fpdf/ 近日，由于开发项目需要，需要一个能将页面转换为pdf的插件，以供客户端...
临近期末, 你是否还在为HTML网页设计期末作业而发愁，是否为还在为老师的网页制作作业要求感到头大？是否觉得HTML网页作业无从下手？，网页要求的总数量太多？是否找不到合适的模板？等等一系列问题。本资源就可以为...
HTML基本标记.html HTML基本标记的用法。 我的第一张网页.html 演示我的第一张网页。 第2章（源代码\第2章） 示例描述：本章演示常用HTML标记和格式 注释.htm 注释的用法。 标题标记....
在你成为一名行家之后，阅读HTML书籍给你的唯一感受就是厌烦吗？那么现在就是你拿起《深入浅出HTML与CSS、XHTML》来真正学习HTML的时候了。这本书展示了学习创建符合工业标准的Web页面的完整历程——然而，除了阅读...
Learn the real secrets of creating Web pages, and why everything your boss told you about HTML tables is probably wrong (and what to do instead). Most importantly, hold your own with your co-worker ...
此为《HTML5开发精要与实例详解》的全部配套源码 本书由资深Web开发专家亲自执笔，内容的权威性上应该是毋庸置疑的。 本书在内容结构上将继承《HTML 5与CSS 3权威指南》一书的优点，几乎每个知识点都将配一个精心...
适合学生的html5响应式网站 成品可以让你们修改吗？ 学生网页成品坚持每周更新 学生网站一定不能太专业，否则老师会发现的！ DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品...
通用电商模板提供下载，都是html静态页面，设计好的前端页面 1 绪论 1 1.1 项目开发背景 1 1.2 论文的研究目的和意义 2 1.2.1 开发的研究目的 2 1.2.2 开发的研究意义 3 2 项目介绍 4 2.1 web前端开发 4 2.1.1 web...
html案例html案例html案例html案例html案例html案例html案例
圣诞树HTML，下载点击即可使用，表白神器
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术，全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
ECharts+html大数据可视化大屏展示模板25套,可以根据自己需求修改数据和样式,都是基于ECharts的大数据可视化展示html的模板，直接打开html即可看到展示效果。内含：智慧物流大数据展示模板，智慧医疗大数据展示模板...
越来越多的站点开始使用 HTML5 标签。但是目前的情况是还有很多人在使用IE6，IE7，IE8。为了让所有网站浏览者都能正常的访问网站，解决方案就有下面两个： 1.为网站创建多套模板，通过程序对User-Agent的判断给不同...
最近接了个任务需要用H5在前台两个大电视上做两页数据展示公司的产品数据，效果要高大上，还好之前接触过HTML5，所以第一时间想到就是echarts，这个框架对于数据展示尤其图表类处理的还是非常强大和炫酷的。...
HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据...
ERP界面原型 ERP 界面原型 HTML ERP 界面原型 HTML ERP 界面原型 HTML ERP 界面原型 HTML ERP 界面原型 HTML
winfrom中嵌套html，跟html的交互,源码就在里面一看就懂，很简单
1.用户导入word生成pdf -首先导入word的时候读取word里面的全部内容。调用（ReadAndWriteDoc）然后将内容 传送到createPdf里面生成pdf。导入的时候读取采用poi /生成的时候采用的是...4.将html转换成pdf（itext）