HTML5 and CSS3 basic tutorial version 8 Study Notes 1 ~ Chapter 6, html5css3
Chapter 1: Construct a block webpage consists of three parts: 1. Text Content (plain text) 2. References to other files: images, audio, videos, and style sheet files, js file 3. Tag: Describe the text content and make sure that the reference works correctly. Note: all these components are used only by the HTML page which consists of the text <,> surrounded by HTML tags. Start tag (for example,
<div> <p></p></div>
The following Nesting is not allowed, and problems may occur.
<div><p></div></p>When the browser renders HTML, It compresses multiple spaces or tabs in the text into a single space, converts the carriage returns and linefeeds into a single space, or ignores them together. & Copy: special characters of the copyright symbol HTML5 provide audio and video elements, and can play audio and video without a plug-in. Note: The full file name uses a small master, short-line separation word, and .html as the extension. The folder name should also use lower-case letters. The key is to keep them consistent. Reduce the time-consuming URLURL (Uniform Resource Locator, unified Resource Locator) includes: mode, common mode: HTTP (Hypertext Transfer Protocol), HTTPS is derived from HTTP. In other modes, ftp (File Transfer Protocol) is used to download files. Mailto is usually followed by a colon and two slashes in the email sending mode. Except mailto, it only has one colon. Note: For FTP sites and all URLs that do not use the HTTP protocol, use the absolute path root relative URL. If the file is located on the web server, use the root relative URL example: /img/family/test.html Semantic HTMLChapter 2: process webpage files planning website creation new webpage save webpage edit webpage Organization File View webpage in browser Note: Pay attention to webpage format encoding, we recommend using UTF8 Chapter 3, basic HTML Structure Each HTML document should contain the following basic sections:
<!DOCTYPE html>That is, the DOCTYPEhtml element. We recommend that you add the Header element of the lang attribute to describe the title element of the character encoding. Note: loading js files before the end of the </body> label at the bottom of the page is a better choice. Note: using HTML5 DOCTYPE ensures that the browser displays the page in reliable mode. Note: make sure that your code is saved in the same format as the encoding in <meta>. Each page must have a <title> element, which should be short and descriptive, it is also the only best practice: title should be a suggestion to briefly summarize the content of the document: place the core content of the title in the first 60 characters (including spaces. For search engines, if the title matches the search term, these titles are given a high weight, especially, the h1 with the highest level (does not mean that the more h1 on the page, the better ). When creating a set of introductory or navigation content areas for a header, you should use the header element to mark it. Generally, the header includes the Website Logo, main navigation, and other full-site links. Note: only use the header element when necessary. The footer and header elements cannot be nested in the header, the footer and address elements cannot be nested with header elements to mark navigation. HTML does not explicitly indicate the main navigation link in the early stage, but HTML5 does, that is, nav, you should only use navHTML5 for important link groups in the document. The main element of the main area of the address tag page cannot be nested in nav. The main element is a newly added element of html5. remember, A page only uses the main element once. If a web application is created, using main to enclose its main functions, you cannot place main in article, aside, footer, header, or nav to create a new article HTML5 articlearticle that can be nested with article, as long as the inside and outside article are partial and Integral Body relationship. An article can contain one or more section elements to define the new elements of the HTML5 block. If a section only needs to add a container for the content for the reason of adding a style, you should use div instead of section to nest section in article le, in this way, different sections of reports, stories, manuals, and other articles are displayed or some content in the specified note column of different chapters is not highly relevant to the subject, but can exist independently, you can use the new HTML5 element aside. The content in the remarks column should be placed after the main content and the content-related images should be placed, using figure, rather than asideaside, you are not allowed to create a footer element in the address. The footer element represents the most recent articles, aside, blockquote, body, details, fieldset, figure, nav, and section., The footer of the td element, it is the footer of the entire page only when its closest ancestor is the body. The footer usually contains information about its region, for example, links to relevant documents, copyright information, authors, and other similar entries cannot be nested with headers in footer, or footer can only use role = "contentinfo" for page-level footers ", and a page can only be displayed from a new row with a common container divdiv created once, do not abuse the use of ARIA to improve Accessibility WAI-ARIA (Web Accessibility Initiative's Accessible Rich Internet Application, accessibility webpage initiative-Accessibility rich Internet applications) the landmark role of the landmark role ARIA can help users identify page areas so that screen reader users can jump directly to these areas. Generally, you only need to set the role attribute. Some available landmark roles
| Role = "banner" (banner) Content for the whole site, usually including Website Logo, website sponsor logo, All-site search tools. Usually displayed at the top of the page, spanning the whole page Width |
Add it to the page-level header element, each page can only be used once |
| Role = "navigation" (navigation) Navigation elements of different sections or related documents in the document (usually links) . |
Corresponds to the nav element. Should be added to each nav element, Or other containers that contain navigation links. This role can be played on each page But like nav, do not over-use this attribute. |
| Role = "main" (subject) Main content of the document |
Corresponds to the main element, preferably added to the main element. Add to other content elements that indicate the subject, each page uses only one |
| Role = "complementary" (Supplemental content) This document serves as a supplement to the content of the subject. |
Corresponds to the aside element. Should be added to aside or div, you can Contains multiple complementary roles, but do not over-use them. |
| Role = "contentinfo" (content) An example of a large area of perceptible area containing information about a document Includes the copyright statement and links to the privacy statement. |
Add it to the footer of the entire page. Each page is used only once. |
/** Prevent sub and sup from affecting line-height * gist.github.com/413930379/sub,sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sup {top:-0.5em;} sub {bottom:-0.25em ;}The add author contact information address element is used to define the contact information of the author, related person, or organization associated with an HTML page or part of the page. HTML5 prohibits address from containing the following elements: h1 ~ H6, article, address, aside, footer, header, hgroup, nav, section annotation editing, and inaccurate text are two elements used for annotation Editing: the ins element of the added content and the del element that marks the deleted content. The s element is used to mark content that is no longer accurate or irrelevant. 1. Mark the newly inserted text 2. Mark the deleted text 3. Mark the text markup code that is no longer accurate or irrelevant to use the code element. If you want to use <,>, replace & lt and & gt. Use the pre-formatted text <pre> element. It can be as text, including spaces, carriage returns, and line breaks. Note: The browser disables pre's automatic line feed by default. The highlighted text uses the mark element to mark words that you want to pay attention. To create a line feed, make sure that the br is the final choice. It is suitable for the use of the br element to create the spanspan element like the div for short lines that should appear next to poetry and street addresses. There is no semantics. Unlike div, span is only applicable to words or phrases. Other elements 1. u: used for non-text annotations. 2. wbr element: indicates a changeable line and does not force a line break. 3. ruby, rp, rt element 4, bdi, bdo element 5, meter element: measurement result that can represent the score value and known range 6. progress element: indicates the progress of a task. Chapter 5: three most popular formats for image processing: gif, png, and jpeg (1, because it contains a large number of colors and is properly compressed, the files saved in this format are relatively small. (2) png and gif are lossless formats. Supports transparency. 2. Color 3, size 4, transparency: both png and gif support transparency. jpeg does not support transparency. A gif pixel is either transparent or opaque. It is called index transparency. Png not only supports index color transparency, but also supports alpha transparency, that is, a pixel can be partially transparent 5. Animation: can be saved as gif, but cannot be png or jpeg to obtain the image. Select image editor ps, adobe Fireworks, Gimp, Acorn, Pixelmator, Paint. NET, PaintShop Pro save images insert images on the page provide alternative text specify image size change image size in the browser in the image editor change Image Size add icon Chapter 6 for the website, the link has two main parts: the target and the tag. It is optional to use the rel attribute of Element a. However, we recommend that you include this value for the link pointing to another website. HTML block-level link. HTML5 allows almost any type of elements or element groups in a link. Create an anchor and link it to an anchor. Activating a link usually takes the user to the top of the corresponding webpage. If you want to jump to a specific area of a webpage, you can create an anchor and reference the anchor in the link. Example:
Click the link to jump to the h2 region. Jump by id. Create other types of links to any file on the World Wide Web (http://xxx.xxx.xx/xx.xx), email (mailto: name@example.com), phone number (tel: + 123456987 ). Suggestion: Do not use a link to an email address. If you can only identify tel: by clicking the link, you will be asked if you want to call the number. If it is not a phone device, you will be asked whether to add it to the address book. Some browsers will start Google Voice or Skype, while others will not know how to handle it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
