COMP3322 notes P2 - HTML Basic

用课程上介绍的 HTML validation 网站 W3C Markup Validator 检查了一下本站 HTML 文件的正确性，结果弹出了 57 个 Error 与 Warning。我在魔改的时候到底做了些什么啊……

不过从这也能看出 HTML 语言的 permissive 性质；宽松的语法与 browser 也是 Web 长盛不衰的原因之一。


{% note warning %}

  This article is a self-administered course note.

  It will NOT cover ny exam or assignment related content.

{% endnote %}


HTML Basic

HTML is a type of markup languages. It annotates a document in a way that

  • annotations distinct from the text being annotated.
  • annotations indicate information about the content (through tags a.k.a., elements).

Keywords. [见 slides 02-HTML]

  • New insight (CSS 应承担提供信息的责任而 HTML 则专注于文档的 structure).
  • HTML history.

HTML Structure

一个 HTML document 的基本结构如下：

  • Web content.
  • HTML elements specified by a pair of tags. (元素；标签)
    • Opening tag.
      • Attributes : name=value pair.
    • Closing tag (omittable in void element)

Keywords. [见 slides 02-HTML]

  • elements and attributes.
  • nesting HTML elements.
  • basic document structure.
    • <!DOCTYPE .. > (not a element)
    • <html>: root element.
    • <head>: contains <title>, <link> (external CSS), <style> (internal style), <script> (JavaScript), <base>, <meta> (metadata).
    • <body>: contains elements that will be displayed in the browser.

HTML Elements

Keywords. [见 slides 02-HTML]

  • HTML comment <!-- -->.
  • block-level elements v.s. inline elements.
  • semantic elements: clearly describe ite meaning to the browser and the developer.
  • headings. <h1>, ..., <h6>. (block-level & semantic)
  • paragraphs. <p> (inline & semantic)
  • divisions. <div> (block-level) - contemporary web design, divs within divs with divs.
  • spans. <span> (inline) - inline version of divs.
  • links. <a> - href=[destination] attribute.
  • images. <img> - only content image.
  • lists. - unordered <ul>, ordered <ol>, and description <dl> (e.g., FAQ) - <li>.
  • tables. <table> - rows <tr> - headings <th> - cells <td>.
  • forms. <form> - collect info from visitors - two attributes:
    • action=. URL of the server-side resource that will process the submitted form.
    • method="get" or method="post". GET v.s. POST.
  • input controls (inside <form>) - <input type="text" ...>, <textarea ...>...

HTML Validation

HTML itself doesn't suffer from syntax errors because browsers parse it permissively.

  • The browser still displays the page even if there are syntax errors.
  • The browser has built-in rules to interpret incorrectly written markup.

Use HTML validation service to check the HTML code.


HTML5 Semantic Elements

HTML5 中引入了许多新的 semantic elements。

semantic elements describe both the structure and meaning of the page (content).

  • It is reader-friendly.
  • The semantic structural elements make it easier for users to navigate the page using assistive technology for accessibility.
  • A great deal of web content can be made accessible just by making sure the correct HTML elements (elements with the correct meaning) are used for the correct purpose at all times.

Keywords. [见 slides 02-HTML]

  • <header>. site logo, title, horizontal navigation links... (page header or <article> header)
  • <footer>. smaller navigation, copyright notices... (page footer or <article> footer)
  • <main>. specify the main content of a document, which should be unique to that page.
  • <nav>. specify major navigation blocks.
  • <article>. represent a section of semantically related content.
  • <section>. represent a generic section of content with the same theme. 理解为 chapter。
    • section v.s. div: if the contents are listed explicitly in document's outline, use <section>.
  • <figure> and <figcaption>. should not be used to wrap every image.
  • <aside>. contain content that is not part of the flow of the text. e.g., sidebar, call-out boxes...
  • <details> and <summary>. create an interactive widget.
  • <time>. define a human-readable date/time.
  • <mark>. highlight text.

Reference

{% note warning %}

  This article is a self-administered course note.

  References in the article are from corresponding course materials if not specified.

{% endnote %}

Reference website:

Introduction to HTML - mdn web docs.

Course info:

Code: COMP3322, Lecturer: Dr.Anthony Tam.

posted @ 2023-09-22 11:53  四季夏目天下第一  阅读(30)  评论(0)  编辑  收藏  举报