(HTML部分)特供.Net基础全套视频教程2014版（第十八天）（更新于2015年10月24日02:21:14）

(HTML部分)特供.Net基础全套视频教程2014版（第十八天）（更新于2015年10月24日02:21:14）

html 不区分大小写<body></body>

空格标签 &nbsp

如：莫使金樽     空对月。

代表诗句间有五个空格

标题标签 <h#>:#=1~6

<h1>我是标题</h1>

<h2>我是标题</h2>

<h3>我是标题</h3>

<h4>我是标题</h4>

<h5>我是标题</h5>

<h6>我是标题</h6>

图片标签 <img src="…"/>

<img src="E:迅雷下载2015.8程序1.jpg"/>

注释的写法（注释符）



<img/>图片标签，用来显示图片

实例：

<img src="E:迅雷下载2015.8程序1.jpg" width="200px height="200px" border="1px" alt="图片无法显示" title="唯美图片"/>

src:表示要显示的图片的路径

height:图片的高度 px(像素)

图片的宽度 px

alt:当图片由于某种原因显示失败的时候所显示的文本(例如当src地址有误的时候)

title:当光标移动到图片上的时候显示的文本

====================================================================

HTML水平线(分割线) <hr/>

HTML拆行 

HTML中的特殊符号

>(&gt) <(&lt)

例子

Hello World 

Hello World 

5>3

3<5

&&&&&

5>3表示5>3 3<5表示3<5

===============================================

一个实例以及讲解

<html>

<head>

<title>练习</title>

</head>

<body>

<h1>Hello World</h1>

<img src="1.jpg" title="快来看呀，美图" border="1px"/> 

Hello World 

Hello World 

跳楼疯抢价只需1元，美图抱回家

</body>

</html>

:字体标签 size = 1~7 7最大 color:颜色 face:字体系列

==========================================================================

marquee标签（浏览器兼容性不好）

<marquee direction="right" behavior="slide"><img src="1.jpg"/></marquee>

direction属性：设置方向 left，right，down，up

behavior属性：设置模式 scroll，altermate，slide

====================================================

a标签：超链接 href表示要连接到的地址 target：打开新网页的方式 其中，_blank 表示打开一个
新网页进行跳转 _self表示在当前页面进行跳转。
例子：
<html>
<head>
<title>a标签的使用</title>
</head>
<body>
<a href="http:www.baidu.com" target="blank">百度</a>
</body>
</html>
=============================================================================
a标签的使用1：实现页面内部的跳转
实例：
<html>
<head>
<title>a标签的使用</title>
</head>
<body>
<a href="http:www.baidu.com" target="blank">百度</a>
 
<a name="顶端" href="#底端">回到底端</a>
 
<a name="底端" href="#顶端">回到顶端</a>
</body>
</html>
注意：关键句 <a name="顶端" href="#底端">回到底端</a>
 <a name="底端" href="#顶端">回到顶端</a>
==========================================================================
a标签的使用2：实现页面间的跳转（即两个HTML文件之间跳转）
实例：
常用的标签.html
<html>
<head>
<title>HTML常用的标签</title>
</head>
<body>
这是要显示在网页中的内容 
这是要显示在网页中的内容 
<tt>这是要显示在网页中的内容</tt> 
这是要显示在网页中的内容 
<s>这是要显示在网页中的内容</s> 
32+42=52
32+42=52

这是要显示在网页中的内容 
这是要显示在网页中的内容 
这是要显示在网页中的内容 

<marquee direction="right" behavior="slide"><img src="1.jpg"/></marquee>
 
<a name="碗里来" href="a标签的使用.html#来吧来吧">快到碗里来</a>
</body>
</html>

a标签的使用.html
<html>
<head>
<title>a标签的使用</title>
</head>
<body>
<a href="http:www.baidu.com" target="blank">百度</a>
<a href="常用的标签.html#碗里来" name="来吧来吧">快到碗里去</a>
 
<a name="顶端" href="#底端">回到底端</a>
 
<a name="底端" href="#顶端">回到顶端</a>
</body>
</html>

关键语句：<a name="碗里来" href="a标签的使用.html#来吧来吧">快到碗里来</a>

 <a href="常用的标签.html#碗里来" name="来吧来吧">快到碗里去</a>
=======================================================================================
a标签的使用3：发送邮件
做法：
<a href="mailto:285014478@qq.com">发送邮件到285014478</a>
默认会唤起outlook客户端
======================================================================================
弄成超链接的样子却不进行任何跳转的办法：
<a href="#">我是链接么？</a>
====================================================================================
body当中的属性

一个实例
<html>
<head>
<title>body当中的属性</title>
</head>
<body text="green" link="pink" alink="black" vlink="green" bgcolor="pink" background="1.jpg">
床前明月光，疑是地上霜。
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
<a href="#">超链接</a>
</body>
</html>

