Home > Developer > Web Develop
Frame Label Frame label
<iframe></iframe>
<frameset>
<frame>
</frameset>
Inline frame label Scolling scroll bar no Autuo Yes
<body>
<a href= "tlsr.html" target= "mm" > table single </a><br>
<a href= "worklsr.html" target= "mm" > Forms two </a><br>
<a href= "http://www.baidu.com" target= "MM" > Baidu network </a>
<iframe src= "http://www.baidu.com" scrolling= "no" width= "100%" height= "$" frameborder= "0" ></iframe> <iframe src= "worklsr.html" scrolling= "no" width= "100%" height= "$" frameborder= "0" name= "MM" ></iframe>
</body>
Mailbox Framework
<frameset rows= "200,*" cols= "*" frameborder= "no" border= "ten" bordercolor= "#E019D9" >
<frame src= "fram_1.html" >
<frameset rows= "*" cols= "200,*" >
<frame src= "fram-2.html" >
<frame src= "fram-3.html" noresize name= "myt" scrolling= "auto
">
</frameset>
</frameset>
<noframes>
<body>
Your browser does not support frame labels
</body>
Fram-2.html Code Writing
<body >
<a href= "http://www.baidu.com" target= "MYT" > Baidu network </a><br>
<a href= "tlsr.html" target= "myt" > Form 1</a><br>
<a href= "worklsr.html" target= "myt" > Form 2</a><br>
<a href= "img2.jpg" target= "myt" > Picture effects </a><br>
55555
</body>
List label
<ul>
<li>
<ol>
<dl>
<!--unordered list usage is relatively large, generally do not display the front icon--
Circle Hollow Circle Disc solid round Square square
<ul type= "Circle" type= "disc" type= "Square" >
<li>aaa</li>
<li>aaaa</li>
</ul>
<!--serialized List--
<ol type= "I" start= "1" >
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
<li>aaaaaa</li>
</ol>
<!--custom list Error level list--
<dl>
<dt>Coffee</dt>
<dd>black Hot drink</dd>
<dt>Milk</dt>
<dd>white Cold drink</dd>
</dl>
Audio HTML5 new tab <audio></audio> AutoPlay Auto Play controls display console
<audio AutoPlay src= "A.mp3" Controls loop= "-1" ></audio> loop= "-1" Wireless loop
<embed src= "A.mp3" height= "width=" ></embed>, ie can be good compatibility
<object data= "A.mp3" width= "0" ></object> no display station ,ie can be compatible.
HTML5 new tab DataList entering individual text or letters will let you choose
<body>
Product Name: <input type= "text" list= "Pro" >
<datalist id= "Pro" >
<option value= "my" >
<option value= "MySQL" >
<option value= "PH" >
<option value= "PHP" >
</datalist>
</body>
All <form></form> label content novalidate without verification direct submission
The Post method is safe to pass values and will not be displayed on the address bar
Get method, the value of the correlation speed is relatively fast, will be displayed on the address bar, because the address length is limited, so not a large number of strings
<form action= "save.php" method= "POST" novalidate></form>
Single Box effect <label></label> Click Text can also be selected
<label><input type= "Radio" name= "Sex" value= "male" > Male </label>
<label><input type= "Radio" name= "Sex" value= "women" > Women </label>
<label><input type= "Radio" name= "Sex" value= "secrecy" checked> secrecy </label>
check box effect
<label><input type= "checkbox" name= "Sex" value= "male" > Male </label>
<label><input type= "checkbox" name= "Sex" value= "women" > Women </label>
<label><input type= "checkbox" name= "Sex" value= "confidential" > Confidential </label>
Drop-down check box
Commodity:
<select>
<option value= "Samsung phone" > Samsung phone </option>
<option value= "Apple phone" > iphone </option>
<option value= "Xiaomi phone" > Xiaomi phone </option>
</select>
Message Book
Message: <textare row= "cols=" name= "Content" >
</textare>
<span style= "color:red" >*</span> Red Star denotes required
Required required is a new technology
Placeholder default gray typeface X-webkit-speech lattice behind display voice small icon need Google browser
Name: <input type= "text" Required title= "please fill in name" Name= "Sname" maxlength= "5" X-webkit-speech lang= "ZH-CN" placeholder= " Please fill in the name ">
Password: <input type= "password" name= "uname" size= "><span style=" color:red ">*</span>
Control input lattice length label can be input inside add size= "100" or style inside write input{
Padding:10;
width:200px;
}
Submit Reset
<input type= "Submit" value= "Commit" name= "sub" >
<input type= "reset" value= "reset" name= "Usub" >
Input type= "text password submit reset image file hidden button Radio checkbox" html4.0 10 properties
Type= "Email range date Color" HTML5 new part of the label
Picture as Button
<input type= "image" src= "btn2.jpg" >
File Upload
<input type= "file" name= "FF" >
The picture doesn't show up because
1. Path is not correct
2. Image format is not correct
Form
Table label table layout Now popular is div+css layout
<table> form Labels
<caption> table title
<tr> Line
<td> cell <th> Title Header cell
CellSpacing the distance between the lattice and the lattice, and the distance between the cellpading and the content
Thin Line table
The background color of the table is black TR background color is white border= "0" cellspacing= "1" border is 0 and the distance between the lattice is 1
<style>
tr:hover{
Color: #FF0004;
Cusor:pointer;
Background:yellow;
}
Rr=
Background:white;
Text-align:center;
}
</style>
<body>
<H2 align= "center" > Company March Mobile Storage Table <table align= "center" width= "50%" border= "0" cellspacing= "1" cellpadding= "bgcolor=" "#000000" >
<tr>
<th> Product Name </th>
<th> Goods Quantity </th>
<th> Commodity price </th>
<th> Total Goods </th>
<th> Warehousing Time </th>
</tr>
<tr>
<td> Apple Phone </td>
<td>2</td>
<td>5000</td>
<td>10000</td>
<td>2015-3-21</td>
</tr>
<tr>
<td> Samsung Phones </td>
<td>2</td>
<td>2000</td>
<td>4000</td>
<td>2015-3-22</td>
</tr>
<tr>
<td> Xiaomi Phone </td>
<td>2</td>
<td>1000</td>
<td>2000</td>
<td>2015-3-23</td>
</tr>
<tr>
<td> Meizu Mobile </td>
<td>2</td>
<td>2000</td>
<td>4000</td>
<td>2015-3-24</td>
</tr>
<tr>
<td> Nokia Phones </td>
<td>2</td>
<td>1500</td>
<td>3000</td>
<td>2015-3-25</td>
</tr>
<tr>
<th colspan= "5" bgcolor= "#DFE6E8" >3 month total </th>
</tr>
</table>
<table border= "1" cellpadding= "align= Center" >
<tr>
<TD rowspan= "3" >1111</td>
<TD colspan= "2" >2222</td>
</tr>
<tr>
<td>5555</td>
<TD rowspan= "2" >6666</td>
</tr>
<tr>
<td>9999</td>
</tr>
</table>
Header can be used
If IMG Adds a picture to the page with a blue border simply add border=0
<th> text to the center effect </th>
Add picture to page
<a href= "Images.rar" > Download images file package </a>
<a style= "color:red" href= "http://www.baidu.com" onclick= "return confirm (' Do you want to open Baidu Net ')" > Baidu network </a>
Define the anchor point, #cc定义本html页面的锚点. Im.html#dd define the anchor point inside the im.html
<a href= "#cc" > First Class </a>
<a href= "IM.HTML#DD" > Second session </a>
<a name= "CC" > First lesson content </a>
Chinese mathematics
Chinese mathematics
Chinese mathematics
Chinese mathematics
Chinese mathematics
Chinese mathematics
Chinese mathematics
Link definition links style hover define mouse over style active define mouse Click effect visited define the effect after mouse point
a:link{
Color: #0200F4;
Text-decoration:none;
}
a:hover{
Color: #097AF1;
Text-decoration:underline;
font-size:30px;
}
a:active{
Color: #030303;
}
a:visited{
Color: #ECD60D;
}
<meta> Label Refresh Refresh
<meta charset= "Utf-8" >
<meta name= "keywords" content= "keywords" >
<meta name= "description" content= "Content" >
<meta http-equiv= "Refresh" content= "5; Url=http://www.baidu.com ">
Automatically enter Baidu page after 5 seconds
Labels with single marks
Font is the label name size is the value of property 7 is a property
<font style= "FONT-SIZE:12PX; Color: #EB171B > Fonts </font>
The document specification for HTML5 is <! DOCTYPE html> Interview Topics
<marquee direction= "Right" > warmly welcome ........</marquee>
<mark> text Highlighting </mark>
Tag properties have no precedence
Attributes are separated by a space
The basic structure of a Web page
<! DOCTYPE html>
<title></title>
<body></body>
Notepad for Notepad
The Web page file has an. html or. htm extension.
Programming specifications
1, file name, folder name all use numbers or letters named
2, not case-sensitive, the requirements of the use of lower case
3, HTML5 document specification is <! DOCTYPE html>
4, the mark has the beginning generally has the end such mark is double mark
<title></title>
<body></body>
<maruqee></maruqee>
There is also a single mark, no end
<meta charset= "Utf-8" > New HTML5 Specification
<meta charset= "Utf-8"/> Early XHTML specification
5, <font size= "7" color= "Blue" > People's Republic of China-Henan province </font>
<font Color=blue> People's Republic of China-Henan province </font>
Font is the name of the label that is the main display text
Size is the property value for the Label property 7 for size is typically enclosed in double quotation marks
Color is a property value of blue Blue
The properties of the labels are not selected in the order, and the attributes are separated by spaces
The basic structure of a Web page
Title
Meta
Marquee
Font
H1
Supplemental Character Set
gb2312 simplified Character Set 6763 kanji
GBK large character Set support simplified traditional recommendation
Gb18030
ISO-8859-1 International Organization for Standardization custom character set target support
Utf-8 American Character sets support the world language recommendations, compatible with good
To achieve the video playback effect, download the vcastr22.swf plugin to the local computer 02.mp4 and add the plugin to the same folder
Autoplay=1 AutoPlay 0 for manual playback
var m = "02.mp4";
var swf_width = 500;
var swf_height = 300;
var logotext = ' '
beginswf = ""
endswf = ""
var files = ' + M + ' &vcastr_title=happy_feet&TextColor=0xffffff&IsAutoPlay=1&IsShowBar=1& Barcolor=0xcc66ff&bartransparent=60&iscontinue=1 '
document.write (' <object width= ' + swf_width + ' "height=" ' + swf_height + ' ">");
document.write (' <param name= ' movie "value=" vcastr22.swf "><param name=" quality "value=" High ">");
document.write (' <param name= ' menu ' value= ' false ' ><param name= ' allowfullscreen ' value= ' true '/> ');
document.write (' <param name= ' flashvars "value=" vcastr_file= ' + files + ' &logotext= ' + logotext + ' ">");
document.write (' <embed src= ' vcastr22.swf "allowfullscreen=" true "flashvars=" vcastr_file= ' + Files + ' &LogoText = ' + Logotext + ' "menu=" false "quality=" High "width=" ' + swf_width + ' "height=" ' + swf_height + ' "type=" application/x-s Hockwave-flash "wmode=" opaque "/>");
document.write (' </object> ');
</script>
Reference Description:
Parameter name parameter description default
Vcastr_file Method 2 Pass movie FLV file address parameter, multiple use | separate empty
vcastr_title movie title parameter, multiple use | separate, with method 2 use null
Vcastr_xml Method 3 passes the movie FLV file address parameter, boilerplate reference Http://www.ruochi.com/product/vcastr2/vcastr.xmlvcastr.xml
Isautoplay movie AutoPlay parameters: 0 means no AutoPlay, 1 means autoplay 0
iscontinue movie continuous play parameters: 0 means the discontinuous play, 1 means continuous loop broadcast 1
israndom movie Random play parameters: 0 means no random playback, 1 means random play 0
defaultvolume Default volume parameter: 0-100 value, set movie start default volume size: 0 barposition control bar position parameter is floating on the movie, 1 means displaying 0
below the movie Isshowbar control bar Display parameters: 0 is not displayed, 1 is displayed all the time, 2 is displayed on hover, 3 means no start, 2
Barcolor play control bar color after hover, the color starts with 0x 16 digit 0x000033
Bartransparent Play control bar Transparency
Glowcolor button icon color, color all start with a 0x 16 binary number represents 0X66FF00
Iconcolor the color of the glow on mouse hover, The colors start with a 0x 16-digit numeric representation of the 0xFFFFFF
TextColor player text color, with a 0x start of 16 digits for 0xFFFFFF
Logotext can add information such as your website name null
Logourl can read the logo image from the outside, pay attention to adjust the logo size, support image format and SWF format empty
endswf movie playback, from the external read SWF file, you can add related movie information, video sharing and other information, you need to make empty
Beginswf before the movie starts to play, read the SWF file from the outside, you can add ads, or site information, you need to make a blank
Isshowtime whether to display the time: 0 means no time, 1 shows the time 1
buffertime movie buffer time, Unit (seconds) 2
Video insertion supports Google kernel and IE browser
<embed src= "02.mp4" height= "width=" ></embed>
Video insertion Note the width of the high and the video frame of the width of the same, supporting the Google kernel and IE browser preload= "Auto" automatically loaded in the network when
<video src= "02.mp4" width= "480" height= "the" Controls loop= "-1" autoplay preload= "Auto" ></video>
HTML5 New Tags
<article> tags define external content (structural elements)
<nav>
<footer>
<aside> define content beyond the content of the page. The content of aside is related to the content of article. (Structural elements)
<figure> defines a grouping of media content and their titles. (Structural elements)
<section> tags define sections (section, sections) in the document. such as chapters, headers, footers, or other parts of the document (structural elements)
<meter> defines measures within predefined ranges. Measures only for known maximum and minimum values (inline elements)
<progress> defines the progress of any type of task. You can use the <progress> tag to display the progress of time-consuming functions in JavaScript (inline elements)
<time> Define a date/time (inline Element)
<audio> define sound content.
<video> definition Video
<datalist> defines a drop-down list, which is used in conjunction with the INPUT element to define the possible values for input, and the DataList option is not displayed, it is just a valid list of input values (interactive elements)
<details> defining details of elements (interactive elements)
<canvas> define graphics, draw paths, rectangles, circles, characters, and ways to add images
The canvas element itself has no drawing capability, and all drawing work must be done within the JavaScript scripting language to complete the gradient
The <figcaption> tag defines the caption of the figure element.
Section
To group the title of a page or section
The <mark> tag defines the text with the token. Use the <m> tag when you need to highlight text.
<nav>
<aside>
<figure>
<section>
<footer>
New structure Tags
Section element
Represents a chunk of content in a page, such as a chapter, header, footer, or other part of a page. Can and H1, H2 ... Such elements are used to represent the document structure. Example: <section>......</section>; in HTML5 HTML4 <div> ......</div>.
Article elements
Represents a piece of independent content in the page that is not relevant to the context. such as an article.
Aside elements
Represents the secondary information that is related to the content of the article element outside the content of the article element.
Header element
Represents the title of a content block or a page in a page.
Hgroup elements
Represents a combination of the title of a chunk of content in a page or page.
Footer elements
A footnote that represents a chunk of content in an entire page or page. In general, he will include the creator's name, date of creation, and the author's contact information.
Nav element
Represents the part of a navigation link in a page.
Figure element
Represents a separate stream content that typically represents a separate unit in the content of the document body flow. Use the Figcaption element to add a caption to the group of figure elements. For example:
<figure>
<figcaption>PRC</figcaption>
<p>the people ' s Republic of China is born in 1949</p>
</figure>
HTML4 Writing in common
<dl>
<p>the people ' s Republic of China is born in 1949</p>
</dl>
Additional elements to add
Video element
Define the video. Like movie clips or other video streams. Example: <video src= "Movie.ogg" controls= "controls" >video elements </video>
HTML4 in:
<object type= "Video/ogg" Data= "MOVE.OGV" >
<param name = "src" value= "MOVIE.OGV" >
</object>
Audio element
Defines the audio. such as music or other audio streams. Example: <audio src = "someaudio.wav" >audio element </audio>
HTML4 in:
<object tyle= "Application/ogg" Data= "Someaudio.wav" >
<param name = "src" value= "someaudio.wav" >
</object>
Embed elements
Used to embed content (including various media). The format can be midi, Wav, AIFF, AU, Mp3,flash and so on. Example: <embed src= "flash.swf"/>
HTML4 code sample <object data= "flash.swf" type= "Application/x-shockwave-flash" ><object>
Mark Element
It is primarily used to visually present to the user which text to highlight or highlight. The search keywords are highlighted in the typical application's results.
html5<mark></mark>; HTML4 <span></span>.
Progress elements
Represents a running process that can use the progress element to display the process of a time-consuming function in JavaScript. Wait ... please wait a moment. <progress></progress>.
Time element
Represents a date or time, and can also be both.
Ruby elements
Defines a ruby annotation (Chinese phonetic notation or character).
Used in conjunction with <ruby> and <rt> tags. A RUBY element consists of one or more characters (requiring an explanation/pronunciation) and an RT element that provides that information, and an optional RP element that defines what is displayed when the browser does not support the "Ruby" element.
<ruby>
Han <rt><rp> (</rp>ㄏㄢˋ<rp>) </rp></rt>
</ruby>
RT Element
Defines the interpretation or pronunciation of characters (Chinese phonetic symbols or characters).
RP Element
Used in Ruby annotations to define what is displayed by browsers that do not support ruby elements.
WBR elements
Represents a soft line break. Differences from BR elements: The BR element indicates that a line must be wrapped here, wbr means that the browser window or parent element is full-width (no need to change lines), does not wrap, and is active here when the width is not enough.
Canvas elements
Define graphs, tables, and other images. The <canvas> element is just a graphics container (canvas), and you must use a script to draw the graphic.
<canvas id= "MyCanvas" ></canvas><script type= "Text/javascript" >
var Canvas=document.getelementbyid (' MyCanvas ');
var ctx=canvas.getcontext (' 2d ');
ctx.fillstyle= ' #FF0000 ';
Ctx.fillrect (0,0,80,100);
</script>
Command element--it seems to have little effect. Is there a problem with support?
Represents a command button, such as a radio button, a check box, or a button.
This element is visible only if the command element is inside a menu element. Otherwise, this element is not displayed, but it can be used to specify keyboard shortcuts.
<menu>
<command onclick= "alert (' Hello World ')" >
Click me!</command>
</menu>
Details tab currently only Chrome supports Details tab
A detail used to describe a part of a document or document.
Can be used with summary tags, summary can define headings for details. The title is visible, and when the user clicks on the title, the details are displayed. Summary should be the first child element of details.
DataList label
Defines a list of options. Use this element in conjunction with the INPUT element to define the possible values for input. DataList and its options are not displayed, it is just a valid list of input values. Use the INPUT element's List property to bind the DataList.
<input id= "MyCar" list= "Cars"/>
<datalist id= "Cars" >
<option value= "BMW" >
<option value= "Ford" >
<option value= "Volvo" >
</datalist>
How does the DataGrid tag work?
Defines a list of optional data. The DataGrid is displayed as a tree list.
If you set the Multiple property to True, you can select more than one item in the list.
How does the keygen tag work?
The label specifies the key pair generator field used for the form.
When the form is submitted, the private key is stored locally and the public key is sent to the server.
<form action= "demo_keygen.asp" method= "Get" >
Username: <input type= "text" name= "Usr_name"/>
Encryption: <keygen name= "Security"/>
<input type= "Submit"/>
</form>
Output label
Defines different types of output, such as the output of a script.
<form action= "form_action.asp" method= "Get" name= "Sumform" >
<output name= "Sum" ></output>
</form>
SOURCE Label
Tags define media resources for media elements such as <video> and <audio>.
Menu Label
Defines a menu list. Use this label when you want to list the form controls. Note the difference from NAV, where menu is used exclusively for form controls.
<menu>
<li><input type= "checkbox"/>red</li>
<li><input type= "checkbox"/>blue</li>
</menu>
Add input Tag
Email
Email must be entered
Url
You must enter a URL address
Number
Value must be entered
Range
Values must be entered in a certain range
Date pickers (day selector)
There are several new input types that can be selected for the date and time:
Date-Select day, month, year
Month-Select months, years
Week-Select minute
Time-Select the Times (hours and minutes)
DateTime-Select time, day, month, year (UTC time)
Datetime-local-Select time, day, month, year (local time)
Search
For the search domain, the field is displayed as a regular text field.
Color
Elements of abolition
Font U Big Center
1. Elements that can be replaced with CSS
Basefont, big, center, font, S, Strike, TT, U. These elements are purely for the screen display service, HTML5 in the promotion of the display features in the CSS unified editing.
2, no longer use frame frame.
Frameset, frame, noframes. Frame frames are not supported in HTML5, only the IFRAME framework is supported, or the above three tags are removed with a page-by-page format created by the server side.
3. Only some elements supported by the browser
Applets, Bgsound, Blink, Marquee and other tags.
HTML Learning Notes
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
