100 Key Points for Course 13168 | Generated by AI

Home 2026.01

Question: Could you provide 100 essential knowledge points for the Guangdong Province Higher Education Self-Examination in Web Design and Production (Course Code 13168)?

Answer: To help you prepare for the Web Design and Production (Practical) exam, I have organized 100 key knowledge points based on the four modules outlined in your syllabus. These points cover the technical requirements, syntax, and practical logic needed to succeed.

Module 1: Browser and Editor Basic Operations

  1. Mainstream Engines: Chrome uses Blink, Firefox uses Gecko, and Edge uses Blink (formerly EdgeHTML).
  2. Browser Rendering: Differences in how browsers interpret code necessitate “Cross-browser testing.”
  3. Caching: Clearing the browser cache (Ctrl+Shift+Del) is essential to see real-time CSS updates.
  4. Developer Tools: Use F12 to inspect elements, debug CSS, and view the console.
  5. VS Code Installation: The primary editor recommended for the exam.
  6. Extensions: Install “Chinese (Simplified)” for the UI and “JS-CSS-HTML Formatter” for code cleaning.
  7. Live Server: A common plugin to preview web pages instantly in the browser.
  8. File Naming: Use lowercase letters, numbers, or underscores; avoid spaces and Chinese characters.
  9. Saving Files: Use Ctrl + S frequently; the exam requires specific naming (e.g., Name_html.html).
  10. VS Code Shortcuts: ! + Tab generates the HTML5 boilerplate.
  11. Auto-indentation: Use Shift + Alt + F to format messy code.
  12. Multi-cursor Editing: Hold Alt and click to type in multiple places at once.
  13. Comment Toggle: Ctrl + / is the shortcut for adding/removing comments in both HTML and CSS.
  14. Project Structure: Keep images in an images/ folder and styles in a css/ folder for organization.

Module 2: HTML5 Page Design (Structure)

  1. Doctype Declaration: <!DOCTYPE html> tells the browser the document is HTML5.
  2. Language Attribute: <html lang="zh-CN"> assists search engines and screen readers.
  3. Character Encoding: <meta charset="UTF-8"> prevents garbled text.
  4. The Head Section: <head> contains metadata, titles, and links, not visible content.
  5. The Body Section: <body> contains all visible content of the web page.
  6. Semantic Tags: <header>, <footer>, <nav>, <aside>, and <article> improve SEO and accessibility.
  7. Headings: <h1> to <h6> define hierarchy; <h1> should only be used once per page.
  8. Paragraphs: <p> is a block-level element used for blocks of text.
  9. Line Breaks: <br> is a void element (no closing tag) for single line breaks.
  10. Horizontal Rules: <hr> creates a thematic break or horizontal line.
  11. Preformatted Text: <pre> preserves spaces and line breaks exactly as written in code.
  12. Bold & Italic: Use <strong> and <em> for semantic emphasis over <b> and <i>.
  13. Divisions: <div> is the ultimate generic block container for layout.
  14. Spans: <span> is an inline container used for styling specific text sections.
  15. Relative Paths: ./ for current folder, ../ to move up one level.
  16. Absolute Paths: Full URLs like https://www.google.com.
  17. Hyperlinks: <a href="url"> creates a link.
  18. Target Attribute: target="_blank" opens a link in a new tab; _self is the default.
  19. Anchor Links: Use <a href="#id"> to jump to an element with that specific ID.
  20. Image Tag: <img src="..." alt="..."> is required for displaying graphics.
  21. Alt Attribute: alt provides text if the image fails to load (essential for accessibility).
  22. Image Dimensions: width and height attributes (can be set in HTML or CSS).
  23. Image Formats: Use JPG for photos, PNG for transparency, and GIF for simple animations.
  24. Image Maps: <map> and <area> allow clickable regions on a single image.
  25. Table Basics: <table>, <tr> (row), <td> (cell).
  26. Table Headers: <th> defines a header cell, usually bold and centered by default.
  27. Cell Spanning: colspan merges columns; rowspan merges rows.
  28. Table Caption: <caption> provides a title for the table.
  29. Form Container: <form action="server-url" method="get/post">.
  30. Text Inputs: <input type="text"> and <input type="password">.
  31. Radio Buttons: <input type="radio" name="group">; the name must be identical for grouping.
  32. Checkboxes: <input type="checkbox"> allows multiple selections.
  33. Dropdowns: <select> with <option> child elements.
  34. Textarea: <textarea> for multi-line user input.
  35. Submit Button: <input type="submit"> or <button type="submit">.
  36. Placeholder: placeholder="..." provides a hint inside an input field.
  37. Required Attribute: required prevents form submission if the field is empty.
  38. HTML5 New Inputs: email, url, number, date, and color.
  39. Audio: <audio src="..." controls> for music playback.
  40. Video: <video src="..." controls width="..."> for movies.
  41. Autoplay & Loop: Attributes for media; note that browsers often block autoplaying audio.
  42. Lists: <ul> (unordered) and <ol> (ordered) both use <li> (list item).

