1.5. HTML tag Format
- HTML tags are keywords surrounded by angle brackets, such as
- HTML tags are usually paired, such as:<div> and </div> The first tag is the start and the second is the end. The end tag will have a slash.
- Also some of the labels are presented separately, such as:<br/>,
- Tags can have several properties, or without attributes.
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" .../>
Several important attributes
- ID: The unique id,html that defines the label unique in the document tree
- Class: Defines one or more classes names (classname) for HTML elements (CSS style class names)
- Style: The inline style of the specified element (CSS style)
Second, commonly used label 2.1, <! Doctype> Label<! The doctype> declaration must be the first line in the HTML document, before the
<! The doctype> declaration is not an HTML tag; it is a directive that instructs the Web browser to write which HTML version of the page to use.
2.2. Common tags in head
label |
meaning |
<title></title> |
Define page Titles |
<style></style> |
Defining an internal style sheet |
<script></script> |
Define JS code or introduce an external JS file |
<link/> |
Introducing external style sheet files |
<meta/> |
Define the original page information |
2.2.1, meta tagsMeta Tag Introduction:
- The <meta> element provides the original information about the page (mata-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.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.
<!--2 seconds to jump to the corresponding URL, note the quotation marks--><meta http-equiv="refresh" content="2; url=https://www.oldboyedu.com"><!--the encoding type of the specified document--><meta http-equiv=" Content-type" charset=utf8"><!--tell IE to render documents in superlative mode--><meta http-equiv= " x-ua-compatible " content=" > "ie=edge"
2.name properties: 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.
<meta name="keywords" content= " Beijing Auto Network, Beijing Auto Quote, Beijing Auto Market latest offer, Beijing Automobile report, Beijing easy car NET, Beijing Auto Group Purchase service "><meta name="description" content=" Beijing Auto Network, Beijing Auto Quote, Beijing Auto Market, Beijing Automobile Report, Beijing Easy Car Network, Beijing Auto Group purchase service >
2.2.2, non-META tags<link rel="icon" href="http://www.jd.com/favicon.ico " > <!--Set the head icon, as we open Baidu website will have Baidu's small icon--><link rel="stylesheet" href= "css.css"> #加载css<script src="hello.js "></script> #加载js
2.3, the body commonly used label 2.3.1, label classificationlabel Classification One: self-closing Tags: single-label closure Tags: double label label Category Two: Block-level label: is the exclusive line, you can set the width of the high! such as: Div,p,h1-h6 inline Tags: by content placeholder, height and breadth are filled by their own content, such as: A,br,img determine the block-level label and inline label method: 1. Whether to have a single row (can be judged by setting the background color) 2. You can set the height and width individually for the element.
2.3.2, Basic label<b> Bold </b><i> Italic </i><u> underline </u><s> Delete </s><p> paragraph tags </p>
2.3.3, special characters
content |
corresponding Code |
Space |
|
> |
> |
< |
< |
& |
& |
¥ |
¥ |
Copyright |
© |
Registered |
® |
2.3.4, Div, and span tagsdiv tags are used to define a block-level element and have no practical meaning. It is mainly given a different performance by CSS styles.
The span tag is used to define inline (inline) elements and has no practical meaning. It is mainly given a different performance 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.
Attention:
About tag nesting: usually block-level elements can contain inline elements or some block-level elements, but inline elements cannot contain block-level elements, which can contain only other inline elements.
P tags cannot contain block-level labels.
2.3.6, IMG Tags " picture path " alt=" The picture is not loaded successfully when prompted " title=" Mouse hover when the message " width=" width "height=" High ( Width Two attributes only one will be automatically scaled)">
2.3.7, a labelHyperlink label
A hyperlink is a link from a Web page to a target, which can be another page, a different location on the same page, a picture, an e-mail address, a file, or even an application.
1 What is a URL? 2 the URL is the abbreviation for the Uniform Resource Locator (Uniform Resource Locator), also known as the Web address, which is the address of the standard resource on the Internet. 3 URL Example4http//www.sohu.com/stu/intro.html5http//222.172.123.33/stu/intro.html6 7 The URL address is made up of 4 parts8Part 1th: For protocol: http://, ftp://wait9 Part 2nd: For the site address: can be a domain name or IP addressTen Part 3rd: Directories for pages in the site: Stu One Part 4: For page names, such as Index.html AEach part is separated by a "/" symbol.
What is a URL<a href="http://www.baidu.com" target="_blank" > Point Me </a>
The href attribute specifies the destination Web page address. The address can have several types:
- Absolute URL-point to another site (such as href= "http://www.jd.com)
- Relative URL-refers to the exact path in the current site (href= "index.htm")
- Anchor URL-point to anchor in page (href= "#top")
Target
- _blank to open the destination page in a new tab page
- _self indicates that the destination page is open in the current tab page
2.3.8, List1. Unordered list
<ul type="disc"> <li> First </li> <li> second </li ></ul>
Type property:
- Disc (solid dot, default value)
- Circle (Hollow Circle)
- Square (solid block)
- None (no style)
2. Ordered list
<ol type="1" start="2"> <li> First item </li> <li> the second </li></ol>
Type property:
- 1 List of numbers, default values
- A Capital Letter
- A lowercase letter
- Ⅰ Capital Rome
- Ⅰ Small Roman
3. List of headings
<dl> <dt> title 1</dt> <dd> content 1</dd> <dt> title 2</dt> < dd> content 1</dd> <dd> content 2</dd></dl>
2.3.9, FormsA table is a two-dimensional data space, a table consists of several rows, a row and a number of cells, cells can contain text, lists, patterns, forms, digital symbols, preset text and other tables and other content.
The most important purpose of the table is to display the table class data. Tabular data refers to data that best fits into a tabular format, which is organized by rows and columns.
The basic structure of the table:
<table> <thead> <tr> <th>header</th> </tr> </thead > <tbody> <tr> <td>data</td> </tr> </tbody> </table>
Property:
- Border: Table border.
- cellpadding: Inner margin
- cellspacing: Margin.
- Width: Percentage of pixels. (preferably with CSS to set the length width)
- RowSpan: How many rows the cell spans vertically
- colspan: How many columns the cell spans (that is, merged cells)
2.3.10, Form formsFunction:
Forms are used to transfer data to the server, enabling users to interact with the Web server
The form can contain input series labels such as text fields, checkboxes, radio boxes, submit buttons, and so on.
Forms can also contain textarea, select, FieldSet, and label labels.
Form Properties
Properties |
value |
meaning |
Action |
Url |
Specifies a form that processes the destination URL, and the form data is submitted to the handler for that URL address. If the property value is empty, it is committed to the document itself. |
Method |
Get or Post |
Method of submitting form data to an HTTP server, default to get |
Enctype |
application/x-www-form-urlencoded |
Specifies the type of encoding for the form data, which is valid only if the method property is set to post. The default value is Application/x-www-form-urlencode to encode all characters. If the form contains a control for file uploads (input type= "file"), then this property value must be set to Multipart/form-data and the character will not be encoded. |
Form elements
Basic concepts:
HTML forms are a more complex part of HTML elements, and forms are often combined with features such as scripting, dynamic pages, and data processing, so it's important to make dynamic Web sites.
Forms are typically used to collect user input information
How the form works:
When a visitor browses a page with a form, they can fill in the necessary information and then press a button to submit it. This information is transmitted over the Internet to the server.
This data is processed by a specialized program on the server and returns an error message if there is an error and requires that the error be corrected. When the data is complete and correct, the server feeds back an input completion information
2.3.11, Input series
Type property value |
representation |
corresponding code |
Text |
Single-Line Input text |
<input Type=text "/> |
Password |
Password entry box |
<input type= "Password"/> |
CheckBox |
check box |
<input type= "checkbox" checked= "Checked"/> |
Radio |
Radio Box |
<input type= "Radio"/> |
Submit |
Submit button |
<input type= "Submit" value= "Submission"/> |
Reset |
Reset button |
<input type= "reset" value= "reset"/> |
button |
Normal button |
<input type= "button" value= "normal button"/> |
Hidden |
Hide button |
<input type= "hidden" value= "Hide button"/> |
File |
Text selection box |
<input type= "File"/> |
Type description:
- Text: Input Box
- Password: Password entry box
- Radio: Radio Box
- CheckBox: Multi Marquee
- Submit: Commit button
- Button: Clickable buttons, no behavior, general with JS use
- Hidden: The ID value of the record data when it is not visible to the user and is typically used to modify a piece of data
- File: Submit document form form need to add enctype= "Multipart/form-data", method= "POST"
Property Description:
- Name: the "key" when the form was submitted, the difference between the notice and the ID
- Value: Values for the corresponding item when the form is submitted
- Type= "button", "Reset", "submit" when the text is displayed on the button for the year content
- Type= "text", "Password", "hidden" when the initial value of the input box
- Type= "checkbox", "Radio", "File", the value associated with the input
- Checked:radio and checkbox are selected by default
- Readonly:text and password set read-only
- Disabled: All input is available
2.3.12, select label<form action=""Method="Post"> <SelectName=" City"Id=" City"> <option value="1"> Beijing </option> <option selected="selected"Value="2"> Shanghai </option> <option value="3"> guangzhou </option> <option value="4"> Shenzhen </option> </Select></form>
Property Description:
- Multiple: Boolean property, set to multiple selection, otherwise the default radio
- Disabled: Disable
- Selected: This item is selected by default
- Value: Defines the option value at commit
2.3.13, label labelDefine the:<label> label to define the callout (tag) for the INPUT element.
Description
- The label element does not present any special effects to the user.
- The For property value of the <label> tag should be the same as the id attribute value of the related element.
<form action=""> for ="username"> User name </label> <input type="text" id="username" name= " username "></form>
2.3.14, textarea label<textarea name= "Memo" id="memo " cols="30 " rows=" > Default content </textarea>
Property Description:
- Name: Names
- Rows: Number of rows
- COLS: Number of columns
- Disabled: Disable
HTML of the front end (i)