一些常用的标签
标签
<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="我是一个可以加自己的事件" οnclick="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="我是一个可以加自己的事件" οnclick="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:调整层次关系;