网页开发工具：visual studio.net
网页构架，方便设置标签属性，颜色值得属性有两种。

一、html的基本框架结构：

<html>

-----
<head>
<title>浏览器中显示的标题</title>
</head>
-----
-----
<body>
主体部分
</body>
-----
</html>
-------------------------------------------------------

二、<body>标签属性-----<body 属性的设置就在这里设置，不同的属性之间用空格分开>

text：整个文档中文字的颜色
link：静态超链接文本显示颜色
alink：正在访问的超链接文本显示颜色
vlink：访问过的文本颜色
background：背景墙纸所用的背景文件（gif、jpeg）
bgcolor：设定背景颜色，设定了背景墙纸这个属性会失去，除非墙纸透明
leftmargin:网页显示画面与浏览器左边窗口的间隙，单位像素。
topmargin：网页显示画面与浏览器顶边窗口的间隙，单位像素。
class:
name:
id:
style:
---------------------------------------------------------

三、文档类型的定义（document type definition，DTD）

DTD语法：<!DOCTYPE HTML PUBLIC"version name""url">
----------------------------------------------------------

四、注释与特殊字符

1、注释格式：<!--注释-->，注释不能被嵌套。
2、特殊符号：<,>, & ,"',注册符号,版权符号,"TM,空格等（可以网上搜索代码）
----------------------------------------------------------

五、格式标签

1、<p></p>:用来创建一个段落,可以用align属生来设置段落的对齐方式
2、<br>:单标记，没有结束标记，显示一个换行
3、<center></center>:对之间的图形或文本在水平方向居中显示
4、<marquee></marquee>:移动图片或文本。direction属性：内容的移动方向（left,right,down,up）;behavior：指定内容的移动行为（scroll,alternate,slide）
5、<dl></dl>用来创建一个普通列表
<dt></dt>列表行
<dd></dd>列表列
6、<ol></ol><ul></ul><li></li>:<ol></ol>创建一个标有数字的列表;<ul></ul>对创建的列表标有一个圆点;<li></li>只能在<ol></ol>或<ul></ul>之间使用，表示列表项
7、<pre></pre>:对文本进行预格式处理
----------------------------------------------------------

六、文本标签：

1、<h1></h1>......<h6></h6>:把文本以标题方式显示。
2、<b></b><i></i><u></u>:分别对应粗体，斜体，下划线
3、<sub></sub><sup></sup>:分别对应下上标的显示
4、<cite></cite>:引用方式的字体，通常是斜体
5、<em></em>:显示需要强调的文本，通常是斜体加粗
6、<strong></strong>:用来显示加重文本，通常是加粗显示
7、<font></font>:对字体、字号、颜色进行改变。face属性：字体;Size属生：大小;??Color属生：色彩
----------------------------------------------------------

七、图像标签：　

格式：<img 属性写在这里 ></img>

src属性：必不可少，用来设置图像文件所在位置（绝对与相对，服务器最好用相对）。
alt属性：当鼠标移到图像上显示的提示文本，当图像无法显示时，所显示的代替文字
align属性：设置图像与周围文本的对齐方式。top,bottom,left,right
border属性：设置距图像的边框宽度
width和height：设置图像的长宽高
用于提供web服务器中网页访问次数<img src="服务器路径/count.jsp" ></img>

<hr 属性写在这里 ></hr>:在HTML文档中加入一条水平线。
size:线的粗细
color:线的色彩
width:线的长度
noshade:阴影显示
-----------------------------------------------------------

八、超链接标签

URL基本组成：协议+主机名+端口号+资源名
如：http://www.sina.net/80/index.html。其中http：//是所使用的协议；www.sina.net是要访问的主机名；80是端口号；index.html是要访问的资源名

1、<a href="">内容文本</a>:把中间标记的内容作为超链接显示，href的内容作为超连接点击后转向的页面。
如：<a href="http://www.sina.com">新浪网</a>

2、<a href="http://www.sina.com<img?src="data:image/hy.gif"></a>
href属性是不可少的；
target属性：指明在浏览器的哪个窗口打开新页面。

3、<a name="标记１">：锚点标记。
在同一网页中设置多个锚点便于超链接的浏览。如：<a href="#标记１">跳转到第一个标记上</a>。
在不同网页使用如下：<a href="url#标签">跳转到第一个标记上</a>

4、mailto:打开电子邮件:
<a href="mailto:ldc_5588@163.com?subject=hello&body=您好">联系我们</a>
----------------------------------------------------------

