Brief HTML content, html
1. html Basics
Html is the markup language used to make web pages. It is directly executed by the browser without compilation. It is not case sensitive. We recommend that you use lower case letters. Html files must use html or htm as the filename suffix.
Html body structure:
(1) DTD header: Used to tell the browser what standard is used to parse the current page
(2) head section: Tell the browser some relevant information
(3) body section: displays data to users.
2. html syntax
2.1 html Tag
Tags are the most basic unit and the most important component in html. They are enclosed by Angle brackets.
Tags are closed in either of the following ways: <Tag Name> content <Tag Name>; <Tag Name/>
It consists of three parts: Tag Name, data to be displayed, and data attributes.
<Tag Name attribute name 1 = "attribute value "... Attribute name n = "attribute value"> </Tag Name>
2.2 html comment
<! -- Commented content -->
2.3 html code format
Carriage Return and space do not work in the source code. Therefore, when writing html code, you can use carriage return or space for formatting to clear the code and facilitate team collaboration. Strict indentation rules must be maintained. The "Tab" Key prevails.
Writing code beautifully is more important than writing the code correctly.
3. head Section
Indicates the header information of an html document, starting with
Contains information about the current document, such as the title information and meta information. Normally, the header information is not displayed in the html document.
Title Tag -- indicates the title of an html document
Base tag -- convert relative URLs to complete absolute URLs
Meta tag-used to define the name, content, and other information of the file information
Link tag -- this tag is used when external resources (such as CSS) are declared in the document.
Style label -- use this label when declaring a style in the document
4. common attributes in the body Tag (note the default value)
Text ------- set the color of the page text
Bgcolor --------- set the background color of the page
Background ------- set the background image of the page
Bgroperties ------- set the page background image to fixed and not scroll with the page
Link -------- set the default link color of the page
Alink ----------- set the color when the mouse is clicked
Vlink ----------- set the color of the link text after access
Topmargin ----------- set the top margin of the page
Leftmargin ------------- set the left margin of the page
5. Edit the text Layout
5.1 format tags
<Br> line feed label
<P> paragraph tags, including text, list, and table
<Center> align labels in center
<Pre> press the original text tab to display spaces, press enter, line feed, and tab key in the original file.
<Li> indicates an html list item. Each list item uses a pair of <li> </li>
<Ul> unordered html list
<Ol> html ordered list
<Hr> horizontal split line label, used for segmentation between paragraphs
5.2 text tag
<Hn> title word label, where n is 1-6, defines level 6 title, and inserts an empty line with a line feed.
<B> bold label
<I> italic label
<U> underline font label
<Sub> text font label
<Sup> text table font label
<Font> font Tag: Specifies the font attributes, such as the text size, color, and font.
<Tt> typewriter text
<Cite> used for citation and examples, usually in italics
<Em> emphasize, usually italics
<Strong> indicates emphasis, usually in bold
<Small> small font label
<Big> large font labels
6. insert an image
Img tag, which appears separately.
Alt ------- represents the alternative text of the image
Src ------ image source (I .e. the image location)
Border ------- width of the image border
Height -------- Image height
Width --------- Image width
Commonly used image formats for Webpage Design: gif, jpeg, and png
7. Create an anchor and hyperlink
7.1 a tag ------- represents the html link, which appears in pairs <a>... </A>
Href --------- indicates a url link source.
The url can be a webpage. Other files point to a location in the HTML file, which is an email address.
Target --------- indicates the Link Opening method.
Target = _ blank: opens the link content in a new window.
Target = _ parent: Use the link content as the previous picture of the file.
Target = _ self: display the link content in the current window
Target = _ top: display the entire screen as a link.
<A href = "url" target = "_ blank"> displayed text </a>
7.2 locate the Link Inside the webpage (anchor link)
Defined by <a name = "">, for example, <a name = "here1"> Part 1 </a>, you can use the <a href = "# here1"> to jump to the first part </a> of the page to locate the "first part" of the page.
Three Link paths:
Absolute path: http://www.sohu.com/index.html
Relative document path: adver/contents.html
Relative site root directory path:/support/app/customer.html
8. html table
8.1 common labels
<Table> indicates an html table, which appears in pairs.
Attribute: width ------ table width
Height ------ table height
Border ------ table border
Cellspacing ----- the distance between the table border and the table content filling. It is also the distance between content filling.
Cellpadding ------ content fill width
<Caption> defines the position of the table title, which can be set by the align and valign attributes.
<Tr> one row in the table
<Th> a column in the table
Tr and th attributes:
Width and height ------ indicate width and height
Colspan --------- a row spans multiple columns
Rowspan -------- a column spans multiple rows
Align ------------- horizontal alignment (left, center, right)
Valign ---------- vertical alignment (top, middle, bottom)
<Td> A cell in the table, used to store specific data content
For more information about align and valign, see the preceding section.
9. html Framework Structure
9.1 Brief Introduction
A browser form can be displayed by combining several pages. You can use the framework (frames. Can be divided into several rows and columns.
Advantage: you do not need to reload the entire page when you reload the page. It is convenient to create a navigation bar.
Disadvantages: many pages are generated, which are not easy to manage; not easy to print; the back button of the browser is invalid; the Code is complicated and cannot be indexed by some search engines; most small mobile devices (PDA mobile phones) the framework cannot be fully displayed. The multi-framework page will add http requests to the server.
Due to these many shortcomings, the design of standard web pages has been abandoned by the design of standard web pages.
9.2 html frame tag
<Frameset> tag -- instead of the body Tag, the Framework page is defined and the number of rows and columns that the framework will be divided into are defined.
Cols --- Number of columns and column size contained in the Framework
Rows ---- number of rows and the size of rows in the framework
Border-whether the frame page has a border
Framespacing-distance between frames
<Noframes> label -- displays text for browsers that do not support the framework. It is used in combination with <body>
<Iframe> tag-create an restrained framework containing another document. The content in the iframe tag can be displayed as a browser that does not support the iframe tag.
Frame tag --- define the content of each frame page in the frameset tag
Appear separately, <frame/>
Frameborder ---- defines the border of the content page. The value is (1 | 0) and the default value is 1.
1 -- display the border between each page 0 ---- do not display the border
Name ----- link to another frame page on one frame page is used (another frame page can use target to define the link page)
Noresize ---- defines whether the viewer can change the size of the frame page by dragging it. The value is (noresize)
Scrolling ---- defines whether a scroll bar exists. The value is (yes | no | auto) and the default value is auto.
Yes --- display the scroll bar no ---- do not display the scroll bar auto ---- display the scroll bar if necessary
Src ---- defines the content bar URL
Border --- set the border Width
10. html form settings
10.1 form tag
How does a webpage interact with users? The answer is: use an html form (form)
Form tag ----- represents an html form
Action --- the place where the data input by the viewer is sent, such as a jsp page
Method ---- data transmission method, commonly used post
10.2 input tag ----- single-row input field of the html form
Appear separately, <input/>
Type ---- display mode of an input field (input type, choice type, and click type)
Text --- text input field (input type)
Password ---- text input field, but the entered text is displayed with the password symbol * (input type)
File ---- You can enter a file path (input type)
Checkbox ---- check box, which can be zero or multiple (select type)
Radio ---- single choice, only one and only one (choice type)
Hidden --- indicates a hidden domain, which can transmit some hidden information to the server.
Button ---- button (click type) (with the submit function, all forms will be submitted together)
Image ---- use the image to display the button, and use the src attribute to specify the image position (click type)
Submit --- submit button. You can use the value attribute to display the text (click type) on the button)
Reset ---- reset button to clear the information in the form (click type)
Name ----- name of this form item
Value ---- value of the input field
Size ---- length of the input field
Maxlength ----- maximum length (number of characters) of input fields)
Checked ----- if it is a select-type input field, it indicates that it has been selected and the value is checked.
Readonly ----- the input field can be selected, but cannot be modified. The value is readonly.
Disabled ----- the input field cannot obtain the focus and cannot be selected. It is displayed in gray and does not play any role in the form.
Accesskey ----- the form's shortcut key access method. If the value is h, press Alt + h.
Tabindex ----- input field tab key traversal order
Src ---- when an image is used to represent a button, it indicates the position (URI) of the image)
Alt ---- Replace the image prompt information of the submit button
10.3 textarea tag ----- indicates multiple input fields of a form
Appear in pairs, <textarea> </textarea>
Cols ---- Number of columns in multiple input fields
Rows ---- number of rows in multiple input fields
Name ---- name of this form item
Accesskey ----- form shortcut key access method
Disabled ----- unable to obtain the focus and cannot be selected
Readonly ---- the input field can be selected but cannot be modified
Tabindex ----- enter the field and use the "tab" key to traverse the order
10.4 select tag
Select tag ---- Select list tag
Appear in pairs <select> </select>
Each option label in this tag represents a selection item
Name --- form Item name
Size --- Select the height of the domain
Multiple --- multiple options
Disabled --- it is displayed in gray and does not play any role in the form.
Tabindex -- use the "tab" key to traverse the order
Option tag --- indicates an option in the selection list.
Appear in pairs <option> </option>
Label ---- description
Value ---- indicates the value of the selected item
Selected --- this selection item has been selected
Disabled ---- the input box cannot get the focus, which is displayed in gray and disabled in the form.
Tabindex ---- The traversal order using the "tab" Key