html+css常用总结

一,HTML结构:

   1,DOCTYPE

   2,head:

        title:网站的标题

        meta charset

  3,body:

二,HTML标签:

块状元素和内联元素:

          常见的块级元素有:div、p、address、blockquote、center、h1~h6、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、pre、table、ul

         常见的内联元素有:a、img、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、input、kbd、label、q、s、samp、select、small、span、strike、strong、                                           sub、sup、tt、u、var、textarea

         块状元素与内联元素之间的转化:(内联元素 –> 块级元素 : display:block; 块级元素 –> 内联元素 : display:inline;)

     1,div布局

布局原则:从上到下,从左到右,从大到小。

修饰div整体常用css标签:

    width:设置div的水平宽度

    height:设置div的垂直高度

    margin:设置div的外边距

    border:设置边框线的粗细,样式,颜色

   padding: 设置边框线与内容之间的内边框宽度

    float:设置div的位置,浮动效果

    clean:清除浮动效果

    2,<!--...--> 注释标签

   3,<style>…</style>    文档的样式信息,内有css内容

文本标签:

   4,<h1>...</h1>               标题字大小(h1~h6)

    5,<b>...</b>                   粗体字

    6,<i>...</i>                      斜体字 

    7,<center>…</center>   居中文本

列表标签:

        <menu>

       <dir>

      <dl>

    8,<ul>…</ul>                 无序列表 

   9,<ol>…</ol>                 有序列表

  10,<li>…</li>                    列表项目

   11,<a href=”…” >链接内容</a> 超链接 相对路径【(链接上一目录先输入“../”再输入目录名;链接下一目录先输入目录名再输入“/” )】

    12,<sub>                         下标

            <sup>                         上标

    13,<br>   <br/>                        换行

    14,<p>                            段落
图形标签:

   15,<img src="图片地址" alt="图片未加载" title="鼠标接触图片显示的提示信息">

   16,<hr>     水平线

    17,<del>     加删除线

表格标签:

     18,<table>表格内容</table>   插入表格

     19,<tr>设置表格的行

           <td>设置表格的列

     20,<caption>设置表格的标题

     21,<th>设置为表格的表头(设置的表头为加粗)

     22,<border>边框的粗细  <bordercolor>设置边框线的颜色

     23,<frame>设置外边框的样式(border:显示所有外边框;void:不显示外边框;)

     24,<rules>设置内边框的样式(all:显示所有内边框;none:不显示内边框)

     25,bgcolor设置表格的背景颜色

    26,<align>调整行或表格水平对齐(left:靠左对齐;right:靠右对齐;center:居中)

    27,<valign>调整行或表格垂直对齐(top:顶端对齐;bottom:低端对齐;middle:居中对齐)

    28,<rowspan>将同一列的单元格合并

    29,<colspan>将同一行的单元格合并

表单标签:

   30,<form>表单内容</form>设置表单

   31,<input name="text" type="text" maxlength="输入最多字符数" size="控件宽度" value="默认值">插入普通文本框

   32,<input name="password" type="password" maxlength="" size="">插入密码框

   33,<input name="file" type="file" >从外部插入文件到页面

    34,<input name="方块选框名称" type="checkbox" value="">插入方块选框

    35,<input name="圆形选框名称" type="radio" value="">插入圆形选框

    36,<input name="标准按钮名称" type="button" value="显示在按钮上的字">插入标准按钮

    37,<input name="submit" type="submit" value="显示在提交按钮上的字">插入提交按钮

   38,<input name="reset" type="reset" value="重置">插入重置按钮

   39,<input name="image" type="image" src="图片地址">插入图像域

   40,<textarea name="text" rows="文字域的行数" cols="文字域的列数" >插入文字域

   41,<input name="h1" type=“hidden” value=“”>插入隐藏域

   42,<select name="菜单名称" size=“菜单的行数”>插入下拉菜单

              <option value="第i行" >第i行的内容   

 (三)CSS常用标签

1,css选择器:

     1,id=“id名”    css控制:#id名   (id不可重复)

         2,类 class="类名"     css中控制:.类名    (类名可以重复)

         3,派生选择器

         4,伪类选择器

        5,通配选择器

 2,导入css:

 https://www.cnblogs.com/lq13035130506/p/10513980.html

3,文字控制:

     1,font-style:控制文字样式(normal:正常显示;italic:显示斜体

        2,font-weight:控制文字粗细(normal:正常显示;bold:显示粗体;bolder:显示更粗体;lighter:显示更细体)

       3,font-size:控制字体大小

      4,font-family:控制字体(serif:有衬线字体;sans-serif:无衬线字体)

      5,font-variant:控制文中字母的大小(normal 默认值。浏览器会显示一个标准的字体;small-caps 浏览器会显示小型大写字母的字体)

  6,line-height:控制行高  

  7,color:控制字体颜色

4,段落控制:

    1,text-indent:控制首行缩进距离

       2,text-align:控制段落水平显示(left:控制段落靠左对齐;right:控制段落靠右对齐;center:控制段落居中显示;justify:控制段落向两端对齐)

      4,text-decoration:控制段落下线(underline:控制段落文字下面有一根线;overline:控制段落文字上面有一根线;line-through:控制段落文字上面有删除线)

     5,letter-spacing:控制段落中字与字间距(允许有负值)

5,背景控制:

    1,background-color:控制背景颜色

        2,background-image:url(背景图片地址):添加背景图片

       3,background-repeat:控制背景图片重复(no-repeat:图片不重复;repeat-x:水平方向重复铺满图片;repeat-y:垂直方向重复铺满图片)

       4,background-attachment:控制背景图片是否随滚动条移动(sroll:默认,随滚动条移动;fixed:滚动条移动,图片不移动)

       5,background-position:控制想要显示的背景图片的部分(水平方向  垂直方向)(若将图片向左移动水平方向为负值;若将图片向上移动垂直方向为负值)

6,css初始化:解决同一HTML+css文件在不同浏览器显示不同的问题

猜你喜欢

转载自www.cnblogs.com/lq13035130506/p/10520159.html