九、图像地图将一个图像分成多个部分，各部分分别指向不同的链接。

1、标签格式：<map></map>
举例：
<map name="">
<area shape="形状" coords="坐标" href="url">------给图像分块
</map>

2、shape属性可以是以下几种形状

rect:矩形，此时的coords为矩形的左上角个右下角的坐标
poly:多边形，此时的coords为多边形的各个顶点
circle:圆，此时coords为圆习坐标及半径

3、用法举例如：
<img src="china.gif" usemap="mymap">

<map name=mymap>
<area shape="rect" href="a.html" coords="140,20,280,60">
<area shape="poly" href="b.html" coords="100,100,180,80,200,400">
<area shape="circle" href="c.html" coords="10,100,60">
</map>
---------------------------------------------------------

十、表格标签

1、<table></table><tr></tr><td></td>这三个标签的层次结构：
<table></table>：定义一个表格的开始和结束
<tr></tr>：定义一行的开始和结束
<td></td>：定义一个单元格的开始和结束

2、<table></table>的属性：
bgcolor:设置表格的背景色彩
border:设置表格的边框的宽度
bordercolor:设置表格边框色彩
bordercolorlight:设置表格边框明亮部分的色彩
bordercolordark:设置表格边框昏暗部分的色彩
cellspacing:设置单元格之间的间隔
cellpadding：设置单元格内部的内容与边框的间隔
width:表格的宽度
height:表格的高度

3、<tr></tr>
align:整行单元格的内容水平对齐方式left,center,right。
valign:整行单元格的内容竖直对齐方式top middle,bottom
bgcolor:设置这一行的色彩

4、<td></td>
width:单元格的宽度（大小）
height:单元格的高度
align:单元格内部内容的水平对齐方式
valign:单元格内部内容的竖直对齐方式
colspan:设置一个单元格跨占的列数
rowspan:设置一个单元格跨占的行数
nowrap:禁止单元格内的内容自动换行
<th></th>与<td></td>类似只不过里面显示的内容是黑体居中的
---------------------------------------------------------

十一、框架标签（在index.html中）

框架标签的解释：将一个窗口分割成多部分，每一部分显示一个独立的页面。框架只是分割窗口。

框架标签格式：<frameset></frameset><frame></frame>
1、<frameset></frameset>定义一个框架集。不能在body标签对中，负责没用：
rows:将窗口竖直拆分时窗口的大小比例，列如：rows=“10%，*”
cols:将窗口水平拆分窗口的大小比例

2、<frame></frame>定义一个具体的框架窗口：
src:要显示网页的ＵＲＬ
name:框架窗口的名子
taget:该框架中的超链接默认的打开窗口_blank,_parent,_self,_top。
scrolling:是否在框架边上出现滚动条yes,no,auto
noresize:禁止用户拖动分隔线来调整框架的大小,直接将该属生放入就可以了。

3、<iframe></iframe>在一个网上插入一个简单的框架窗口，这个窗口用来显示另一个文件。
name:框架窗口的名子
src:框架窗口中所显示的新的网页
----------------------------------------------------------

十二、表单标签

定义表单的开始和结束位置格式：<form></form>。name，password需要定义

1、表单的属性
action:处理表单内容的服务器程序的ＵＲＬ
method:提交给服务器处理表单信息的方式
get:将表单信息以ＵＲＬ参数的形式附在action的ＵＲＬ后面
set:将表单信息以ＨＴＴＰ消息实体发送给ＷＥＢ服务器
target:设置服务器返回结果显示的窗口
title:当鼠标放在表单上的时候以黄色的泡泡进行提示

2、<input type="submit">：定义一个提交按钮
action:指定ＵＲＬ所指定的服务器程序
value:按钮上的文字

3、<input type="reset">:定义一个重新填写的按钮。
value:按钮上的文字

4、<input type="text">:定义一个单行文本框
size:输入区域的宽度，以字符个数为单位
value:文本框的内容
maxlength:用户能够输入的最大字符串长度
readonly:属性存在时，文本框可以获得焦点，但用户不能更改里面的内容。
disable:属性存在时，文本框不能获得焦点，也不能更改里面的内容。

5、<input type="checkbox">:定义一个复选框
name:复选框的名，同一组复选框用同一个名子
checked:该复选框是否被选中
value:指定复选框被选中时，这个复选框的后台值

6、<input type="radio">:定义一个单选按钮
name:单选按钮的名，同一组单选按钮用同一个名子
value:指定单选按钮被选中时，这个单选按钮的后台值

