Home > Developer > JavaScript
Some basic Html5 knowledge and Html5 basic knowledge
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> page title </title>
<Meta name = "keywords" content = "keyword"/>
<Meta name = "description" content = "page description"/>
<! --
<Meta http-equiv = "refresh" content = "3; URL = http://www.baidu.com/"/>
-->
<Meta http-equiv = "pragma" content = "no-cache"/>
</Head>
<Body>
<Hr/>
& Lt; hr/& gt; is a straight line
<H1> subtitle <H2> subtitle <! -- H1 to h6 are subtitles, and the title will be smaller and smaller -->
<P> & lt; p & gt;
& Lt;/p & gt; refers to the paragraph
</P>
& Lt; br/& gt; refers to the line feed, which is placed behind a sentence. You can use multiple lines for repeated use. <br/>
& Amp; nbsp; refers to space. Spaces in the rounded corner can also be displayed on the webpage. <Br/>
Tab refers to indentation <br/>
The title is displayed when it is placed.
<Dl>
<Dt> Apple </dt>
<Dd> apple is a fruit. </dd>
<Dt> bananas </dt>
<Dd> bananas are also a kind of fruit </dd>
</Dl>
& Lt; dl/& gt; & lt;/dl/& gt; indicates the definition. <br/>
<Table border = "1" cellpadding = "10" cellspacing = "10">
<Tr> <th> name </th> <th> gender </th> <th> subject </th> </tr>
<Tr> <td colspan = "2"> Li Pei Neng </td> <td> male </td> <td> Chinese </td> </tr>
<Tr> <td rowspan = "2"> Hu xiping </td> <td> male </td> <td> Chinese </td> </tr>
<Tr> <td> Wang Xiaokang </td> <td> male </td> <td> Chinese </td> </tr>
<Tr> <td> Dai Xiao </td> <td> male </td> <td> Chinese </td> </tr>
</Table>
<P> the table is created by the table label, the tr label creates rows, and the td (colspan can span several columns,
Rowspan can span several rows) or th (to make the first row rough) to create a column;
The border label indicates the border width of the table, and the cellpadding label indicates the distance between the word and the border,
The cellspacing label indicates the spacing of each cell. </p>
<H1> Member registration <Form action = "http://www.baidu.com" target = "_ blank" name = "form1">
Name: <input type = "text" value = "Li Pei Neng" disabled = "disabled"/> <br/>
Password: <input type = "password"/> <br/>
Avatar: <input type = "file"/> <br/>
<Input type = "hidden"/> <br/>
<Input type = "button" value = "Click me"/> <br/>
Gender: <input type = "radio" id = "boy1" name = "sex1" checked = "checked"/>
<Label for = "boy1"> male </label> & nbsp;
<Input type = "radio" id = "girl1" name = "sex1"/>
<Label for = "girl1"> female </label> <br/>
Hobbies: <input type = "checkbox" checked = "checked"/> reading
<Input type = "checkbox"/> surfing the internet
<Input type = "checkbox"/> tourism <br/>
Self-introduction: <textarea cols = "20" rows = "3"> default </textarea> <br/>
<Select name = "city">
<Optgroup label = "China">
<Option value = "Wuhan"> Wuhan </option>
<Option value = "Tianmen"> Tianmen </option>
<Option value = "Shenzhen"> Shenzhen </option>
</Optgroup>
</Select>
<Input type = "submit" value = "Confirm submission"/>
<Input type = "reset"/> <br/>
</Form>
<P> form indicates the form. The input tag defines the input interface of the form and displays different types through the type attribute.
In the input interface, the default value is changed through value. file can be used to upload the Avatar, and hidden indicates hidden
Hidden, button indicates normal button, radio indicates single choice (but name must be added for association), and checkbox uses
To indicate multiple-choice (hobby), submit to submit, and rest to reset;
Action indicates where the form is to be submitted, and method indicates the submission method (post and get );
Checked = "checked" indicates the default choice for single choice or check, and disabled = "disabled" indicates the default
The selection cannot be changed. readonly = "readonly" indicates read-only, size indicates the length of the box, and textarea
It is a dual label that indicates multi-line input (cols indicates the length, rows indicates the number of rows );
Label is used to improve the user experience and make it easier to select (id and for must be used together );
Select is used to create the drop-down list {Use option [disabled (not available), selected = "selected"
(Default), value], and disabled, name, multiple = "multiple" (expand )};
Optgroup is used to indicate combination (with label) and group options.
</P>
<Map id = "img1" name = "img1">
<Area shape = "rect" coords = "440,161,570,300" href = "http://ac.qq.com/Comic/ComicInfo/id/524356" target = "_ blank" title = "Once upon a time there was a spirit Jian Shan" alt = "Once there was a spirit Jian Shan "/>
</Map>
<Br/>
<! -- The rect is a circle with a rectangle (the coordinates are 440,161, 30 (RADIUS), used to represent a hyperlink of a part of the image. The coordinates are relative
In the upper left corner of the image, all are positive numbers. The coordinates are obtained through the box. Alt is an explanation. -->
The relative path refers to the image name.
./Equals to the current directory ../equals to the name of the folder in the upper-level directory/equals to the folder in the current directory
<A href = "http://tieba.baidu.com/ I /164490219? Fr = home "title =" my post "target =" _ blank "> </a>
<! -- This is used to represent image hyperlinks -->
<A href = "http://tieba.baidu.com/ I /164490219? Fr = home "title =" my post bar "target =" _ blank "> Baidu Post Bar </a>
<A href = "http://tieba.baidu.com/ I /164490219? Fr = home "title =" my posts "target =" _ blank "> <input type =" button "value =" Click me "/> </a>
<Div> line feed </div>
<! -- Div quick-level elements, which can be used to store tags -->
<Span> do not wrap </span>
<P> I am a <span> sentence </span> </p>
<! -- Span inline elements to beautify them through css -->
<Ul>
<Li>
User A: I like novels.
<Ul>
<Li>
User B: I like cartoons.
<Ul>
<Li>
User A: Better novels.
</Li>
</Ul>
</Li>
</Ul>
</Li>
<Li> List </li>
</Ul>
<Ol>
<Li> List </li>
<Li> List </li>
</Ol>
<Marquee direction = "down"> scroll down </marquee>
<! -- I am the commented content and will not display -->
<Div> charset = "gb2312" in ANSI format </div>
<H1> tag writing and nesting 1. The elements that do not allow write end tags are (single tag): area, bass, br, col, command, embed, hr, img,
Input, keygen, link, meta, paran, source, track, wbr. <br/>
& Nbsp; elements of the end tag can be omitted: li, dt, dd, p, rt, rp, optgroup, option, colgroup,
Thead, tbody, tfoot, tr, td, th. <br/>
& Nbsp; elements that can omit all tags include html, head, body, colgroup, and tbody. <br/>
2. Attributes With a boolean value (yes/no): disabled, readonly, checked.
If these elements are written, true is used. If they are not written, false is used. <br/>
The quotation marks of the attribute values can be omitted, but the attribute values cannot contain null strings. <, >,=, + <br/>
3. Block-level elements can be nested with Inline elements, such as: <div> <span >;< br/>
However, inline elements cannot be nested with block-level elements, and span cannot be in front of div. <br/>
Inline elements can be nested with Inline elements, such as: <a href = "#"> <span> </a>; <br/>
Block-level elements cannot be placed in p tags. For example, <p> <ul> <li> </ul> </p> is incorrect,
<P> <div> </p> is also incorrect. <br/>
Li can contain div labels and ul and ol labels. <br/>
Block-level elements and inline elements can be converted to each other.
<Div> <p> </div> is correct.
<H1> other labels Valid tags in head include: bass, link, meta, title, style, script.
1. Add description information for html pages for search engine crawling
Use the name attribute and content! (Put it in the head, under the title)
<Meta name = "keywords" content = "keyword"/>
<Meta name = "description" content = "page description"/>
2. Introduce css files
Css code is written in a separate file.
<Link rel = "stylesheet" href = "file location" type = "text/css"/>
3. Add the language used for html documents to international websites.
<Html lang = "zh-CN">
</Html>
English en
4. Use html to redirect webpages
<Meta http-equiv = "refresh" content = "Waiting seconds; URL = jump URL address"/>
5. Tell the browser not to load the page cache (that is, get the latest website content)
<Meta http-equiv = "pragma" content = "no-cache"/>
6. iframe tag and framework (insert a webpage into another webpage in the form of a small box)
Create an inline framework (in-row framework) that contains another document (in the body ].
Attribute:
Frameborder value: 1, 0: Specifies whether to display the border around the frame
Width
Scrolling value: yes, no, auto (automatic): Specifies whether to display the scroll bar in iframe
Src specifies the URL of the document to be displayed in iframe. It can be a local html file or a remote html file.
<Iframe src = "http://www.baidu.com/" width = "50%" height = "600" frameborder = "0">
</Iframe>
</Body>
</Html>
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
