热门关键字:
jquery > jquery教程 > jquery教程 > html-Css 基础大全

html-Css 基础大全

345
作者:管理员
发布时间:2021/2/27 13:52:35
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4030
  Web组成:结构(XHTML、XML)、表现(css)、行为(ecmascript)


  HTML:超文本标记语言(hyper text markup language)


  HTML5的基本结构:


  HTML的基本语法:


  常规标记


  <标记 属性=”属性值” 属性=”属性值”></标记>


  空标记


  <标记 属性=”属性值” />


  标题字体<h1——h6></h1——h6>


  段落<p></p>


  加粗<b></b> <strong></strong>


  倾斜<em></em><i></i>


  下划线<u></u>


  删除线<del></del>


  上标<sup></sup>


  下标<sub></sub>


  空格


  大于号>


  小于号<


  备案图标&copy


  强制换行<br/>


  水平线<hr/>


  超链接<a href=路径” alt=”替换文本” title=”提示信息” target=”_blank”></a>


  图片<img src=路径” alt=”替换文本” title=”提示信息” width=”” height=”” border=””/>


  无序列表<ul><li></li></ul>


  有序列表<ol><li></li></ol>


  自定义列表<dl><dt></dt><dd></dd></dl>


  表格<table><tr><td></td></tr></table>


  表格里的重要属性:


  单元格的间距cellspacing


  单元格与内容的距离cellpadding


  边框border


  宽width


  高height


  边框颜色bordercolor


  背景颜色bgcolor


  行合并rowspan


  列合并colspan


  表单域:<form name=”表单名称” method=”提交方式方法” action=””></form>


  表单控件<input type=””>


  文本框 text


  密码password


  单选按钮radio


  复选框checkbox


  提交按钮submit


  重置reset


  按钮button


  禁用disabled


  默认选中checked


  下拉菜单<select><option></option></select>


  多行文本<textarea cols=”” rows=””></textarea>


  常用标签 div span


  Get与post的区别:


  Get是向服务器获取数据,post向服务器上传数据,出于安全性考虑我们建议用post


  CSS层叠样式表(cascading style sheets)


  Css的样式表:


  内部样式表:直接写在头部


  <style type=”text/css”>css语法</style>


  内联样式:(直接写在html标签里面)


  <div style=”color:red”></div>


  外部样式表:(建立在html的外面需要引用才能生效)


  引用方式:


  两种外部样式表引用方式的区别


  A、 老祖宗的区别,link是XHTML提供的,可以引用其他文件例如RSS文件,@import只能引用css文件


  B、加载顺序的区别:link和html一起加载,@import是等html加载完成之后再加载


  C、兼容性的区别:@import在ie5以上才支持,link没有限制


  D、控制dom的区别:link支持@import不支持控制dom


  样式表的优先级:


  内联样式表优先级最高,内部和外部的优先级与顺序有关,谁在后边谁生效


  CSS的选择器:


  类型选择器(标签选择器)例如h1{color:red;}


  Id选择器 例如:#top{color:red} <div id=”top”></div>


  类选择器(class选择器)例如:。class{color:red;} <div class=”class”></div>


  通配符 *{color:red;}


  包含选择器 例如 p b{color:red}


  群组选择器 例如 h1,h2,p…{color:red;}


  伪类选择器 例如


  a:link{color:red;} a:visited{color:#00f;} a:hover{color:#ff0;} a:active{color:#0f0;}


  伪类选择器要注意顺序(L V H A)


  选择器的权重:


  继承 0


  类型 1


  类  10


  伪类 10


  Id  100


  内联 1000


  注释:


  Html注释 <!—注释-->


  CSS注释


  文字的设置:


  字体font-family(如果是中文需要加双引号,如果是是由多个英文单词组成需要加双引号,只有一个英文单词不需要双引号,文字字体可以设置多个,中间用逗号隔开)


  大小font-size


  颜色color


  加粗font-weight:(normal正常、bold加粗)


  倾斜font-style:(italic倾斜、normal正常)


  大小写font-variant


  文字的复合写法:font:style variant weight size family


  当同事设置文字大小字体行高时写法font:size/line-height family


  文本设置


  水平居中 text-align(left左 right右 center居中 justify两段对齐)


  垂直对齐vertical-align(top上 bottom下 middle居中 图片与文字才能生效)


  行高line-height(当单行文本行高等于实际高度可以居中,当大于时居下,小于时居上)


  文本修饰text-decoration(none、underline、overline、 line-through)


  首行缩进 text-indent(可以设置负值)


  字符间距 letter-spacing


  词间距 word-spacing


  控制文本大小写text-transform()


  文字阴影 text-shadow(c3出来的某些浏览器还不支持)


  列表的设置:


  项目符list-style-type(none)


  项目符设置为图片list-style-image


  项目符的位置list-style-position


  去掉项目符list-style:none


  边框 border:3px solid #f00(粗细 线型 颜色 无顺序要求)


  上边框border-top


  左边框 border-left


  有边框 border-right


  下边框 border-bottom


  更改某一边的粗细border-left-width


  更改某一边的线型border-top-style(solid实线 dashed虚线 dotted点状线 double双实线)


  更改某一边的颜色border-top-color


  背景设置:


  背景颜色background-color


  背景图片background-image:url(路径)


  背景平铺 background-repeat(no-repeat、repeat、 repeat-x、 repeat-y)


  背景的位置background-position:值1 值2;


  如果是方向先是左右(left center right) 后是上下(top center bottom)


  具体数值,向左和向上是负值


  背景的固定 background-attachment(scroll滚动 fixed固定)


  浮动 float(left right none)


  浮动的三大特征:脱离正常文档流,后边的紧跟着前边当宽度不够时自动换行,会占据行内元素的空间。


  清除浮动clear(left right both)


  盒模型的组成:


  内容(width、height) 内填充(padding) 边框(border) 外填充(margin)


  内填充(padding)外填充(margin)值的四种情况


  一个值:代表上下左右


  两个值:代表 上下 左右


  三个值:代表 上 左右 下


  四个值: 代表 上 右 下 左


  注意:margin可以设置负值,padding不可以 背景颜色或图片不能延伸到margin区域


  盒子的实际宽度=左边距+左边框+左填充+内容+右填充+右边框+右边距


  盒子的实际高度=上边距+上边框+上填充+内容+下填充+下边框+下边距




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