黑马程序员—HTML基础（css+标签）

来源：互联网发布：c语言中什么叫关键字编辑：程序博客网时间：2024/04/28 04:56

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

基础知识点：

-----------------------------------------------------------------------------------------------------------------------------------------------

列表：

<ul></ul> 无序的列表，unordered list。
<ol></ol> 有序的列表，用的很少，ordered list。前面默认有1，2，3，4数字排列；也可设为a,b,c,d...

table（表格）:

<table></table>为表格，在内部通过<tr>创建行，<tr>内部通过<td>创建单元格

border属性设为0来隐藏表格线,默认也不显。为大于0的值则显示边框。

cellspacing:单元格与边框、单元格与单元格之间的间距。
cellpadding：单元格里的内容与单元格之间的间距。

                <tr align="left"> 设置行的内容的对齐方式；
                <td align="center" valign="top"> 设置单元格的内容的对齐方式。
                <th> table header 表头，默认居中、加粗。

               <rowspan> 跨了几行
               <colspan> 跨了几列

<a>超链接：

将<a>的target属性设定为“_blank”就可以在新窗口中打开超链接。

      <a href="http://www.google.com">谷歌网</a> .                              //默认也是在当前选项卡里打开
     <a href="http://www.baidu.com" target="_self">百度</a>               //在当前选项卡里打开页面
     <a href="http://www.baidu.com" target="_blank">百度</a>           //在新选项卡里打开页面

    用name属性为<a>起名字：
     <a name="Last">最后一页</a>.
     这样可以通过<a href="#Last">转到最后一页</a> 来跳转到超链接的部分。

特殊字符：HTML中< 和 >是有特殊含义的，空格是不会被显示的。要用到特殊字符，用下面的格式：
<(小于号（记着还带；号）)；>（大于号）； （空格）

-------------------------------------------------------------------------------------------------------------------------------------------------------------

常见样式：

1.css计量单位：px（像素）、30%（百分比）、em（相对单位）等

2.background-color:Red;背景颜色；color：文本颜色

3.border-style: 边框风格 solid(实线)，dotted（点）等值;

border-color: 边框颜色

border-width: 边框宽度（默认是0）

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

4.display: 元素是否显示

none（不显示）

block（显示为块级元素，此元素前后会带有换行符）

inline（显示为内联元素，元素前后没有换行符）

5. cursor :鼠标在元素上时显示的光标图标

cursor（默认光标）

pointer（超链接上的手）

text（输入Bean）

wait（忙沙漏）

help（帮助）

6. LIST-STYLE-TYPE:none li不显示圆点，一般设在li或者ul上

7.padding: 内边距,内容与控件之间的间距。

8.margin: 外边距，设置一个元素所有外边距的宽度。

9.overflow: ( visible | auto | hidden | scroll)设置当对象的内容超过其指定高度及宽度时如何管理内容

visible: 默认值，不剪切内容也不添加滚动条。

auto：在必需时对象内容才会被裁切或显示滚动条。

hidden :不显示超过对象尺寸的内容。

scroll :　总是显示滚动条

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

HTML引用CSS样式：三种方式

1.直接在HTML代码中写死

2.在HTML代码中使用style，在head标签中定义样式

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

p{color:Blue;}

</style>

3.单独写一个CSS文件，将样式定义在此文件中，HTML文件在Head标签中引用它.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

样式选择器：

1.标签选择器

input{ }

table{ }

2.class选择器

.warning{background:Yellow;}

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

</style>

...

3.标签+class选择器

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

label.accountno{font-style:italic;}

...

3.ID选择器

#username

{

font-size:xx-large;

}

...

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 }

--------------------------------------------------------------------------------------------------------------------------------------------------------------

Html常用标签

<label>

<text> maxlength、readonly等属性

<radio> 相同name属性的为一组，不同radio设定不同value值

<textarea> 多行文本，属性cols、rows表示行数和列数

<fieldset> :GroupBox效果

<table>

<div> 层：将一块内容包成一个方块，实现整体隐藏、整体移动、整体修改。相当于winform中的panel，panel移动，所有子控件一起移动。

<span> 层：将一段内容定义成一个整体，并非矩形。

<input>

<submit> 点击此按钮表单就会被提交给服务器

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

<image> src属性指定图片的地址

举例：

1.<fieldset>

</fieldset>

2.<label> 特殊用途：点击label，获得input焦点

3.<radio> 相同name的为一组，一次只能选中其中的一个选项

<input type=”radio” name=”gender”/>男

<input type=”radio” name=”gender”/>女

<input type=”radio” name=”gender”/>保密

4.<select> 效果同ComboBox或ListBox

如果size属性大于1就是ListBox(size值为显示出来的列表数量)，否则就是ComboBox(一次只显示一个选项)。

<select multiple=”multiple”>就变成了可以多选的ListBox。

如何实现“不选择”，添加一个<option value=”-1”>--不选择--</option>,

然后编程判断select选中的值如果是-1，就认为是不选择。

Select分组选项，可以使用optgroup对数据进行分组。

    分组功能，分组标签不能选择
  <select name="country" size="10">
      <optgroup label="Africa">
            <option value="gam">Gambia</option>
            <option value="mad">Madagascar</option>
            <option value="nam">Namiba</option>
     </optgroup>
     <optgroup label="Europe">
            <option></option>
            <option></option>
     </optgroup>
</select>

---------------------------------------------------------------------------------------------------------------

播放声音：

调用wmp的插件<embed src="歌名" loop=true autostart=true name=bgss width="" height="">
只支持IE的标签：<bgsound src="歌名" loop="true">

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

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