HTML与CSS

HTML与CSS踏入网页设计之门基本架构htmlheadtitle页面标题/titlestyletype=text/css/*层样式列表*//stylescripttype=text/javascript/*JS脚本*//scriptlinktype=text/cssrel=stylesheethref=CSS文件路径//headbody网页内容!--注释标记--/body/html常见标签1－－文本p一个新的段落/ph1一级标题/h1h2二级标题/h2em斜体强调/emstrong粗体显示/strongahref=目标地址路径要超链接的内容（文本或图像）/aimgsrc=图像的地址路径/!--父目录用../来表示，目录表示中只用/不用\文件名和文件夹名中都不能出现空格--!--在构建网站的早期就组织好文件的存放--!--站内文件用相对路径，站外文件用URL--q句子引用/qblockquote段落引用/blockquotebr/!--换行--hr/!--水平线--元素中属性的统一写法：属性名，等号，双引号括起来的属性值HTML的特殊符号a元素的详细用法atitle=简短说明一个小链接测试/aaid=top这是文档的最顶端/aahref=#top回到顶部/aahref=另一个页面#top跳到另一个页面的顶部/aahref=新页面target=_blank从新窗口打开一个页面/aa元素的几个状态a:link{color:green;}/*未被点击过的*/a:visited{color:red;}/*已被点击过的*/a:hover{color:blue;}/*鼠标划过*/img元素的详细用法pimgsrc=image/台标.png//p!--可支持图像格式jpggifpng--pimgalt=替代文本src=//pwidth=30height=20!--设定图像宽和高（像素），为保持比例也可只设定其中一个--网页的规范与优化(基于XHTML1.0)1、明确所使用的网页标准，在首行加入如下代码!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN、明确所使用的编码格式，在head标签中的第一行加入如下代码metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/3、html标签改为如下htmlxmlns=网页的规范与优化(基于XHTML1.0)完工后到去检查你的XHTML文件，看是否有语法问题。CSS样式－－面向者1、面向标签body{font-family:sans-serif;color:gray;}2、面向class.green{color:green;}/*含有class=green属性的标签们都将被赋予以上属性*/3、面向id#mylogo{background-color:white;}/*id=mylogo属性的标签只有一个，它将被赋予以上属性*/所有子代#firconta{}直接子代#firconta{}孙代#ifrcontpa{}CSS样式－－基本文本1背景颜色background-color:#d2b48c;/*米黄色*/字体font-family:Arial,sans-serif;字体大小font-size:40px;/*large;150%;1.5em;*/文本颜色color:gray;/*#222;*/粗细font-weight:bold;/*light;normal;*/下划线text-decoration:underline;斜体font-style:italic;在这个网址去检验你的CSS样式－－基本文本2对齐方式text-align:center;/*left;right;*/边框border:1pxdottedgray;/*1像素，点式，灰色*/底部边框border-bottom:1pxsolidblack;/*1像素，实线，黑色*/不透明度opacity:0.7;字间距letter-spacing:10px;行间距line-height:10px;CSS样式－－盒模型border-color:black;/*thin;medium;thick;*/border-width:1px;border-style:solid;/*dotted;double;dash;*//*边框（黑色，1像素，实线）*/padding:10px;/*补白-top;-right;-bottom;-left;*/margin:20px;/*边界-top;-right;-bottom;-left;*//*注意先设定总的再设定具体一边，否则会被覆盖无效*/background-color:yellow;background-image:url(目标路径);background-repeat:no-repeat;/*repeat-x;repeat-y;inherit;*/background-position:topleft;/*center;right;bottom;*/CSS样式－－DIV流动布局1、用divid=标签来划分逻辑区域；2、为id赋予CSS样式；#firContent{width:200px;/*内容宽度，auto*/float:right;/*整个块漂移到右边，left*/}#fist{clear:right;}/*右边不有漂移的块,left*/3、相对布局#img{position:relative;left:20px;}/*相对本来的向右移动20像素*/span标签具有类似div的用途，主要用于修饰一段文字中的一部分CSS样式－－DIV绝对布局绝对布局#buttons{position:absolute;top:100px;left:20px;}/*多个相遇时用z-index属性（auto或整数值）来指示层*/固定布局#Qme{position:fixed;top:10px;right:10px;}/*放在浏览器的指定位置，滚动页面也不会移动*/CSS样式－－跨平台1、利用引用的方法来加载CSS文件，而不是直接内嵌。linktype=text/cssrel=stylesheethref=CSS文件路径/media=printmedia=handheld/*这个不太能凑效*/常见标签2－－列表ol!--有序列表，ul则为无序，ol与li标签中不再含其它东西--li项1/lili项2/lili项3/lili项4/li/oldldtfirst/dtddneirong1/dddtsec/dtddneirong2/dddl无序列表的样式li{list-style-type:disc;}/*circle;square;*/list-style-image:url(小图标路径);常见标签3－－表格tableborder=1pxcaption表的标题/captiontrth首行的/th/trtrtd内行的/td/tr!--……--/tablecaption-side:bottom;/*标题在上或下*/colspan:2;rowspan:2;/*分别为扩展列和行*/XHTML表单formonsubmit=returncheckform()action=目标网页.phpmethod=POSTp!--以POST方式发送--fieldsetlegend基本信息/legend用户名:inputtype=textname=user/br/密码:inputtype=passwordname=psword/br/确认密码:inputtype=passwordname=confirm/br//fieldsetfieldsetlegend附加信息/legend性别：inputtype=radioname=sexvalue=man/男inputtype=radioname=sexvalue=woman/女br/性取向：inputtype=checkboxname=sexTo[]value=man/男inputtype=checkboxname=sexTo[]value=woman/女（可以双选哦）br/你的性格:selectname=yourstyleoptionvalue=null--请选择--/optionoptionvalue=uncle大叔/optionoptionvalue=lori萝莉/optionoptionvalue=wMan女汉纸/optionoptionvalue=mGirl小正太/option/selectbr/个性签名：br/textareaname=introducerows=3cols=20此人很萌，什么都没写/textareabr//fieldsetinputtype=submitvalue=确认信息//p/form一般还会放入到表格里面，再加上CSS来布局扩展S1、首字符，首行的特殊选择（用于首字下沉等）p:first-letter{}p:first-line{}2、插入多媒体3、使用工具Dreamweaver