黑马程序员—HTML

来源：互联网发布：淘宝买家申请退款编辑：程序博客网时间：2024/04/29 02:35

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------

Web开发相关概念

手写HTML实现一般难度的Web页面的能力。

webBrowser控件，浏览器控件

Trident引擎就是IE的WebBrowser控件，现在很多非IE核心的浏览器用的就是WebKit引擎。

浏览器兼容性问题，不同浏览器品牌对HTML的支持是有差异的。

<ul>无序列表

网站分为静态页面和动态页面两种：

静态页面：有一个html页面文件保存在服务器上，浏览器要这个页面的时候服务器就把这个页面文件发给浏览器。

动态页面：服务器上没有浏览者要看的页面，而是服务器生产的HTML页面发给浏览器，动态语言的服务器可以用C#、VB.NET、PHP、Java、c编写。

VS中开发HTML页面

第一个网页：新建Web项目（新建-》ASP.NETWeb应用），新建html页面（添加-》新建项-》web-》HTML页）

可以点右键设为起始页

HTML页结构说明

所有内容都在<html></html>标签之内；<head></head>内方的是头部信息，是对页面描述，不会直接显示在页面中，<head>内的<title>中设置的是页面的标题，<title>只能放在<head>中；<body>是页面的主题，大部分显示内容都定义在这里。

body标签的bgcolor属性可以设定网页背景的颜色。#006699每两个一组分别表示R、G、B。（不属于标准属性，没有提示）在VS中有内置工具拾色器，可以选择颜色。

HTML和XML的联系、区别

属性值：HTML中属性值即可以用单引号括起来、也可以用双引号括起来、甚至不用引号都可以、单双要配对。

注释：HTML使用和XML一样的来做注释。

特殊字符：HTML中<、>是有特殊含义的、空格是不会被显示，所以需要特殊符号，相当于C#中的'\n'转义符。<（小于号，less than）;>（大于号，greater than）；（空格，no-break space）<>标签定义

格式标签：<p></p>创建段落；<br/>回车，也可以写成<br>，在html中一些标签可以不关闭，<br>就是一个，这也是和XML不同的地方，但最好严格关闭。

在html中不识别“ ”空格否则排版很麻烦

基础

<br>回车 <p>分段区别：<br>就是两行，<p>两端内容之间有空白

<center>居中显示

h表情，HTML定义了<h1></h1>到<h6></h6>六个h标签，分别表示不同大小的字体。

<b></b>粗体

<font></font>字体标签

URL：URL表示资源在网络中的地址。

超级链接：<a href=" 网址"></a>

<a>中还可以嵌套图片，这样就是点击图片打开连接

相对URL：

相对URL表示相对于当前文档的资源，“/”表示网站的根目录，“../”表示父目录，“../../”表示父目录的父目录，“./”或者不写任何斜线表示相对于当前路径的目录。站内引用最好用相对URL，这样域名改变了、目录改变了都不受影响。<a href="a.htm"><img src="a.jpg"/></a>

将<a>的target属性设定为"_blank"就可以在新窗口中打开超链接。按住ctrl点击链接

用name属性为<a>起名字：<a name="last">这里是最后</a>。这样可以通过<a href="#Last">转到平台</a>来跳转超连接部分。

图片是链接的，不是插入的，alt属性为图片无法显示时的显示文本。图片一定要指定width和height，哪怕图片未加载完成也会先占位置。

显示小图，用width和height，加入超链接可以实现图片的缩放。但是一般不要这么做，因为还是要下载完整图片，使得速度比较慢。

最好方法：显示的小图就是小图，可以超链接是大图<a href="/image/csharp1.jpg"><img src="/image/csharp1_small.jpg"/></a>

列表、表格

列表：<ul><li></li></ul>无序列表 unordered list

<ol></ol>有序列表，用的很少.ordered list

表格：<table></table>为表格，在内部通过<tr>创建行，<tr>内部<td>创建单元格。可以将table的border 属性设为0来隐藏表格线。

<tr>的属性：align，水平对齐，可选值left,right,center;valign垂直对齐，可选值top、middle、bottom。

<td>也有align和valign。vertical 垂直，子标签默认继承父标签的属性，如果自己单独指定了属性，会覆盖父标签的属性

还可以使用rowspan、colspan进行单元格合并，用VS可视化的功能来做就行。

colspan 属性规定单元格可横跨的列数

scope 属性标识某个单元是否是列、行、列组或行组的表头。

表头的td可以用th代替，这样就会表头粗体、居中显示。

建议将表头用<thead>代替<tr>

表单

网站表单与填表

<form>标签为表单标签。如果要把数据提交到服务器，则需要将<input>、<textarea>、<select>等表单元素放到form中。

<input>是主要的表单元素，type的可选值：submit（提交按钮）、button（普通按钮）、checkbox(复选框)、file(文件选择框)、hidden(隐藏字段)、image(图片按钮)、password（密码框）、radio（单选按钮）、reset(重置按钮)、text(文本框)

例：<input type="text" />

action把页面提交给谁

input表单详解

submit：点击submit按钮表单就会被提交给服务器，中文IE下默认按钮文本为“提交查询”，可以设置value属性修改按钮的显示文本。

text：size属性为宽度，value为值，maxlength为可以输入的最大长度，readonly只读。<input type="text" readonly/>（只写属性名，不写属性值）或者<input type="text" readonly="readonly/">(推荐)

checkbox：checked属性表示是否被选中，<input type="checkbox" checked />或者

<input type="checkbox" checked="checked" />（推荐）

checked、readonly这种只有一个可选值的属性都可以省略属性值