text:文本的颜色
link:链接的颜色
alink：active 点击的时候连接的颜色
vlink:点 visited 点击之后的颜色
bgcolor：背景颜色
background：背景图片，平铺
=============================================================================

html列表

例子

<html>

<head>

<title>无序列表</title>

</head>

<body>

<ul type="circle">

<li>星期一吃鲍鱼</li>

<li>星期二吃龙虾</li>

<li>星期三吃康师傅方便面</li>

<li>星期三吃康师傅方便面</li>

<li>星期三吃康师傅方便面</li>

<li>星期三吃康师傅方便面</li>

</ul>

<hr/>

<ol type="A">

<li>星期一吃鲍鱼</li>

<li>星期二吃龙虾</li>

<li>星期三吃康师傅方便面</li>

<li>星期三吃康师傅方便面</li>

<li>星期三吃康师傅方便面</li>

<li>星期三吃康师傅方便面</li>

</ol>

<hr/>

<dl>

<dt>面向对象</dt>

<dd>封装</dd>

<dd>继承</dd>

<dd>多态</dd>

<dt>c#循环</dt>

<dd>for循环</dd>

<dd>foreach循环</dd>

<dd>while循环</dd>

<dd>dowhile循环</dd>

</dl>

</body>

</html>

解析：

无序列表unorder(圆点)(<ul><li>第一个</li><li>第二个</li></ul>)

square(方块) circle(小圆圈) disk(小圆点)

有序列表order(数字)(<ol><li>第一个</li><li>第二个</li></ol>)

通过type属性来改变

自定义列表

<dl>项目号,解释<dt>c#</dt><dd>很基础的内容</dd></dl>

<dl></dl> definition list（定义列表）

<dt></dt> definition term（定义术语）

<dd></dd> definition definition（定义对术语的解释部分）

<ol></ol> order list

<ul></ul> unorder list

<li></li> list item 使用在ol和ul中

ul的属性type可选择disk、circle、square

ol的属性type可选择A、a、I、i、1

================================================================================

table表格

实例:

<html>

<head>

<meta charset="utf-8">

<title>table表格</title>

</head>

<body>

<table border="1px" cellspacing="5px" cellpadding="5px">

<tr>

<td><a href="#">超链接</a></td>

<td>星期一</td>

<td>哈哈哈</td>

</tr>

<tr>

<td>嗷呜</td>

<td>呜呜呜</td>

<td><img src="1.jpg" height="30px"></td>

</tr>

</table>

<hr>

<table border="1px" cellsapcing="0px" cellpadding="0px">

<tr>

<td colspan="2">学生成绩</td>

</tr>

<tr>

<td>语文</td>

<td>98</td>

</tr>

<tr>

<td>数学</td>

<td>95</td>

</tr>

</table>

<hr>

<table border="1px" cellspacing="0px" cellpadding="0px" height="300px" width="280px">

<tr>

<td rowspan="2">张三</td>

<td>语文</td>

<td>98</td>

</tr>

<tr>

<td>数学</td>

<td>95</td>

</tr>

<tr>

<td rowspan="2">李四</td>

<td>语文</td>

<td>88</td>

</tr>

<tr>

<td>数学</td>

<td>91</td>

</tr>

</table>

</body>

</html>

=======================================================================================

关键句：

<table border="1px" cellspacing="5px" cellpadding="5px">

跨列的表格,使用colspan属性来实现

跨行的表格使用rowspan属性来实现

<table></table>

bgcolor 表格背景颜色

border 边框宽度，默认0

bordercolor 边框颜色

bordercolorlight 边框明亮部分的颜色

bordercolordark 边框昏暗部分的颜色

cellspacing 单元格之间的间隔大小

cellpadding 单元格边框与内容之间的间隔大小

width 宽度像素或百分比

height 高度像素或百分比

<td></td>

align = left、center、right

valign = top、middle、bottom

bcolor 背景颜色

width

height

 colspan 跨占的列数

rowspan 跨占的行数

nowrap 禁止单元格过长内容换行显示

<th></th> 黑体居中

<caption></caption> 表格标题

====================================================================================

设置表格字体颜色

例子

<tr>

<td>手机充值、IP卡</td>

<td colspan="3">办公设备、文具、耗材</td>

</tr>

==========================================================================================================

<th></th> 黑体居中

<td></td>

align = left、center、right

valign = top、middle、bottom

bcolor 背景颜色

实例:

<html>

<head>

<meta charset="utf-8">

<title>表格练习2</title>

</head>

<body>

<table border="1px" cellspacing="2px" cellpadding="0px" width="500px" height="200px">

<tr>

<th colspan="3">学生基本情况</th>

</tr>

<tr>

<th>姓名</th>

<th>性别</th>

<th>专业</th>

</tr>

<tr>

<td align="center">刘备</td>

<td valign="bottom">男</td>

<td rowspan="3">计算机</td>

</tr>

<tr>

