首页 > 代码库 > html,css
html,css
****是重要，####是少用（这些都是我学的过程的一些笔记，记下来自己也可以复习和供需要的朋友学习，要是有不对的地方望指出，谢谢谢谢。）
一：html(css为主，html为辅，css比html强大多得多)
1）文字和段落
设置页面的边距的，由上下左右的距离所控制，想写的话就是分别是<body topmargin=0
leftmargin=20 rightmargin=20 bottomnargin=0 >
2）字体
<br>表示回车换行，<p>是会自动换行
显示块级标签div无论有多少都会占一行，内联标签span只会占它本身的字符串的位置（从左至右）
注释是<!-- -->
想打出<>得写出<和>空格是
<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.mamicode.com/‘http://www.baidu.com‘>要打开百度，请点击，一般都是强力建议使用绝对路径
图像链接,就是点击图片来跳转，一般格式为
<p><img src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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