Home > Developer > Web Develop
HTML is a Hypertext tag language, which is the source code of Web pages. and the browser is the translation of HTML source code tools.
Second, the basic format of HTML<! DOCTYPE Html>:
① Document Type declaration: Let the browser interpret and execute the code according to the HTML5 standard.
The ② document type declaration is essential, and must be placed at the top of the document, with no line of code in front of it.
③ If you do not write the document type declaration, the browser will run in compatibility mode and there may be an unknown bug.
The content in the <body></body>:body is displayed in the browser's display area.
The head part of the basic HTML tag 1. Set Page keywords<meta name= "keywords" content= "html knowledge Points"/>:
①name= "keywords" indicates that the current statement is used to set the Web page keyword.
②content= "" represents the keyword content of a Web page, separated by commas between multiple keywords.
<meta name= "description" content= "This is my first page!!! "/>: Set Page Description: The description of the Web page, in search engines when searching the site, the title of a paragraph below the text, is the description of the content of the page."
3. Title<title> my first page </title>: the title of the page, which is the text on the page tab.
4, set the small page icon (the small picture on the tab)For example: <link rel= "icon" href= "Img/1.jpg"/>:
①rel Properties: Select Icon to represent the linked file, which will act as the icon for the Web page.
②href Property: Select the path address where the picture is located.
The body part of the basic HTML tag 1, the HTML tag is divided into "block-level label" and "Row-level label""Difference between block-level labels and row-level labels"
① block-level label wrap, front and back row, row-level labels will not be automatically wrapped, from left to right display;
② Block-level label width default is 100%, row-level label width has text content open;
③ block-level labels can be set width, height, margin and other properties, row-level labels can not set the above attributes;
In terms of notation, HTML tags are divided into "paired" and "self-closing" tags (empty labels).
Paired tags: paired, with start tag, must have end tag, content wrapped between two tags.
such as:Self-closing and label/empty tags: only one label, with/for automatic closing of tags (/can be omitted).
such as:
A. Title label:
B. Horizontal line label:
C. Paragraph label:<p></p>
D. Line-Wrapping label:<br/>
E. Reference label:<blockquote></blockquote>
Important cite attributes indicate the source of the reference, usually the URL, and the URL is not displayed on the page
Browser General display first line indent
F. Pre-format label:<pre></pre>
Browser default display style: ① display as equal width font
Elements such as line breaks in ② code, spaces, and so on can be displayed directly in the browser.
A.span Tags: used to wrap text within the line. Often use CSS to modify text styles.
B. Reference tags
Common reference tags are: blockquote, Q, cite
Difference:
① Display Effect: BLOCKQUOTE Whole paragraph indentation, Q plus quotes, cite tilt
② Functionally: BLOCKQUOTE is used to refer to an entire paragraph of content, which is a block-level label. Q is used to quote a sentence, which is a row-level label. Cite is often used to quote work names and calligraphy and painting names.
C.img Picture Label
1. SRC attribute: Indicates the path where the picture is located.
[How the path is represented]
① Network image address. It is not recommended.
Http://n.sinaimg.cn/fashion/20170725/fVaL-fyiiahz0057431.jpg
② can use the absolute path of the picture. However, absolute paths are strictly forbidden. Because the absolute path uses the FILE://protocol, the Web page uses the http://protocol to open a file that cannot access the FILE://protocol.
File:///C:/sunyang.jpg--Absolute path notation: file:///drive:/file path
③ uses relative paths. The only way to recommend it.
A. The picture is on the next level of the current file, "folder name/Picture name"
B. The picture is on the same level as the current file, write "picture name" directly
C. The picture is on the current file, ".. /Picture name ".
(Note: The image must be included in the project and cannot exit the project root directory)
2. Width, height widths, height properties
3. Title: Text displayed when the mouse is pointing
4. alt: The text displayed when the picture cannot be loaded. Omit Alt, the title content is displayed by default
5. Align: The text around the picture, relative to the arrangement of the picture;
Top text on the home
Center text centered
Bottom writing at the bottom of the board
D.A Label Hyperlinks
1. HREF attribute: The address of the hyperlink jump. Can be a network connection, or a relative path to a local HTML file.
2. Target property: The location where the new page of the hyperlink opens.
_self Open on current page (default) _blank open on new page
3. Title Property: The mouse refers to the text displayed on the hyperlink.
"Functional Hyperlinks"
1. mailto: Send mail to the specified mailbox.
<a href= "Mailto://[email protected" > Click to send the email to handsome guy! </a>
2. Tencent: Chat with the designated QQ.
<a href= "tencent://message/?uin=2831705549" > Chat with Dudes </a>
3. Anchor Link: Click the hyperlink to jump to the specified location of the page (anchor point)
① define an anchor point at the specified location of the page:
<a name= "center" ></a>
② to change the href attribute of the hyperlink to "#锚点名称"
<a href= "#center" > Jump to div </a>
③ to jump to another page to specify the anchor point:
<a href= "Other page address. Html#center" > Hahaha </a>
A, Tabular table property
A row in the table is represented by TR;
Each cell in a row, expressed in TD;
In the header of the first row, each cell is represented by th, and th default text is bold and centered.
B, various properties commonly used in the table
1.border: Adds a border to each TD and entire table of the form. If the value of border is greater than 1, only the outermost border is bold, and the border on the TD is not changed.
2.cellspacing: Sets the spacing between cells and cells.
cellspacing= "0" can set the spacing between the borders to 0, but the adjacent borders are not merged, but are displayed as two lines in width.
[Set table border Merge]
You can use CSS settings: style= "Border-collapse:collapse;" After you set the border merge, the CellSpacing property will be invalidated.
3.cellpadding: The cell padding, the distance between the text and the border in the cell.
4.width/height: Width and height of table
5.align: Set the table in the browser, left, center, right.
6.bgcolor: Table Background color
BorderColor: Border color of table
Background: Table background map. Background color and background map are present at the same time.
C, table row and column properties
Properties that act on the TR and TD:
1.width, Height: width, altitude.
2.bgcolor: Background color.
When the properties of a table conflict with the attributes of a row and column, the priority is the principle of "near-priority": TABLE<TR<TD.
3.align: Set the text in the cell, horizontal alignment: Left center right
valign: Sets the text in the cell, vertical alignment: top center Bottom
D, table cross-row and cross-column
1. Cross-column: colspan= "n", if a cell spans n columns, the right side of the cell n-1 TD is not required.
2. Cross-line: rowspan= "n", if a cell across n rows, then the cell below the n-1 TD is not required.
E, tabular structure and direct listing
1. "Structure of the table"
Complete table structure, including:
Caption: The title of the table, whether the <caption> tag is placed in the first row of the table, the table title is always centered above the table.
Thead: The table header section of the table. Always at the top of the table.
Tbody: The body part of the table. Under the THEAD, above the tfoot.
TFOOT: The tail of the table. Always at the bottom of the table.
2. "Tabular Direct Listing"
The table has a few columns, you can write a few <col/> tags at the top of the table, each <col/> tag corresponds to the column, you can modify the <col/> Label style, add name and other properties, indicating that the column of all TD synchronization changes.
If you need to modify a common style for multiple columns, you can wrap multiple <col/> using the <colgroup></colgroup> tag.
The results are as follows:
The results are as follows:
5. Form form
1. The form form has two important properties:
Action: Indicates which server address the form is submitted to;
Method: The way the form submits data, the optional values are get and post two kinds.
[The difference between get and post]
①get uses URLs to pass data. All content is visible in the address bar and is not secure.
Post data cannot be seen in the address bar, it is more secure.
The amount of data transmitted by ②get is limited, and only plain text content can be passed;
Post can deliver large amounts of data, and can pass files such as pictures, videos, and so on.
③get transfer speed is faster than post.
[URL format for get pass data]
http://original address. html? Name1=value1&name2=value2
For example: Http://127.0.0.1:8020/0595.html? Username=123
Therefore, when input is used, the Name property is necessary. Missing name causes the data for the input box not to be passed to the background.
2. Input's Common properties:
①type: Indicates what type of input box The current input box is.
②name: Aliases the input box. When passed to the background, it is passed in the form of name=value;
③value: The default value of the current input;
④placeholder: The prompt content of the input box. When the input box has value, the contents of the prompt disappear.
⑤hidden: Hides the current input box. Can be written as hidden= "hidden", can also omit the property value, write <input type= "text" hidden> hidden input box content, still can transfer data to the background
⑥disabled: Disables the current input box. Can be displayed and cannot be used. The input box content that is disabled will not be able to pass data to the background.
⑦checked= "Checked" Sets the radio button/multi-select button, which is selected by default.
3. Type of input:
①text: normal text box;
②password: Password box. The input content is displayed as a small black dot;
③radio: Radio button. The value of the radio button cannot be omitted, and this value needs to be uploaded to the background;
Radio button, depending on whether the name is the same, whether the button is the same group. The same set of buttons can only be selected, and name must be the same.
Checked= "Checked" Setting radio button, selected by default.
④checkbox: Multi-select button. The other is the same as the radio button.
⑤file: File Upload box.
The Accept property allows you to restrict which types of files can be uploaded. "*" means that all files can be accepted and "image/*" means that only pictures are accepted.
Multiple= "multiple" settings can upload multiple files.
⑥submit: Form Submit button.
⑦reset: The form reset button. Click to restore the form to its original state.
⑧image: Graphical Submit button. The SRC attribute imports a picture, and submit has the effect of submitting the form.
⑨button: Appears as a button shape, but it has no effect.
⑩hidden: The Hidden input box. The function is the same as the normal input box *hidden= "hidden".
4. Select: Drop-down block selection
Every item in ①select, denoted by <option></option> tag;
The ②name property needs to be written to the Select tab.
③option tags If you have the Value property, the Value property is passed to the background, and if there is no Value property, the text between the <option></option> tags is passed.
④option Add Property selected= "selected" To set the default check.
⑤select Add Property multiple= "multiple", set the current drop-down control to multiple selections.
⑥option adds a property title that represents the text displayed after the mouse pointer.
⑦select can use the <optgroup></optgroup> tab to group options and display the group name with the label property.
<select name= "City" >
<optgroup label= "Coastal City" >
<option value= "123" > Qingdao </option>
<option selected= "selected" > Jinan </option>
</optgroup>
<optgroup label= "Inland City" >
<option title= "Weifang" > Weifang </option>
<option > Yantai </option>
</optgroup>
</select>
5. TextArea Text field
① text field size control:
You can use the Text field property cols= "20" (width of how many characters) rows= "10" (height of how many lines), CSS style can be used style= "width:200px;height:100px;"
② Setting the Text field size cannot be dragged: style= "resize:none;"
③ set Text field as read-only mode, cannot be modified: <textarea readonly= "ReadOnly" ></textarea>
④ text out of range processing:
Use style= "OVERFLOW:XX;" To set the way the text is displayed beyond the area;
>>>overflow;hidden; text hidden outside the area is not displayed;
>>>overflow:scroll; the horizontal vertical scroll bar will be displayed regardless of the number of words;
>>>overflow:auto; Auto, default effect. Text more display scroll bar, less text does not show scroll bar;
>>> you can use Overflow-x and overflow-y to modify two-direction scroll bars individually;
Overflow-y:scroll;overflow-x:hidden;
1. HTML5 provides us with a way to associate input with a form. Just give the form a ID, and then add the form property to input outside the form, point to the ID, and you can bind the form to input.
<form id= "FF" ></form>
<input form= "FF" >
2. H5 gives us a new type of input. Range color Date Email URL
3. H5 New Input attribute:
①form Property: association Specifies the ID of the form.
②placeholder: The prompt content of the input box.
③required= "required": Required
④autofocus= "Autofocus" specifies the input box, which automatically gets the focus.
⑤autocomplete: Whether to turn on the automatic prompt completion function. The default is on, set to off to off, set to on to open. You can set AutoComplete to the form label and control the automatic prompting function of all input boxes in the form.
HTML5 Basic Knowledge points
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
