1.1 Understanding Web Pages
- Explanation: Web pages are mainly composed of text, images and hyperlinks. In addition to these elements, Web pages can also contain audio, video, and so on.
A web page is shown in the following image:
Behind a web page are lines of code
1.2 Browser (Display Code)
-
Explanation: Browser is a platform for web page display and operation.
-
Common browsers are IE, Firefox, Chrome, Safari and Opera (commonly referred to as the five browsers).
-
Common Browser Kernels
Explanation: The browser kernel (Rendering Engine), which has many Chinese translations, such as typesetting engine, interpreting engine, rendering engine, is now universally known as the browser kernel.
-
1.3 Web Standard
-
Explanation: Web standards are not a single standard, but a collection of standards developed by the W3C organization (W3C World Wide Web Consortium is the most famous international standardization organization) and other standardization organizations.
-
constitute
It mainly includes three aspects: structure, Presentation and Behavior.
Advantage
- Make the Web a broader prospect
- Content can be accessed by a wider range of devices
- Easier to search by search engine
- Reduce site traffic charges
- Make your site easier to maintain
- Increase Page Browsing Speed
2.1 Concepts
- HTML refers to Hyper Text Markup Language, a language used to describe Web pages.
- HTML is not a programming language, but a markup language
- Markup language is a set of markup tags
Hypertext refers to two levels of meaning
- Because it can include pictures, sounds, animations, multimedia and more (beyond text limits).
- It can also jump from one file to another and connect to files (hyperlink text) from hosts around the world.
2.2 HTML skeleton Tags
- HTML has its own language grammar skeleton format
<html> <head> <title></title> </head> <body></body> </html>Label NameDefinitionExplain<html></html>HTML TagsThe largest label on the page, the root label<head></head>Header of documentNote that the tag we have to set in the head er tag is title<title></title>Title of the documentMake a page have its own page title<body></body>The body of the documentThe element contains all the contents of the document, and the page content is basically placed inside the body
Note: HTMl tag names, class names, tag attributes, and most attribute values are all lowercase, and uppercase is not recommended.
2.3 HTML element tag classification
- General element (double label)
format: <Label Name> content </Label Name> such as: <body></body> Explain: 1. In this grammar <Label Name> Indicates the beginning of the tag's action, commonly referred to as"Start label(start tag)","</Label Name>"Indicates the end of the label's function, commonly referred to as"End label(end tag)". 2. The end tag is preceded by a closer than the start tag"/".
- Empty element (single label)
format: <Label Name/> such as: <br /> Represents a line break Explain: 1. Empty elements are represented by a single label, which simply means there is no need to include content, only a start label that does not need to be closed.
2.4 HTML tag relationships
- Nested relationships (parent-child relationships)
such as: <head> <title></title> </head>
- Side by side (brotherhood)
such as: <head></head> <body></body>
Be careful:
- If the relationship between two tags is nested, it is best for child elements to indent the identity of a tab key (a tab is four spaces)
- If it's a side-by-side relationship, it's best to align up and down
2.5 Document Type<!DOCTYPE>
- usage
<!DOCTYPE html>
- Effect
The declaration is at the top of the document, before the tag, which tells the browser which HTML or XHTML specification to use in the document, that is, to tell the browser to parse the page according to the HTML5 specification.
2.6 Page Language lang
Two of the most common: 1. en Define language as English 2. zh-CN Define language as Chinese Give an example: <html lang="en"> Appoint html Language Types Be careful: Considering browser and operating system compatibility, still in use zh-CN Attribute Value
2.7 Character Set
-
Character set is a collection of multiple characters
-
To accurately process all kinds of character set text, a character encoding is required so that the computer can recognize and store all kinds of text.
Give an example: <meta chaset="UTF-8" /> utf-8 At present, the most commonly used character set encoding methods are also used. gbk and gb2312 1. gb2312 Simple Chinese includes 6763 Chinese characters GUO BIAO 2. BIG5 Traditional Chinese for Hong Kong, Macao, Taiwan, etc. 3. GBK Contains all Chinese characters, yes GB2312 Extension to add support for traditional characters, compatibility GB2312 4. UTF-8 It basically contains characters that all countries around the world need to use
Semanticization of 2.8 HTML Tags
-
What does that mean?
A: refers to the meaning of labels
Advantage: 1. Convenient code reading and maintenance 2. Also allow browsers or web crawlers to parse a lot to better analyze their content 3. Better search engine optimization with semantic tags3. Common HTML Tags
HTML language, mainly learn structure, know what labels are for, add style what we mainly use CSS language
3.1 Labels for Layout
-
Explanation: Layout labels are mainly used in combination with css, which shows the structure of the web page and is the most commonly used label for page layout.
-
Title Label h
Explain: To make a web page more semantic, we often use header tags in our pages. HTML Provides six levels of titles, namely title tag semantics: Used as a title and decreases in importance. format: <h1> Title Content Level 1 </h1> <h2> Secondary Title Title Content </h2> <h3> Title Content of Level 3 Title </h3> <h4> Title Content Level 4 </h4> <h5> Title Content Level 5 </h5> <h6> Title Content Level 6 </h6> Be careful: Only one heading per line
The results are as follows:
- Paragraph Label p
Explain: Word spelling: paragraph Effect: 1. Split text into paragraphs 2. Text wraps automatically in a paragraph based on the size of the browser window format: <p></p>
- Horizontal Label hr
Explain: Word spelling: horizontal It is a single label Effect: 1. Create a horizontal line across a Web page 2. Separate Paragraphs from Paragraphs 3. Make the document clear and hierarchical format: <hr />
The results are as follows:
- Line break label br
Explain: Word spelling: break Chinese means interruption, line break It is a single label Effect: Force Line Break <br />
- div and span Tags
Explain: Word spelling: division Chinese means split, partition span It means span, span, range. Effect: 1. div and span Tags are the two main boxes in our web layout Be careful: 1. div Only one label per line div 2. span You can put many labels on one line span
3.2 Text Formatting Labels
- Explanation: When developing web pages, sometimes bold, italic, underline, and strikethrough effects are needed for text, and text formatting tags are used to display them.
3.3 Label Properties
Explain: 1. When making a web page, if you want to HTML Labels provide more information on setting properties 2. The so-called attribute is the exterior characteristic and the feature of a thing format: <Tag name property 1="Attribute Value 1" Attribute 2="Attribute Value 2">content</Label Name> Give an example: A mobile phone, its color is black and size is 8 inches <Mobile phone color="black" size="8 inch"> </Mobile phone>
3.4 Image Label img
Explain: Word spelling: image Chinese means image Effect: Insert Picture format: <img src="image URL" width="Attribute Value" height="Attribute Value" /> Be careful: 1. In this grammar src The property specifies the path and file name of the image file, which is img Required properties of labels 2. Tags can have multiple attributes and must be written in the start tag, after the tag name 3. Attributes are sequential, and tag names are separated by spaces from attributes, attributes from attributes 4. Take the form of key-value pairs key="value" Format ofattributeAttribute ValuedescribesrcURLPath to imagealttextReplacement text when picture cannot be displayedtitletextContent displayed when the mouse hoverswidthPixels (XHTML does not support% page percentage)Set the width of the imageheightPixels (XHTML does not support% page percentage)Set the height of the imagebordernumberSet the width of the image border
3.5 Link Labels
Explain: 1. Word spelling: anchor Anchor in Chinese 2. To create a hyperlink, just wrap the text in labels format: <a href="Jump Target" target="Pop-up mode of target window">Text or Image</a> Be careful: 1. External links require the following: https://www.baidu.com/ 2. An internal link simply writes the internal page name, such as: <a href="index.html"></a> 3. If you want to define an empty link,<a href="#"></a> 4. You can also add hyperlinks to various page elements in a Web page, such as:Images, tables, audio, video,The most common is text hyperlinks.
3.6 Comment Labels
Explain: The comment content will not appear in the browser window, but it will also be stored in the user's computer memory address, which you can see when you look at the source code Effect: 1. Comments are human-readable so that you can better understand what this part of the code does 2. Commonly used for simple descriptions, such as some status descriptions, attribute descriptions, and so on format: <!-- Note Content --> Shortcut keys: ctrl + / perhaps ctrl + shift + / Be careful: Recommended comments are placed on top of the code that needs to be commented, on a separate line
3.7 Path
Explain: 1. In practice, our files can't be placed in random order to be difficult to find, so we need a folder to manage them 2. A catalog folder; a regular folder that stores the relevant files and materials we need to make our pages, such as: html Files, pictures, etc. 3. Root directory; the first level of opening a directory folder is the root directory. When we make pages that require a lot of pictures, we usually create a new folder to store them. When inserting pictures, we need to use a "path" to get the location of the picture files. 4. Path is divided into relative path and absolute path
- Relative Path
- Absolute path
Explain:Absolute path to Web Directory path with site root as reference base format: "D:Web\imgs\Cutie.jpg" Or a complete network address, such as: "https://imgtu.com/i/5paY5D" Be careful: Its writing, its symbols \ Not relative /4. Form table
Effect: 1. Common display and display of tabular data 2. Can make data display neat and readable
4.1 Create tables
Explain: 1. Mainly by table,tr,td These three pairs of labels, which are the core of creating tables, are indispensable 2. table Used to define a table label tr Labels are used to define rows in tables and must be nested within table In Label td(Word spelling:table data) Chinese means the content of a data cell, used to define cells in a table, must be nested in tr In Label 3. To summarize, a complete table is labeled by the table(table)，Row Label(tr)，Cell Label(td)Composition, no column labels, I understand myself to think of the cell label of the first row as the number of columns in the table. format: <!-- boder Is an attribute that means that the border of the table is 1 pixel and the default is 0 pixels(no border) --> <table border="1px"> <!-- first line --> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <!-- Second line --> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <!-- Third line --> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table>
The results are as follows:
4.2 Table Properties
Effect: The properties of a table are mainly used to style the tableProperty NameMeaningCommon attribute valuesborderSet the border of the table (default boder="0" has no border)pixel valuecellspacingSet the space between cells and cell bordersPixel value (default is 2 pixels)cellpaddingSet the space between cell contents and cell bordersPixel value (default is 1 pixel)widthSet the width of the tablepixel valueheightSet the height of the tablepixel valuealignSet the horizontal alignment of tables on a Web pageleft,center,right
As shown in the diagram:
4.3 Header Cell Label th
Effect: Normal header cells are in the first row or column of the table and the text is bold and centered format: <table border="1px"> <!-- First row header --> <tr> <th>Full name</th> <th>Gender</th> <th>Age</th> </tr> <!-- Second line --> <tr> <td>Xiao Ming</td> <td>male</td> <td>18</td> </tr> <!-- Third line --> <tr> <td>petty thief</td> <td>male</td> <td>20</td> </tr> <!-- Line 4 --> <tr> <td>Little Red</td> <td>female</td> <td>19</td> </tr> </table>
Design sketch:
4.4 Table Title caption
Explain: 1. caption The element defines the table title, which is usually centered and displayed above the table 2. caption Labels must follow closely table After label format: <table border="1px"> <!-- Table Title --> <caption>Information Table</caption> <!-- first line --> <tr> <th>Full name</th> <th>Gender</th> <th>Age</th> </tr> <!-- Second line --> <tr> <td>Xiao Ming</td> <td>male</td> <td>18</td> </tr> <tr> <td>petty thief</td> <td>male</td> <td>20</td> </tr> <!-- Third line --> <tr> <td>Little Red</td> <td>female</td> <td>19</td> </tr> </table>
The results are as follows:
4.5 Merge Cells
Explain: 1. Two ways 1) Cross-line merge: rowspan="Number of merged cells" 2) Merge across columns: colspan="Number of merged cells" 2. order 1) In order of top, bottom, left, right 3. Triple 1) First determine whether to merge across rows or columns 2) Find the target cell according to the principle of top, bottom, left, right, then write down the merge method and the number of cells to merge 3) Remove extra cells format: <table border="1px" width="300px" height="100px"> <!-- first line --> <tr> <td rowspan="3"></td> <td></td> <td></td> </tr> <!-- Second line --> <tr> <td colspan="2"></td> </tr> <!-- Third line --> <tr> <td></td> <td></td> </tr> </table>
The results are as follows:
4.6 Table Division Structure
Explain: For more complex tables, the structure of the table is relatively complex, so the table is divided into three parts, header, body, footnote, which can better distinguish the table structure 1) thead: Used to define the header of a table, for things like square headings, etc. It must have labels inside 2) tbody: Used to define the body of a table and place the data body 3) Place footnotes on tables, etc. format: <table border="1px"> <!-- Table Title --> <thead> <caption>Information Table</caption> </thead> <tbody> <!-- first line --> <tr> <th>Full name</th> <th>Gender</th> <th>Age</th> </tr> <!-- Second line --> <tr> <td>Xiao Ming</td> <td>male</td> <td>18</td> </tr> <tr> <td>petty thief</td> <td>male</td> <td>20</td> </tr> <!-- Third line --> <tr> <td>Little Red</td> <td>female</td> <td>19</td> </tr> </tbody> </table> Be careful: All the above labels are placed on the table In labels, footnotes are not often used, so there are no examples
The effect is the same, no change
5.1 Knowledge List
1. What is a list? answer: As previously described, tables are used to display data, so lists are used for layout because they are very neat and free 2. Summary: Containers are loaded with structures and one form of consistently styled text or charts is a list 3. Characteristic: The most important feature of the list is that it is neat, neat and orderly, and can be combined with a high degree of freedom.
5.2 Unordered Table ul
Explain: Unordered list items have no order level and are side by side format: <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> Be careful: 1. <ul> Labels can only be nested <li>，Directly in <ul> It is not allowed to enter other labels or text into a label. 2. <li>and</li>It is equivalent to a container between which all elements can be contained 3. An unordered list will have its own style properties
The results are as follows:
5.3 Ordered List
Explain: An ordered list is an ordered list whose items are defined in a certain order format: <ol> <li>I'm the boss</li> <li>I'm the second</li> <li>I'm the third</li> </ol>
The results are as follows:
5.4 Custom List
Explain: Commonly used for explaining and describing terms or nouns without any bullets before defining a list item in a list format: <dl> <dt>My hobbies</dt> <dd>Game</dd> <dd>Table Tennis</dd> <dd>Binge-watching</dd> <dt>My Favorite Star</dt> <dd>Hu Ge</dd> <dd>Lau Andy</dd> <dd>Own</dd> </dl>
The results are as follows:
5.5 Summary
Label NameDefinitionExplainulUnordered list labelIt can only contain LIS without orderolOrdered List LabelIt can only contain LIS in orderdlCustom ListThere are two brothers, dt and dd 6. Form Labels1. What is the form label? answer: We register QQ When filling in the information for each option at number, each option is made with a form label 2. Explain 1) The purpose of the form is to collect user information 2) A complete form is usually controlled by a form(Also called form element),Tip information and form fields are composed of three parts 3) Form controls contain specific form functions, such as single-line text input box, password input box, check box, submit button, reset button, and so on. 4) A form usually needs to contain some explanatory text to prompt the user to fill in and manipulate it 5) form field: Equivalent to a container that holds all form controls and prompt information and allows you to define the program used to process form data url Address, and how the data is submitted to the server. If you do not define a form field, the data in the form cannot be transferred to the back-end server
6.1 input control
Explain: 1. input Meaning of input 2. It is a single label 3. It has many properties format: <input type="Attribute Value" value="Hello">
Only a few common attributes are illustrated
attributeAttribute ValuedescribetypetextTextFieldpasswordPassword Input Boxradioradio buttoncheckboxcheckboxbuttonNormal ButtonsubmitSubmit buttonresetResetimageSubmit button as imagefileFile FieldsnameUser-definedControl NamevalueUser-definedDefault text value in input controlsizepositive integerThe display width of the input control on the pagecheckedcheckedDefine the items selected by default for the selection controlmaxlengthpositive integerMaximum number of characters allowed for input by the control- type attribute
Explain: 1. By changing the value of this property, you can decide which one to belong to input form 2. such as type="text" This means that the text box can be used as a user name, nickname, etc. 3. such as type="password" Is the password box, the user input is not visible Give an example: User name: <input type="text" /> Password: <input type="password" />
- Value attribute value
Explain: value This means displaying default text values Display the specified text by default when opening a Web page Give an example: User name: <input type="text" value="enter one user name" />
- name attribute
Explain: 1. name Means the name of the form 2. Mainly used to differentiate different forms 3. radio Radio button properties, which are often matched because radio If it's a group, you have to name it the same or it becomes a multi-choice Give an example: <input type="radio" name="sex" />male <input type="radio" name="sex" />female
The results are as follows:
- checked property
Explain: Represents the Definition Default State Give an example: <input type="radio" name="sex" checked="checked"/>male <input type="radio" name="sex" />female When I open the page, it will select the man first by default, so I don't put the picture anymore, just like the picture above, but the one I selected after I opened the page
6.2 label label
Explain: Used to bind a form element when clicking label When labeling, the bound form element gets input focus That is, Click label When text inside a label, the cursor will be positioned inside the specified form Two Writing Styles 1. use label Labels directly handle input Package the form <label>User name:<input type="text" value="enter one user name"/></label> 2. use label Of for Property specifies which form element to bind to. for Attribute values need to be associated with the form element's id Property values are the same <label for="name1">User name:</label> <input type="text" value="enter one user name" id="name1"/>
6.3 textarea Control (Text Field)
Effect: adopt textarea Control can easily create multi-line text input boxes format: <textarea>Text Content</textarea>
Text box and text field differences
formNameDifferenceDefault value displayFor scenes<input type="text" />Text BoxOnly one line of text can be displayedSingle label, show default value through valueUser name, nickname, passwordtextareaText FieldsCan display multiple lines of textDouble label, default value written in the middle of labelMessage Board6.4 select drop-down list
Explain: When there are multiple options for the user to choose from, use select control Advantage: Save space format: <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> Be careful: 1. <select> Include at least one pair in option 2. stay <option> Defined in selected="selected"When the current item is selected by default
The results are as follows:
6.5 form fields
Explain: 1. Used to define form fields, collect and pass user information, form All content in will be submitted to the server format: <form action="url address" method="Submission Method" name="name"> Various form controls </form> Be careful: Each form should have its own form field
Common properties:
attributeAttribute ValueEffectactionurl addressurl address to specify the server program that receives and processes form datamethodget/postUsed to set how form data is submitted, with a value of get or postFor a long time, more support is expected😊