Home > Developer > Web Develop
HTML---A simple label
HTML overview and basic structure HTML overviewHTML is the initials of hypertext mark-up Language, meaning Hypertext Markup Language, hyper-text refers to hyperlinks, tags refers to the label is a language used to make Web pages, the language is composed of a label, Files made in this language are saved as a text file, the file extension is HTML or HTM, an HTML file is a Web page, HTML file with the editor to open the display is text, you can edit it in text, if opened with a browser, The browser renders the file as a Web page according to the label description, and the displayed page can be redirected from one page link to another page.
HTML is not a programming language, but a markup language (markup language)
HTML uses tag tags to describe web pages
The basic structure of an HTML is as follows:
<!DOCTYPE HTML><HTMLLang= "en"> <Head> <MetaCharSet= "UTF-8"> <title>Page title</title> </Head> <Body>Web page display content</Body></HTML>
The first line is the document declaration,
<! The doctype> declaration is positioned at the front of the document, before the
The second line of the "
HTML tag format HTML document specificationXHTML has written specifications for documentation, HTML5 can be partially adhered to, or fully complied with, looking at development requirements.
1. All labels must be lowercase
2. All attributes must be enclosed in double quotation marks.
3. All labels must be closed
4, IMG must be added alt attribute (description of the picture)
syntax for tags:< Tag Name Property 1 = "Property value 1" Property 2 = "Property value 2" ......> content section </tag name >
< Tag Name Property 1 = "Property value 1" Property 2 = "Property value 2" .../>
Commonly used tags in <meta> Tags1 <!-- This is a note -
Meta Introduction
The <meta> element provides meta-information about the page (meta-information), a description of the search engine and the frequency of updates, and keywords.
The <meta> tag is located in the header of the document and does not contain any content.
The information provided by <meta> is not visible to the user
Meta tag composition: Meta tags have two attributes, which are the Http-equiv property and the Name property, and different properties have different parameter values, these different parameter values to achieve a different page function.
(1) Name attribute: Mainly used to describe the Web page, the corresponding property value of content,content content is mainly for the search engine to find information and classification information.
1 < name= "keywords" content= "Meta summary, HTML Meta,meta attribute, meta jump"> 2 3<name= "description" content = "The old boy training institution was created by a very old boy">
(2) Http-equiv property: equivalent to the file header of HTTP, it can send back some useful information to the browser to help correctly display the content of the Web page, the corresponding property value of Content,content is actually the variable value of each parameter.
1 <Metahttp-equiv= "Refresh"content= "2; Url=https://www.oldboy.com ">//(note the following quotation marks, respectively, before the number of seconds and after the URL)2 3 <Metahttp-equiv= "Content-type"CharSet=utf8 ">4 5 <Metahttp-equiv= "X-ua-compatible"content= "Ie=emulateie7" />Non-META tags
1 <title>Oldboy</title> <!--title contains the name of the Web label above --2 <Linkrel= "icon"href= "Http://www.jd.com/favicon.ico">3 <Linkrel= "stylesheet"href= "Css.css">4 <Scriptsrc= "Hello.js"></Script>Commonly used tags in <body>
1 <HN>: The value range of n is 1~6, from large to small. Used to denote a title.2 3 <P>: Paragraph label. The contents of the package are wrapped. And there is a blank line between the contents of the content .4 5 <b> <Strong>: Bold label.6 7 <Strike>: Adds a median line to the text.8 9 <em>: Text becomes italic.Ten One <sup>And<Sub>: Upper corner and Lower corner table. A - <BR>: line break. - the <HR>: Horizontal Line - - Special characters: - < >；"；©®HTML block
<div></div>: <div> is just a block-level element that has no practical meaning. It is mainly given a different performance by CSS styles.
<span></span>: <span> represents inline rows (inline elements) and has no practical meaning, and is mainly given a different representation by CSS styles.
The difference between a block-level element and an in-line element
The so-called block element is the element that begins to render on another line, and the inline element does not need another line. If you insert these two elements separately in a Web page, you will not have any effect on the page.
These two elements are specifically designed to define a CSS style.
tags can insert a picture on a webpage, it is a standalone label, the "src" attribute defines the address of the picture, the "alt" attribute defines the text displayed when the picture fails to load, and support for the search engine and the blind screen reader software.
Hyperlink label (Anchor label)1 < src= "images/pic.jpg" alt= "Product picture"/>
<a> tags can define a link address on a Web page, define the address of a jump through the SRC attribute, and define a hint text box that pops up when hovering over the title property.
1 <ahref="#"></a> <!--# means link to top of page -2 <ahref= "http://www.itcast.cn/"title= "Jump to the Smart podcast website">Wisdom Podcast</a>3 <ahref= "2.html">Test Page 2</a>Define scrolling jumps within a page
An element of "id" or "name" is defined within the page and can be linked to its page scroll position via a tag, provided the page is high enough, has a scrollbar, and the element is not at the top of the page, otherwise the page will not scroll.
An ordered list of HTML lists1 < href= "#mao1"> title </a>2 ...... 3 ...... 4 < ID= "Mao1"> jump to Title </h3>
Defining a numbered list of content on a Web page can be implemented using <ol>, <li>, with the following code:
1 <ol>2 <Li>List text One</Li>3 <Li>List text Two</Li>4 <Li>List text Three</Li>5 </ol>
Lists generated on a Web page, numbered 1, 2, and 3 on each item, are less used in real-world development.
Unordered listDefining an unnumbered list of content on a Web page can be implemented using <ul>, <li>, with the following code:
1 <ul>2 <Li>List text One</Li>3 <Li>List text Two</Li>4 <Li>List text Three</Li>5 </ul>
On the page generated on the list, each item will have a small icon, the small icon in different browsers display the effect is different, so generally use the style to remove the default small icon, if you need an icon, you can use the style to customize the icon, so that in different browsers to display the same effect, the actual development of the general use of this list.
Definition ListDefinition lists are often used for definitions of terms. The <dl> tag represents the overall list. The <dt> tag defines the term's title. <dd> tags are the interpretation of terminology. A <dl> can have multiple topics and explanations, the code is as follows:
1 <H3>Front three chunks</H3>2 <DL>3 <DT>Html</DT>4 <DD>Responsible for the structure of the page</DD>5 6 <DT>Css</DT>7 <DD>Responsible for the performance of the page</DD>8 9 <DT>Javascript</DT>Ten <DD>Responsible for the behavior of the page</DD> One A </DL>HTML Table <table>table Common tags
1. Table Label: Declare a table
2. TR Label: Define a row in the table
3. TD and TH Tags: define a cell in a row, TD represents a normal cell, th represents a table header cell
Table Common Properties:1. Border define the border of the table
2. cellpadding defines the distance between the contents of the cell and the border
3. cellspacing defines the distance between cells and cells
4, align set the horizontal alignment of the contents of the cell, setting the value is: left | Center | Right
5. valign sets the vertical alignment top of the contents of the cell | Middle | Bottom
6. Colspan Set Cell horizontal merge
7. RowSpan Set Cell vertical Merge
Traditional layouts:The traditional layout method is to use table to do the overall layout of the page, the layout of the skills are summarized as follows:
1, define the table width height, border, cellpadding, cellspacing all set to 0
2. Nested table inside cell
3. Elements in cells and nested tables set alignment with align and valign
4. Set the style of elements in a cell by attributes or CSS styles
HTML---A simple label
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
