HTML&CSS语法大全

2017-01-07 11:23:28来源:CSDN作者:QuinnNorris人点击

标签:

<!-- --> 注释

<!DOCTYPE html> 必须位于第一行,在<html>之前,指示web浏览器关于页面使用哪个HTML的版本进行编写指令,每个不同的html版本有不同的声明方式。

<html> 表示开始一段html文档内容。 <?xml version=”1.0” encoding=”UTF-8”?>

<head> 紧跟在<html>元素之后,作为文档的头部。

<title> 在<head>内,用于给页面指定一个标记。

<base> 在<head>内,为页面上的所有链接规定默认地址或默认目标。

<link> 在<head>内,用于链接一个外部样式表。

*rel属性:用于指明两个文档的关系,用于操作样式表的值为stylesheet。

type属性:(text/css)指定链接到文档的类型。

herf属性:指定链接到的文档的URL。

 

<style> 在<head>内,用于为html文档定义一个样式。

*type属性:text/css是唯一可能的值。

<script> 在<head>内,用于在html里包含一个其他的脚本。

<meta> 在<head>内,用于包含和文档相关的信息。

*content属性:定义与http-equiv或name属性相关的元信息。

<body> 出现在<head>元素之后,包含了用户在浏览器中看到的部分web页面内容。

<h1>...<h6> 六个不同等级的题头,h4大小是和<p>大小相同的。

<p> 定义一个段落。

<br /> 换行。

<pre> 定义预格式化的文本,保留空格和换行符。文本会显示为等宽字体。

width属性:定义每行最大字符数。

<b> 出现在其中的文本会被加粗。

<i> 出现在其中的文本会添加下划线。

<tt> 出现在其中的文本会以等宽字体来显示。

<sup> 将文本以上标的形式显示。

<sub> 将文本以下标的形式显示。

<hr /> 在页面上创建一条水平线。

<ul> ~ <li> 无序列表。

<ol> ~ <li> 有序列表。

<dl> ~ <dt> ~ <dd> 定义列表。

<div> 用来将文档中分区分节,可以用id或class来标记<div>,或在style中处理。

<span> 用来组合文档中的行内元素。在<p>中将span应用样式或id或class。

<a> 定义超链接,用于从一张页面链接到另一张页面。

*href属性:规定链接到指定的页面URL上。

title属性:在鼠标移动到链接上时,给出描述。

id属性:创建目的地锚点,在href的URL后加上#和id即可链接到相应锚点处。

target属性:指定在拿一个窗口或框架中打开链接的页面。

coords属性:在原锚点是图片时,规定不同部分链接到不同的页面。

<img> 将图像嵌入到网页中。

*src属性:规定图像的URL。

*alt属性:在鼠标移动到图像上时,给出描述。

height属性:规定图像的高度,单位是像素。

width属性:规定图像的宽度,单位是像素。

ismap属性:将图像定义为服务器端图像映射。ismap=“ismap”,在用户单机图像映射时向服务器发送鼠标指针位置x,y坐标,然后使用服务器中的脚本基于坐标来确定跳转的页面。

usemap属性:将图像定义为客户端图像映射。usemap=“#id”,#后的标记在map的name或id属性中对应。

<map> 跟在<img>后面,定义一个客户端图像映射。

*id属性:为map标签定义唯一的名称。

*name属性:为map标签定义唯一的名称。

<area> 在<map>内,定义图像映射中的区域。

*alt属性:定义区域替换的文本。

*href属性:定义区域的目标URL。

shape属性:(defalult,rect,circ,poly)定义区域的形状。

coords属性:(n,n,n,n)定义可点击区域的坐标。

<object> 在文档中嵌入所有类型的媒体。

<param> 用于向对象传递参数,通常和object一起使用。

<table> 声明接下来要创建一个表格。

border属性:规定表格边框的宽度。

<tr> 定义表格中的行。

<th> 定义表格内的表头单元格。

<td> 定义表格内的单元格。

colspan属性:规定单元格可以横跨的列数。

rowspan属性:规定单元格可以跨越的行数,被跨越的地方不应再有单元格。

<caption> 定义表格的标题,必须紧跟在table标签之后,只能定义一个。

<colgroup> 将表格中一个或多个相邻列分组在一起,紧跟在table标签后面。

*span属性:规定列组应该横跨的列数。

