Before explaining this course: Let’s take a look at what a browser is:
The so-called browser is a tool that can interpret and execute HTML code. There is another concept that we need to figure out, browser! =IE, IE is just one of the browsers. In addition to IE, there are many browsers, you can know it by Google. We won't go into details.
First, let's understand what HTML is
What is HTMLThe full name of HTML: Hyper Text Mark-up Language (Hyper Text Mark-up Language). It is the text that describes the appearance of the web page and the content of the web page. The reason why HTML can show various effects is the function of the browser.
Supplementary content: Here we will expand some content, which is the same HTML text, and the effect may be different without the browser. This is because multiple browsers appear first, and then corresponding standards are available. Given this situation, we can use IETester to test the compatibility issues of the same HTML code on different browsers.
2. Static pages and dynamic pages
Another thing we need to know is the difference between static pages and dynamic pages.
First of all, the pages of a website are divided into static pages and dynamic pages.
Static page: All static pages with suffixes html or html are static pages, and there is a fixed html page on the server.
Dynamic page: There is no page on the server that users need to browse, but the server can dynamically generate the html pages required by the customer and then display them to the customer.
To summarize the difference between the two in one sentence: dynamic pages execute server-side code, static pages do not execute server-side code (you can learn about it first, it’s OK, after all, static pages are the focus of our discussion today)
3. How to write an HTML page?
There are many tools for writing HTML. I believe everyone knows Notepad, and you can write HTML pages with Notepad. Of course, you can also write with advanced notepads such as EditPlus/UltraEdit, or use tools such as Dreamweaver.
The following figure is the basic structure of an HTML web page
From the above picture, we can see that all content is within the <html></html> tag; <head></head> puts head information, and the description of the page will not be displayed on the page. The title of the page is set in <title></title>, and <title> can only be placed in <head>; <body></body> is the main body of the page, and the text in this tag will be displayed on the web page. Of course all pages should contain at least these parts.
Tip: If the end tag of the title tag is not closed, the entire page will not be displayed.
4. Similarities and differences between HTML and XML
Similarities: they are all markup languages, they can be accessed through dom, and they can be changed through css
Differences:
XML is more stringent than html syntax: if there is a start tag, you need to have an end tag, consistent case, double quotes of attributes, etc. XML focuses on data storage, while HTML focuses on data display.5.xhtml and dhtml
Xhtml: Extensible markup language, is an html that is more in line with the XML syntax specification. The emergence of Xhtml is mainly to transition to xml. Xhtml requires: all lowercase, tag pairing, and attributes in double quotes.
dhtml: The abbreviation of Dynamic HTML is dynamic HTML. Combination of HTML, stylesheets, and JavaScript
Supplement: Web standards are not a standard, but a collection of series of standards.
The web page consists of three parts: structure, performance and behavior
Structure: text, pictures and other corresponding languages: xml, xhtml
Expression: also known as styles, such as text size and color, etc. These are also achieved through styles. css
Behavior: The dynamic effect of the client is generally completed through javascript. DOM, ECMAScript
Next, let’s get to the topic: learn commonly used tags for html.
6.html tag
01, h tag (title), HTML defines six h tags from <h1></h1> to <h6></h6>, representing fonts of different sizes respectively. h1 is the largest and h6 is the smallest.
02, <br/>Just just enter, it is the tag that closes itself
03, <p> is segmentation. <p>There will be relatively large blank spaces before and after, but there will be no.
04, <center>center</center>center>center. (Not recommended)
05, <b>a</b>Bold, recommended. <i>b</i>italics. <u>c</u> Underlined. <em>Empress, italic</em>
06, <font></font>font tag, <font color="red" size="7" face="Lishu">red</font>
07,<hr> Common properties of horizontal lines: color size (thickness) width (length) align=left/center/right (default is displayed in the play)
7.html special characters
"
& &
< <
> >
Space
© ©
® ®
² ²
¥ ¥
³ ³
8. Image format extension
9. Image tag: <img alt="Prompt text when it cannot be displayed">
Alt: The prompt text when the picture cannot be displayed.
10. Hyperlink:
href points to the target page to be connected, the target pointing to the target window is the value, and the value is taken
_blank :Opens in new window
_self: Open in your own window
_parent :Open in the parent window
_top: means to open in the top-level window
Frame Name: Opens in the specified frame. (learn)
Anchor link: 01 Set the anchor position
<a name=showBigImg><img src=image/02.jpg></a>
02. Calling the anchor
<a href=#showBigImg>Look at beautiful women</a>
11. List in Html:
Divided into unordered lists, ordered lists and defined lists
Let's look at the display effect diagrams of various lists
Unordered list:
<ul>
<li></li>
<li></li>
</ul>
Ordered list
<ol>
<li></li>
<li></li>
</ol>
Definition list:
<dl>
<dt>China</dt>
<dd>Shanghai</dd>
<dd>Guangzhou</dd>
<dd>Beijing</dd>
</dl>
The value of type can be: 1 , a, A, i, I, disc, circle, square.
12. Table: Displays regular data, sometimes used for layout.
As can be seen from the above figure, a table consists of rows and columns, rows are represented by tr and columns are represented by td. You can also use rowspan (merge rows), colspan (and parallel) to merge cells.
Exercise 1: Use html code to output the table
Exercise 2: Cross rows and cross columns of tables
13. Form
Action Submit data to this page by default
If you want to submit data to the server, you need to put form elements such as <input>, <textarea>, <select>, etc. into the form. The value of the type of Input is as follows:
Checked attribute is prepared for radio buttons and check boxes.
Radio buttons are used for a set of mutually exclusive values, the effect diagram is as follows
The check box effect diagram is as follows
There are three main types of buttons: Submit button, Reset button and Normal button
Drop-down list box
grammar:
14. Multi-line text box:
<textarea>text</textarea>, cols="50", rows="15" attributes represent the number of rows and columns.
Common form elements use:
This is the end of our discussion on html today.