码迷,mamicode.com
首页 > Web开发 > 详细

html,css

时间:2017-05-28 00:28:23      阅读:314      评论:0      收藏:0      [点我收藏+]

标签:单行   transform   内联   let   格式   移动   选项   插入   名称   

****是重要,####是少用(这些都是我学的过程的一些笔记,记下来自己也可以复习和供需要的朋友学习,要是有不对的地方望指出,谢谢谢谢。)
一:html(css为主,html为辅,css比html强大多得多)
1)文字和段落
设置页面的边距的,由上下左右的距离所控制,想写的话就是分别是<body topmargin=0
leftmargin=20 rightmargin=20 bottomnargin=0 >
2)字体
<br>表示回车换行,<p>是会自动换行
显示块级标签div无论有多少都会占一行,内联标签span只会占它本身的字符串的位置(从左至右)
注释是<!--  -->
想打出<>得写出&lt和&gt;空格是&nbsp;
<b>是加粗<i>是斜体<u>是下划线
<tt>是打印机风格
<code>和<kbd>都是等宽文字设置,1比较宽,2是窄
****<pre>很好用,比较用来显示古诗,可以很形象的表现出来
####<blockquote>是缩进,一般很少用
####比较少用<ruby>是表示被说明的文字,而<rt>是文字的标注,这2个一般都是同时使用,比如我用<ruby>打出 吴东瑜心地善良 ,但是外国的朋友开不懂中文,我就在上面备注一下英语就是<rt>了,就是<ruby>吴东瑜<rt>wudongyu</rt><ruby>
****3)超链接,一般分为绝对路径(http://127.0.0.1/index)和相对路径(同一目录直接输入链接的文档,上一目录要先输入../再输入目录名,下个目录先输入目录名,再加/)和根路径(一般不用,以"/"开头,后面加文件路径/donwnload/index.html)
超链接是最经常用的<a href=‘http://www.baidu.com‘>要打开百度,请点击</a>,一般都是强力建议使用绝对路径
图像链接,就是点击图片来跳转,一般格式为
<p><img src="1.jpg" width="50" height="50" usemap="#map" ></p>
<p><map name="map">
<area shape="rect"<!--img是图片路径,map表示插入图像映射,area是图片映像区域,coords是感应区域坐标,href链接网站位置-->
coords="2,9,149,40"
href="http://www.baidu.com"
>
</p>
****4)表格的运用
表格不外乎就3个命令,第一个是<table>,但是一般都会在<table border="1">,是边框粗细问题,cellspacing="5"是设置间距,然后就可以在里面建立格了,<tr>是行<td>是列,在写td的时候也可以加上align="center(居中)"valign="middle(中间)",记住是先有行再列。在写<table>之后也可以加上标题,用<caption> <td rowspan="2">可以实现跨行,2就是占用2行 colspan="2"是跨列。
5)层的运用(得懂,为什么不重要呢,因为用css来写比较好,所以理解了解就好)
不外乎就是<div  id="Layer1" style="position:absolute; left:29px;z-index:1;top:12px;width:165px; height:104px;layer-">position是绝对定位,left和top是左边距和顶端间距,width和height是宽度和高度,z-index是属性定义,最后是颜色</div>
也可以在<div>写好了之后再后面写上<img src="1.jpg" width=‘100‘ height:"50" >来弄成图片
6)框架的运用(就是在一个网页显示多个网页的技术,通过超链接来为框架之间建立内容联系,从而实现页面导航功能)
****7)表单的运用<form>
--表单标记的基本语法
<form name="" method="" action="" enctype="" target="">其中name是表单的名称,method是设置表单的发送方式,可以是post和get,其中get不会传到服务器,post会,action是表单的处理程序,就是发送到哪里去,enctype是编码方式,target是显示目标,这个很少用</form>
列子<form name="liezi" method="post" action="www.baidu.com" enctype=‘text/plain‘></form>
--信息的输入<input>
<input name="text" type="text" maxlength="" size="" value="">
,建议在写的时候type和name写一样,其中,name是显示插入的控件的名称,type是类型,比如单行文本框text,就是明文输入,
比如密码输入框password,
文件域file,
插入复选框checkbox,
单选按钮radio,就是有个小圆点
标准按钮button 提交按钮submit,
重置按钮reset
插入文字域textarea ,可以设置rows列数和cols行数
插入图像域image ×要在选项添加个src="url"
--<select name=‘‘ size=‘‘>下拉菜单,name是名称,size是一次显示几个
二:css(其实就是在title写好了之后写上
<style type="text/css">
body {font-size:50px;font-family:"隶书"}
</style>)
然后body也就是页面的字体就会发生变化 想让段落发生变化就用p,也可以自己定义)
****1)css”类“选择符类型
比如要设置2个不同的文字颜色的段落,一样就是在
<style type="text/css">#也可以用.来表示
p.red{color:red}
p.blue(color:blue)
</style>
用的话就
<p class="red">hh
<p class="blue">aa
****2)id选择符,列子依然是字段字体颜色
<style type="text/css">
#wdy{color:red}
</style>
用的话就
<p id="wdy">wwww
3)还有包含选择符和伪类
比如table b{font-size:11px}就只是说明表格b内的字号为11像素,对表格外的字号没有影响
4)插入css样式表有4种,分别为链接外部样式表,内部样式表,嵌入样式表,导入外部样式表
****5)文本的精细排版(上面说了怎么用选择符类型来写css,所以现在在操作的时候就省略啦)
css可以调整字符间距,用letter-spacing,比如
.h{font-family:黑体;font-size:20px;font-weight:bold;letter-spacing:normal;text-align-center} #其中的font-weight是粗体,字符间距为正常normal,设置成5px,就是间距为5。
word-spacing是单词间距,只可以单词,
text-decoration是文字修饰选项有underline添加下划线,overline上划线,line-through删除线,blink文字闪烁效果,但是不兼容,none是默认值
text-align文本排列方式,很熟悉,经常用来center,text-align:选项有left,right,center,justify(2端对齐)
text-indent段落缩进 选项是长度或者%
line-height调整行高
text-transform英文大小写 uppercase全大写,lowercase全小写,capitalize开头大写
****6)颜色和背景
字体颜色直接color:#ffffff,或者color:red,其他甚么函数值就知道就好
背景颜色background-color:选项一样
****插入背景图片background-image:url("/ss/ss")
插入背景附件background-attachment用来设置背景图片是否跟随滚动条移动而移动,scroll是跟,fixed是不跟
设置重复背景图片background-repeat选项repeat水平和垂直平铺,repeat-x水平平铺,repeat-y垂直平铺no-repeat不平铺
*****设置背景图片位置background-position
*****7)边框和边距
********边框属性包括边框样式,边框颜色,以及边框宽度,每一个网页都可以看成一个大方框,在这里大方框里面又有小方框
设计边框样式border-style,因为边框为4条组成的,所以就有5条边框的样式,看语法代码就知道分别代表甚么,分别为:
border-style:
border-top-style:
border-bottom-style:
border-left-style:
border-right-style:
边框样式属性取值说明:
none 不显示
dotted 点线
dashed 虚线
solid 实线
double 双直线
groove 凹型线
ridge 凸型线
inset 嵌入式
outset 嵌出式
****边框的宽度border-width
语法为:
border-width:关键字(thin)|长度(xp)
border-top-width:
border-bottom-width:
border-left-width:
border-right-width:
关键字:
thin 细边框
medium 中等边框,一般默认
thick 粗边框
#一起写的话是这样的
.p2{
border-style:dotted solid double;border-width:5px 10px 15px 20px
}
<p class="p2">段落边框的上边框为点线,左右为实线,下边为双直线,边框宽度为上右左下</p>
****设置边框颜色border-color
border-color:aqua red blue yellow  #上右下左分别为水绿,红 蓝 黄
**************边距
基本语法pt=类样式ml
margin-top:10px
margin-bottom:10pt
margin-left:
margin-right:
margin:
********填充(填充属性是用来控制边框和其内部元素之间的空白距离)
padding-top:
padding-bottom:
padding-left:
padding-right:
padding:
----end-----

html,css

标签:单行   transform   内联   let   格式   移动   选项   插入   名称   

原文地址:http://www.cnblogs.com/wudongyu/p/6914761.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!