Home > Developer > Web Develop
1.01-html the head part of the basic tag. html
<! DOCTYPE html>
<!--
Document type declaration: Allow the browser to interpret and execute the code according to the HTML5 standard.
Document type declarations are essential, and must be placed at the top of the document.
If you do not write a document type declaration, the browser will run in compatibility mode by default and there may be an unknown bug.
-
<!--
Head, there are some related statements about page settings.
-
<!--
To set the character set encoding format for a Web page:
GB2312: GB code. The encoding format for Simplified Chinese.
GBK: Extended GB code. More encoding format than the GB code.
Utf-8: the universal code. Can be compatible with the language of most countries.
Before HTML4.01, declare the format of the character set encoding:
<meta http-equiv= "Conent-type" content= "text/html;
Charset=utf-8 "/>
-
<meta charset= "Utf-8"/>
<!--
Set Page Keywords:
Name= "keywords" indicates that the current statement is used to set page keywords
Content= "" represents the keyword content of a Web page. Multiple keywords are separated by commas.
-
<meta name= "keywords"/content= "Jerry Education, Html5,web development" >
<!--
Set Page Description:
The description of the Web page, in search engines when searching the site, the title of the following paragraph of text, is the description of the content of the page.
-
<meta name= "description", "content=" ..... "/>
<!--
Title: The caption of the Web page, which is the text on the tab of the page.
-
<title> I am the most handsome </title>
<!--
Link page Small icon: a small picture on the tab.
Rel attribute: Select icon to represent the linked file, which will act as the icon for the Web page.
HREF attribute: Select the path address where the picture is located.
-
<link rel= "icon" href= "Img/icon.png"/>
<body>
<!--
The contents of the body are displayed in the display area of the browser.
-
</body>
2, 02-html basic block-level tags. html
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>html Basic Tags </title>
<body>
<!--
HTML tags, divided into "block-level labels" and "row-level labels."
"Difference between block-level labels and row-level labels"
① block-level label wrap, front and back row;
Row-level labels do not wrap automatically, showing from left to right;
The width of the ② block-level label is 100% by default;
The width of the row-level label is open by the text content;
③ block-level tags can be set width, height, margin and other properties;
Row-level labels cannot set the above properties
From the notation, the HTML tag is divided into "paired label" and "Self-closing label (empty label)"
① Label: Paired, with start tag, must have end tag, content wrapped between two tags.
such as:② Self-closing tags/empty tags: only one label, with/for automatic closing of tags (/can be omitted).
such as:-
<!--"Common block-level labels"-
<!--
H Tag: Title tag, default bold, H1 Max, h6 minimum.
-
<!--
HR Tab: Horizontal line label.
-
<!--
P Tag: a paragraph tag that represents a piece of text in a Web page.
BR Tags: line-break symbols, in the code to hit enter, in the Web page does not work. Must use <br> break
-
<p> this is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. <br/> This is a paragraph. This is a paragraph. This is a paragraph. </p>
<p> this is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
<a name= "center" >123</a>
<!--
BLOCKQUOTE: Reference tag. Indicates that the text in the label is referenced from another site's content.
Browser default display effect: whole paragraph backward indent
Cite property: Represents the source of the reference content, the URL of the frequently-written reference
-
<blockquote cite= "www.jredu100.com" > I am the most handsome! </blockquote>
<!--
Pre tag: preformatted label. Unlike the P tag, the pre tag retains the space in the Code and the carriage return, which is displayed directly on the page.
The most common function is to display code snippets in a Web page, preserving the code snippet format.
-
<pre>
Jsloader ({
Dasdasadaa addsadsaddd
})
</pre>
<!--"Layout-based block-level labels"-
<!--
Sequential table OL Order list
An ordered list is made up of multiple Li
-
<ol>
<li> the first </li>
<li> the second </li>
<li> the third </li>
</ol>
<!--
Unordered listing UL Unorder list
-
<ul>
<li> the first </li>
<li> the second </li>
<li> the third </li>
</ul>
<!--
Definition list DL
The definition list contains two parts:
<dt></dt>: Define the title of the list, title shelf display, General a definition list
Only one title
<DD></DD>: Defines a description of the list, which is indented backward relative to the title, a
The list can have more than one description.
-
<dl>
<dt> define the title of the list </dt>
<dd> define a description of the list 1</dd>
<dd> define a description of the list 2</dd>
<dd> define a description of the list 3</dd>
</dl>
<!--
Learn: Combo Label figure
Contains two parts:
IMG a picture
Figcaption: The title of the picture, shown directly below the picture.
-
<figure>
<figcaption> title of the picture </figcaption>
</figure>
<!--
div partition label for use with CSS. Dividing a Web page into chunks allows you to wrap a variety of
Label.
-
<div style= "width:100%;height:40px;
background-color:red; " >
This is the text inside the Div.
</div>
</body>
3, 03-html basic row level label. html
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<body>
<a name= "Top" ></a>
<!--
Span tag: The text that is used in the parcel line. Often use CSS to modify text styles.
-
<span> I am the most handsome! </span>
I most <span style= "COLOR:RED;FONT-SIZE:48PX;" > Handsome </span>!!!
<!--
"Em/strong/i/b Difference"
1, EM and I can tilt, strong and B can be bold. But, EM and strong a layer of emphasis.
Meaning. (emphasis on the role: You can let the search engine quickly crawl the heavy parts of the page.) Implementing the semantics of the Code)
2, EM and strong all have the function of emphasizing, but EM is inclined, strong is bold.
Moreover, strong is more intense than EM.
-
<em>em label, tilt + accent </em>
<strong>strong label, bold + accent </strong>
<i>i label, Tilt </i>
<b>b label, Bold </b>
<u>u label, underline </u>
<!--"" common reference labels
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 for
Referring to a sentence is a row-level label. Cite is often used to quote work names and calligraphy and painting names.
-
<blockquote cite= "www.jredu100.com" > block references </blockquote>
<q cite= "www.jredu100.com" >q tags, short citations </q>
<cite cite= "www.jredu100.com" >cite citation </cite>
<!--
Font size one and the smaller one, but has been eliminated, modify the font unified use of CSS
-
<small> Small One font </small>
<big> Big One font </big>
<!--
"IMG Picture Tag"
1.src Property: Indicates the path where the picture is located.
[How the path is represented]
① Network image address. It is not recommended.
② can use the absolute path of the picture. However, absolute paths are strictly forbidden. Because the absolute path
Using the file://protocol, Web pages cannot open Access file://files using http://protocol.
file://c:/sunyang.jpg--absolute path notation: flie:///drive letter:/file path
③ uses relative paths. The only way to recommend it.
A. Picture in the next layer of the current file, "file name/Picture name"
B. The picture is on the same level as the current file, write "picture name" directly
C. Picture on the previous layer of the current file, ".. /Picture Name "
Note: Images must be included in the project and cannot exit the project root directory.
2.width, height width, altitude properties
3.title: Text that appears when the mouse is pointing up
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,
Center Text Center Bottom text Bottom
-
Title= "mouse refers to the text displayed when" alt= "111" align= "Bottom" >
<!--
"A tag HYPERLINK"
1.href Properties: The address of the hyperlink jump. Can be a network connection, or it can be a local
The relative path of the HTML file.
2.target Properties: The location where the new page of the hyperlink opens.
_slef Open on current page (default) _blank open on new page
3.title properties: 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 mail! </a>
2.tencent: Chat with the designated QQ.
<a href= "tencent://message/?uin=1277980605" > Chat
</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" >123321</a>
-
<a name= "center" ></a>
<div style= "width:100%; height:800px;
background-color:red; " >111111111</div>
<a href= "The head section of the 01-html Basic tab. html" target= "_blank"
title= "123" > This is a hyperlink </a>
<a href= "Mailto://[email protected]" target= "_blank"
title= "123" > Click to send mail! </a>
<a href= "tencent://message/?uin=1277980605"
target= "_blank" title= "123" > Chat </a>
<a href= "#top" > Recall top </a>
<a href= "#center" > Jump to div </a>
<a href= "02-html basic block level label. Html#center" >123321</a>
<!--
"Web structure advocated by the website"
1, content and performance separation. HTML is separated from CSS.
2. Separation of content and behavior. HTML is separated from JavaScript.
3, HTML code, must be implemented semantically.
"The norms of the"
1. Label name and attribute name must be lowercase
2. HTML tags must be closed
3. Attribute values must be enclosed in quotation marks
4. label must be nested correctly
① nested tags, can not occur cross;
② block-level labels can be wrapped row-level, row-level labels cannot wrap block level, p tags can not be wrapped p tags, etc...
-
<!--
Other line-level labels (learn about them)
-
<u>u Labels underlined </u>
<span style= "Text-decoration:underline;" >CSS Implementation Underline </span>
<s>s label with Strikethrough </s>
<span style= "Text-decoration:line-through;" >css Implementing Strikethrough </span>
<!--definition of professional terminology
DFN definition of professional terms abbr terminology abbreviations
-
We are learning <dfn>html5</dfn>, short for <abbr>H5</abbr>.
<!--
Code tag: Prompt search engine, currently a section of computer code.
However, code does not preserve the formatting of the codes and needs to be used in conjunction with the pre tag.
-
<pre>
<code>
Jsloader ({
Name: ' Iplookup ',
URL: ' Http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js '
});
</code>
</pre>
<!--
Represents a variable
-
<var>x</var>+<var>y</var>=1
<!--
BDO: Defines the direction in which text is displayed
There is an important property dir:ltr display from left to right, RTL from right to left
-
<bdo dir= "RTL" > Jiang Hao really handsome </bdo>
<!--
Represents text that needs to be entered by the user
-
Please enter "<kbd>Esc</kbd>" to exit the system.
<!--
Sub subscript sup Superscript
-
H<sub>2</sub>o x<sup>2</sup>
<!--
Represents time
-
Now is <time>16:10</time>
</body>
4. Forms
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Forms </title>
<body>
<!--
Form table Table
Each row in the table is represented by TR;
Each cell in a row, expressed in TD;
The first row of the table header in each cell, with th, the th default text will be bold, centered.
"Various properties in the table"
1.border: Adds a border to each TD and entire table of the form. If the value of border is >1, only
With the outermost border bold, 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
is displayed as a width of two lines.
[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 margin in the cell.
4.width/height: Width, 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.
"Table row and Column Properties"
Properties acting on a TR or 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: Sets the text in the cell, horizontal alignment; left center right
valign: Sets the text in the cell, vertical alignment: top center Bottom
"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 spans n rows, it is not necessary to n-1 a TD below the cell;
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 far from the table
is centered above.
Thead: The table header section of the table, always at the top of the table.
Tbody: The body part of the table, under THEAD, above the tfoot.
TFOOT: The tail of the table. Always at the bottom of the table.
Tabular Direct-Listing
The table has a few columns, you can write a few <col/> labels at the top of the table, each <col/> corresponds to the first column,
You can modify the style for the <col/> Tag, add a property such as name, and represent all TD synchronization modifications for this column:
If you need to modify a common style for multiple columns, you can use the <colgroup></colgroup> label package
Multiple <col/>.
<col style= "background-color:red"/>
<colgroup style= "Background-color:blue:" >
<col/>
<col/>
</colgroup>
-
<table border= "1" cellspacing= "0" style= "Border-collapse:
Collapse, "cellpadding=100 width=", "height=" 400 "
Align= "left" bgcolor= "yellow" bordercolor= "red"
/*background= "Img/icon.png" */>
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
<th>1-4</th>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</body>
5. Forms
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<body>
<!--"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.
[Get and post differences]
①get uses URLs to pass data. All content is visible in the address bar, unsafe;
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://The 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. The content message is prompted when the input box has value.
⑤hidden: Hides the current input box. Can be written as hidden= "hidden", can also omit the attribute value, write only <input type= "text" hidden/>
Hidden input box content, still can pass 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" Set radio button/multi-select button, 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 has no effect.
⑩hidden: The Hidden input box. The function is the same as the normal input box +hidden= "hidden".
4. Select Dropdown block
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 multi-select
⑥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 >
<optgroup label= "Coastal" >
<option> Qingdao </option>
<option> Yantai </option>
</optgroup>
<optgroup label= "Mainland" >
<option> Jinan </option>
<option> Linyi </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 how many lines)
You can use CSS style style= "width:100px; height:100px; "
② Setting the Text field size cannot be dragged:
Style= "Resize:none;"
③ Set the Text field to read-only mode and cannot be modified:
<textarea readonly= "ReadOnly" ></textarea>
④ text out of range processing:
Use style= "OVERFLOW:XX;" You can set how text is displayed beyond the area:
>>> Overflow:hidden; Text hiding beyond the area is not displayed;
>>> Overflow:scroll; Horizontal vertical scroll bar, no matter how much text is displayed
>>> Overflow:auto; Automatic, default effect. Text displays more scroll bars, less text, and does not display scroll bars.
>>> you can use Overflow-x and overflow-y to modify two-direction scroll bars individually
OVERFLOW-Y: scroll; Overflow-x: Hidden;
"HTML5 Smart form"
1. H5 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: Input Box prompt content
③required= "required" must be filled
④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.
-
<form action= "" method= "Get" id= "Form1" >
<table>
<tr>
<td> User name </td>
<td>
<input type= "text" name= "username" value= "Jianghao" disabled/>
<input type= "text" name= "username" value= "Jianghao" hidden/>
<input type= "hidden" name= "username" value= "Jianghao"/>
</td>
</tr>
<tr>
<td> Password </td>
<td>
<input type= "password" name= "password" placeholder= "Please enter password"/>
</td>
</tr>
<tr>
<td> Sex </td>
<td>
<input type= "Radio" name= "Sex" value= "male"/> Male
<input type= "Radio" name= "Sex" value= "female"/> Female
<input type= "Radio" name= "Sex" value= "Unknown" checked= "checked"/> Unknown
</td>
</tr>
<tr>
<td> Interests </td>
<td>
<input type= "checkbox" name= "hobby" value= "eat"/> Eat
<input type= "checkbox" name= "hobby" value= "Drink"/> Drink
<input type= "checkbox" name= "Hobby" value= "Play" checked= "checked"/> Play
<input type= "checkbox" name= "hobby" value= "le" checked= "checked"/> Le
</td>
</tr>
<tr>
<td> ID Card </td>
<td>
<input type= "File" name= "card" accept= "image/*" multiple= "multiple"/>
</td>
</tr>
<tr>
<td> Cities </td>
<td>
<select name= "City" >
<optgroup label= "Coastal City" >
<option value= "123" > Qingdao </option>
<option selected= "selected" > Yantai </option>
</optgroup>
<optgroup label= "Mainland Cities" >
<option title= "Jinan" > Jinan </option>
<option> Linyi </option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td> Reading service agreement:</td>
</tr>
<tr>
<TD colspan= "2" >
<textarea style= "width:200px; height:100px; Resize:none; OVERFLOW-Y: scroll; Overflow-x: Hidden; "readonly=" ReadOnly "> This is an agreement that you must agree to. This is an agreement that you must agree to. This is an agreement that you must agree to. This is an agreement that you must agree to. This is an agreement that you must agree to. This is an agreement that you must agree to. This is an agreement that you must agree to. This is an agreement that you must agree to. This is an agreement that you must agree to.
</textarea>
</td>
</tr>
<tr>
<td>
<input type= "Submit" value= "register"/>
</td>
<td>
<input type= "reset" value= "reset"/>
</td>
</tr>
<tr>
<td>
<input type= "image" src= "Img/icon.png"/>
</td>
<td>
<input type= "button" value= "one of the buttons with no eggs"/>
</td>
</tr>
</table>
</form>
<input type= "text" name= "test" form= "Form1" required= "required" autofocus= "autofocus" autocomplete= "off"/>
<div style= "height:400px; Background-color: #ff8040; " ></div>
</body>
HTML Basic Tags
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
