Html基础学习之标签和样式

1.tag标签(一般成对出现包含元素):

1)h1(header)主标题,h2副标题,

2)p(paragraph)段落. support nesting

3)img(image)图片自封闭标签src="url"   support width height ,border,alt property

4)input(输入框)自封闭 type="type"

text(输入框):placeholder(hint占位符,预定义文字),required定义必填项

radio(单选按钮):name(分组 关联的radio具有相同的name) checked默认选中

checkbox(复选按钮):name(分组 关联的checkbox具有相同的name) checked默认选中

5)label(标签)可以内嵌标签

6)button(按钮)type="type"(非自封闭) submit,reset

7) a(anchor)锚 href="url'' 固定链接#(hash符号)也叫死链接

8)ul(unorder list)无序列表,contain li(list item列表元素),对应于ol

9)form(表单) action="url/method"

10)div(division层) common container to place other elements.

4)  <!-- -->注释标签

2.style样式:1)inline style内嵌样式 style="properyname:propertyvalue;",优先级高于style.

2)style:a.tag style tagname{propertyname:propertyvalue;}background-color背景颜色,

b.class 类style  .classname{propertyname:propertyvalue;} 标签可以使用多个class 空格分割,后面的class覆盖前面的class

c.id()identifer)唯一标识 style #id{pn:pv;}优先级高于class覆盖class

d.元素inherits并overrides容器的样式,

3)pn:pv!important;最高优先级可以避免被覆盖.

3.link链接;<link href="url" rel="stylesheet" type="css/text">

4.font字体:font-size 以px为单位,font-famliy:字体样式(brower support Monospace,Serif,Sans-Serif) ,color字体颜色.

5.布局(以px为单位):1)border边框:border-width宽度以px为单位,border-style样式(solid实心,),border-color颜色border-radius半径(圆角程度 以px为单位或者百分比)

2)margin外边距(相对parent)border离container的距离 margin-bottom margin-top margin-left margin-right 负值变大元素  可以默margin:top right bottomright(顺时针)空格分割

3)padding内边距(相对内容)content离border的距离 padding-bottom padding-top padding-left padding-right  可以默padding:top right bottomright(顺时针)空格分割

6.颜色1)(RGB hexadecimal code):#nnnnnn 六位hexcode,0无颜色,F最亮颜色 abbreviated to 3 digits #f00 red.

  2)rgb decimal function:rgb(0,0,0)

3)word:pink(f0f),brown,orange(#fffa00,255,165,0),yellow(ff0)