一,HTML结构:
DOCTYPE
head:
title:网站的标题
meta charset
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不可重复)
.类名 (类名可以重复)
3,派生选择器
4,伪类选择器
5,通配选择器
2,导入css:
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文件在不同浏览器显示不同的问题