html+css基础笔记

//======================html部分===================//


表现内容



创建一个css链接



图片标签

//图片是内联元素,同时是 内联替换元素,替换元素是能设置宽高的
//可用display转换成块状元素 来消除图片间距.


最外面的div

背景图片



注释语法



滚动标签

　　direction 表示滚动的方向，值可以是left，right，up，down，默认为left
　　behavior 表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动）
　　loop 表示循环的次数，值是正整数，默认为无限循环
　　scrollamount 表示运动速度，值是正整数，默认为6
　　scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒
　　valign 表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
　　align 表示元素的水平对齐方式，值可以是left，center，right，默认为left
　　bgcolor 表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
　　height、width 表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度
　　hspace、vspace 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
　　οnmοuseοver=this.stop() οnmοuseοut=this.start() 表示当鼠标移上区域的时候滚动停止，当鼠标移开的时候又继续滚动。


输入框

在图片上添加文字
第一种方法：
添加一个DIV，采用绝对定位，图片所属DIV为基准

   
   

       文字
   

第二种方法：图片作为背景图片

   wenzi

Html插入视频



简单的下拉列表

选项1
选项2
选项3
选项4



表单

                       用户名
                   密码
单选框 //value 是值 给后台看的
          复选框
                        上传文件
     隐藏域 //这个例子是隐藏了IP地址
                         提交

//name 的作用是让后台区分数据


大文本框
文本(默认值)
overflow : visible | auto | hidden | scroll
visible :　 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值， 对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效 
auto :　   在必需时对象内容才会被裁切或显示滚动条 
hidden :　 不显示超过对象尺寸的内容 
scroll : 　 总是显示滚动条


表格

//行
//列

//colspan 合并列
//rowspan 合并行

1
2
	3
	4

内联元素
行内元素 只在行内发挥作用 不像div是块状元素


html图片按钮



head部分
　　


 
 







框架集
需要先将规范改为框架型 frameset
 
然后将body去掉后, 写上下面的
    (rows="200px , *" 表示将整个页面分成2部分 第一部分200px高,剩下的都给第二部分.  *  表示剩下的都给另一部;rows表示行(指行高) ) 

名字 > 这里是第一部分 引入了a.html页面

      (cols表示列)   \
} 这里是第二部分
  /
/





-------------------------b.html页面中-------------------------------------------------
| 链接到c.html,并在右侧显示出来 |
-------------------------------------------------------------------------------------------

标题标签

title1

title2

title3

title4

title5

title6

//标题标签h1-6系列,表示1-6号标题


段落标签

段落标签

无序列表 ul

• 1


• 2


• 3


• 4

有序列表 ol

1. 1


2. 2


3. 3


4. 4

链接
a标签
[target="_blank" 在新网页中打开]
a标签去掉下划线
a{
text-decoration:none;
}
或者把这个属性分别加到a标签下，
a:link{
text-decoration:none;
}
a:visited{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
a:active{
text-decoration:none;
}
锚点
锚点
[一般用法: index.html#名字 ]


label标签
点这里也可以


//======================CSS部分=====================//

//=========================注意事项=================================//


margin重叠现象研究
相邻的普通元素,上下边距,并非简单的相加,
而是取其中较大的边距值.


IE BUG 
双倍margin bug   解决方案 在CSS中添加样式   _display:inline;


尺寸的表示
ex (x-height，字母 "x" 的高度)
cm (厘米，1厘米=10毫米)
mm (毫米)
pt (点，1点=1/72英寸)
pc (帕，1帕=12点)
%  还可以百分比来表示
em 是相对大小,是指其父元素中的一个'M'大小,可以理解为是父元素字体大小的em倍


字符实体
一般格式: & + 实体名 + ;
空格     
< 小于号 < < 
> 大于号 > > 
& 和号 & & 
" 引号 " " 
' 撇号  ' (IE不支持) ' 
￠ 分 ¢ ¢ 
£ 镑 £ £ 
¥ 日圆 ¥ ¥ 
§ 节 § § 
© 版权 © © 
® 注册商标 ® ® 
× 乘号 × × 

÷ 除号 ÷ ÷ 

转载于:https://www.cnblogs.com/y-zr/p/7906052.html