我的ASP.NET学习笔记01HTML基础
HTML基础
一、 <font></font>字体
通常在网页中我们尽量使用宋体，黑体，微软雅黑（win7以上）这些字体。因为这些字体通常是操作系统自带的。如果我们使用了计算机上不存在的字体，那么计算机将使用默认字体，一般是宋体。
二、 color属性（十六进制数值表示123456789abcdef）
设置字体颜色
计算机中通常使用RGB三种(红色，绿色，蓝色）颜色，是由三种颜色的数值来调颜色深浅。每一种颜色数值都是由0到255（最大值255表示为ff）之间的数值来表示，0是最暗颜色（黑），255是颜色最浓（红）。（十六进制）当着三个数值转化为十六进制的数时，它就是00到ff之间的十六进制数，然后按照RGB红绿蓝的顺序，依次排列这六个数字，就形成了类似#ff0000的样子。
比如：红色（r=255，g=0，b=0）转换为十六进制：#红色255表示：ff，绿色为0：00，蓝色为0：00.结果就显示为#ff0000.
快速取色可以去PS中调色板点击颜色，就可显示该颜色的十六进制代码。
三、 文字的变体
<b>代表其中的内容用粗体显示 <i>代表其中的内容用斜体显示 <U>代表其中的内容下方添加下划线 <sup>代表其中的内容作为上标来显示（比如平方） <sub>代表其中的内容作为下标来显示（比如化学元素） <em>强调，显示效果与<i>相同 <strong>加强，显示效果与<b>相同
四、 特殊符号
空格(三种输入空格的方式：一。 ；二。<pre>按文本格式显示三。使用全角空格，调试格式方便，但是不正规。)
< <
> >
& &
"; “
<img>图像
img图像标签可以帮助我们在网页中插入图片
src属性：文件所在的地址文件名。
width属性：图片的宽度
height属性：图片的高度
title属性：图片的标题与说明。当鼠标移动到图片上时显示说明。
alt属性：当图片由于路径或网速问题显示错误（无法显示）时，会出现的替换文字。
align属性：让图片居左或居右，但是不能居中。（align在dreamweaver中是没有代码提示的。）
五、 图文混排：
html中的图文混排，是通过图片的<img>的align属性实现的。否则图片不可能与多行文字处于同一行中。
备注：图片的宽度与高度的单位是像素（即屏幕上最小的一个发光点），像素用PX表示。
六、 相对路径与绝对路径
相对路径是指相对自身文件所在的另一个文件或文件夹的位置，所要到达的路径。
一． 当路径中只有一个文件名时，说明我要找的这个文件与当前的网页文件存在同一个文件夹中。
二． 当另一个文件所处于当前网页文件所在目录的子文件夹中时，在书写路径时要指明所在的位置。格式为：“子目录名/文件名”。当文件处于当前网页文件所在的目录的子文件夹的子文件夹中时，其书写格式为：“一级子目录名/二级子目录名/文件名”。以此类推。
三． 当一个文件处于当前网页文件的父文件夹时，其书写格式为“../”，当一个文件处于当前网页文件的父文件夹的父文件夹时，其书写格式为”../../”。
”/”用作划分目录。
七、 绝对路径
代表一个文件在计算机上存储的位置。
八、 常见图片文件格式：
jpg，jpeg（二者没什么区别，都是压缩图片格式，有一定失真，变模糊）
png（fireworks的图片格式，可以包含图层，它可以在尽量不损失图片清晰度的情况下压缩图片的容量）
gif（可以用于显示一些色彩较为简单的图案，以及动画）
png和gif是支持透明背景的 ，jpg和jpeg都不支持透明。
bmp（通常不用到网页中，文件较大且不压缩）
HTML基础
HTML概述
九、 静态网页与动态网页
所谓静态网页，就是有HTML+javascript组成的网页，静态网页之中不包括任何服务器的动态语言。静态网页的修改与制作完全由开发者手动完成。
html、css、javascript都是由浏览器来执行的。
（浏览器：IE，firefox，chrom，oprea是真正拥有自主研发内核的浏览器。）
注意：每个浏览器打开的同一个网页可能会出现差异，网页制作注意校准各种浏览器的差异
网页扩展名：html、htm、shtml、shtm、asp……（html与htm没区别，只是名字不同。早起操作系统文件扩展名只能有三个字母，所以为htm。 而在windows操作系统中，扩展名可以是多个字母，因此才有了html。其实二者没什么区别。）
扩展名：区分各个文件的种类
十、 Html标签
- 有时也称为html标记、元素，所有html标签都是写在<与>之中。
- Html的标签必须成对出现（有开始有结束）第一个<html>表示开始了然后是内容，最后是</html>。
- 通常结束标签与开始的单词相同，但是单词前面有一条“/ ”
网页就是由html标签与文本内容构成的。
HTML基础语法
一、 <html>
一个网页文件中，所有的网页代码都必须放在html的开始标签和闭合标签中间，闭合区间要在单词前加/。
二、 <head>
就是一个网页的头部，其中放置的是这个网页的参数及配置信息，比如：<title>我是网页的标题</title>
三、 <body>
用来放置网页的正文，网页中所有需要显示的正文内容都是包含中<body>标签中的。
注意：<HTML>标记的下一级，只能包含<head>和<body>。
四、 Html注释
仅仅是一个说明或标注，并不会作为正文显示出来。
语法：
<!--注释内容-->大小余符号加感叹号加左右两个减号。
五、 标题：
语法：
<h1>标题一</h1> <h2>标题二</h2> <h3>标题三</h3> <h4>标题四</h4> <h5>标题五</h5> <h6>标题六</h6>
六、 Html排版
在html源代码中，我们输入的回车并不会在页面上起到换行的作用。如果需要换行，必须通过<p></p>段落<br />换行。等其他html标签实现。
- <p>表示段落标记，功能就是包含一段文本，并让其以段落的格式显示，有行间距，要成对出现。
- <br/>表示换行符，是break的缩写。没有两行的间距，相当于输入一个回车。实际意义上被中断的文本任然是同一行，只是显示不同。单个存在，后面加/.
- <pre>按原格式显示
让其中包含的文本按照html源代码中书写的格式显示，包括回车、空格，TAB制表符都将会被显示出来。
HTML基础
十一、 <font></font>字体
face
通常在网页中我们尽量使用宋体，黑体，微软雅黑（win7以上）这些字体。因为这些字体通常是操作系统自带的。如果我们使用了计算机上不存在的字体，那么计算机将使用默认字体，一般是宋体。
十二、 color属性（十六进制数值表示123456789abcdef）
设置字体颜色
计算机中通常使用RGB三种(红色，绿色，蓝色）颜色，是由三种颜色的数值来调颜色深浅。每一种颜色数值都是由0到255（最大值255表示为ff）之间的数值来表示，0是最暗颜色（黑），255是颜色最浓（红）。（十六进制）当着三个数值转化为十六进制的数时，它就是00到ff之间的十六进制数，然后按照RGB红绿蓝的顺序，依次排列这六个数字，就形成了类似#ff0000的样子。
比如：红色（r=255，g=0，b=0）转换为十六进制：#红色255表示：ff，绿色为0：00，蓝色为0：00.结果就显示为#ff0000.
快速取色可以去PS中调色板点击颜色，就可显示该颜色的十六进制代码。
十三、 文字的变体
<b>代表其中的内容用粗体显示 <i>代表其中的内容用斜体显示 <U>代表其中的内容下方添加下划线 <sup>代表其中的内容作为上标来显示（比如平方） <sub>代表其中的内容作为下标来显示（比如化学元素） <em>强调，显示效果与<i>相同 <strong>加强，显示效果与<b>相同
十四、 特殊符号
空格(三种输入空格的方式：一。 ；二。<pre>按文本格式显示三。使用全角空格，调试格式方便，但是不正规。)
< <
> >
& &
"; “
<img>图像
img图像标签可以帮助我们在网页中插入图片
src属性：文件所在的地址文件名。
width属性：图片的宽度
height属性：图片的高度
title属性：图片的标题与说明。当鼠标移动到图片上时显示说明。
alt属性：当图片由于路径或网速问题显示错误（无法显示）时，会出现的替换文字。
align属性：让图片居左或居右，但是不能居中。（align在dreamweaver中是没有代码提示的。）
十五、 图文混排：
html中的图文混排，是通过图片的<img>的align属性实现的。否则图片不可能与多行文字处于同一行中。
备注：图片的宽度与高度的单位是像素（即屏幕上最小的一个发光点），像素用PX表示。
十六、 相对路径与绝对路径
相对路径是指相对自身文件所在的另一个文件或文件夹的位置，所要到达的路径。
四． 当路径中只有一个文件名时，说明我要找的这个文件与当前的网页文件存在同一个文件夹中。
五． 当另一个文件所处于当前网页文件所在目录的子文件夹中时，在书写路径时要指明所在的位置。格式为：“子目录名/文件名”。当文件处于当前网页文件所在的目录的子文件夹的子文件夹中时，其书写格式为：“一级子目录名/二级子目录名/文件名”。以此类推。
六． 当一个文件处于当前网页文件的父文件夹时，其书写格式为“../”，当一个文件处于当前网页文件的父文件夹的父文件夹时，其书写格式为”../../”。
”/”用作划分目录。
十七、 绝对路径
代表一个文件在计算机上存储的位置。
十八、 常见图片文件格式：
jpg，jpeg（二者没什么区别，都是压缩图片格式，有一定失真，变模糊）
png（fireworks的图片格式，可以包含图层，它可以在尽量不损失图片清晰度的情况下压缩图片的容量）
gif（可以用于显示一些色彩较为简单的图案，以及动画）
png和gif是支持透明背景的 ，jpg和jpeg都不支持透明。
bmp（通常不用到网页中，文件较大且不压缩）
网页背景
- 添加背景色：在<body>中写入bgcolor属性（<body bgcolor=”颜色代码”>）
- 添加背景图：在<body>中写入background属性+图片位置。（<body background=”图片位置”>）
网页的背景图片通常是会按照网页的内容自动重复出现，它始终会填满整个页面。
超链接<a></a>
十九、 文字链接
语法：<a href=”网址”>链接的文字</a>（href是一个属性，属性内容就是链接内容。）（超链接文字会显示出来，点击超链接文字，浏览器会跳转到该网址）
二十、 图片链接
<a href="index.html"><img src="../image/logo.jpg" class="logo" />
</a>邮箱链接
<a href=”mailto+邮箱地址”>显示的邮箱地址</a>
注：mailto是邮箱协议，http是网页协议。
二十一、 下载链接
迅雷下载：<a href=”thunder(协议)://QUFodHRwOi8veHh”>文件下载</a> 普通下载：<a href=”file(文件)://asgfsadf.rar”>普通文件下载</a>
二十二、 锚点（书签）
就是在当前网页中进行定位，点击锚点之后，浏览器屏幕会自动跳转到锚点所制定的内容所在处。
在制定位置插入锚点，是通过标签的ID属性实现的：
页面首位编辑：<p id=”a1”>第一章</a>
通过点击锚点跳转到本页面制定的位置：
<a href=”#a1”>第一章</a>
表格与列表
在html中表格的内容必须放在<table></table>之中。
二十三、 表格的行：<tr></tr>（table row的简写）
在表格之中<tr></tr>里的内容也就是代表是一行中的内容。
<td></td>里的内容也就代表一个单元格中的内容。
二十四、 表格中元素的嵌套顺序
- 一个表格中的所有内容都必须放在<table></table>中
- <table>标签所包含的下一级，不能是<td>，只能是<tr>或<thead><tbody><tfoot>,
- <td>必须被包含在<tr>中，<tr>必须被包含在<table>中。（层级必须遵循,不然会出错）。
二十五、 表格的高度和宽度
表格的整体高度和宽度分别由<table>标签的height和width属性实现，默认单位是像素。
语法：<table border="1"height="200px"width="400">
表格的部分高度与宽度分别由<td>标签的height与width属性实现，但是部分表格改变会影响整个表格的样子，改变的高度与宽度会改变所在单元格的其他表格。
因此，如果我们想要改变行与列的高度宽度，只需要改变第一个单元格的高度与宽度即可。（不要去修改<tr>标签的高宽度，此法无效）
二十六、 表格边框
通过在<table标签的border属性实现，比如：
<table border=”1”border-color=”#cc0000”>
其中border-color属性是指边框颜色，border是指边框线宽度。
二十七、 表格背景色
表格的整体背景色：<table>的bgcolor属性。
表格中一行的背景色：<tr>de bgcolor属性。
表格中一个单元格的背景色：<td>的bgcolor属性。
二十八、 表格的间距
Call是单元格的意思
外边距
单元格与单元格之间的距离，cellspacing
内边距（内填充）
单元格的边框与内容之间的距离。
Cellpadding
二十九、 合并单元格
横向合并
通过<td>的colspan来实现，属性值是正整数，代表跨越多个列，也就是占几列的位置。
纵向合并
通过<td>的rowspan现，属性值是正整数，代表跨越多个行，也就是占几行的位置。
注意
当实现单元格合并之后，要删除多余的<td>，因为colspan与rowspan会占用多个单元格的位置。
单元格拆分
实际上仍然是通过合并来实现的，比如：当我们要将一个单元格拆分成两列时，指定的单元格会由一个<td>变为两个<td>，而在这个单元格原本所在列上的其他单元格都会添加一个clospan=”2”，由此实现了单元格的拆分。其本质上仍然是合并操作。
三十、 表格内容对齐
用<td>的align属性实现，其属性值有三个：left居左，right居右，center（居中）
垂直方向对齐
用<td>的valign属性实现，其属性值有三个：top(顶部)，middle（中间），bottom（底部）
三十一、 序列
有序序列（有数值）
序列中所有内容都必须放在<ol></ol>中，序列中每一项都必须放在<li></li>中：
比如：
<ol> <li>苹果</li> <li>李子</li> <li>香蕉</li> <li>西瓜</li> <li>桃子</li> </ol>
无序序列（有图标）
序列中所有内容都必须放在<ul></ul>中，序列中每一项都必须放在<li></li>中：
比如：
<ul> <li>苹果</li> <li>李子</li> <li>香蕉</li> <li>西瓜</li> <li>桃子</li> </ul>
三十二、 表单<form>
<input>输入
表单用于存放和提交一个网页中用户用于填写的数据的html标签。也就是说，用户填写数据的功能标签与数据都必须处于表单之中，也就是<form></form>标签的开始与结束标记之间。
<form>的属性：
Action（开始）：意义就是将表单中的数据提交到某个位置（通常是服务器的一个程序文件的地址）形象的说，就是发信的收件人地址。
Method（提交方式）:它的属性只有两个（二选一）“post”“get”
以Get方式提交表单数据时，数据会被存放在网址后面，与网址一起显示出来，安全性不足。
以post方式提交数据时，数据是不可见的，安全性好，但是网址数据信息不会被存储，不便于保存信息，下一次要重新输入数据，不方便。
单行文本框
语法：<input type=”text”/>单行文本框
属性：
Name :用于区分不同的表单元素
Value :用于当用户还没有输入时，文本框内出现的值。
Maxlength :最多输入的字符数
Size :输入信息的文本框宽度。
Readonly :只读，当其属性值为readonly时，文本框的内容不可改变。
Disabled :当其属性是disabled时，文本框呈灰色状态，不可使用。
密码框password（属性基本与单行文本框类似）
语法：<input type=”password”/>单行文本框
属性：
Name :用于区分不同的表单元素
Value :用于当用户还没有输入时，密码框内出现的值。
Maxlength :最多输入的字符数
Size :输入信息的文本框宽度。
Readonly :只读，当其属性值为readonly时，密码框的内容不可改变。
Disabled :当其属性是disabled时，密码框呈灰色状态，不可使用。
单选框
在一组多个选项中只能有一个被选中。
语法： <input name=”sex” type=”radio” value=””/>
注意: 多个单选框，只有当他们的name名称一致是才会被识别成一组。一组中只能有一项被选中。
属性：
Name：名称（组名）
Value：被选中时的数值（如：男，女；对，错）
Checked：当其属性值为“checked”的时候，会默认选中该单选框。
复选框
就是可以同时选中多个选项。选中后方框中出现一个“对钩”
语法：
下棋<input type=”checkbox” value=”” name=”fav”/>
按钮
可点击后会激活一段脚本程序。
写法：
<input type=”button”value=”按钮”
属性：
Value：就是在按钮上显示的文字。
提交按钮
当点击提交按钮时，实际上就是将<form>表单中整个数据提交传送到action属性指定的地址去，并且浏览器打开这个地址。
写法：
<input type=”submit” value=”用户注册”
属性：
Value：就是按钮上显示的文字。
重置按钮
就是清空整个表单中用户所填写的数据。
写法：
<input type=”reset” value=”重新填写”/>
多行文本框
就是一个可输入大量文本的输入区域。
写法：
<textarea cols=”100” rows=”10”>请输入您的心情日记</textarea>
Cols：文本框宽度
Rows：文本框高度
默认内容：在textarea开始标签与结束标签之间的内容，会作为多行文本框的默认内容显示出来。
下拉菜单/列表
提供多个选项让用户选择。
写法：
<select name=”address” size=”5” multiple=”multiple”> <option value=”重庆”>重庆</option> <option value=“四川”>四川</option> </select>
其中，列表中选项，必须包含在<select>开始与结束标签之中，以<option>标签的形式出现，<option>的value属性代表选项的值，<option>开始与结束标签之间的文本，就是在列表中会显示出来的选项文本。
属性
Size：列表中的这个很关键，因为它可以决定列表显示形式是“下拉菜单“还是”列表选项“，当没有size属性时，显示为下拉菜单，当存在size属性时，显示为列表选项，并且其值为列表高度。
Multiple:其属性值也好似“multiple”时，列表的选项可以多选。（多选时可以按住shift或ctrl键依次点选）
文件域
让用户选择一个文件作为表单数据，然后和表单一起被提交到服务器。
写法：
<input name=”” type=”file”/>
图片按钮
实际上其功能与按钮<input type=”button”/>相同，唯一不同之处仅仅是它的显示是一张图片。
上一篇： JavaScript设计模式之构造函数模式实例教程
下一篇： JsonConfig处理日期时间