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)
- Opening tag.
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"ormethod="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>.
- section v.s. div: if the contents are listed explicitly in document's outline, use
<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.
浙公網安備 33010602011771號