HTML常见Tags英文笔记｜青训营

Jean_Zhao
174 阅读2分钟

前言

还有即将在国外投身秋招的小伙伴吗？本文是将课堂内容翻译成英文的笔记，加入了自己Google的内容。给将要在国外面试和在国内想学习英文的小伙伴们都做个参考~

Who's reading our HTML?

  • Developers & Broswers

    • Write readable and maintainable code with semantic elements.
    • A semantic element clearly describes its meaning to both the browser and the developer. It is preferable to use semantic elements like <header> to describe the purpose of a section, instead of <div> which has no inherent meaning.

  • Search Engines

    • Search Engine Optimization: Write your pages such that it appears to have a high relevance to search engines, thus ranking higher in search results. To achieve high relevance, you can optimize HTML code to use keywords and tags relevant and friendly to search engines.

  • Accessibility features

    • Write your pages such that it is still usable under non-optimal conditions, e.g. Slow internet, pictures failed to load, small screens, etc. Also provides accessibility to disabled people e.g. colorblind.

Basic Syntax of HTML

  • DTD Document Type Definiition

    • Use <!doctype html> in html 5, "doctype" is case insensitive
    • In older documents (HTML 4 or XHTML), the declaration is more complicated because the declaration must refer to a DTD:
    • HTML 4.01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "``http://www.w3.org/TR/html4/loose.dtd``">

  • Text

  • Comment

  • ProcessingInstruction

  • Elements/Tags

    • Tags are case insensitive

    • Check W3 School documentation: www.w3schools.com/tags/tag_he…

    • <head>: Contains metadata about the page. Metadata is not displayed.

    • <a> anchor, aka link. <a href = "xxx"> title </a>

      • target attribute: specifies where to open the linked document

        • "_blank": Open new window instead of replacing current one.

    • <ol> Ordered list

    • <ul>Unordered list

    • <dl> (definition list)

    • <dt> Coffee </dt> (definition title)

    • <dd> Black hot drink </dd> (definition description)

    • User input

      • Multiple choices checkboxes <label><input type="checkbox" checked />🍏</label>

      • Single choice checkbox: Only one box can be ticked among labels with the same name under "radio" type. <label> <input type="radio" name="sport" />⚽</label>

      • Dropdown list <select> <option>🥑</option> </select>

      • Datalist provides autocomplete when users type among the options provided. However, this box does not limit what you can input.

               <input list="countries" />
               <datalist id="countries">
                <option>Greece</option>
                <option>United Kingdom</option>
                <option>United States</option>
               </datalist>

async/defer of <script> tags

  • async: Download script in parallel to parsing (aka downloading doesn't block). Execution blocks parsing.

    • Cannot control the sequence of script execution. Sequence depends on who is downloaded first.

  • defer: Download script in parallel to parsing (aka downloading doesn't block). Wait for parsing to complete, then execute.

    • Thus defer never blocks

  • If neither async or defer is present: The downloading and execution of script both block parsing until the script is completed

  • Summary

总结

  1. HTML各类标签博大精深，除了多用之外，还应该多去看Documentation。英文版个人推荐W3 Schools, 全面又好用~
  2. 现代HTML应该尽可能用语义化标签(Semantic Elements)，因为项目越做越大，写码都不是一个人的事情。无论是为了团队合作还是后续人员接手代码，我们都应该注重可读性。
  3. 做网页生意要成功，还是要用搜索引擎优化(Search Engine Optimization)，毕竟写的再好的网页，别人搜不到也没有用处。除了用基本款HTML，还可以用Next.js这种框架帮助霸占百度/Google搜索结果第一页~

References:

  1. 稀土掘金：图解 script 标签中的 async 和 defer 属性
avatar
文章
阅读
粉丝