Module 3: CSS3 Basics and Styles (Presentation)

  1. Inline CSS: style="..." attribute inside an HTML tag.
  2. Internal CSS: <style> block inside the <head>.
  3. External CSS: <link rel="stylesheet" href="style.css"> (best practice).
  4. Element Selector: Selects all tags of a type (e.g., p { ... }).
  5. Class Selector: .classname (reusable on multiple elements).
  6. ID Selector: #idname (unique to one element).
  7. Descendant Selector: div p selects all paragraphs inside a div.
  8. Priority Rules: Inline > ID > Class > Element.
  9. Color Keywords: red, blue, transparent.
  10. Hex Colors: #RRGGBB (e.g., #FFFFFF for white).
  11. RGB/RGBA: rgba(255, 0, 0, 0.5) allows for transparency (alpha).
  12. Font Family: font-family: "Microsoft YaHei", sans-serif;.
  13. Font Size: Use px for fixed sizes or em/rem for relative sizes.
  14. Font Weight: bold or numeric values like 700.
  15. Text Align: left, right, center, or justify.
  16. Text Decoration: none (to remove link underlines) or underline.
  17. Line Height: line-height controls the space between lines of text.
  18. Text Indent: text-indent: 2em; is common for paragraph starts.
  19. Box Model: Consists of Content, Padding, Border, and Margin.
  20. Width/Height: Defines the size of the content area.
  21. Padding: Inner space between content and border.
  22. Margin: Outer space between the border and other elements.
  23. Border Style: solid, dashed, dotted, or double.
  24. Border Radius: border-radius: 50%; makes an element circular.
  25. Background Color: background-color fills the element’s area.
  26. Background Image: background-image: url('bg.jpg');.
  27. Background Repeat: no-repeat, repeat-x, or repeat-y.
  28. Background Size: cover (fills area) or contain (shows whole image).
  29. Float: float: left; or right; used for simple horizontal layouts.
  30. Clearfix: Use clear: both; to stop elements from wrapping around floats.
  31. Display Property: block, inline, inline-block, or none.
  32. Visibility: visibility: hidden; hides an element but keeps its space.
  33. Pseudo-classes: :hover (mouse over), :active (clicked), :visited.
  34. List Style: list-style: none; removes default bullets from <ul>.

Module 4: Comprehensive Web Development (Layout)

  1. DIV+CSS Concept: Using div for structure and CSS for all visual styling.
  2. Centering Blocks: Use width and margin: 0 auto;.
  3. Navigation Bars: Usually built using <ul> and <li> with float: left or display: inline-block.
  4. Relative Positioning: position: relative; moves element relative to its normal position.
  5. Absolute Positioning: position: absolute; moves element relative to its nearest positioned ancestor.
  6. Fixed Positioning: position: fixed; stays in the same place even when scrolling.
  7. Z-index: Controls the stacking order of positioned elements (higher number = on top).
  8. Box Sizing: box-sizing: border-box; includes padding and border in the total width.
  9. Flexbox Basics: display: flex; is the modern way to align items easily.
  10. Page Structure: A standard page has a .container wrapping a .header, .nav, .main, and .footer.

References:

Would you like me to create a practice HTML/CSS template based on one of the sample exam questions?

Back

google/gemini-3-flash-preview

Donate