html里面textfield属性,html标签的默认属性

用css做网页布局时，难免跟html标签打交道，要想保证代码的精简性，了解各种标签的默认属性，更有利于我们作出合理的布局样式，现在来简单说明一些常见html标签的默认样式。

①首先是body(因为head标签不在文档中显示，因此我们不做考虑):

body {

display: block;

margin: 8px;

}

这也解释了一般情况下，我们设置的元素与浏览器上、左都有默认距离的问题，由上可以看出，是因为body有默认8px的margin值，其实有很多标签都会有默认的margin值，在布局时尤其要注意他们带来的影响。

②p标签，这是个常用的标签，我们都知道它有上下默认间距，原因是:

p {

display: block;

-webkit-margin-before: 1em;

-webkit-margin-after: 1em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

}

③ul、ol 和 li标签，之所以放在一块说明，是因为ul和ol标签使用起来区别不大，而li标签作为子标签，是紧跟ul和ol标签作嵌套使用的(提示：li标签即使单独使用能达到效果没什么毛病也不建议单独使用，务必使用组合嵌套形式)：

ul {

display: block;

list-style-type: disc;

-webkit-margin-before: 1em;

-webkit-margin-after: 1em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

-webkit-padding-start: 40px;

}

ol {

display: block;

list-style-type: decimal;

-webkit-margin-before: 1em;

-webkit-margin-after: 1em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

-webkit-padding-start: 40px;

}

li {

display: list-item;

text-align: -webkit-match-parent;

}

从它们的默认样式很容易看出来它们具有的属性，其中ul和ol标签默认样式差别不大

ul：list-style-type: disc;

ol：list-style-type: decimal;

这就说明很大程度上它们可以互换而不影响布局，list-style-type属性还有很多属性值，可以自己修改查看。

④strong和b标签、 em和i标签、 big和small标签，它们都是字体单一样式的设置标签，inline标签：

strong, b {

font-weight: bold;

}

i, em {

font-style: italic;

}

big {

font-size: larger;

}

small {

font-size: smaller;

}

效果图

b标签和i标签现已被淘汰，换成语义更清晰的strong标签和em标签。

⑤input标签，比较常用，比较重要，所以它的默认样式也比别的标签多：

input {

-webkit-appearance: textfield;

background-color: white;

-webkit-rtl-ordering: logical;

user-select: text;

cursor: auto;

padding: 1px;

border-width: 2px;

border-style: inset;

border-color: initial;

border-image: initial;

}

input {

text-rendering: auto;

color: initial;

letter-spacing: normal;

word-spacing: normal;

text-transform: none;

text-indent: 0px;

text-shadow: none;

display: inline-block;

text-align: start;

margin: 0em;

font: 11px system-ui;

}

input {

-webkit-writing-mode: horizontal-tb;

}

没编辑在一起的原因是，后两个属性集是和别的标签一块设置的，以此区分记忆便于以后整理综合。其实对于input标签我们只须了解一些基本常常会改动的属性即可。

⑥h1 -- h6 标签：

h1 {

display: block;

font-size: 2em;

-webkit-margin-before: 0.67em;

-webkit-margin-after: 0.67em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

font-weight: bold;

}

h2 {

display: block;

font-size: 1.5em;

-webkit-margin-before: 0.83em;

-webkit-margin-after: 0.83em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

font-weight: bold;

}

h3 {

display: block;

font-size: 1.17em;

-webkit-margin-before: 1em;

-webkit-margin-after: 1em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

font-weight: bold;

}

h4 {

display: block;

-webkit-margin-before: 1.33em;

-webkit-margin-after: 1.33em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

font-weight: bold;

}

h5 {

display: block;

font-size: 0.83em;

-webkit-margin-before: 1.67em;

-webkit-margin-after: 1.67em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

font-weight: bold;

}

h6 {

display: block;

font-size: 0.67em;

-webkit-margin-before: 2.33em;

-webkit-margin-after: 2.33em;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

font-weight: bold;

}

可以看出标题标签只在字体大小和前后间距上有差距，不作过多说明，我们平时常用到的只有前三个。

⑦div、span标签的默认样式很简单，我们需要考虑的就只有display属性，inline属性我觉得更像是默认属性中得默认属性，因此span标签不作说明：

div {

display: block;

}

结语：其实还有许多常用标签，此刻就不多总结，感兴趣的可以通过浏览器或者上网搜索标签默认属性，希望这些对你会有所帮助！