Home > Developer > JavaScript
HTML study notes, html notes
HTML is a language used to describe web pages. HTML is not a programming language, butMarkup Language!
HTML tags: keywords contained in angle brackets, such as Start tag, The second one is added /.End tag.
HTML element: start tag + content + end tag, for example:
<P> content </p>
Some labels do not end, such as <br/>, Empty element.
HTML attributes: html element attributes can be added to most elements. attributes are generally placed in the start tag and exist in the form of name = value. attribute values are generally usedDouble quotation marksIn the following example, the href attribute of the <a> label is wrapped in http: http://www.cnblogs.com/yunmengshu“.
<A href = "http: http://www.cnblogs.com/yunmengshu"> hyperlink </a>
The HTML format is as follows:
<!DOCTYPE html><! DOCTYPE> is a Document declaration that helps the browser correctly display webpages. In fact, the HTML version is declared. Currently, the general html5 Document declaration is <! DOCTYPE html>.
<Html> the element Description document is an html document.Root element;
The
<Title> </title> defines the title, which is the title name displayed in the browser toolbar;
<Meta> describes the basic metadata as follows. (Of course there are other elements that need to be explored later ...)
<Head> <meta charset = "UTF-8"> // defines the character encoding, UTF-8 <meta name = "description" content = "describe page information"> <meta name = "keywords" content = "keywords on the page"> <meta name = "author" content = "author information"> <meta http-equiv = "refresh" content = "5"> // refresh the page every 5 seconds, you can add the URL <link rel = "stylesheet" type = "text/css" href = "external link path"> <style type = "text/css"> next to 5. css style </style> <script type = "text/javascript" src = "external script path"> javascript cannot be written here </script> <script type = "text/javascript "> write js </script> here // not only can be placed in the head element, you can also put it in the <body> element of the current document
<Body> the content displayed on the page is displayed in the element! It contains many tag elements and text, images, sounds, videos, and so on!
Title:
Section: <p> </p>
Line feed: <br/>
Split line:
Reference a short sentence: <q> </q> when displayed on the page, the sentence is added with a "double quotation mark", but not just to use double quotation marks instead. <q>
Reference a large sentence or paragraph: <blockquote cite = ""> </blockquote> The overall indentation is displayed on the page, but not to use <blockquote> instead of double quotation marks, the cite property value is the reference source.
Define the title: <cite> </cite>
Bold: <B> </B>
Italic: <I> </I>
Emphasis: <em> </em> is displayed in italic. Do not use em instead of italic.
Emphasis: <strong> </strong> is more emphasized than em. It is displayed in bold. Do not use strong instead.
Computer code: <code> </code>
Retain: <pre> </pre> retains spaces, line breaks, and tabs in the document.
Superscript: <sup> </sup>
Subscript: <sub> </sub>
Meaningless Tag: <div> </div> can be used as a container for layout. <span> </span> can be used with css to change the text style.
Global attribute: The id must start with a letter (both uppercase and lowercase), followed by a letter (both uppercase and lowercase), a number (0-9), and a hyphen ("-"), underlines ("_"), colons (":"), and periods (". "); the document cannot have the same ID name;
The class must start with a letter (both uppercase and lowercase), followed by a letter (both uppercase and lowercase), a number (0-9), a hyphen ("-"), and an underscore ("_"); the document can have the same class name;
Style intra-row style
Title displays Additional information
Note: <! -- Comment content -->
Entity character:
<& Lt;
> & Gt;
& Amp;
Space & nbsp;
& Copy;
More entity character http://www.w3cschool.cn/htmltags/ref-entities.html
Image: . The text in alt describes the basic information of the image, when the page cannot load the image, the text in alt is displayed. you can work with <map> to map the image definition client image, as shown below:
<! -- Shape defines the shape of the region, coords defines the coordinates of the Region, and href defines the URL. The usemap attribute value of is only added to the value of name in <map> #, this is very important --> <map name = "map"> <area shape = "rect" coords = "0, 0, 50, 60 "href =" # "> </area> <area shape =" circle "coords =" 0, 0, 50 "href =" # "> </area> </map>
Hyperlink: <a> there are several usage cases,
1. text hyperlink <a href = "http://www.cnblogs.com/yunmengshu/" target = "_ blank" title = "hyperlink to my blog"> hyperlink </a> target property has _ self (default, open the link page on the current page), _ blank (open the connection page in a new window), and _ top (open the link document throughout the window ), and the name attribute in <iframe> are displayed on the iframe page. The content in the title is displayed when you place the cursor over the link text.
2. Image hyperlink <a href = "http://www.cnblogs.com/yunmengshu/" target = "_ blank"> </a>
3. Define the anchor
<Body> <a id = "tips"> anchor </a> // You can <a href = "# tips"> return to anchor </a> </ body>
4. Display in iframe
<Body> <a href = "http://www.cnblogs.com/yunmengshu/" target = "a"> display in iframe, sex </a> <iframe name = "a"> </iframe> <! -- Iframe, <iframe src = "URL" width = "" height = "> </iframe> --> </body>
5. Link to your email address or mobile phone number
<Body> <a href = "mailto: yinyupiaoxue@126.com" target = "_ blank" "> contact email </a> <a href =" tel: ########## "> contact mobile phone number </a> <-- mailto can be used with multiple mailboxes and the last mailbox? End, followed by "cc = mailbox" (cc), multiple mailboxes, end with "subject = topic", end with "cc = Email, you can also add "body = content", as shown below <a href = "mailto: yinyupiaoxue@126.com? Cc = 1023027599@qq.com & subject = The % 20 subject % 20of % 20the % 20 email & body = The % 20 body % 20of % 20the % 20 email "> contact email </a> % 20 here stands for spaces --> </body>Unordered list
<Ul>
<Li> html </li>
<Li> css </li>
<Li> javascript </li>
</Ul>
Note: by default, the unordered list contains solid black dots. The type attribute can be changed. There are three values: disc (default), circle (hollow dot), and square (solid black square ). Of course it is best to use css.
Ordered list
<Ol>
<Li> html </li>
<Li> css </li>
<Li> javascript </li>
</Ol>
Note: The ordered list is sorted by number by default. The type attribute can be changed and has several values: 1 (number), a (letter), and so on. The shart attribute can be changed from the nth order, for example, start = "2" indicates that the first order is no longer 1, but 2. Use css to change the style.
Custom list
<Dl>
<Dt> html </dt>
<Dd> mark language of the presentation page </dd>
</Dl>
Note: ul ol dl can be nested with each other.
Table
<Table>
<Caption> table title </caption>
<Thead>
<Tr>
<Th> header </th>
<Td> cell </td>
</Tr>
</Thead>
<Tbody>
<Tr>
<Th> header </th>
<Td> cell </td>
</Tr>
</Body>
<Tfoot>
<Th> header </th>
<Td> cell </td>
</Tr>
</Tfoot>
</Table>
Note: The colspan attribute of td or th can be used to merge columns, and rowspan can be used to merge rows. The cellspacing attribute of table controls cell spacing, and the cellpadding attribute controls cell margins.
Form
<Form action = "" method = ""> // actioin form submission address; method form submission method post or get; defines the id attribute, you can associate the form elements outside the form with the form attribute to the <fieldset> // partition <legend> partition title </legend> account in the form: <input type = "text" name = ""/> <br/> password: <input type = "password" name = ""/> <br/> learn: <br/> <label> <input type = "radio" name = "ht" checked = "checked"/> html </label> // The name value of the same group of radio must be same; by default, <label> <input type = "radio" name = "ht"/> css </label> is selected for checked. // when you click the font, you can also select radio; the for Attribute in <label> is the same as the id attribute value of radio <label> <input type = "radio" name = "ht"/> javascript </label> <br/> like: <br/> <label> <input type = "checkbox" name = "l" value = "Ride"/> ride </label> // <label> <input type = "checkbox" name = "l" value = "Calligraphy" checked = "checked"/> calligraphy </label> <input type = "checkbox" name = "l" value = "Travel"/> travel </label> </fieldset> city: <select> <option> Beijing </option> <option selected = "selected"> Shanghai </option> // selected is selected by default <option> Zhengzhou </option> </select> <br/> introduction: <br/> <textarea cols = "30" rows = "5"> </textarea> <br/> <input type = "submit" name = ""/> <input type = "reset" name = ""/> <input type = "button" name = "" value = "button"/> // The button is better than the <button> label. <br/> <button type = "submit"> submit </button> </form>
Display disabled; required is required; placeholder prompt words (Gray); multiple can be selected multiple; min max min, max; width and height input attributes;
The type attribute of input has other values, such as email, url, number, search, range, color, data, and parameter focus.
You can also use the pre-options in combination with list and datalist.
<Form> new attributes are also available.
Video
<Video width = "" height = ""> // display the control bar of controls, autoplay, and loop playback; A single file can be directly placed in the src attribute <source src = "movie.mp4" type = "video/mp4"/> <source src = "movie. webm "type =" video/webm "/> <source src =" movie.ogg "type =" video/ogg "/> your browser does not support video! </Video>
Audio (same as video)
<Audio width = "" height = ""> <source src = "musicloud" type = "audio/mp3"/> <source src = "music.wav" type = "audio/wav "/> <source src =" music.ogg "type =" audio/ogg "/> your browser does not support audio! </Audio>
It is recommended that all html data should be in lower case; all elements should be closed; and all attributes should have values.
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
