First, the introduction of HTML
1. The relationship between HTML and CSS
1. HTML is the carrier of Web content
2. CSS style is the expression (used to change the appearance of the content called performance)
3. JavaScript is used to achieve the effects on the Web page (animated, interactive is generally implemented with JavaScript)
2. HTML tags
<p></p> is a paragraph label
Picture Tags
3, the syntax of the label
1. Tags are enclosed in english brackets < and >
2. The tags in the HTML are usually paired, with the start and end tags. The end tag has one more/more than the start tag.
3. Tags and labels can be nested, but the order must be consistent
4. HTML tags are case insensitive
4. Understanding the basic structure of HTML files
An HTML file has its own fixed structure.
<body>...</body>
1. 2. 3. The content between <body> and </body> tags is the main content of the webpage
5. Head tag
The header of the document describes various properties and information about the document, including the title of the document, and so on. Most document headers contain no data
Show the reader the real content
<title> Tags: text content between <title> and </title> tags is the title information of the page and appears in the title bar of the browser
The title tag of the Web page is used to tell the user and search engine the main content of this page, search engine can through the page title, quickly determine the theme of the page. The content of each page is different, each page should have a unique title.
6. Code comments for HTML
<!--comment text--
Second, recognize the label
1, semantic, so that your Web page is better understood by the search engine
Use of Tags: semantic, understand the purpose of each label,
1. More easily indexed by search engines.
2. It is easier for screen readers to read the page content.
2. <body> Label
The content displayed on the Web page is placed here
3. <p> Label
Add a paragraph
<p> The default style of the tag, there will be blank after paragraph, if you do not like the blank, you can use CSS style to delete or change it.
4. Add title, 6, H1, H2, H3, H4, H5, H6
5, <strong> and <em> tags
Add Accent tone:<em> default italic means,<strong> in bold
<em> text to emphasize </em>
<strong> text to emphasize </strong>
6. <span> Label
Set individual styles for text:<span> text </span>
Compare with Em/strong
1. <em> and <strong> tags are used in order to emphasize keywords in a passage, and their semantics are emphasized.
2. The <span> tag is not semantic, and its function is to set up a separate style.
7. <q> Label
Short text Reference:<q> quote </q>
1. "Butterfly Dream is a mystery to butterflies. Hope Emperor hath The cuckoo. "This is a verse, from the late Tang Dynasty poet Li Shangyin's" Jin Joseph. " Because it is not the author's own text, you need to use <q></q> to implement the reference.
2. Note that the text you want to reference does not have double quotes, and the browser automatically adds double quotes to the Q tag.
Note: The real key to the <q> tag is not its default style double quotation marks (if so we do not have to enter double quotation marks on the keyboard), but its semantics: quote others.
8. <blockquote> Label
Long text reference:<blockquote> reference text </blockquote>
Browser parsing of <blockquote> tags is indented style
9. <br> Label
Display text on a branch: function equivalent to carriage return in a Word document
xhtml1.0 notation:
<br/>
html4.01 notation:
<br>
It is not useful to enter a carriage return or a space in the HTML code. If you want to enter a carriage return in HTML text, you must enter <br/>.
10.
Space
11. Add a horizontal Dash
html4.01 version xhtml1.0 version 1. The 2. 12. <address> Label
Add address information
<address> address information </address>: The style displayed on the browser is italic
13. Code Tag
Add a line of code
<code> Code Language </code>
Note: If you have multiple lines of code, you can use the <pre> tab.
14. Pre Tag
<pre> Language Code Snippets </pre>
<pre> tag's main role: pre-formatted text. Text that is enclosed in the pre element usually retains spaces and line breaks.
Note that the:<pre> tag is not only used to display the computer's source code, it can be used when you need to pre-display the format in the Web page, but a common application of the <pre> tag is to show the source of the computer.
1. UL label
Ul-li is a list of information that has no back-and-forth order.
<ul>
<li>....</li>
</ul>
2. OL label
There are sequence tables to show
<ol>
<li>...</li>
</ol>
Each <li> comes with a serial number, the default starting from 1
3, div tags in the role of typesetting
Some independent logic can be divided into a <div> tag, and the <div> tag acts as a container.
<div>...</div>
4. Name Div
<div id= "section name" >...</div>
5. Table Label
Create four elements of a table: table, tbody, tr, TH, TD
1, <table>...</table>: The entire table starts with <table> marks, </table> marks the end.
2, <tbody>...</tbody>: When the table content is very long, the form will download a little bit, but if the <tbody> tag is added, the form will be displayed after all the contents of the table have been downloaded. Code in the right-hand code editor.
3, <tr>...</tr>: One row of the table, so there are several pairs of TR tables.
4, <td>...</td>: A cell in a table with several pairs of <td>...</td> in one row, and a few columns in a row.
5, <th>...</th>: A cell in the head of a table, table header.
6, the number of columns in the table, depending on the number of data cells in a row.
1, table table before adding CSS style, in the browser display is no table line
2, the table header, that is, the text in the th tag is bold by default and centered
6. Caption label
Table or you need to add some tags to optimize, you can add titles and summaries.
Summary: The content is not displayed in the browser. Its role is to increase the readability of the table (semantic), so that the search engine to better understand the table content, but also to enable screen readers to better help special users to read the table content. <table summary= "form brief text" >
Title: Used to describe the contents of a table, where the caption is displayed: above the table. :<caption> between <table> and <tr> title text </caption>
1. <a> Label
<a href= "Destination url" title= "mouse over displayed text" > link displayed text </a>
The Title property, which displays the text content of this property when the mouse slides over the linked text. This property in the actual web page Development role is very large, the main convenience of the search engine to understand the content of the link address (more semantic-friendly)
2. Open the link in the new browser window
<a href= "Destination url" target= "_blank" >click here!</a>
3. Use mailto to link the email address in the Web page
<a> tags also have a role to be able to link email addresses, using mailto to make it easy for visitors to send e-mail to the website manager
Note: If there are multiple parameters at the same time behind the mailto, the first parameter must be "?" At the beginning, each of the following parameters is separated by "&".
Email Address: mailto:
CC Address: cc=
BCC Address: yy=
Multiple recipients, CC, BCC (;)
Message Subject: subject=
Message content: body=
4. tag, insert Picture
1, SRC: Identify the location of the image;
2, alt: Specify the descriptive text of the image, when the image is not visible (when the download is unsuccessful), you can see the text specified by the attribute;
3. Title: Provides a description of the image when the image is visible (the text displayed when the mouse slides over the picture);
4. The image can be an image file in gif,png,jpeg format.
Third, the form label = + with the browser interaction
1. Use form labels to interact with users
<form method= "transfer Mode" action= "Server File" >
1.<form>:<form> label is in pairs appear, start with <form>, end with </form>.
2.action: Where the data entered by the browser is transmitted, such as a PHP page (save.php).
3.method: The way data is transmitted (Get/post).
Attention:
1. All form controls (text boxes, text fields, buttons, radio boxes, checkboxes, and so on) must be placed between the <form></form> tags (otherwise the information entered by the user cannot be submitted to the server!). ）。
2. Text input box, password input box
<form>
<input type= "Text/password" name= "name" value= "text"/>
</form>
1. Type
When type= "text", the input box is a text input box;
When type= "password", the input box is the password input box.
2, Name: For the text box name, in case the background program ASP, PHP use.
3. Value: Prompt action
3. Text field (multiple lines of text input)
<textarea rows= "Number of rows" cols= "columns" > Text </textarea>
1, <textarea> tags are in pairs appear, start with <textarea>, to </textarea> end.
2. Cols: Number of columns in a multiline input field.
3. Rows: Number of rows in the input field.
4. You can enter a default value between <textarea></textarea> tags.
4. Radio box, check box
Options in the Radio box users can only select one item
check box allows the user to select any number of items, or even choose all
<input type= "Radio/checkbox" value= "value" name= "name" checked= "Checked"/>
Radio: Radio
CheckBox: Check
Value: Values submitted to the server
Name: Control naming
Checked: When set to checked, this option is selected by default
Note: The same group of radio buttons, name values must be consistent, so that the same group of radio buttons can play the role of radio.
5. Drop-down list
<option value = "Values submitted to Server" > values displayed </option>
Selected: There is a setting that is selected by default
6, drop-down list multi-select
<select multiple= "multiple" >
<option value = "Values submitted to Server" > values displayed </option>
</select>
By setting the multiple= "multiple" property in the <select> tab, you can select multiple options by pressing CTRL while multiple selection is enabled.
7. Submit button
<input type= "Submit" value= "Submission" >
The button is submitted only when the type value is submit, and value is the text displayed on the button.
8. Reset button
<input type= "reset" value= "reset" >
The button is reset only if the type value is set to reset, and value is the text displayed on the button
9. Label labels in form forms
Label labels do not present any special effects to the user, it is useful for improving usability for mouse users
If you click on the text within the label tag, the control is triggered. That is, when the user clicks the label label, the browser automatically shifts focus to the label-related form control (automatically selected on the form control associated with the label label).
<label for= "Control ID Name" >
Note: The value in the for property of the label should be the same as the value of the associated control's ID property.
Revisit the common label collation of HTML