<col> 在colgroup中或table中使用,是空元素用来将某些列共享样式。

*span属性:规定列组应该横跨的列数。

<form> 创建一个表单。

*action属性:规定当提交表单时向何处发送表单数据的URL。

method属性:(get、post)规定用于发送表单数据的HTTP方法。

<input> 标签用于搜集用户的信息。

name属性:用于提供“名/值”对,每一个控件都需要一个名称,便于在另一端获取。

value属性:为文本输入控件提供一个初始值,默认显示。

size属性:视觉上文本输入的宽度。

maxlength属性:可以输入的最多的字符数。

*type属性:指示希望创建的输入控件的类型。

1.单行文本:<input type=”text” />

2.密码:<input type=”password” />

3.多行文本:<textarea rows=”2” cols=”5”>writeit.</textarea>

4.按钮:<button type=”submit”> Submit</button> 自动提交表单的按钮。

<button type=”reset”> Clear </button> 将所有表单内容复位为初始值。

<button type=”button”> <img src=”submit.jpg” /></button> 在用户单击时触发客户端脚本的按钮。

5.复选框:<input type=”checkbox” name=”chk” value=”1”/> 1

         <input type=”checkbox” name=”chk”  value=”2” /> 2

  checked属性:(checked)在页面加载时该复选框已经被选中。

6.单选框:<input type=”redio” name=”red” value=”a” />  a

        <input type=”redio” name=”red” value=”b” />  b

  checked属性:(checked)在页面加载时该单选框已经被选中。

7.选项框:<select name=”sel” size=”5” multiple=”2” >

<option  value=”1”> 1</option>

<option  value=”2”> 2</option>

selected属性:(selected)在页面加载时该选项框已经被选中。

size属性:<select>使用,指定下拉列表中同时可见行数。

multiple属性:<select>使用,允许用户从菜单中选择多个项。

disabled属性:<option>使用,该选项不可选。

