您的位置：首页 > Web前端 > CSS

Javaweb__html、css

2014-04-15 01:25 645 查看

一些常用的标签

标签

<br/>换行

<hr/>下划线 noshade 没有阴影效果

<pre>格式预设

font 属性：color，size大小，face字体类型默认字体大小是 3 也可以写成+2 就是5

特殊字符：<<>小于 <$gt>大于 ¥人民币 ™商标

图像标记：img

*清单列表

有序 <ol></ol>属性 type 1 i a A 超过26aa ab start

<li></li>

无序<ul></ul> 属性 type circle disc square 如果不填属性，默认的实心空心方块

自定义列表： <dl>是 <dt><dd>的父类

* 超链接

<a>

href:
http://www.baidu.com
demo2.html

mailto:xxx.@163.com

xxx.js

zip文件

name ="定义锚地址" href="#地址"

target：_self,_blank,new,框架名显示到框架中另一个部分

</a>

* 表格标记

<table>一个表格

属性： border ,bordercolor ,width ,cellspacing 边线的空间 ,cellpadding 字体与表框的距离 ,align

tr 行

td 列单元格

rowspan

colspan

th 列标题

caption 表格标题

框架标记及<iframe> cols 和rows 是框架的标签

<frameset>跟<body>不能同时使用 iframe跟frameset同一级别

<frame>

* 表单标记及语义化；

<form action="提交地址" method="post/get"提交方式>

<input type=""> type属性值：type:Text, Radio,Checkbox, Password, Submit/Reset, Image 相当于按钮图片提交, File, Hidden, Button。

<select> <option></option></select>列拉列表

<textarea></textarea>多行文本框

* 多媒体标记

<embed> 媒体标签

<bgsound> 背景声音

src:资源位置

头标记

<meta> 可以调编码格式

可以定时刷新可以提供引擎搜索

<base href="基础地址" target="打开方式"/>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> 表单</title>

<!--

<form></form>

type=

"text"

password

radio

checkbox

submit

reset

hidden 隐藏域

file 文件域

image 图片按钮，src="" 也可以实现提交表单的作用

button 也是一个按钮，可以添自己的事件

demo14.html?username=aa&password=aaa&sex=male&hobby=on

demo14.html?username=a&password=a&sex=male&hobby=eating&hobby=game&photo=&photo=

get提交

post提交

对比post与get提交两种方式

1.get提交的数据在地址是可见的，而post地址数据不可见

2.get提交数据不安全，post提交数据更安全

3.get提交数据不超过1K,post理论上没有数据量的限制

一段form表单的代码。。。

<form>
用户名：<input type="text" name="username" ><br/>
密码：<input type="password" name="password"><br/>
性别:  男<input type="radio" name="sex" value="male" checked />  女<input type="radio" name="sex" value="female" /><br/>
爱好：吃饭<input type="checkbox" name="hobby" value="eating"/>    睡觉<input type="checkbox" name="hobby" value="sleep"/>    打游戏<input type="checkbox" name="hobby" value="game"/><br/>
上传照片:
<input type="file" name="photo"><br/>
<input type="submit" value="注册"><input type="reset"/>
<input type="button" value="我是一个可以加自己的事件" onclick="alert('Hello');"/>
</form>
<br/>-------------------表单的进一步使用--------------------------<br/>
<form action="demo12.html" method="post">
用户名：<input type="text" name="username" ><br/>
密码：<input type="password" name="password"><br/>
性别:  男<input type="radio" name="sex" value="male" checked="checked" />  女<input type="radio" name="sex" value="female" /><br/>
爱好：吃饭<input type="checkbox" name="hobby" value="eating"/>    睡觉<input type="checkbox" name="hobby" value="sleep"/>    打游戏<input type="checkbox" name="hobby"  checked="checked" value="game"/><br/>
上传照片:
<input type="file" name="photo"><br/>

个人描述：(最多填200字)
<textarea	rows="5" cols="10" >写自己的工作经历</textarea><br/>
所在的城市:
<select>
<option>--请选择城市--</option>
<option value="bj" selected>北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</select><br/>
<input type="file" name="photo"><br/>
<input type="submit" value="注册"><input type="reset"/>
<input type="button" value="我是一个可以加自己的事件" onclick="alert('Hello');"/>
</form>

css：层叠样式表

与html结合的四种方式 <head></head>

1.style 内部写法行内样式

2.内嵌样式

<style type="text/css">

标签选择器，作用范围当前页面中具有相同选择器的标签

</style>

3. 外部文件样式引入<link rel="stylesheet" type="text/css" href="demo.css">

4. 导入方式

<style type="text/css">

@import url(demo2.css);

</style>

css的注释：只有一种样式：/* */

样式优先级：外部<内部从上到下就近原则

选择器： 1.html选择器，标签名选择器

2.id 选择器样式中 #id值 html中设置id

3.class 样式中 .(值)开头的选择器 class引入 class="值"

层级选择器

关联选择器：div p{} 选择器1 选择器2

font-famylie字体 font-size：大小

组合选择器：p,div{}

伪元素选择器：标签名：伪元素(状态)

a:link 连接未点击

a:hover 悬浮

a:active 点击

css属性：

font 字体风格粗细大小类型

文本 text-indent：文本缩进

text-align：right input输入值居右

background

导入图片 background-image：url(路径);

background—repeat：no-repeat;

border：solid实线 dashed虚线

margin div与div的间距 padding边框与文字的距离

布局：float 漂浮 clear：清除左右both

margin：上 2px 右左3px 下5px 上右下左

层叠定位 positioning 绝对定位，相对定位

绝对定位：position：absolute绝对定位，后面的内容会变化

它始终相对于body

relative相对定位相对于原来的位置

z-index：调整层次关系；

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航