# 基础(9)--网页
XHTML语法标准
<html>
<head>
<title>标题</title>
<head>
<body>
</body>
</html>
HTML和XML的联系与区别
属性值:
HTML中的属性值既可以用单引号括起来,也可以用双引号括起来,甚至不用引号括起来也可以,建议用引号括起来。
注释:
HTML和XML一样的。<!—注释内容-->
特殊字符:
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”就可以在新窗口中打开链接。
Img的alt属性为图片无法显示时的显示文本
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文件中
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。