# 基础(9)--网页

XHTML语法标准

 

<html>

<head>

<title>标题</title>

<head>

<body>

 

</body>

</html> 

 

 

HTMLXML的联系与区别

属性值:

HTML中的属性值既可以用单引号括起来,也可以用双引号括起来,甚至不用引号括起来也可以,建议用引号括起来。

注释:

HTMLXML一样的。<!—注释内容-->

特殊字符:

HTML< . >是有特殊含义的。

<   (< less than)

>  (>greater than)

  (空格 no-break space) 

 

格式标签:

<p></p> 创建段落

 

HTML不把“ ”当成空格,因为在HTML中经常有缩进,如果把缩进的空格在浏览器中以空格的形式展现的话,排版会很麻烦。

 

<center>要居中的字</center>

<br/> 回车 开始即结束,只是换行,没有空白

<p></p>中间有空白

<b>要转换成粗体的字</b>

 

H标签:

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

 

<font></font>字体标签

 

Url: 统一资源定位符(URL英语UniformResourceLocator的缩写)也被称为网页地址,是因特网上标准的资源的地址。表示资源在网络中的地址。

 

超级链接:

<a href = “http://www.baidu.com”>百度网</a>

 

<a>中还可以嵌套图片,这样就可以点击图片就打开网页

<a href = “http://www.baidu.com”> 

<img src = “1.jpg”/>

</a>

 

“/”表示网站跟目录

“../”表示父目录

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

./或者不写任何斜线表示当前路径的目录,站内引用最好使用相对URL,这样改变域名,目录改变也不受影响。

 

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

 

Imgalt属性为图片无法显示时的显示文本

       Border属性指定边框

       Height 属性

       Width 属性

 

 

列表:

无序列表<ul></ul>  unorderlist

有序列表<ol></ol> orderlist

 

表格:

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

可以将table 的属性设为0来隐藏表格线.

<tr>的属性:align 

Rowspan colspan 进行单元格的合并

 

子标签默认继承父标签的属性,如果自己单独指定了属性,则会覆盖父类的属性。

 

表单:

<from></from>

Action 把页面提交给谁

 Input 主要表单元素

 Type 可选值

      Submit 提交按钮,点击被提交到服务器

      Button 普通按钮

Checkbox  chencked 属性是否被选中

Hidden 隐藏字段

Image  图片按钮

File 文件选择框 method= POS(*)  multiport  enctype才能提交给服务器

Password 密码框

Radio 单选按钮,name同一组才能相互排斥

Reset  重置按钮

Text  文本框 size readonly  

 

Ctrl +j  把可选的值提示出来

 

 

缩略图 制作小图 超链接大图  要有两个图 一大一小

 

Checked readOnly 这种只有一种可选属性值都可以省略属性值,可以只写属性名而不懈属性值。

 

<select>标签:

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

如果Size>1 ListBox

     否则 为ComboBox

Multiple = multiple

<option></option>size的值为显示出来的列表数量。

Selected  指定哪一项处于被选择的状态

 

不选择value的值默认为-1 

 

Value的值不会改变

 

分组:

<optgroup  lable=”城市”><option></option> </optgroup>+

多行文本

<textarea>

</textarea>

Cols   rows 属性表示行数和列数

 

<lable>

<input type = "text"/>前可以写普通的文本来修饰,但是单击修饰文本的时候,input并不会得到焦点,而用lable则可以。For属性指定要修饰的控件的ID 

<tr ><td ><lable for = "password1">重复密码</lable></td><td><input type ="password" id = "password1"/></td></tr>

 

 

Fieldset :comboBox的效果

<fieldset>

<legend>常用</legend>

<.....>

</fieldset>

 

<a href = "htmlpage.htm">同意</a>

点击同意链接到htmlpage.htm

 

样式表CSS层叠样式表

美化页面用的,CSS描述元素的皮肤

CSS主要有元素内联、页面嵌入和外部引用方式。

1)在某个元素的Style设置样式

2)页面嵌入

<head>

<style  type = "text/css">

  Input {

     Border-botton-color:green;

     Background-color:red;

}

</style>

</head>

 

3)引用文件   .css文件

<head>

<title></title>

<link type = "text/css "   rel = "stylesheet" href = "css1.css">

</head>

 

<div></div>

将内容放到层中,就可以将这些内容作为一个整体进行处理,比如整体隐藏、整体移动等。

 

Span:div 是将内容放到一个矩形区域中,会影响布局,而span只是把一段内容定义成一个整体进行操作,但不影响布局显示。

 

常见样式:

计量单位

Px (像素)

30% 百分比

Em相对单位

Borderstyle

Display

Cursor 鼠标在元素上显示的光标图案

Li 不显示圆点 把LIst-style-Tyoe 的属性设为none

<body style = "cursor:URL(图片后缀名为cur或者为ani)">

 

 

 

选择器

1)class选择器

<head>

<style type = "text/css">

.warning{border:   }

.hieggg{font-size}

</style>

</head>

 

<div class = "warning"> 大家好</div>

2)标签+class选择器

Input.account{    color :  }

Lable.account{   fontsize  }

 

<input  class = "account"   type = "text"  value = "111"/>

 

3)ID选择器

为指定的ID的元素设定样式,ID前加

#username

{

    Font-size: XX-large;

}

<input id = "username" type = "text"  value = "fhasdgh">

 

关联选择器

P strong { background-color}

表示p标签内的strong 标签的内容的使用样式

 

<head>

</stryle>

<strong >   </strong>仅仅是加粗

<p><strong >   </strong></p> 不仅加粗,而且还有p strong 

</style>

</head>

 

组合选择器

H1,H2,input{backgroud-color:green}

 

伪选择器:

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

A:visited 超链接点击的样式

A:active 选中超链接时的样式

A:link 超链接未被访问时的状态

A:hover 鼠标移到超链接时的状态

一般都放在.CSS文件中

 

 

 

# 基础(9)--网页,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。