LWhat isHtml? IntroductionHtml?
HtmlIt can be used to design a standard webpage. No matter the webpage contains various complex elements such as animation, multimedia, and graphics, the basic architecture isHtmlNow, all you are doing is static Web pages. This language does not have logic functions. For example, you cannot mark write operations with HTML commands.
Important for example: you also need to use dynamic web pages later.HtmlKnowledge Base, add data binding, adjust the display location, and write dynamic web pages to the client in the future, that is, when we read the web page, will be presented in the form of HTML source files.
LLearning Methods
SinceHtmlKnown as markup language, learningHtmlThe key is to remember to mark, practice more, be patient, be beautiful, improve performance, and focus on homework.
LCompiling environment and development tools
Any text editor can be compiledHtmlFor example, WordPad,Word, The most commonly used is notepad andHtmlDevelopment ToolsDreaweaverIs a WYSIWYG tool. It can also be switched to a text editor to remove waste.CodeTo improve the quality of web pages, fast upload and download.
The file icon in the original notepad will become an e image. This is a webpage. After you double-click it, the webpage will be opened in the default browser of your machine, why? The reason is very simple. Because the extension has changed, the system will find a tool to open the file based on the extension. Of course, this webpage is blank, because you have not added the webpage tag and the webpage effect you want to achieve. Next, find the toolbar in the browser, find the source file, click the source file tag, and a notepad will be automatically opened. Here you can add a tag to achieve the web page effect. When you write it in notepadSource codeSave your inventory, and then click the new page to download the code, and the code you wrote will be displayed on this page. Now let's try it out .......
With this method of viewing source files, you can view the source code files of any web page on the website. This learning method is also very desirable. If you want to achieve this web page effect, learn how others write and learn from experience. Next, let's take a look at the basic structure of HTML:
1.HtmlDocument structure: case-insensitive
<HTML> htmlDocument<HTML>Start
<Head>Start with Document Header
Intermediate DefinitionWebpage title, etc.
</Head>End of Document Header
<Body>Start of document body
File subject: the text and images displayed on a webpage are defined in the document subject.
</Body>End of document
</Html> htmlDocument<HTML>End
2.Markup syntax
2.1What is tag
HtmlThe symbols used to describe the function are called "tags ". You must use the angle brackets to mark"<>And some tags must appear in pairs.
The purpose is to let the browser know that all of my labels areHtmlIs executedHtml.
2.2Tag type and syntax
Basic Structure: Double flag By<Mark>Text Content (applied part)</Mark>
Single tag It can be used independently to fully express the meaning.<Br>Line feed
Note: tags can be nested in pairs, but cannot be cross-nested.
<P> <B>This is the correct code: the text will be in the black body</B> </P>
----- <B> </B> the mark indicates that the text displayed in the middle of the mark will be displayed in a bold form on the page. When you compile HTML code, the line breaks and spaces you enter manually. The browser does not recognize anything and will display them in the format of an entire section, therefore, if you want to divide a section into several segments, you can use the <p> </P> pair. The text in the middle of the Section will appear in the form of a paragraph.
Compare the following tags of a pair with the above one:
<P> <B>This is incorrect code: the text will be in the black body</P> </B> This method is incorrect. Label B must begin with the first entry in the text and end with the first entry in the text.
2.3Tag attributes
Most tags include some attributes in the start tag.
For example<HR>Is to insert a horizontal line in the webpage: the width is2, Black<HR size ="2" Color = black>, The horizontal line has other attributes. When you do not specify a special attribute, the default value is used. For example, the default width is1You can modify the attribute value based on the effect you want to display. Attribute values can be enclosed in quotation marks or not.
3.WriteHtmlFile considerations
1.All tags must be used<>In this way, the browser will know that the mark in the angle brackets isHtml.
2.For tags that appear in pairs, it is best to enter dual tags at the same time to avoid forgetting.
3.Tag nesting can be used to apply multiple tags for the same information.
4.The code is case-insensitive.
5.Any space or carriage return is invalid in the code, which is& Nbsp,<Br>.Therefore, we recommend that you use the carriage return key to record different labels.
6.Do not contain spaces in the tag. Otherwise, the browser may not recognize the space.
4.Start tag
5.File header content
<Head> Tag pair CompositionHtmlThe content of the header is not directly displayed on the webpage.
5.1.TitleMark<Title>Set the webpage title. Enter the title name here.</Title>As long as you set the webpage title in the webpage, it can be displayed in the browser.
5.2.BaseMark<Base href = "url">Set base URL: When the webpage code runs, place the cursor over the link of the configured link to the configured base URL, the status bar displays Base URL.
5.3.LinkMark<Link REV = "relationship" rel = "relationship" href = "url">
Use Link Mark the external style sheet file. This method is suitable for repeated styles on different webpages of the same website, in this way, you can change the appearance of multiple webpages on the entire website by modifying only one style sheet file. Link Three attributes are marked to indicate how to connect to a file, RELAttributes andType Attribute indicates the type of the external file to be connected. CSS Style Sheet File REL =" Stylesheet " Type =" Text/CSS " Href Attribute specifies the address of the external file to be connected. We will contact the basic usage of the style sheet in future courses.
5.4.MetaMarkDefines file information: Author information, webpage expiration time, keywords, etc.
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
For example:<Meta name = "keywords" content ="Computer, English">When you use a search engine to search for a computer or a book in English, you can enter any keyword to search for this page.
6.File subject:
<Body> </body>The content between tags isHtmlThe main part of the document, which can contain a large number of tags and information
7.Webpage link
7.1Webpage link Overview: A link is an essential part in Webpage creation. When you browse a webpage, click an image or text to bring up a new webpage, these functions are implemented through hyperlinks.
7.2Link category:
External links, internal links, and email links.
7.3Hyperlink path
Absolute path: the absolute path refers to the complete path that describes the location of the file.Http://www.163.com
Relative Path: The relative path, as its name implies, is the relative path of itself and the target location.,It contains the path from the current file to the target file. The relative path is used to establish the relationship between two files, which is not affected by the site and the server. (Do not explain this here)
7.4External link
7.5Internal Link
Sometimes, when there is a lot of content on a page, we can use the internal link of the page to help users quickly find information.
§Internal links are bookmarks in webpages. :<A name ="Bookmarkname">Bookmarks</A>
§<A name ="TagA ">Beauty method: ensure sleep...... </A>
<A href = "#TagA ">Do you want to know the beauty method?</A>
Demo:
7.6 email link: the email link enables visitors to open the default email editing software by clicking the email link when browsing the page, send an email to the specified address . Wang Fang's email address
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