7、<input type="hidden">：在表单上添加一个隐式的字段的元素，浏览器不会显示这个字段
name:名子
value:值

8、当表单提交的时候会以name=value的形式提交到服务器上去。

<input type="button">:在表单上定义一个普通的按钮，这个按钮通常与某个脚本代码下关联
<input type="password">:在表单上定义一个密码输入区域.

<input type="file">:用来从本机向服务器传文件

<input type="image">:在表单上创建一个图像元素。
图像的源文件由src属性来指定，它没有value属性。
图像元素在某些情况下可以代替submit按钮来使用
单击图像元时就会将表单信息和单击处的x,y值一起发送到服务器

<select></select>创建一个下拉列表框或可以复选的列表框。
size:设置列表框中可见选项的数目。默认值是１，这时显示的是下拉列表框。
mutiple属性：这是一个不且赋值的属性，定义列表框是否可以多选。
在列表框中定义各项是用<option></option>来实现的。

<option></option>为列表框中添加项目
value:项目的后台值
selected:指定项目是否被选定

<textarea></textarea>创建一个可输入多行文本的文本框
cols:文本框的列数
rows:文本框的列数
------------------------------------------------------------

十三、分区标签

1、<div></div>:区域标签，层
2、<span></span>:区域标签
-------------------------------------------------------------

十四、头元素

1、<base>标签：用于指定网页中超链接的基准地址。网页中所有超链接的相对地址都以该地址为基准地址。
该标签只能放在<head></head>标签之间。
如：<base href="http://www.sina.com/image" target="_blank">

2、<meta>标签：通常用于文件的<head></head>之间。主要有两种类型的<meta>，它们用不同的属性名(name,http-equiv)来划分。
name属性主要用于在网页中加入一些关于网页的描述信息，例如，网页的关键字，网页的描述信息等
http-equiv属性主要用于在HTML文档中模拟HTTP头。
什么是HTTP头？
通过访问网页时，服务器除了返回网页文件本身的内容（也就是在浏览器中用查看源文件能看到的东西）之外，它还在返回网页文件内容之前，传送一部分被称为HTTP头的内容给浏览器，这部分肉容是在浏览器的查看源文件中看不到的。HTTP头的内容相当于服务器发送给浏览器的一些暗号指令，通知浏览器查看该网页时应使用的字符编码、是否本地缓存、网页的到期时间、是否间隔一定时间以后刷新页面或跳到其它页面等。

3、name属性的设置：

Keywords:网页的关键字，以便于在搜索引擎中进行收集信息。
<meta name="keywords" content="软件工程师培训,清华IT,华育国际">
Description：网页描述信，以便于搜索。
Generator：用于编辑此页所用的工具名，content中填入所用的网页编辑软件。
Author：用于说明网页的作者，content中填入作者的姓名。
Copyright:用于版权声明，content中填入你的版权声明。
http-equiv属性设置：
Content-Type:用于说明网页内容的类型以及文本内容所使用的字符集编码。
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
Refresh:告诉浏览器定时自动刷新网页
<meta http-equiv="Content-Type" content="1;url=http://www.sina.com.cn">
通知浏览器过一秒后跳转到新浪网上去。
Expires:用于设定网页的到期时间。为了提高效率，浏览器可以被设置成缓存以前访问的页面，当再次访问该页面时，浏览器不会再去服务器上访问，而是直接在本地缓存中读到。如果将其Content设为0则禁止浏览器使用缓存页面。
<meta http_equiv="Expires" content=""Mon,12,May,2007 00:00:00 GMT>
Windows-Target:强制页面在某个窗口显示。例如要防止别人把你的网页作为frame页面调用：
<meta http-equiv="Windows-Target" content="_top">

 

