【黑马程序员】html 基础

来源：互联网发布：淘宝店与触店的关系编辑：程序博客网时间：2024/05/17 06:29

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

一、

1、静态页面、动态页面

网站分为动态页面和动态页面

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

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

编写普通的HTML页面是和任何后台语言无关的，可以使用Dreamweaver、ExpressionWeb等工具写，这些工具是给页面美工的，开发人员用VS写html就够了。不要把精力放到怎么办界面做好看上，正规公司都有专门的页面美工，不正规公司都是偷别人的美工页面，无论是偷别人的页，面，还是使用美工开发出来的页面，对于开发人员要做的“填模板”工作都是一样的

二.

1、颜色体系

Body标签的bgcolor属性可以设定网页的背景颜色，<body bgcolor=”#006699”>

#006699这就是HTML中表示颜色的方式，每两个是一个组，三组分别表示R、G、B的值。是16进制表示。关于RGB见备注

可以使用VS内置的颜色选择对话框生成RGB值，也可以使用取色器（比如DebugBar内置的取色器：打开IE，打开DebugBar工具栏，点击吸管图标）；HTML还预定义了一些颜色：red black white等比如bgcolor=”black”。

配色不是一个专业开发人员考虑的，是美工的事，所以对于颜色的取值不用太操心，知道有这么一回事就行了

三、

1、Input表单详解

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

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

Checkbox:checked属性表示是否被选中，<input type =”checkbox”checked/>或者<inputtype=“checkbox”checked/>(推荐)check readonly 只有一个属性值的等可以只写属性名

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

File：使用file，则form的enctype必须设置为multipart/from-data、method属性为POST

Image：使用src属性指定图片的地址，用来实现美化的“登陆按钮”。

2、<select>标签

用来创建累世与WinFrom中的Commbox或者ListBox

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

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

将一个option设置为选中：<optionselected>333</option>或者<optionselected=”slelected”>333</option>(推荐)就可以将这个设定为选择项

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

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

四、

其他标签

<textarea>多行文本（也是表单元素）：<textarea>文本</textarea>,cols、rows属性表示行数和列数。

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

Fieldset:groupbox效果,将控件划分一个区域，看起来更规整

<fieldset>

<legend>常用</legend>

<input type=”text”/>

</fieldset>

五、

1、样式表、CSS

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

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

页面嵌入:在head中加入

<style type=”text/css”>

input{border-color:Yellow,color.Red;}

</style>

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

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

Textarea{background:yellow}

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

<link type=”text/css” rel=”Stylesheet” href=”s1.css/>

适合于多个页面共享css

六、

1、层（Div）、块（span）

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

Span:div是将内容放到一个矩形的区块中，会影响布局，而span只是把一段内容定义成一个整体进行操作，但影响布局、显示常见样式

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(输入Bean)、wait(忙沙漏)、help（帮助）等。

LI不显示圆点：LIST-STYLE-TYPE:none:一般没在li或者ul上

应用：图片：不显示边框，

七、样式选择器

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

标签选择器 input{border-color：Yollow;color：Red;},对于指定的标签采用统一的样式

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

样式名称开头加““

.Waring{background:Yellow;}

.Highlight{font-sizexx-large;cursor:help;}

<table><tr><tdclass=”highlight”>aaa</td><td class=”waring”>bb</td><tdclass=highlight waring”>css</td></tr></table>

八、标签+class选择器

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

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

Label.accountno{font-style:italic;}

<Inputclass=”accountno” type=”text” value=”1111111”/>

<labelclass=”accountno”>333333333</label>

2、 id选择器

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

#username

{

Font-size:xx-large;

}

<input id=”username” type=”text” value=”aaaaaaaaaa”/>

Style、class可以同时组合使用

<input id=”username” class=”accountno” style=”font-size:xx-large”type=”text” value=”aaaaaaaaaa”/>

3、更多选择器

关联选择器：

Pstrong{background-color:Yellow}

表示P标签内的strong标签内的内容可以使用的样式

<stronh>fasdsdfsd</strong>

<p><strong>dfsdf</strong></p>

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

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

<h1>nihao</h1>

<input type=”text” value=”test”/>

4、伪选择器

伪选择器：为标签的不同状态设定不同的样式

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://edu.csdn.net/heima/