黑马程序员-html基础

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


所有内容都包含在<html></html>内,<head></head>是页面的头部信息,<title></title>是标题栏信息,title必须在head内,<body></body>是页面的主体.

<pra>可以输入空格<pra>

在所有页面中都必须有这个部分,由于现在的浏览器贞错性强,即使在不写这些内容,页面也能正常显示,但最好养成习惯写完整.

Body有一个bgcolor的属性,修改网背景颜色.

Html和Xml的联系与区别

 

 

Html中的特殊符号:

Html中不把” ”当成空格,当成空格的话影响排版,html中的空格用&nbsp;表示.

&lt(小于号,less than)  &gt(大于号 greater than) 

 

文件格式的标签:

<br/>回车,<p>是分段,<p>前后会有大段空白,而<br/>则没有.

<center>耒阳</center>居中显示

H标签,在html中定义了<h1>、<h2>、<h3>、<h4>、<h5>、<h6>六个不同的标签,分别表示不同的字体

<b>a</b>字体加粗

<font></font>字体标签,<font color=”red”>红色</font>,<fontsizi=”30”>字体大小</font>

URL超链接

<ahref="http://www.umiwi.com">优米网</a>

<a>中还可以嵌套图片

<a>的target属性设定为”_blank”就是在新窗口打开页面

超链接深入

“/”表示根目录.   “../”表示父目录  “../../”表示父目录的父目录.

“./”或者不写任何斜线表示相当于当前路径的目录,

 <img src="a.jpg">注意图片是链接的,不是插入的,所以如果src指向的文件被删除了,就不能观看了.
alt为图片无法显示时显示文字
border属性为图片边框,border="0"为不显示,width和height指定图片的大小
列表和表格
<table></table>建表
<tr></tr>建行 属性:align,水平对齐,可选值left(左对齐),right(右对齐),center(居中对齐);
                   valign,垂直对齐,top(顶端对齐),middle(中刘对齐),bottom(底部对齐)
<td></td>建单无格 属性:属性同上
<thead></thead>指定表头
还可以使用rowspon,colspan进行单元格合并,表头用th这样表头会居中加粗 colospan="2"合并两个单元格
<html>
<head>
<a href="http://www.umiwi.com" target="_blank">优米网</a>
<img src="D:\我的文档\20110110.jpg" width="50" height"50"></imng>
<ul><il>显示</il><il>dsdd</il><il>显示</il></ul>
<table border="1">
<tr><td>姓名</td><td>年龄</td><td>性别</td></tr>
<tr align="center"><td><font color="red">shuaige</font></td><td>22</td><td>男</td></tr>
<tr><td><a href="http://www.baidu.com"  target="_blank"><font color="red">百度一下你就知道</font></a></td><td>未知</td><td>娘</td></tr>
</table>
</head>
</html>




表单
<from>标签为表单标签,如果需要把数据提交到服务器中,则要将<input> <textarea> <select> 等表单元素放在from中
<input>是主要的表单元素, type的可以选值, text(文本输入框) checkbox(复选框) button (普通按扭) submit(提交按钮) image(图片框)
                                   password(密码输入框)  file(文件选择框) radio(单选 按钮) reset(重置按钮) hidden(隐藏字段)
submit:默认按钮名称为提交可以通valus="按钮名"来更改名称.
text: size属性为宽度  maxlength为最长字符数  value为值   readonly设为只读属性  
checkbox: checked属性是否选中(有且只有一个属性)
radio:  可以用name属性来进行分组(实现一组对中只能选中其中一个)
file:  用到file则 需要把from的enctype属性设置为multipart/from-data ,mothod属性为post
image: 用src属性来指定按扭的图片
        对于只有单一属性值的属性,可以只写属性名(标准的写法需要写全,也推荐写全)
缩略图,通过两个图片来实现,单点击小图,转到大图
<select>标签  用来创建类似于winfrom的ComboBox(下拉列表)和ListBox(列表)
     通过改为size的值来确认列表类型,size>1为ListBox(size的值为显示的数量),否则就是ComboBox
     multiple属性就是多选ListBox(显示全部列表项),可以选多个项
