Home > Developer > Web Develop
HTML markup and document structure 1.1 HTML markup base 1.1.1 text with closed tagsSummary of the CSS Design Guide by reading and learning books
CSS Design Guide/charles lvyke-smith. Lisongfeng-People post and Telecommunications publishing house
Book site: http://www.stylinwithcss.com
highly recommended !! Simple, concise, Suitable for beginners !!
?? The basic format for closing tags is as follows:
1.1.2 Referencing content with self-closing tags<标签名>文本内容<标签名/><标签名 属性_1="属性值" 属性_2="属性值">文本内容</标签名>
?? The basic format of the self-closing label is as follows:
<标签名 属性_1="属性值" 属性_n="属性值" />
?? Non-textual content is displayed through a self-closing tag. The difference between a closed label and a self-closing label is that the closing tag contains the actual content that will be displayed, whereas a self-closing tag simply gives the browser a reference to the content to be displayed. When the HTML page loads, the browser will send additional requests to the server to obtain the contents referenced by the self-closing tag.
1.1.3 Property?? The property is responsible for providing the browser with additional information about the label. You can add properties to each HTML tag. Such as:
<img src="images/cisco.jpg" alt="My dog Cisco" />
?? Note: A screen reader used by visually impaired users reads aloud the contents of the ALT5 attribute, so be sure to add the alt attribute of the tag to something that you can see (or see).
?? Additional Focus: block-level (blocks) labels and inline labels.
?? block-level labels
<h1>-<h6>:6级标签，<h1>表示很重要<p>:段落标签<ol>:有序列表<li>:列表项<blockquote>:独立引用
?? in-line labels :
1.1.4 Paragraphs and tags<a>:链接（anchor，锚）<img>:图片<em>:斜体<strong>:重要<abbr>:简要<cite>:引证<q>:文本内引用
?? Not only is the biggest and most prominent headline, search engines also see it as the <title> source of another search term behind the label.
?? A paragraph is used to mark the main text content, which is the highest exit rate in all text elements. In short, only text that doesn't fit in another text label can be placed in a paragraph.
1.1.5 Composite Elements?? So-called composite elements, that is, they are composed of a number of tags together. such as the tags used to create complex user interface components such as lists, tables, and forms.
1.1.6 Nested tags?? To nest another tag in one tag, you must first close the label before closing the previous one. The structure of an HTML document is formed by a nested tag like this, and a "parent-child" relationship between the tags established for this purpose.
1.2 HTML Document Anatomy<! DOCTYPE html><html><head><meta charset="Utf-8" /> <title>An HTML Template</title></head><body> <H1>Stylin ' with CSS</H1> <!--If you want a typographically-correct, right single quotation mark, replace the ' with ’ - <p>Great Web pages start with great HTML markup!</P> <!--OK to remove the code between here and </body>-- <div Style="Clear:both; padding:100px 0 0 0; Font-size:.85em; Color: #666; " > <p>A code example from<em>stylin’ With CSS, third Edition</em>by Charles Wyke-smith. Visit<a href="http://www.stylinwithcss.com">Stylinwithcss.com</a>For more CSS information and updates.</P> </div> </body></html>
??<meta> The tag has a CharSet property that tells the browser that this page is using UTF-8 encoding.
??<title> The text in the label appears in the title bar at the top of the browser window when the page appears as the title of the entire page.
?? The search engine gives the <title> text content in the tag a high weight, and the text appears in the search list results as a page title. Must still be that. These words are simple and clear, and contain the keywords that the target reader will use when searching your Web page.
??<body> The tag contains an HTML element that marks all of the content.
?? In the <a> tag, the href attribute is: Hyperlink reference, Hyperlink reference.
1.2. Description of 11 development tools: Web Developer?? Related articles :
Web Developer Simplified Chinese version download (Firefox & Chrome Extensions)
Baidu Encyclopedia: Webdeveloper Plugin
WEB DEVELOPER
?? With the outline block level Elements command in the Outline menu, this command displays the outline of the square box of the block elements in the page.
?? The outlines of custom elements can be displayed through the outline custom element in the outline menu. such as body, inline elements and so on.
1.2.2 HTML Entities?? Key article Links:
HTML character entity
HTML symbols
HTML entity symbol Code Quick Check Table
1.3 Document Object Model (DOM)?? The Document Object Model DOMdefines a standard way to access and manipulate HTML documents. The DOM renders an HTML document as a tree structure with elements, attributes, and text (the node tree).
?? As in the following code:
To decompose the HTML code into a DOM node hierarchy diagram:
?? An HTML document can say a collection of nodes, and the DOM nodes are:
ELEMENT nodes: Medium and so on are element nodes, that is, labels.
Text nodes: Content that is presented to the user, such as <li>...</li> JavaScript, DOM, CSS, and other text in.
- Attribute node: element properties, such as
<a> the label's Link property href= "http://www.imooc.com".
CSS Design Guide Notes--html tags and document structure
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
