Introduction to 1.html?
* What is HTML?
* * Hypertext Markup Language: Hypertext Markup Language, Web language
* * Hypertext: Beyond the scope of text, the use of HTML can easily achieve such operations;
* * Tags: all operations of HTML are implemented by tags, tag is tag,< tag name >;
* * Web language.
* First HTML program.
-Create Java files. java
* * Compile first, then run (JVM)
-HTML suffix is. html. htm
* * Can be run directly from the browser
-code
* * This is my <font size= "5" color= "Red" > First HTML program! </font>
* HTML specification (Follow)
1, an HTML file start tag and end tag
2, HTML contains two parts of the content
(1) (2) <body> content displayed on the page is written in the body </body>
3, the HTML tag has the start tag, also must have the end tag
-
4. HTML code is case-insensitive
5, some tags, no end tag, the end of the tag inside
-such as line break <br/>
* HTML operation idea?
* * There is a lot of data on the page, different data may need different display effect, this time need to use the label to the data to be manipulated (encapsulated), by modifying the label's property values to achieve the changes in the data style of the tag. A label is equivalent to a container, you want to modify the style of the data in the container, only need to change the container's property values, you can implement the data style changes within the container.
2. Tags that are common in HTML
* Text Tags: modify the style of the text
-<font></font>
Properties
* Size: Text value range 1-7, exceeded 7, default or 7
* Color: Text color
-Two ways to express
* * English word: Red Green blue black white yellow gray ...
* * #ffffff with hexadecimal number: RGB
-Different colors are implemented by tools #66cc66
* Note tags
-What are some Java annotations? Three kinds
-HTML comments: <!--HTML comments--
* Title Tag
--From H1 to H6, the size is smaller in turn, and the line is automatically wrapped
* Horizontal Line Label
--Properties
* * Size: The thickness of the horizontal line value range 1-7
* * Color: Colors
-code
<HR size= "5" color= "Blue"/>
* Special Characters
-Want to display such content on the page -special characters need to be escaped
* < <
* > >
* Space:
* &: &
* List Label
Such as:
Founder Group
Finance Department
Department of Learning and work
Personnel
* * <dl> </dl>: Indicates the scope of the list * * in DL <dt></dt>: Top content * * inside DL <dd></dd>: Lower content
-code
<dl>
<dt> Intelligence Podcast </dt>
<dd> Finance Dept. </dd>
<dd> Engineering Dept. </dd>
<dd> Personnel </dd>
</dl>
- want to show this effect on the page 1. Finance Dept. 2. Department of Science and Engineering 3. Ministry ofpersonnel A. Department of Finance B. Department of Engineering C. Personnel I. Ministry of Finance Department II Department of Human Resources
* * <ol></ol>: Range of ordered list
-Property Type: Set sort by 1 (default) a I
* * In the OL tag inside <li> specific content </li>
-code
<ol>
<li> Finance Dept. </li>
<li> Engineering Dept. </li>
<li> Personnel </li>
</ol>
- want to display such effects on the page special symbol (box) Finance Department special symbol (box) Department of Engineering * * <ul></ul> : Indicates the range attribute for unordered list : type: Hollow Circle Circle, solid round disc, solid square square, default disc in UL <li></li> - code <ul> <li> Finance Dept. </li> <li> Department </li> <li> HR </li> </ul>
* Image Label
*
-src: The path to the picture
-width: breadth of picture
-Height: The altitude of the picture
-Alt: The text displayed on the picture, move the mouse to the picture, stay for a moment to display the content
* * Some browsers do not display (no effect)
3. Introduction to the Path
Divided into two categories: absolute path, relative path
* * Absolute path
-C:\Users\asus\Desktop\0413\day01\code\a.jpg
-Http://www.baidu.com/b.jpg
* * Relative path
-The location of a file relative to another file
-Three kinds:
* * HTML files and pictures under one path, you can write the file name directly
-
* * Image in the lower directory of HTML
In the HTML file, use the a.jpg below the IMG folder
--C:\Users\asus\Desktop\0413\day01\code\ 4.html
--C:\Users\asus\Desktop\0413\day01\code\ Img\a.jpg
Use picture 4.html and IMG in HTML under one path img\a.jpg
* * Image in upper-level directory of HTML files
---C:\Users\asus\Desktop\0413\day01\ code\4.html
---C:\Users\asus\Desktop\0413\day01\ c.png
The directory where the HTML file resides and the picture is a directory
* * What is the relationship between a picture and an HTML file?
-Image in the upper directory of the directory where the HTML is located day01
* * How to represent the upper path: /is two points, a slash.
- .. /: Day01
-- .. /c.png
* * Want to represent the upper layer. /.. /
4. Hyperlink tags
* Link Resources
-<a href= "link to resource Path" > content displayed on page </a> * * href: The address of the linked resource * * target: Set the way to open, The default is open on the current page - _blank: Open in a new window - _self: Open the default on the current page -when the hyperlink does not need to any address in the href add #< c11/>-<a href= "#" > This is a hyperlink 2</a>
* Locate Resources
* * If you want to locate a resource : Define a location <a name= "Top" > Top </a> * * return to this position <a href= "# Top "> Back to Top </a> * * Introduction of a label pre: output AS-is
5. Table Labels
* Data can be formatted to make the data display clearer
* <table></table>: Represents the range of the table - b Order: Table line - bordercolor: color of table line - C Ellspacing: Cell Direct distance -- height: height of table * * in table <tr></tr>- set alignment align:left cent ER right * * * inside TR <td></td>- Set the display Mode Align:left center R ight *** using th can also represent cells - means you can center and bold * code <table border= "1" bordercolor= "Blue" cellspacing= "0" width= "Height=";
* * Operation tips:
-Number of rows first, number of cells in each row
* * Title of the table
<caption></caption>
* * Merge Cells
-RowSpan: Cross-line
* * <TD rowspan= "3" > Personnel information </td>
-Colspan: Cross-column
* * <TD colspan= "3" > Personnel information </td>
6. Forms tab
* Can submit data to the Happy NET Server, this process can be implemented using form tags
* <form></form>: Defines the scope of a form-Properties**Action: Submit to address, submit to current page by default**Method: Form Submission Method-There are two common get and post, the default is GET request**Interview title: Get and Post differences? 1, the GET Request address bar carries the submitted data, and the post does not carry2, GET Request Security level is low, post is higher3, GET request data size limit, post No Limit**Enctype: The general request does not need this property, do file upload need to set this property**input: The part that can enter content or select content-Most of the entries use <input type= "type of input item"/> *******you need to have a Name property in the entryNormal entry: <input type= "text" name= "normal"/> Password entry: <input type= "Password"/> * * * Single input: <input Type= "Radio"/>-attribute name is required inside-the property value of name must be the same-must have a value****implementing the default checked properties--checked= "checked" Check entry: <input type= "checkbox"/>-attribute name is required inside-the property value of name must be the same-must have a value****implementing the default checked properties--Checked= "Checked" * * *file entry (used when uploading later)-<input type= "File"/> * * *Drop-down entry (not in the input tag)<select name= "Birth" > <option value= "1991" >1991</option> <option value= "1992" >1992</option> <option value= "1993" >1993</option> </select> -Default SelectionSelected= "Selected" * * *text Field<textarea cols= "Ten" rows= "ten" ></textarea> * * *Hidden items (not displayed on the page, but in HTML code)<input type= "hidden"/> * * *Submit Button<input type= "Submit"/> <input type= "Submit" value= "register"/>-file:///c:/users/asus/desktop/0413/day01/code/10-form label one. HTML? sex=on&love=on&love=on&birth=1991after the name attribute is written in the entry-File:///c:/users/asus/desktop/0413/day01/code/10-form label one. HTML? phone=2222&pwd=3333&sex=on&love=on&birth=1993&tex=aaaaaaaa&hid=-File:///c:/users/asus/desktop/0413/day01/code/10-form label one. html?Phone=130111111&pwd=123456&sex=nv&love=y&love=p&love=pp&birth=1992&tex=good+love &hid= * *? The value of the input name = input value & * * parameter similar to key-value Form***submit using a picture<input type= "image" src= "Picture path"/> * * *Reset button: Returns to the initial state of the entry<input type= "Reset"/> * * *Normal button<input type= "button" value= ""/>
Use of other commonly used labels in 7.html
B: Bold S: Strikethrough u: underline I: Italic pre: Out -of-the-line sub: subscript sup: Superscript P: Paragraph label more than one line of BR label ====
tomorrow css always use div: Wrap span: On one line
Use of the head label of the 8.html
* HTML two parts composed of head and body* * inside the head tag is the header label * * title tag: Indicates what is displayed on the label * * <meta > Tags: set up some related content of the page -<meta name= "keywords" content= "Grandpa, bear Haunt, Liu Xiang" > <meta http-equiv= " Refresh "content=" 3;url=01-hello.html "/> * * base tag: Set basic settings for hyperlinks- You can set how hyperlinks are opened uniformly <base target= "_blank"/> * * Link Tags: introduction of external files
9. Use of frame labels
* <frameset>-rows: dividing by rows* * <frameset rows= "80,*" >-cols: Partitioning by column* * <frameset cols= "80,*" > * <frame>-pages that are displayed specifically-<frame name= "Lower_left" src= "b.html" > * * *when using the frame label, it cannot be written in the body, using the frame label, you need to remove the body* <frameset rows= "80,*" >//Dividing the page into two parts<frame name= "Top" src= "a.html" >//above page<frameset cols= "150,*" >//divide the following sections into two parts<frame name= "Lower_left" src= "b.html" >//page on the left<frame name= "Lower_right" src= "c.html" >//the page on the right</frameset> </frameset> *If the page is hyperlinked on the left, you want the content to appear on the right page-Set hyperlink inside property target value set to name-<a href= "01-hello.html" target= "right" > Hyperlink 1</a>
Expansion of 10.a tags
- Baidu is a network resource - when a tag inside access to network resources, you must add a protocol http: represents a network of public protocols, if the HTTP protocol is added, automatically identify access to the resource is a network resource - When the browser finds the relevant protocol, first look at this protocol is not the public protocol HTTP. if it is not a public agreement, it will go to the local computer to find an application that supports this protocol.
HTML (Hypertext Markup Language)--Hypertext Markup Language
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