select中option
<option>"所有添加的项"<option>   option中有一个value的属性为程序员看到的值,"添加的项"则是给用户看的值
option中设默认选中的值属性为selected="selected", 不让选中把value="-1"设置为-1




select中的optgroup  给几个项分组
<optgroup label= "zuming">
<option>sds</option>
</optgroup>


其他标签
<textarea>多行文本框(也是表单元素)
<textarea>文字</textarea>    rows   cols 表示行数和列数


<label>  在 <input type="text">前面可以写修饰的普通文本,用户单击文本并不会使input得到焦点,这时候就需要用到label,使用lable的
for属性指定要修饰控件的id  <bale for="id">


<fieldset>  GroupBox效果   将控件划分在一个区域内
    <fieldset>
<legend>相当于标题<legend>
<input type="text"/>
</fieldset>
样式表  CSS(层叠样式表)
 CSS,  用于美化页面用的,   对页面元素进行描述  字体大小 颜色    背景色 边框  等等的设置
CSS 主要有 元素内嵌  页面嵌入 和 外部引用 三种方式,  
元素内嵌,直接将元素写入style属性中,例:<input type="text" readonly="readonly" style="background-colo:#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
在Css写的方法  控件名{  属性}

div(层)  span(块)
div 把多个内容包成一个整体,可以把div当成一个整体来处理,比如隐藏,移动,修改
span 也是把多个内容集合成一个整体, 当只占被包的内容区域,不会改变原始的排版,div则占整行
div是把内容放在一个矩形中,会影响整体布局,而span是把一段内容定义成一个整体,不会影响布局.显示




常见样式
css计量单位:css中表示高度,距离时有多种计量单位:px(像素)  30%(百分比)  em(相对单位)等.
background-color:red背景颜色; color:文本颜色
border-style;solid 边框风格(默认没有边框),实线  还有dotted(点)等值; border-color 边框颜色  border-width:3px边框宽度(默认为0) 
display: 元素是否显示,可选值none(不显示)  block(显示为块级元素,此元素前后会事有换行符)  inline(显示为内联元素,元素前没有换行符)等.
cursor,鼠标在元素上时显示的光标图片,可选值:cursor(默认光标)  pointer(超链接上的手)  text(输入bean)
wait(忙 沙漏)   help(帮助)等.
LI不显示圆点. LIST-STYLE-TYPE:none;一般设在N或UL上\




样式选择器  
对于非元素内联的样式需要定义样式选择器,通俗的说就是这个样式适合于哪些元素,三种:标签选择器  class选择器和 id选择器
标签选择器 input{border-color:yellow;color:red;},对于指定的标签采用统一的样式,
calss选择器 以义一个命名的样式,然后 在用到它的时候设定元素的class属性为样式的名称,还可以同时设定多    个class,名称之间加空格(类似于C#的中类的调用)
   样式名称开头加"."
   <head><tile></tile>
            <style>
    .ziti{font-size:xx-large}
   </style>
   <table><tr><td class="ziti">dlkfdsl</td></tr></table>


            </head>
标签+class选择器 
class选择器也可以针对不同的标签,实现同样的样式名对于不同的标签有不同的样式,只要在样式名前加标签名即可.
input.accountno{text-align:right;color:red;}
label.accountno{font-style:italic;}


<input class="accountno" type="text" value="1111">
<label class="accountno">3333</label>


id选择器
为指定的id设定样式,id前加#
#username
{
  font-size:xx-large;
}


<div id="username">要显示的文字</div>


style class可以同时组合使用
<input id="username" calss="accountno" style="font-size:xx-large" type="text" value="sdfs"/>
更多选择器 
@关联选择器
p strong{background-color=:yellow}
表示P标签内的strong标签内的内容使用的样式
<strong>分水岭</strong>
<p><strong>sdfsd</strong></p>
组合选择器,同时为多个标签设定一个样式
H1,H2,input{backgournd-colo:green}
<h1>nihao</h1>
<input type="text" value="test"/>


伪选择器:为标签的不同状态设定不同的样式:
A:visted: 超链接点击过的样式; 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: none}










html中注释用<!--注释文字-->

























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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值