8.文件选项框:<input type=”file” accept=”image/*” />

 

属性(能被绝大多数的元素标签使用):

id属性:用于唯一标识页面内的任何元素。

class属性:通常用于css,用于指定某个元素属于特定的元素类。

style属性:用于指定元素中的css规则,但是这个属性会被逐渐淘汰。

 

 

 

 

1.css由两部分组成:选择器和声明。选择器指定来声明应用于那个或者那些元素;声明用于设置元素的样式,用大括号括起来里面用分号隔开每一条。

2.在<head>中,可以用<style>和<link>标签。

3.选择器中有多项时,在前一项的前提下,后一项的样式为声明的样式,其他情况无效。

4.id选择器:

#red {color:red;}

 

<p id=”red”> red </p>

5.类选择器:

.center {text-align:center}

 

<h1 class=”center”> center </h1>

6.属性选择器:

[title] {color:red}

对所有的属性中带有title的内容都适用。

7.背景属性:

background-color属性:(合理的英文颜色单词或#000000,默认值为transparent为透明)为元素设置背景色。

background-image属性:(url(/i/emg_01.jpg),默认值为none)用图像做背景。

background-repeat属性:(默认repeat在所有方向重复,repeat-x在水平方向重复,repeat-y垂直方向重复,no-repeat不重复)设定重复方式。

background-position属性:(top、center、bottom每种情况的left、center、right三种位置共九种;(x,y),x和y由0%到100%从坐上到右下,也可以用数字表示像素,也可以混用)设置背景图像起始位置。

background-attachment属性:(fixed当页面其他部分滚动时背景不变)固定背景图像。

background-clip属性:(border-box背景被裁剪到边框盒,padding-box背景被裁剪到内边距框,content-box背景裁剪到内容处)规定背景的绘制区域。

background-origin属性:(border-box背景被裁剪到边框盒,padding-box背景被裁剪到内边距框,content-box背景裁剪到内容处)规定background-position属性的位置相对于什么来定位。

background-size属性:(x,y,可以为以父元素为基础的百分比或像素做单位;cover,扩展足够大,可能有的部分无法显示;contain,扩展至适应内容区域的最大尺寸)设置背景图像的尺寸。

8.文本属性:

color属性:(合理英文颜色名,#00000,rgb(255,0,0))设定文本颜色。

letter-spacing属性:(x,定义间距可以为负数单位像素)设定文本间距。

line-height属性:(x,可为百分比和像素,不能为负值)设定文本行高。

text-align属性:(left,right,center,justify两端对齐)设定对齐方式。

text-decoration属性:(underline下划线,overline上划线,line-through横穿一条线,blink闪烁)文本划线样式修饰。

text-indent属性:(x,可为以父元素为基础的百分比和像素)规定文本块首行文本缩进。

text-shadow属性:(*x,*y,z水平阴影位置,垂直阴影位置,模糊距离,颜色)文本阴影。

word-spacing属性:(x,定义间距可以为负数单位像素)设定字间距,单词以空格分开算。

word-wrap属性:(break-word)在长单词或URL地址内部进行换行。

9.字体属性:

font属性:在一个声明中可以设置所有的字体属性。

font-style属性:(italic斜体,oblique倾斜,)设置字体倾斜样式。

font-variant属性:(small-caps显示小型大写字母的字体)设置为小型大写字母。

font-weight属性:(x,400为默认,700为bold粗体)设置文本粗细。

font-size属性:(x,百分比或固定值)设置字体尺寸。

font-family属性:为段落设置字体。

10.链接定义:

a:link {} 未被访问的链接

a:visited {} 已被访问的链接

a:hover {} 鼠标指针移动到链接上

a:active {}正在被点击的链接

hover要在link和visited之后,active要在hover之后。

text-decoration属性:(none去掉下划线,underline出现下划线)设置下划线。

background-color属性:规定链接的背景色。

11.表格属性:

border-collapse属性:(collapse将边框合并为一个单一的边框)边框样式。

caption-side属性:(top在顶端,bottom在低端)表格标题位置。

empty-cells属性:(hide不在空单元格周围绘制边框)是否显示空单元格。

border-width属性:(x,y,z,w,上右下左,百分比或固定值)设置边框尺寸。

border-color属性:(x,y,z,w,上右下左,四个颜色值)设置边框颜色。

width属性、height属性:(x,百分比或固定值)设置表格宽度和高度。

padding属性:(x,y,z,w,上右下左,四个位置内边距)声明所有的内边距,或者用padding-bottom,padding-left,padding-right,padding-top四个属性来替换。

border-style属性:(none无,dotted点,dashed虚线)定义边框样式。

margin属性:(x,y,z,w,上右下左,百分比或固定值)设置一个声明中的外边距。

12.上右下左规则:

如果没有左则用右的数据作为默认值,如果没有下则用上的数据作为默认值,如果没有右,则用上的数据作为默认值。

13.外边距合并:

行内框浮动框或绝对定位的情况下外边距不会合并,在普通文档流中,如果两个或多个外边距碰在一起,会合并取其中大的值作为新的外边距的值。

14.定位与浮动:

position属性:(absolute关于父元素绝对定位,fixed关于浏览器窗口绝对定位,relative关于正常位置相对定位,static默认正常)规定来元素的定位类型。

在相对定位relative时,无论是否移动,元素仍然占据原来的空间。

float属性:(left左浮动,right右浮动,none)规定元素的浮动情况。

clean属性:(left左侧不允许浮动元素,right右侧不允许浮动元素,both两侧均不允许浮动元素,none允许浮动出现在两侧)规定元素的那一侧不允许其他浮动元素。

15.伪类:

:focus伪类:(颜色)规定获得焦点的输入字段的颜色。

其他伪类同 锚伪类。

16.定位属性:

display属性:(none元素不会被显示,block元素会显示为块级元素前后会有换行符,inline此元素会被显示为内联元素前后无换行符,)规定元素应该生成框的类型。

clip属性:(rect(x,y,z,w)上右下左的位置剪裁当前的图片)剪裁绝对定位元素。

overflow属性:(scroll内容会被修剪加上滚动条无论是否需要,auto如果内容被修剪则加上滚动条,visible默认不会修剪呈现在元素框之外)规定内容溢出时发生的情况。

visibility属性:(hidden不可见,collapse在表格中使用时,可删除一行或一列,但不会影响表格布局)规定元素是否可见。

17.列表属性:

list-style-image属性:(url(‘/i/a.jpg’))使用图像来替换列表项的标记。

list-style-type属性:(none无标记,disc默认实心圆,circle空心圆,square实心方块,decimal数字,lower-roman小写罗马,lower-alpha小写英文,lower-greek小写希腊,大写换成upper)规定列表项标记的类型。

 

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台