Web前端编写高质量代码-高质量的HTML

Web前端编写高质量代码-高质量的HTML

标签(空格分隔): Web前端

标签的语义:

标签语义对照表

    标签名         英文全拼                  中文翻译
    div           division                  分隔
    span          span                      范围
    ol            ordered list              排序列表
    ul            unordcred list            不捧序列表
    li            list item                 列表项目
    dl            definition list           定义列表
    dt            definition term           定义术语
    dd            definition description    定义描述
    del           deleted                   删除
    ins           inserted                  插入
    hl~.h6        header 1 to header 6      标题1到标题6
    P             paragraph                 段落
    hr            horizontal rule           水平尺
    a             anchor                    锚
    abbr          abbreviation              缩写词
    acronym       acronym                   取首字母的缩与词
    address       address                   地址
    var           variable                  变量
    pre           prefdrmatted              预定义格式(原样输出)
    blockquote    block quotation           区块引用语
    strong        strong                    加重
    em            emphasized                加垂
    b             bold                      粗体
    i             italic                    斜体
    big           big                       变大
    small         small                     变小
    sup           superscripted             上标
    sub           subscripted               下标
    br            break                     换行
    center        center                    居中
    font          font                      字体
    u             underlined                下划线
    s             Strikethrough             別除线

表单:

标签语义对照表

form          表单
fieldset      域集
legend        域集名(说明表单用途)
label         表单项

例子:

<form action="" method="">
  <fieldset>
    <legend>登录</legend>
    <p>
      <label for="name">账号</label>
      <input id="name" type="text" />
    </p>
  </fieldset>
</form>

<style>
  fieldset { border: none; }  /* 去除默认边框 */
  legend { display: none; }   /* legend说明表单用途,一般样式不需要,满足设计需求,将其隐藏 */
</style>

表格:

标签语义对照表

table      表格
caption    表格标题
thead      表格头部
tbody      表格主体
tfoot      表格尾部
tr         单元行
th         表头用th
td         一般单元格

例子:

<table border="1">
  <caption>几种页面实现的比较</caption>
  <thead>
    <tr>
      <th>实现方式</th>
      <th>代码量</th>
      <th>搜索引擎友好</th>
      <th>特殊终端兼容</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>table 布局 </th>
      <td> 多 </td>
      <td> 差 </td>
      <td> 一 般 </td>
    </tr>
    <tr>
      <th>乱用标签的 CSS 布局</th>
      <td>少</td>
      <td>一般</td>
      <td>差 </td>
    </tr>
    <tr>
      <th>标签语义良好的CSS布局</th>
      <td>少</td>
      <td>好</td>
      <td>好</td>
    </tr>
  </tbody>
</table>

语义化标签时应该注意哪些问题?

不要使用纯样式标签,例如b、font和u等,改用CSS设置。语义上需要强调的文本可以包在strong或em标签里,strong和em有“强调”的语意,其中strong的默认样式是加粗,而em的默认样式是斜体。

div、span

1、div和span其实是没有语义的,它们只是分别用作块级元素和行内元素的区域分隔符。

2、尽可能少地使用无语义标签div和span;当页面内标签无法满足涉及需要时,才会适当添加div和span等无语义标签来辅助实现

3、在语义不明显,既可以用p也可以用div的地方,尽量用p,因为p默认情况下有上下间距,去样式后的可读性更好,对兼容特殊终端有利;

h1-h6:

h标签的含义是“标题”,搜索引擎对这个标签比较敏感,尤其是hl和h2。一个语义良好的页面,h标签应该是完整有序没有断层的。也就是说,要按照hl、h2、h3、h4这样依次排列下来,不要出现类似hl、h3、h4,漏掉h2的情况。

为什么要使用语义化标签?

代码量少,浏览器端的下载时间就会更短,语义清晰就会对搜索引擎更友好。

如何确定你的标签是否语义良好?

判断网页标签语义是否良好的一个简单方法就是:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性。语义良好的网页去掉样式后结构依然很清晰。

**工具:Web Developer是Firefox上的一款网页调试插件。**它提供了丰富的调试功能,其中有一项是禁用网页中的CSS,快捷键是Ctrl + Shift + S。有了这个功能,我们可以轻松而快速地査看网页去样式后的表现。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
编写高质量Web前端代码是每个前端开发者都应该努力追求的目标。以下是一些关键要点,帮助我们编写高质量Web前端代码: 1. 代码结构和组织:良好的代码结构和组织是编写高质量代码的基础。我们应该遵循一致的命名规范,使用有意义的变量和函数名称,并将相关的代码块分组和组织好。 2. 可维护性:代码应该易于理解和维护。可以通过添加适当的注释和文档来帮助其他开发者快速理解代码的功能和目的。 3. 性能优化:前端性能是用户体验的重要组成部分。我们应该考虑减少HTTP请求、压缩和缓存静态资源、使用合适的数据结构和算法等方法来优化代码性能。 4. 交互和用户体验:编写高质量代码还包括提供良好的用户体验。我们应该确保网页的交互和响应能够符合用户的期望,并考虑到不同终端和浏览器的兼容性。 5. 安全性:在开发Web应用时,我们需要关注安全性。应该采取必要的措施来防止常见的Web安全漏洞,如跨站脚本攻击(XSS)和跨站请求伪造(CSRF)。 6. 测试和调试:编写高质量代码还包括进行适当的测试和调试。我们应该编写单元测试来确保代码的正确性,使用浏览器开发者工具来快速定位和解决问题。 7. 学习和持续改进:Web前端技术在不断发展和演变,作为开发者,我们应该不断学习和掌握新的技术和最佳实践,以保持代码的质量和效率。 总而言之,编写高质量Web前端代码需要综合考虑代码结构、可维护性、性能、用户体验、安全性、测试和调试等多个方面。通过不断学习和实践,我们可以不断改进自己的编码技巧,提高代码的质量和效率。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值