<td>孙尚香</td>

<td>女</td>

</tr>

<tr>

<td>诸葛亮</td>

<td>男</td>

</tr>

</table>

</body>

</html>

=============================================

html 表单 form

lHTML表单是用于搜集用户输入的

lHTML表单都扩在一对form标签中

l<form>的常用属性

action 表示提交的目标服务器

method 提交的方法get、post

get(默认,以url提交,就是以地址栏的方式提交)

post(通过报文提交)

l文本框标签

<input type = “text“ />

l密码框标签

<input type = “password” />

请输入密码:<input type="password" name="pwd" value="" /> 

l文本域标签

<textarea>内容</textarea>

属性rows(行)和cols(列)

<textarea>哈哈</textarea>

l单选按钮签(没name点不了)

<input type=“radio” />input type=“radio” name=“ra1” value=“raOne” checked=“checked“ />男(默认加checked=“checked”)

l文件选择标签

<input type=“file” />

<input type=“file” name=“f1” value=“fOne” />各个浏览器不同(必须要有value)

<select></select>

 ComboBox或ListBox

 在form间使用

 name

 size属性 默认为1（ComboBox），非1（ListBox）

 multiple属性 可多选（Ctrl）

 <option></option>

 包含各个条目的显示文本

 value 发送时连同select与value的值发给服务器

 selected 初始默认

实例

===========================================================

<html>
<head>
<title></title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
用户名:<input type="text" name="txtName"/> 
密码:<input type="password" name="txtPwd"/> 
<input type="submit" value="提交到百度"/>
<input type="reset" value="清空"> 
<fieldset>
<legend>性别</legend>
<input type="radio" name="sex"/>男 
<input type="radio" name="sex"/>女 
</fieldset>
<fieldset>
<legend>婚姻状况</legend>
<input type="radio" name="married"/>已婚 
<input type="radio" name="married"/>未婚 
</fieldset>

<select size="1">
<optgroup label="河北省"></optgroup>
<option>石家庄</option>
<option>沧州</option>
<option>保定</option>
<option>廊坊</option>

<optgroup label="河南省">
<option>郑州</option>
<option>驻马店</option>
<option>洛阳</option>
<option>新乡</option>
</optgroup>

<optgroup label="湖北省">
<option>武汉</option>
<option>黄冈</option>
<option>黄石</option>
<option>十堰</option>
</optgroup>

<optgroup label="湖南省">
<option>长沙</option>
<option>岳阳</option>
<option>衡阳</option>
<option>益阳</option>
</optgroup>
</select>
 

<input type="file"/> 
<textarea rows="20"cols="100">

省略一大段文字。。。。。

甲方。。。

乙方。。。

</textarea>

</form>

</body>

</html>
=============================================================
效果图

=====

框架标签(典型例子：猫扑网 http://dzh.mop.com/)

注意，作为框架页面的承载页面是不允许有body这个标签的，用<frameset>来代替

框架实例(模仿猫扑网)

首先，新建一个文件夹

然后，在文件夹中新建三个html文件

说明：left 和right都会在index的承载页面中，index作为框架页面的承载页面(不允许有body这个标签)

先写点代码感受一下

left.html

<html>

<meta charset="utf-8">

<head>

<title>这是左边的页面</title>

</head>

<body bgcolor="pink">

i'm left;

</body>

</html>

========================

right.html

<html>

<meta charset="utf-8">

<head>

<title>这是右边的页面</title>

</head>

<body bgcolor="green">

i'm right;

</body>

</html>

==========================

index.html

<html>

<meta charset="utf-8">

<head>

<title>这是左边的页面</title>

</head>

<frameset rows="30%,*">

<frame src="left.html"/>

<frame src="right.html"/>

</frameset>

</html>

=====================

效果如下

若限制移动就用noresize

上述是<frameset rows="30%,*">的情况。rows也可以改为cols

再新建一个top.html

然后

index.html

效果图

接着，往左边放超链接，跳转至右边

<body bgcolor="pink">
<a href="http://www.mop.com">猫扑</a>
<a href="http://www.dapenti.com">打喷嚏</a>
<a href="http://www.cnbeta.com">cnbeta</a>
<a href="http://www.51aspx.com">51aspx</a>
</body>

然后实现点击左边链接，在右边显示

left.html 修改示例

<a href="http://www.mop.com" target="Right">猫扑</a>

index.html修改

<frame src="right.html" name="Right"/>

贴最终代码

left.html

index.html

right.html

top.html

以上四个html文件都在同一个文件夹下
相关阅读:
zz java compare 接口
 moodle 迁移
 Excel 散点图和折线图的区别
 leetcode Two Sum
jQuery 常用方法大全<2>
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法
 回车验证信息
 SQL 创建密码
 高效的分页
 MVC 怎么样设置起始页
原文地址：https://www.cnblogs.com/huangtao1996/p/4751131.html