web开发文档，HTML标签语义化-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_60196616/article/details/119033148

本文介绍了CSS Reset的用途，展示了如何去除默认边距和设置字体样式，以及链接、图片、表单元素的样式处理。同时讨论了CSS优化，包括布局模型、获取元素宽高和CSS选择器优先级。最后分享了前端面试中的经验，强调了电话面试的优势、面试准备的重要性以及目标导向的求职策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认字体设置，边距设置

html {
    font-family: sans-serif; /* 默认字体 */
    font-size: 100%; /* 调整字体大小 */
    -ms-text-size-adjust: 100%; /* IE浏览器 */
   -webkit-text-size-adjust: 100%; /* FireFox浏览器 */
}

去除默认边距

body{
      margin: 0; /* 外边距 */
      padding: 0; /* 内边距 */
      border: 0; /* 边框 */
}

链接相关样式

a {
    text-decoration: none; /* 去除默认下划线 */
}

a:focus {
     outline:thin dotted; /* 处理“outline”在Chrome浏览器中和其它浏览器之间的不一致 */
}

a:active, a:hover {
      outline: 0;
}

排版相关样式

h1 {
         /* 使h1标签在section标签和article标签的留白和字体样式统一。 */
         font-size: 2em;
         margin: 0.67em 0;
}

abbr[title] {
         border-bottom: 1px dotted; /* 解决首字母样式在IE8/9、Safari 5和chrome浏览器中未定义的问题 */
}

b, strong {
          font-weight: bold; /* 添加加粗样式*/
}

dfn {
        font-size:italic; /* 添加斜体样式 */
}

hr {
        /* 解决其在Firefox中的兼容性问题 */
       -moz-box-sizing: content-box;
        box-sizing: content-box;
        height: 0;
}

mark {
       /* 解决样式未定义的问题 */
       background: #ff0;
       color: #000;
}

code, kbd, pre, samp {
           /* 更正关联字体的老式设置 */
         font-family: monospace, serif;
         font-size: 1em;
}
       
pre {
              /* 提高pre标签格式化文本的可读性 */
              white-space: pre-wrap;
}  


q {
           /* 设置相一致的引号类型 */
           quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
            /* 统一所有字体大小 */
            font-size: 80%;
}  

sub, sup {
              /* 防止“sub”和“sup”标签影响“line-height”属性 */
              font-size: 75%;
              line-height: 0;
              position: relative;
              vertical-align: baseline;
}

sup {
       top: -0.5em;
 }

sub {
     bottom: -0.25em;
}

内嵌文本相关样式

img {
    border: 0; /*当img标签中包含a标签时，去除img边框属性。 */
}

svg:not(:root) {
       overflow: hidden;
}

表单文本相关样式

fieldset {
     /* 定义一致的边框、内边距和外边距 */
   border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
       border: 0; 
       padding: 0; /* 去除外边距*/
}

button, input, select, textarea {
      font-family: inherit; /* 更改关联字体属性 */
      font-size: 100%; /* 更改字体大小属性 */
      margin: 0; /* 调整边距设置 */
}

button, input {
     line-height: normal; 
}

button, select {
text-transform: none;
/**
* 调整“button”和“select”的“text-transform”继承不一致性的问题 
*其他表单控件元素不继承“text-transform”属性
 */
}