This week I started H5 's study, and in this week we started with the basic HTML tag, and then I'm going to take a note of what I learned this week about H5.
The first is declaring the document, declaring that the document type is a HTML5 file, which is essential in the HTML document and must be placed on the first line of the document.
Wording:<! DOCTYPE html>.
We then learned the basic structure of HTML:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<body>
</body>
After that, we learned about some of the tags in head, including meta tags and link tags, and here's what they look for:
"META" tag
1.charest properties: Use alone to set the document character set encoding format
Wording: <meta charest= "UTF-8" >
Common Chinese encoding format:
GB-2312: GB code, Simplified Chinese.
GBK: Extended GB code, Simplified Chinese.
UTF-8: Universal code, Unicode code, basically compatible with national languages.
2.http-equiv property: Use with the Content property. The main statement is how the browser interprets the compiled file.
notation: <meta http-qeuiv= "attribute value" content= "attribute value Details" >
Common property values: The document content encoding declaration before Content-type HTML4.01.
Refresh page refreshes Set-cookie settings browser cookie Cache
3.name Properties: Use with the Content property. It is mainly used to provide necessary information to search engines.
notation: <meta name= "attribute value" content= "attribute value Details" >
Important Attribute values:
Author author, the author of the famous website, is said to be the common company website.
Keywords website keywords, multiple keywords are separated by commas.
Description page description, search engine under Title description content
The HTTP-QEUIV and name properties must be used in conjunction with the content property. The first two are only used to declare those property values that are about to be modified, while the actual properties
Values, described in content.
Cases:
<meta name= "Author" content= "http://www.jredu100.com"/>
<meta name= "keywords" content= "HTML5, Web, web front-end development"/>
<meta name= "description" content= "This is my first page in Jerry Education development"/>
<meta http-equiv= "Set-cookie" content= "Mmmmmmmmmmmmmmmmmmmm"/>
<meta charset= "UTF-8" >
"Link Tag"
1. Function: Used to link various files for Web pages.
2. Common Properties:
Rel: Used to indicate the relationship between the connected file and the current file.
Type: Indicates what kind of file is being connected. can be omitted.
HREF: Indicates the address of the connection file.
Example:<link rel= "icon" type= "Image/x-icon" href= "Img/qq.png"/>
Next we learned the line-level tags and block-level tags in HTML below are their basic content:
"Tag Classification for HTML"
1. Block-level Tags: wrap, front and back row.
2. Row-level Labels: display by row.
Whether line wrapping is an important indicator of our decision on block-level labeling.
[Common block-level tags]
Title Tags Horizontal Paragraphs <p></p> paragraphs
Line break <br/>
Reference <blockquote></blockquote > indicates that the text in the label is the referenced content, the browser appears as a width font, and is indented. The Cite property indicates the source of the reference and is typically the URL of the referenced URL.
Pre-format <pre></pre> format Tags: browser parsing will be displayed in the same width font, and the space inside the label and carriage return, to preserve the original code format.
Next we learned about four kinds of lists: Ol,ul,dl,figure.
"Common row-level labels"
span (text) span (text): Used to wrap a portion of text and make changes to a specific style.
IMG (image)
EM (emphasis) EM (emphasis) the browser appears as italic.
Strong (emphasis) strong (emphasis) the browser appears bold.
Q (short reference) Q (short Reference): Commonly used with a quote from a sentence, the Cite property represents the source of the reference, and the browser parses a double quotation mark before and after the content.
A (HYPERLINK)
I (tilt) I (tilt)
B (bold) B (bold)
Small (shrink font)
[The difference between strong/em/b/i tags]
Both 1.em and strong emphasize that the emphasis of strong is greater than that of em,strong and EM tags, which can be expressed in multiple layers of nested increments.
2. Both em and I can tilt, strong and B can be bold, but strong and EM have more emphasis on semantics that can help search engines crawl websites quickly
Focus. And HTML5 requires developers to implement the semantics of the code as much as possible.
Small (shrink font): Small tags can be nested multiple layers, representing a smaller number than the default font until the minimum number
Big (enlarged font): Same as small, until Max number.
However, in the latest specification, small and big tags are deprecated, advocating the use of style= "FONT-SIZE:XXPX;" CSS style instead.
IMG (Picture label)
1.src Property: Represents the picture reference path.
Common path notation
(1). Relative path:
. When the picture is on the next level of the file: folder name/Picture Name Example Img/abc.jpg
. When the picture is on the same level as the current file: write the picture name src= "Abc.jpg"
. When the picture is on the top level of the current file: ... /(Multiple layers: /) Picture name src= ". /abc.jpg "
When using a relative path, the outermost layer of the picture can only be placed in the Web site root directory (must be within the project folder).
(2). Absolute path: notation flie:///e:/xxx. PNG, but it is strictly forbidden.
(3). Network connection: Direct use of the picture's network address, but because the picture is on someone else's server, is not controllable. It is not recommended.
2.title: Picture title. When the mouse pointer is displayed on the text.
3.alt: The text that appears when the picture cannot be loaded.
4.width/height: Width of the picture, height. Equivalent to the style= in CSS "WIDTH:PX; height:px;"
5.align: The text around the picture is arranged in relation to the picture. Optional Top/center/bottom.
Hyperlink a
1.href property: The hyperlink's jump address, which can be written to the relative path of the network connection or local HTML file, determined in the same way as the IMG src path.
2.title: The text that appears after the mouse is pointed.
3.target: Sets the location of the Hyperlink open window _self on its own page (default) _blank opens in a new page.
4.rel: Indicates the relationship between the page that is about to jump and the current page
rel= "prev" The page that is about to jump is the previous article in the current page. The page that
rel= "Next" is about to jump is the next article in the current page.
rel= "prefetch" preload to pre-load the page that will jump after the current document is loaded.
Functional Link: mailto://[email protected] e-mail
tencent://message/?uin=1244579948 QQ message
"anchor connection"
(1) Anchor link on this page
1. Set an anchor example: <a name= "Top" ></a> "name" for anchor names
2. Use #name to jump to the specified anchor position in the href attribute of the hyperlink
<a href= "#top" > This is a hyperlink </a>
(2) other page anchor link
1. Set the anchor link on the page where you want to jump
2. Enter the file name in the hyperlink href attribute. Html#name
Note: As a result of Google, IE compatibility problem, need to insert a space in the anchor point To take effect.
<a href= "http://www.baidu.com" title= "mouse refers to the text displayed after" target= "_blank" > This is a hyperlink </a>
<a href= "Mailto://[email protected]" target= "_blank" > This is a hyperlink </a>
<a href= "tencent://message/?uin=1244579948" target= "_self" > This is a hyperlink </a>
<a href= "#top" > This is a hyperlink </a>
S error text: Strikethrough.
Cite tags: browsers are displayed as oblique, often used in books, paintings, works of reference.
Code: simply represents the computer's codes. However, the browser will only display equal-width fonts and will not retain the code format, which should be used with the pre tag.
Knowledge of the table:
"Form table"
Forms <table></table>
Rows of the table <tr></tr>
Columns for tables <td></td>
Table Header column <th></th> (change the TD in TR to th to indicate this behavior table header)
Th default bold and centered on cells
"Table's Common Properties"
1.border: The Border property of the table, when the border is set with border, the border is nested on all TD and table, when border
When enlarged, only the outermost border of the table is bold, and the box line on the TD cell does not change.
2.Cellspacing: The gap between cell and cell, when cellspacing= "0", the cell gap is 0 but the border line is not merged,
is still two articles. (The wording of the merged border style= "Border-collapse:collapse;" You do not need to set cellspacing after using border merge.)
3.Cellpadding: The cell padding, the relationship between the text in the cell and the cell border.
4.width/height: The width height of the table.
5.Align: Sets the alignment of the table in the parent container: left/center/right.
Note: When the table uses the Align property, it is equivalent to floating the table, which may cause elements behind the table to be affected, causing the layout to be garbled. 】
6.Bgcolor: Background color.
7.Background: Background image, followed by a relative path, when the background and back colors are in effect, the background map will cover the back color.
8.Bordercolor: Border color.
"Properties of TR and td,th"
When a table property conflicts with a row and column property, the row and column properties prevail.
property setting Priority: Td>tr>table.
1.width/height: Sets the width and height of the column to a single row.
2.bgcolor: Background color.
3.align: Sets the horizontal alignment of the text in a cell in a cell: Left/right/center.
4.valign: Sets the vertical alignment of the text in a cell in a cell: Top/center/bottom.
5.nowrap:nowrap= "nowrap" sets the cell text line at the end of the line is not wrapped.
Cross-row and cross-columns of tables
1. Cross-column colspan, a cell across N columns, n-1 TD on the right side of this cell is not required.
1. Cross-line rowspan, a cell across n rows is not required n-1 TD below this cell.
A simple example of a table:
<table width= "border=" 5 "cellspacing="
style= "Border-collapse:collapse;" Cellpadding= "Ten"
align= "center" bgcolor= "Burlywood" background= "Img/qq.png"
bordercolor= "Red" >
<tr bgcolor= "Blue" >
<th width= "background=". /new Folder/7.jpg "> first column </th>
<th> second column </th>
<th> third column </th>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
Knowledge of the form:
"Form form"
1. Two important attributes:
Action: The server address required by the form
Method: How to use the form submission data, Get/post
The difference between get and post:
(1). Get parameter is passed by URL, all parameters are visible in the address bar, unsafe, passing parameters are limited;
(2). The post parameter is more secure using HTTP request delivery, and post can pass a large amount of data;
(3). Get requests have a faster transfer rate than post.
URL Parameter form: Link URL address? name1=value1&name2=value2
Common Properties for 2.input:
(1). Type: Sets the input type for inputs.
(2). Name: Name the input box, in general the name attribute is required. Because Name=value is used when passing data
In the form of (input content).
(3). Value:input The default value of the input box.
(4). Placeholder: The prompt content of the input box, when input has the default value or input value, placeholder disappears.
The common property value of the 3.input-type property.
(1). Text: Input box.
(2). Password: Password input box, the input content by default is a small black dot.
(3). Radio: Radio box/checkbox: check box
When using Radio/checkbox, the Value property is required, and the default value in value is submitted when committed.
Radio/checkbox by using the Name property to determine whether they belong to the same group, name is the same group, and only one is selected.
Use the checked= "checked" property to set the default check.
(4). File: Uploading Files
Use accept= "type" to set the file types that can only be uploaded, image/*: All picture types.
(5). Submit: Submit button to commit all form data to the backend server.
(6). Reset: Resets the form data and restores the form data to the default state.
(7). Image: The graphics submit button, like submit, has the form submission function.
Select picture path with SRC attribute
(8). Button: Normal button, useless.
4. Case of Property name = property value
(1). checked= "Checked": Sets the default check for radio or checkbox.
(2). multiple= "multiple": Set the Select control to multi-select, you can use CTRL + mouse in the interface to make multiple selections.
(3). selected= "Selected": Sets the option option for the Select control, which is selected by default.
(4). readonly= "ReadOnly": Set to read-only mode, do not allow editing. Sets the textarea document as read-only.
(5). disabled= "Disabled": disables the control when input is disabled and the name and value of the input cannot be passed to the background.
(6). hidden= "hidden": Hide control, equivalent to <input type= "hidden"/>
5. Drop-Down selection control: Select
① notation:<select>
<option></option>//can have more than n
</select>
②name attribute, should be written on <select>, all options have only one name
③multiple= "Multiple" settings select control is multi-select, you can use CTRL + mouse in the interface for multiple selection. Generally not.
④option Common Properties:
Value= "": When option does not have the value attribute, the text in the <option></option> tag is passed back to the table;
When option has the Value property, the value of the values property is passed back to the table.
Title= "": The text that appears after the mouse is pointed.
Selected= "selected": Selected by default.
⑤<optgroup label= "Shandong Province" ></optgroup>: For grouping option labels, the Label property represents the group name.
6. "Text field textarea"
① notation:<textarea></textarea>
② set wide style= "width:200px; height:150px: "Self has cols=" "rows=" "two properties, but not commonly used
③readonly= "ReadOnly" is set to read-only mode, and editing is not allowed.
④style= "Resize:none;" setting to wide height does not allow modification.
⑤style= "overflow:;" Sets how to handle text when it is out of range.
>>> can also set the horizontal vertical direction of the display by Overflow-x/overflow-y, respectively.
>>> common property values: Hidden text that is out of range, hidden cannot be displayed
Scroll scrolling is displayed regardless of the number of words
Auto automatically determines whether the scroll bar is displayed (default style) depending on how much text
7. The border and title of the table,
<form>
<fieldset> table Border
<legend></legend> table title
Various form elements
<fieldset>
</form>
Note: A form can have multiple borders plus headings
8.HTML5 Smart Form
(1). H5 adds the form property of input to the ID of the form, implementing input without putting it into the form tag,
can be submitted via the form.
<form id= "XX" >...</form>
<input .... form= "XX" >
(2). Add more than one type new property value. See table
(3). Add the properties of input:
Autocomplete: Set auto-complete function,
Depending on what you entered earlier, you are prompted for the part that is not entered at the next input.
Most browsers turn on by default,
Have on/off properties,
It is also the property of the form, which controls the auto-complete switch of the entire form but can be overridden individually on individual input.
Autofocus: Auto Get focus, autofocus= "Autofocus" the cursor position when you just opened the page.
Form: belongs to the form, same as (1).
Required: Required, required= "Required" setting required.
Pattern: Validates the mode of input, specifying the format of the entry, and later.
Placeholder: Hint.
Next is the content of the CSS, as follows:
Common selectors:
[Tag Selector]
1. Notation: HTML tag name {}.
2. Select all the corresponding HTML tags and modify their styles.
Category Selector Class Selector
1. Syntax:. Class Name {}
2. Call: Use class= "selector name" on HTML tags that need to be modified
3. The priority class selector is larger than the tag Selector. (When used as the same layer.) ）
Selector Naming conventions
1. Can only be letters, numbers, underscores the composition.
2. The beginning cannot be a number.
[ID selector]
1. Notation: #选择器名 {}.
2. Call: Use the id= "selector name" on the HTML tag where you want to modify the style.
3. The ID selector priority is higher than class at the same level.
The 4.id selector is unique, and the entire page cannot appear with the same name id!!!!
[Universal Selector]
1. Notation *{}.
2. Function: Select all the tags of HTML in the page.
3. Lowest priority.
[Descendant selector]
1. Notation Selector 1 Selector 2 ... Selector n{}
2 Effective rule: Selector 2 must be a descendant of selector 1, followed by the same.
[Descendant selector]
1. Selector 1> selector 2> Selector n
2. Effective rule: Selector 2 must be a direct descendant of selector 1
[Intersection selector]
1. Wording: Selector 1 selector 2 ... Selector n
2. Effective rule: All selectors must be met at the same time to take effect
[Set selector]
1. Wording: Selector 1, selector 2, ... Selector n
2. Rules of entry into force: Any selector can be fulfilled.
[Selector Priority]
1. Nearest principle, near priority.
2. When used as the same layer: Available weights calculation
Weight division: Tag Selector is 1
Class Selector 10
ID Selector 100
Row-level style sheet style= "" 1000
#ul. Il. Li2 li{} Priority Weight 121
Li. li1. Li2. lis2{} Priority Weight 31
#ul #li li{} priority weight 201
[Pseudo class Selector]
1. Wording: Selector Name: Pseudo-class State {}
Common Pseudo-class states:
Link: No Access status
Visited: Visited status
Hover: Mouse pointing up state
Active: Activates the selected state
Focus: Getting focused, very common in input
Note: Link and visited must be at the top of four states when the hyperlinks have more than four states at the same time.
Hover must be on active.
[four states of hyperlink style]
A:link
a:visited
A:hover
A:active
[Three ways to use CSS]
1. Inline style sheet: Use stly= "" directly in HTML tags;
Features: CSS code and HTML code are completely mixed together, not in line with the requirements of the separation of content and performance,
is not conducive to style reuse.
Priority: Highest.
2. Internal style sheet: use <style type= "Text/css" in The way reference.
Features: Separate CSS code and HTML code, but not completely separate CSS files from HTML files,
Not conducive to multiple page reuse styles
3. External style sheet: Write CSS code in the new CSS file with link tag links to import CSS files.
<link rel= "stylesheet" type= "Text/css" href= "Css/01-css.css"/>
Features: The complete separation of CSS and HTML facilitates style reuse and post-maintenance.
Color Common Units
Hex: #ffffff
Color Name: Red
RGB color: rgb (255,255,255)
RGBA: Fourth digit for transparency, selectable value 0-1
[CSS common text Properties]
1. Font, size:
Font-weight: Font weight, optional attribute: bold bold Lighter fine 100~900 value (400 normal, bold)
Font-size: Font size **px **% (percentage of browser default font size, most default 16px)
font-family: Font family, set font.
>>> multiple font styles are separated by commas, and when the browser resolves it, it parses from left to right, selecting the available fonts.
>>> typically uses a font name in front of it, and the last one uses the race name.
(Common font family name: Liner body Serif non-liner body sans-serif (common) and other wide body monospace)
>>> For example: font-family:arial, ' Microsoft Yahei ', Sans-serif;
Font-style: Font style, normal italic (italic)
Font-variant:small-caps; Converts a letter to a small uppercase font.
(understanding) Font abbreviations: Font-style font-variant font-weight font-size/line-height font-family
>>> Usage Precautions:
① order must be in strict accordance with the above order;
② multiple styles separated by spaces, and font-size/line-height must be used as a pair/split
③font-size and font-family must be specified, other styles not specified will be displayed with the default style;
>>> Example: font:italic bold 75%/1.8 ' Microsoft Yahei ', Sans-serif;
Italic bold font/line height font family (Microsoft Ya-Black, non-liner font family)
2. Font Color:
Color: Font Color
Opacity: The number between transparency, 0~1. Controls and child controls are transparent when adjusted, and when used with RGBA adjustments, only when the control is transparent, the child controls do not change transparency.
3, line spacing, alignment, etc.:
Line-height: Row height ① pixel unit 48px② no px normal line height multiples ③ percent same 2
>>> Typical application, adjust the control vertically centered way: The line-height of the control's height= control
Text-align: Horizontal alignment of row-level elements in block-level elements left center right
Letter-spacing: Character spacing, spacing between words
Text-decoration: Text modifier underline underline, strikethrough line-through, underline overline, none
Overflow: Controls how text is displayed out of range (auto shows scroll bars based on text, scroll always displays scrollbars, hidden out-of-range text hiding) can be set horizontally vertically by Overflow-x overflow-y
Text-overflow: Set the display of extra text clip cut out ellipsis ellipsis
>>> "Focus" lets the extra text in each line display an ellipsis:
①white-space:nowrap; If it is Chinese, you need to set the line at the end.
②overflow:hidden; Setting controls out of range hiding
③text-overflow:ellipsis; Set extra text ellipsis display
White-space:nowrap; Set line at the end of the row display
Word-break: The browser breaks lines by default in a space, and when a word is out of range, it is continuously displayed, and Break-all allows wrapping within the word.
Text-shadow: Text shadow with four attribute values:
① horizontal shadow distance required, the greater the value, the shadow right shift
② vertical Shadow distance required, the greater the value, the shadow moves down
③ shadow blur distance is optional, the larger the value, the more blurred the shadow. Default is 0, no blur
④ shadow color optional, default to Black
Text-indent: First line indent, adjustable indent size with pixel values available
Text-stroke:-webkit-text-stroke:0.2px #008000; Thickness of stroke, color of stroke
float: Floating right, left, center is the list item horizontal display
"CSS Common background Properties"
Background
Background-color: Background color
Background-image: Background map, background-image:url (image address relative path), background map will overwrite background color when back color is present.
Background-repeat: Background image repetition, no-repeat uneven repeat tile (default) repeat-x horizontal tile repeat-y Vertical Tile
Background-size: The size of the background map.
"Specify width height"
>>> width height, the first property value is width, the second property value is height, you can: ① Direct write pixel ② write percentage (percentage of parent container width height)
>>> when there is only one property value, the default is width. Height equal to zoom.
When there are two attribute values, the compression/stretch display is performed at the specified height width.
"Other property values"
>>> contain: Picture is scaled to one side of width or height equal to the width of the parent container, and the other side is scaled by the size of the picture (which may cause some spare areas to be overwritten)
>>> cover: Picture is scaled so that the background image completely covers the background area. (May cause some areas of the background map to not display)
Background-position: Position coordinates, offset
>>> designated location: Left/center/right Top/center/bottom
When only one property value is written, the other is centered by default
>>> fill in coordinates: Horizontal position vertical position (in pixels or percentages)
① when you write only one property value, the default write is horizontal, then center vertically
② when working with pixels: the actual distance that the upper-left corner of the picture moves in all directions
Horizontal: Positive number right shift negative shift left vertical method: Positive move negative shift up
(the left side bears positive negative positive)
③ when a percentage is used, it is generally only a positive number. Represents the distribution ratio of the remaining white space after the picture is removed. e.g. background-position:30%; After the picture is removed horizontally, the remaining area is 3:7 points
This is the H5 knowledge I learned this week and I will continue to work hard next week.
2017.3.12 H5 first week of learning
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