radio：相同name属性的为一组，组间不互相影响。不同radio设定不同的value值，这样通过取指定的name的值就可以知道谁被选择了，不用单独的判断。

file：使用file，则form的enctype必须设置为，multip art/form-data、method属性为POST。

image：使用src属性指定图片的地址，用来实现美化的“登录按钮”，alt是图片不显示的时候显示的字，title是鼠标放到图片上时显示的文字

<SELECT>标签

用来创建类似于WinForm中的ComboBox或者ListBox

如果Size属性大于1就是ListBox，就是列出来了。（size的值为显示出来的列表数量）否则就是ComboBox。<select multiple>或者<select multiple="multiple">(推荐)，那么这样就是可以多选的ListBox。

select中的项是<option>,<option>北京</option>还可以设定项的值<option value="1">北京</option>

将一个option设置为选中：<option selected>333</option>或者<option selected="selected">333</option>(推荐)就可以将这个设定为选项。

如何实现不选择，添加一个<option value="-1">--不选择--</option>，然后编程判断select 选中的值如果是-1就认为是不选择。

select 分组选项，可以使用optgroup对数据进行分组，分组本身不会被选择，无论对于下拉列表还是列表框都适用。备注

其他标签

<textarea>多行文本（也是表单元素）：<textarea>文本</textarea>，cols、rows属性表示行数和列数。赋初值就是在标签里写

<label>:在<input type="text">前可以写普通的文本来修饰，但是单击修饰文本的时候input并不会得到焦点，而且用label则可以，for属性指定修饰的控件id,<label for="txt1">asdfad</label><input type="text" id="txt1" />

fieldset:GroupBox效果，将一些控件框起来，看起来规整一些

</fieldset>

<hr/>横线

层（Div）、块（Span）

<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。

层：<div></div>将内容放到层中，就以将这些内容当成一个整体进行处理，比如整体隐藏、整体移动等。Div非常强大和常用。类似于WinForm的Panel。

span：div是将内容放到一个矩形的区块中，会影响布局，而span只是把一段内容定义成一个整体来进行操作，但不影响布局、显示。

样式表、CSS
CSS(层叠样式表)使用来美化页面用的。可以对页面元素进行更精细的设置，样式主要描述元素的字体颜色、背景颜色、边框等。CSS主要有元素内联、页面嵌入和外部引用(推荐)三种使用方式。

元素内联，直接将样式写入元素的style属性中，<input type="text" readonly="readonly" style="background-color:#FF00FF"/>，适用于样式没有可复用性的场合。

页面嵌入：在head中加入

input{background-color:Red;border-color:Green}

</style>

表示页面中国有input都是采用指定的样式。适合于样式复用，减小页面体积。

外部引用，将css内容写入css后缀文件

textarea{background:yellow}

然后在页面中引用，在head中加入

美工人员编写css

适用于多个页面共享

将CSS写入一个单独的页面中

添加-新建项-web-样式表

常见样式：

css计量单位:css中表示宽度、距离时有多种计量单位：px（像素）、30%百分比、em(相对单位)等。Width:20px

background-color:Red;背景颜色；color:文本颜色。

border-style:solid;边框风格（默认无），实线，还有dotted(点)等值；border-color:边框颜色；border-width：边框宽度(默认宽度为0)。

例子：style="border-color:Red;border-width:1px;border-style:dotted;"

display：元素是否显示，可选值none（不显示）、block(显示为块级元素，此元素前后会带有换行符)、inline(显示为内敛元素，元素前后没有换行符)等。

cursor,鼠标在元素上时显示的光标图标，可选值：cursor(默认光标)、pointer(超链接上的手)、text(输入Been)、wait（忙沙漏）、help(帮助)等。变成图片就是选择url。

LI不显示圆点：LIST-STYLE-TYPE:none；一般设定值li或者ul上

<u>下划线

样式选择器

对于非元素内联的样式需要定义样式选择器，通俗点说就是这个样式适合哪些元素，三种：标签选择器、class选择器和id选择器

标签选择器 input{background-color:Red;border-color:Green}，对于指定的标签采用统一的样式。

class选择器，以定义一个命名的样式，然后在用到它的时候设定class属性为样式的名称，还可以同时设定多个class，名称之间加空格，可以同时具备多种样式。

样式名称开头加“.”表示class选择器

.warning{background:Yellow;}

.highlight{font-size:xx-large;cursor:help;}

样式优先级

自己写的style优先级比较高。class和style可以同时用，如果冲突就是style覆盖class

标签+class选择器

Class选择器也可以针对不同的标签，实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加标签名即可。

input.accountno{text-align:right;color:Red;}

label.accountno{font-style:italic;（斜体）}

<label class="accountno">33333333333333</label> accountno账户数字

id选择器

为指定id的元素设定样式，id前加#

#username

{

font-size:xx-large;

}

<input id="username" type="text" value="11111111">不需要在控件上描述

关联选择器：表示某个控件内的样式

P strong{background-color:Yellow}

表示P标签内的strong标签内的内容使用样式,strong的意思是加粗

<strong>fashjgerigh</strong>

<p><strong>fashjg</strong></p>

组合选择器，同时为多个标签设定同一个样式

H1,H2，input{background-color:Green}

<h1>nihao</h1>

伪选择器

为标签的不同状态设定不同的样式

A:visited;超链接点击过的样式；A:active；选中超链接的样式；A:link;超链接未被访问时的状态；A:hover:鼠标移到超链接时的状态

A:visited{TEXT-DECORATION:none}

A:active{TEXT-DECORATION:none}

A:link{TEXT-DECORATION:none}

A:hover{TEXT-DECORATION:underline}、

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------

详细请查看：http://net.itheima.com/