html小结的更多相关文章

  1. 从零开始编写自己的C#框架（26）——小结

    一直想写个总结,不过实在太忙了,所以一直拖啊拖啊,拖到现在,不过也好,有了这段时间的沉淀,发现自己又有了小小的进步.哈哈...... 原想框架开发的相关开发步骤.文档.代码.功能.部署等都简单的讲过了 ...

  2. Python自然语言处理工具小结

    Python自然语言处理工具小结 作者:白宁超 2016年11月21日21:45:26 目录 [Python NLP]干货!详述Python NLTK下如何使用stanford NLP工具包(1) [ ...

  3. java单向加密算法小结(2)--MD5哈希算法

    上一篇文章整理了Base64算法的相关知识,严格来说,Base64只能算是一种编码方式而非加密算法,这一篇要说的MD5,其实也不算是加密算法,而是一种哈希算法,即将目标文本转化为固定长度,不可逆的字符 ...

  4. iOS--->微信支付小结

    iOS--->微信支付小结 说起支付,除了支付宝支付之外,微信支付也是我们三方支付中最重要的方式之一,承接上面总结的支付宝,接下来把微信支付也总结了一下 ***那么首先还是由公司去创建并申请使用 ...

  5. iOS 之UITextFiled/UITextView小结

    一:编辑被键盘遮挡的问题 参考自:http://blog.csdn.net/windkisshao/article/details/21398521 1.自定方法 ,用于移动视图 -(void)mov ...

  6. K近邻法(KNN)原理小结

    K近邻法(k-nearst neighbors,KNN)是一种很基本的机器学习方法了,在我们平常的生活中也会不自主的应用.比如,我们判断一个人的人品,只需要观察他来往最密切的几个人的人品好坏就可以得出 ...

  7. scikit-learn随机森林调参小结

    在Bagging与随机森林算法原理小结中,我们对随机森林(Random Forest, 以下简称RF)的原理做了总结.本文就从实践的角度对RF做一个总结.重点讲述scikit-learn中RF的调参注 ...

  8. Bagging与随机森林算法原理小结

    在集成学习原理小结中,我们讲到了集成学习有两个流派,一个是boosting派系,它的特点是各个弱学习器之间有依赖关系.另一种是bagging流派,它的特点是各个弱学习器之间没有依赖关系,可以并行拟合. ...

  9. scikit-learn 梯度提升树(GBDT)调参小结

    在梯度提升树(GBDT)原理小结中,我们对GBDT的原理做了总结,本文我们就从scikit-learn里GBDT的类库使用方法作一个总结,主要会关注调参中的一些要点. 1. scikit-learn ...

  10. 梯度提升树(GBDT)原理小结

    在集成学习之Adaboost算法原理小结中,我们对Boosting家族的Adaboost算法做了总结,本文就对Boosting家族中另一个重要的算法梯度提升树(Gradient Boosting De ...

随机推荐

  1. angular2学习地址

    http://www.hubwiz.com/course/5599d367a164dd0d75929c76/ http://learnangular2.com/inputs/ https://www. ...

  2. ionic 发布 inoc显示不正确

    前两天因为学习的问题,把本地环境给搞崩了,然后重新安装环境之后发现生成的安装包不能使用,然后找了很多原因都不能解决,因为之前发布ios的时候使用命令 ionic resources的时候就可以将图标显 ...

  3. 个人对B/S项目的一些理解（三）--Servlet与Strust

    以下是我自工作以来,结合对C/S项目的认知,对B/S项目的一些理解. 如有不足或者错误,请各位指正.   由于个人一开始入门时是ASP.NET MVC,是一个比较完善.完整的框架,下面仅对JAVA的w ...

  4. Java集合之LinkedHashMap

    一.初识LinkedHashMap 上篇文章讲了HashMap.HashMap是一种非常常见.非常有用的集合,但在多线程情况下使用不当会有线程安全问题. 大多数情况下,只要不涉及线程安全问题,Map基 ...

  5. Event Loop个人理解

    javascript引擎单线程程序,其执行同步操作会按顺序向下执行,执行异步操作则使用事件循环模型. js引擎线程遇到异步操作,会将异步操作交给对应的观察者, 异步操作包括: dom事件 click, ...

  6. c# 面向方面编程

    AOP面向切面编程(Aspect Oriented Programming),是通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.Spring框架用的核心技术就是AOP,是函数式编程的一 ...

  7. Java基础——继承、接口

    一个对象变量(例如,变量e)可以引用多种实际类型的现象被称为多态(polymorphism). 在运行时能够自动地选择调用哪个方法的现象称为动态绑定(dynamic binding). 在Java程序 ...

  8. chrome谷歌浏览器插件制作简易教程

    1.在磁盘上创建一个目录,用来放应用的代码和资源 2.在这个目录中,创建一个文本文件,命名为manifest.json,其内容为: { "manifest_version": 2, ...

  9. oracle DDL（数据定义语言）基本语句

    --创建表格 create table  production( ProductIdvarchar2(10), ProductNamevarchar2(20), ProductPricenumber( ...

  10. JDBC之存储过程

    存储过程的语法创建就不说了,这里这篇博客 就挺详细了http://blog.sina.com.cn/s/blog_52d20fbf0100ofd5.html. 1. Java代码调用没有参数的存错过程 ...