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> 超链接 相对路径【（链接上一目录先输入“../”再输入目录名；链接下一目录先输入目录名再输入“/” ）】

<a name="锚点名称">     (<a href="文件名#锚点名称">便可链接到一个HTML文件中的锚点)

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的伪类)：

a:link：可设置未访问链接的颜色（可简写为a）

a:visited：可设置已访问链接的颜色

a:hover：可设置激活时（链接获得焦点时）链接的颜色

a:active：可设置鼠标移到链接上时显示的颜色

7，css初始化：解决同一HTML+css文件在不同浏览器显示不同的问题