HTML Basics
Note: the first chapter of the first stage of front-end learning is HTML basics
Website building process
- Registered domain name (website)
- Rented space
- Website construction
- Website promotion
- Website maintenance
Structure of web pages
- Structure (web page structure) - HTML
- Presentation (web page style) - CSS
- Behavior (user interaction behavior) - JavaScript
WEB Standard
WEB Standard is the standard of web page production. It is not a standard. It is a series of standards generated according to different components of web pages. Most of these standards are made up of W3C Drafted and issued, and some standards are also issued by ECMA Draft release
(1)W3C( World Wide Web Consortium )The World Wide Web Alliance, founded in 1994, is Web The most authoritative and influential international neutral technical standards organization in the field of technology; It is a non-profit organization specializing in the formulation of network standards. Structure standards and style standards are formulated; (2)ECMA: The European Federation of computer network operators (Manufacturers Association) has formulated standards of conduct;
HTML
HTML Refers to hypertext markup language (Hyper Text Markup Language) www Descriptive language of the World Wide Web(The grammar is not rigorous). XHTML Refers to Extensible HyperText Markup Language (markup language)( EXtensible HyperText Markup Language)Is a markup language, which is expressed in the same way as hypertext markup language( HTML)Similar, but more grammatical. HTML5 refer to HTML The fifth major revision of (version 5) WHATWG(Working group on Web Hypertext Application Technology)It is composed of oupeng, Firefox and apple browser manufacturers. The purpose is to promote the Internet HTML5 Standard.
HTML development
Establish site
Plan all content and code for the site Integrate resources code folder>html Folder css Folder js Folder index.html file
Naming conventions for files
- Combination of lowercase English letters, numbers and underscores,
- It shall not contain Chinese characters, spaces and special characters;
- Must start with an English letter.
HTML start
1:HTML schema
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> There are three:Strict(Strict type), Trasitional(Transition type) Frameset(Frame type)
2:HTML5 basic structure
3:HTML syntax
-
HTML language composition
- label
Written in the pointed horn<>The first word in is called tag, also called tag, also called element;
- attribute
Tags and attributes are separated by spaces, attributes and attribute values are connected by equal signs, and attribute values must be placed in double quotation marks A tag can have multiple attributes. Attributes and attributes are separated by spaces. Attributes are in no order
- label
-
HTML syntax
- General marking (double marking):
< tagName attribute 1 name = "attribute 1 value" attribute 2 name = "attribute 2 value"... > < / tagName > - Empty tag (single tag): < tagName attribute 1 = "attribute 1 value" / >
- General marking (double marking):
Common labels
1: Text title label
There are 6 text titles( h1-h6) <h1>Primary title</h1>(Uniqueness,Put website LOGO) <h2>Secondary title</h2> ... <h6>Six level title</h6>
2: Font Tilt & Bold mark
Text tilt: <i></i> <em></em> Text bold: <b></b> <strong></strong>
3: Underline & strikeout
<u></u> <s></s>
4: Wrap & horizontal
<br/> <hr/>
5: Superscript & subscript
<sup></sup> <sub></sub>
6: Paragraph marker
<p></p>
7: Characters (short text)
<span></span>
8: Common escape characters
Space > >Right angle bracket < <Left angle bracket © Copyright of icon in record ©
8: List
(1) Unordered list
<ul>
<li>List item content</li>
<li>List item content</li>
<li>List item content</li>
........
</ul>
(2) Ordered list
<ol>
<li>List item content</li>
<li>List item content</li>
<li>List item content</li>
........
</ol>
type:Specifies the type of bullet in the list Syntax:<ol type=" a"></ol> 1 Ordered list in numerical order (default) (1), 2, 3, 4). a Alphabetical ordered list, lowercase( a, b, c, d). A Alphabetical ordered list, uppercase( A,B,C,D) i Roman numerals, lowercase( i, ii, iii, iv). I Roman numerals, capital( i, ii, iii, iv). start Property specifies the starting point of the sequence table.(start The property value of must be a number) Syntax:<ol start="5"></ol>
(3) Custom list
<dl> <dt>noun</dt> <dd>Noun interpretation</dd> </dl>
9: Hyperlinks
<a></a> Properties: href = 'url' target = "_blank / _self(default)"; title = 'Text prompt' expand: rel = 'nofollow';
10: Picture
<img />
Properties:
src = 'url';
alt = ' The label instance has an image with the specified alternate text'
title = 'Text prompt'
width = ''
height = ''
border = ''
Difference between picture title and alt:
alt:
1,alt Attribute is to consider the users of browsers that do not support image display or whose image display is closed, as well as users with visual impairment and users using screen readers. When the picture is not displayed, the replacement text of the picture.
2,alt The length of the property value must be less than 100 English characters
3,alt Property is img The required attribute of the tag. If there is no picture of special significance, it can be written alt=""
4,alt Attribute is an important basis for search engines to judge whether images and words are related, alt Add attribute to img The main purpose is to SEO
title:
1,title Property is not required.
2,title Attribute specifies the additional information of the element, which has a visual effect. When the mouse is placed on the text or picture, the text is displayed.
3,title Attributes are not used as a reference for search engines to capture images, but are more inclined to consider user experience.
11: Relative path
(Same level) 1)When the current file and the target file are in the same directory, write the file name of the target file directly+Extension; (Superior to subordinate) 2)When the current file and the target file are located in the same directory, the writing method is as follows: Folder name/Full name of target file+Extension; (Subordinate to superior) 3)When the folder where the current file is located and the target file are in the same directory, the writing method is as follows: ../Destination file name+Extension;
12:DIV
13:HTML comments
html notes<!-- notes --> css notes /*notes*/
14:PS shortcut key
Change units to PX (pixels) edit – > preferences – > units and ruler – > cm to pixel
Measurement information display F8 or window – > information
Zoom in alt + mouse wheel
Move space of design draft + left mouse button
Bring up ruler view – > ruler
form
1: Table basic structure
<table> <tr>that 's ok <td></td>Cell <td></td> </tr> </table> <!-- table For table tr that 's ok td Columns (per cell) -->
2: html attributes of the table
1)width="Width of the table" 2)height="Height of table" 3)border="Table border" 4)bordercolor="Border color" 5)cellspacing="Spacing between cells" 6)cellpadding="Distance between cell and content" 7)align="Table horizontal alignment" Value: left,right,center, valign="Align vertically top\bottom\middle 8)Merge cell properties:(td) Merge columns: colspan="The number of columns of the cells to merge" Merge rows: rowspan="Number of rows of cells to merge
form
1: Form label
<form></form> attribute: action = 'Interface address' method = 'get / post' name = 'Form name'
2: Form control
<input> Properties: type = 'Control type' name: Attribute identifies the name of the form field; Value: Property defines the default value of the form field. Other properties are based on type Varies according to different. maxlength: Controls the maximum number of characters entered, Size: Controls the width of the box in characters
1)Text box <input type="text" value="Default value"/> 2)Password box <input type="password" /> 3)Submit button <input type="submit" value="Button content" /> 4)Reset button <input type="reset" value="Button content" /> 5)Empty button <input type="button" value="Button content" />
Extension: post/get request
- (1) Functionally, GET is generally used to obtain resources from the server, and POST is generally used to update resources on the server;
- (2) From the perspective of REST services, GET is idempotent, that is, when reading the same resource, you always GET the same data, while POST is not idempotent, because the changes to the resources are not the same every time you request; further, GET will not change the resources on the server, but POST will change the server resources;
- (3) From the request parameter form, the data of the GET request will be attached to the URL, that is, the request data will be placed in the request header of the HTTP message? Split the URL and transfer data, and the parameters are connected by &. In particular, if the data is English letters / numbers, it is sent as is; Otherwise, it will be encoded as an application/x-www-form-urlencoded MIME string (if it is a space, it will be converted to +; if it is a Chinese / other character, the string will be directly encrypted with BASE64, such as:% E4%BD%A0%E5%A5%BD, where XX in% XX is the ASCII represented by the symbol in hexadecimal); The POST request will place the submitted data in the request body of the HTTP request message.
- (4) In terms of security, the security of POST is higher than that of GET, because the data submitted by GET request will appear in plaintext on the URL, and the POST request parameters are wrapped in the request body, which is relatively safer.
- (5) In terms of the size of the request, the length of the GET request is limited by the browser or server's limit on the length of the URL, and the amount of data allowed to be sent is relatively small, while the POST request has no size limit.