1. Introduction to HTML
* What is HTML?
-Hypertext Markup Language: Hypertext Markup Language, Web language
* * Hypertext: Beyond the scope of text, the use of HTML can easily be done
* * 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 -Define a Java method {}
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 (****** understanding)
There is a lot of data in the Web page, different data may need different display effect, this time need to use the label to the data to be manipulated (package),
Changes in the data style within the tag are achieved by modifying the label's property values.
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.
Tags that are commonly used in HTML
2. Text label and comment label
* 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--
3. Title tag, horizontal line label and special character
* 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:
* &: &
4. List label
-for example, show this effect now
Wisdom Podcast
Finance Department
Department of Learning and work
Personnel
* * <dl> </dl>: Indicates the scope of the list
* * in DL inside <DT></DT>: Upper Content
* * in DL inside <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 Department
2. Department of Learning and work
3. Personnel Department
A. Finance department
B. Department of Learning and work
C. Personnel department
I. Finance department
II. Department of Learning and work
III. Personnel DEPARTMENT
* * <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 show this effect on the page
Special symbol (box) Finance Department
Special symbol (box) Department of Science and Engineering
* * <ul></ul>: Indicates the range of unordered lists
Properties: Type: Hollow Circle Circle, solid circle disc, solid square square, default disc
Inside the UL <li></li>
-code
<ul>
<li> Finance Dept. </li>
<li> Engineering Dept. </li>
<li> Personnel </li>
</ul>
5. 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)
6, the introduction of the path
* Category: Two types
* * 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 pictures in HTML 4.html and IMG 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: /
- .. /: Day01
-- .. /c.png
* * Want to represent the upper layer. /.. /
7, Case one: the use of the list label (job: Complete the rest of the section)
8. Hyperlink tag (******)
* Linked resources (******)
-<a href= "link to resource Path" > content displayed on the page </a>
* * HREF: The address of the linked resource
* * Target: Set open mode, default is open on the current page
--_blank: Open in a new window
--_self: Opens the default on the current page
-When hyperlinks do not need to go to any of the addresses in the href add #
-<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
9. Form labels (* * * * * * * * * * * *)
* Data can be formatted to make the data display clearer
* <TABLE></TABLE>: Indicates the range of the table
-Border: Form line
-BorderColor: Color of the table line
-cellspacing: Direct distance of cell
-width: widths of tables
-Height: Table Heights
* * inside the table <tr></tr>
-Set Alignment Align:left center right
Inside the TR <td></td>
-Set display mode Align:left center right
Using th can also represent cells
-Indicates that the center and bold can be achieved
* Code
<table border= "1" bordercolor= "Blue" cellspacing= "0" width= "$" height= ">"
* Drawing Analysis Form
-First define the scope of a table using table
-Define a line using TR
-Define a cell using TD
* * 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>
10. Form label (* * * * Most important label today * * * *)
* 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, default submit to current page
* * 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 will carry the submitted data, post will not be carried (inside the request body. On the seventh day when the HTTP protocol is spoken)
2. Get Request Security level is low, post is higher
3. Get Request data size limit, post No Limit
* * Enctype: The general request does not require this attribute, do file upload when you need to set this property (22nd day of the file upload)
* * Input: Can enter content or select part of content
-Most of the entries use <input type= "type of input item"/>
You need to have a Name property in the entry
Normal entry: <input type= "text"/>
Password entry: <input type= "Password"/>
Radio input: <input type= "Radio"/>
-Need attribute name in 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"/>
-Need attribute name in 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 selection
Selected= "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=1991
After 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 (and tomorrow to talk about JS used together)
<input type= "button" value= ""/>
11, Case: Using form tags to implement the registration page
-Use tables to achieve page effects
-Hyperlinks do not want him to have effect href= "#"
-If the cells inside the table have no content, use spaces as placeholders
-Submit form with picture <input type= "image" src= "path to Picture"/>
12, the use of other common tags in html
B: Bold
S: Strikethrough
U: Underline
I: Italic
Pre: Output AS-is
Sub: subscript
SUP: Superscript
P: Paragraph label is more than BR label line
= = = To be used at the CSS tomorrow
Div: Wrap Line
Span: displayed on one line
13, the use of HTML header tags
* HTML two parts composed head and body
* * The tag in head is the head tag
* * Title Tag: Indicates what is displayed on the label
* * <meta> Tags: set 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 Tag: introduction of external files
* * Tomorrow CSS, you can use the link tag to introduce CSS file
14, the use of frame labels (will be used)
* <frameset>
-Rows: divided by line
* * <frameset rows= "80,*" >
-Cols: Partitioning by column
* * <frameset cols= "80,*" >
* <frame>
-specific pages displayed
-<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,*" >//Divide the page into two parts
<frame name= "Top" src= "a.html" >//Top page
<frameset cols= "150,*" >//Divide the following sections into two parts
<frame name= "Lower_left" src= "b.html" >//Left page
<frame name= "Lower_right" src= "c.html" >//page on the right
</frameset>
</frameset>
* If the page on the left is hyperlinked, 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>
15. Extension of a label (learn)
-Baidu is a network resource
-When accessing network resources in a tag, you must add a protocol http: represents a network of public protocols,
If the HTTP protocol is added, automatic recognition of access resources 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.
16. Summary of today's content
1, the idea of HTML operation (* * *)
* Use the tag to wrap the data to be manipulated, and to change the data style in the tag by modifying the tag's attribute value.
2. Font Tag property: Size range 1-7 color: English word, hexadecimal number #ffffff
3, title tag 4. Comments <!--HTML comments--
5. List label
* * <dl> <dt></dt> <dd></dd></dl>
* * Ordered <ol><li></li></ol>
* * Unordered <ul><li></li></ul>
6. Image label (******)
* * alt: Browser compatibility is poor
7. Path (relative path) (* * *)
* * In the same level directory: Write directly
* * Next Level directory: Images/1.jpg
* * in Upper directory:.. /
8. Hyperlink Tag (* * * * *)
<a href= "path" > Content displayed on the page </a>
-Open Mode target= "_self _ Blank"
-The default is to open on the current page
9. Table Label (* * * * *)
<table>
<tr>
<td></td>
<th></th>//Bold and centered
</tr>
</table>
-Tips: How many rows to count first, how many cells are in each row
10. Form label (* * * most important label today * * *)
* <FORM></FORM>:
-Action: Submit to Address
-Method: How to submit: There are two kinds of get and post commonly used
-Get and post differences
-Enctype property (used when uploading)
* Input Item
* Enter the key to write the Name property
* Normal input <input type= "text"/>
* Password: password
* Radio Box: Radio
* check box: checkbox
* Drop-down box
<select name= "" >
<option value= "" ></option>
</select>
* Text field
<textarea cols= "" rows= "" Name= "" ></textarea>
* File
* Submit Push Button Submit
* Reset Reset
* Submit <input type= "image" src= "" with image/>
* Hidden Items hidden
* Normal button
11. Div and span (******)
12, frame label (will use)
Common syntax for HTML 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
