Notes for Html/Css and notes for htmlcss

Notes for Html/Css and notes for htmlcss

 

1. What is HTML?

• HyperText Markup Language (HTML) is a HyperText Markup Language.
• Tag indicates how the webpage content is displayed, but it is not displayed. <I am marking>
• The tag appears in pairs, the content is placed in the middle, and the tag can be abbreviated. <Start tag> I am content </end tag> <I am a short tag/>
• The names and attributes of tags are generally included in the brackets.

<Tag Name property name = "attribute value"> content </Tag Name>

Abbreviated as <Tag Name property name = "attribute value"/>

<A> content </a> indicates that the content is the link text that can be clicked.

indicates that this is an image.

2. Structure of Html webpage files

• Html webpage files all use <! DOCTYPE html> Start
• Webpage content starts from

　　

• The webpage content consists of the header

　　

　　

Head can be placed with title and other information

　　

The content marked in the Body is displayed on the webpage.

　　

3. What can I put in the head mark?

• The title of the page <title> my webpage </title> is displayed on the tab card at the top of the browser page.
• Meta tag <meta> meta tag attributes can contain various information on the page.

Format: <meta property name = "attribute value"/> or <meta name = "attribute name" content = "attribute value"/>

• Page encoding <meta charset = "UTF-8"/> sets the page encoding mode to UTF-8 to ensure that the Chinese title is properly displayed.

　　

• Page author Information <meta name = "author" content = "Xiao Ming"/>
• Loading an external file <link rel = "icon" href = "image link"/> indicates that the image in the link will be used as a thumbnail of the title bar. Note that the image address can only be an image of your website.
• Other information
• Page Content
• Keyword
• Language of the page
• How to display pages on mobile devices
• Load other files (css js)

4. What does the Body mark defend against?

• The div container box <div> anything </div> is commonly used to divide pages into multiple frame tags. The whole page body is divided into multiple div container boxes.
• Img image

You can also add the following two attributes to set the image size width: width = "100" height = "200"

Alt = "if the image cannot be found, the text here will be displayed"

• Hyperlink a <a herf = "URL of the webpage to open"> text displayed </a>

To open the page in a new window, add target = "_ black"

• Input field <input type = "text"/>

Type can also be another type, such as the password box, displayed as a star number or checkbox check box

• Show more tags
• Span without line breaks
• Newline br
• Title from big to small h1 ~ H6
• Section label p
• Ordered list ol and unordered list ul

4. What is CSS?

The Learning name of CSS (Cascading Style Sheet) is a stacked Style sheet.

• Style style <div Style = "background: red"> text </div>

Style Description: how to display the marked content, such as the color and background of the element, front-size, and border) position and margin (margin and padding.

Styles can be written in html tag attributes. <style = "style name: style value; style name: style value"/>

5. CSS selector to change the style of Multiple Elements

• Selector
  • The selector Selects all elements (tag pairs) that comply with a rule.

These rules can be:

• • • All are the same type of tags, such as div
    • Tags with the same attribute name or attribute value
  • The CSS selector can be written in the <style> </style> mark. The format is as follows:

　　　　　　

• • Common CSS selectors
    • Tag selector: you can modify all styles of elements with the same tag name.
    • . Class selector: you can modify the style of an element with the specified class attribute value.
    • # ID selector: you can modify the style of an element with the specified id attribute value.
    • [Attribute] selector: you can modify the style of an element with any attribute.
  • CSS selector combination
    • Select descendant element: All nested internal elements can be selected.

　　　　　　　　

• • • Select child layer elements: All nested child layer elements can be selected, excluding the child layer or lower offspring.

　　　　　　　　　

• • • Select adjacent sibling elements: You can select an element next to the same layer.

• • • Use the pseudo-class selector to select elements in a certain state: to change the style of elements in different States

　　　　　　　　　

5. Use CSS style for animation

• Design Animation
  • 　　

• Define Animation

　　　

• Specify the element to be animated

　　　　

6. Load css files in html files

• You can write css styles in three places
  • In the style attribute of the element of an html file

　　　　　　

• • Inside the style tag of an html file

　　　　　　

• In a separate css file

　　　　　　

• Use the <link> flag to load an html file.

　　　

7. What is js?

• JavaScript is a programming language and the most common web programming language.
• Js can directly direct html and css, so that webpages can be moved and interact with users.
• Relationship between html, css, and js
  • Html defines the content on the webpage, that is, what is on the webpage.
  • Css defines the appearance of elements on a webpage, that is, what it looks like.
  • Js can control everything and create dynamic results so that the webpage can respond to user operations, that is, how the webpage moves and how it is used.
• JavaScript code can be written in three places
  • Directly write in the tag's event property value, such as onclick = "js Code"
  • Directly written in the <script> <script/> mark of the html file
  • Write it in a separate js file, and then load it in the html file with <script src = "js file address">

8. Data and variables

• What is data?
  • Data is the value used to describe object attributes or action parameters.
  • Three basic types of data: Numbers, strings (text), and arrays (sets)
  • Allows you to operate on data.
  • Common formats

　　　　　　

• What is an object?
• Object used to describe the entire object
• Format

• Attribute values allow data to be another object.

• What is a variable?
  • A variable is a temporary nickname or alias for an object or data.
  • Format

　　　　　　　　

9. Use js to manipulate html and css

• Create html elements (tag pairs)

　　　　

• Add the created element to the page

If you want to add other elements

　　　　

• Get the elements on the page

　　　　

• Modify the text of an element

　　　　

• Modify attributes of an element

　　　　

• Modify the css style of an element

　　　　

• Delete Element

　　　　

10. Add click actions for Elements Using Functions

• Function
  • A function is a combination of multiple commands.
• Create a function

　　　　

• Run Functions

　　　　

• Specify a function to an element event

　　　　

11. Basic operations on numbers

• Number of decimal places and integer

　　　　

• Generate a random number between 0 and 1

　　　　

If you want a random number ranging from 0 to 10, remove the fractional part X 10.

• Convert non-numeric data or object to numeric object Number (any data type)

12. Basic string operations

• Single quotation marks and double quotation marks
  • Strings can be enclosed in single or double quotes, but cannot be mixed.
  • Strings nested in double quotes can only be enclosed in single quotes, and vice versa.
• Escape characters
  • To display a string with quotation marks, use \ ''or \'

　　　　　　

• • Carriage return line feed \ n indicates a new line; \ r indicates the end of the carriage return
  • The slash is represented \.
• Convert non-String data or object to String object String (any data type)
• Truncates a short string.

　　　　

Note that the subscript starts from 0.

• Search for strings

　　　　

If n is found, n is the number of the position of the substring in the string.

N = 0. It is found from the beginning.

N =-1, not found

• Replace string

　　　　

13. Operation Array

• An array is a collection of data or objects.

　　　　

• Array Length

Arr. length ();

• Obtain the members in the array.
  • Single Member arr [subscript]
  • Multiple members

　　　　　　

• Add new members

Arr. push (New Member)

• Insert or delete multiple members

　　　　

• Search members

Arr. indexOf (member );

• String to array

Str. spilt ("separator"); Splits a string into an array using a separator.

14. Date and Time Data

• Get current time and date

Var now = new Date (); Date is an object and a data format

　　　　

• Obtain each value

　　　　

• Modify time values separately

　　　　

15. js operation color data

• Color representation format
  • 'Rgb (Red value, green value, blue value)
  • Increase the opacity alpha value 0-1 'rgba (Red value, green value, blue value, opacity value)

　　　　　　

• Hexadecimal representation of colors
  • The format '# Red green blue' is a string. Here, the red green blue is hexadecimal, the red green is yellow, and the red half green is orange.
• Convert decimal to hexadecimal
  • N. toString (16 );
  • Color and random color value in hexadecimal notation

　　　　　　　　

16. js animation and Timer

• Use a timer to create an animation
  • Run the setInterval command to run the code once every time.

　　　　　　　　

• • Use the setTimeout command to wait for the code to be executed after a period of time (not repeated)

　　　　　　　　

• • Use clearInterval and clearTimeout to cancel a timer

　　　　　　　　

17. Check the data, functions, and objects again.

• All variables can be used.
• Function
• The attribute of an object can be data or a function (method)

　　　　　

• Return what functions are used?

　　　　

The returned value is James after the method is executed.

• Object ['Property name']

　　　　

　　　　

 

 

 

 

　　　　

 

 

 

 

 

 

 

 

　　　　　　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

　　

 

 

 

 

 

 

 

 

　　

 

　　　

 

--- Restore content end ---

1. What is HTML?

• HyperText Markup Language (HTML) is a HyperText Markup Language.
• Tag indicates how the webpage content is displayed, but it is not displayed. <I am marking>
• The tag appears in pairs, the content is placed in the middle, and the tag can be abbreviated. <Start tag> I am content </end tag> <I am a short tag/>
• The names and attributes of tags are generally included in the brackets.

<Tag Name property name = "attribute value"> content </Tag Name>

Abbreviated as <Tag Name property name = "attribute value"/>

<A> content </a> indicates that the content is the link text that can be clicked.

indicates that this is an image.

2. Structure of Html webpage files

• Html webpage files all use <! DOCTYPE html> Start
• Webpage content starts from

　　

• The webpage content consists of the header

　　

　　

Head can be placed with title and other information

　　

The content marked in the Body is displayed on the webpage.

　　

3. What can I put in the head mark?

• The title of the page <title> my webpage </title> is displayed on the tab card at the top of the browser page.
• Meta tag <meta> meta tag attributes can contain various information on the page.

Format: <meta property name = "attribute value"/> or <meta name = "attribute name" content = "attribute value"/>

• Page encoding <meta charset = "UTF-8"/> sets the page encoding mode to UTF-8 to ensure that the Chinese title is properly displayed.

　　

• Page author Information <meta name = "author" content = "Xiao Ming"/>
• Loading an external file <link rel = "icon" href = "image link"/> indicates that the image in the link will be used as a thumbnail of the title bar. Note that the image address can only be an image of your website.
• Other information
• Page Content
• Keyword
• Language of the page
• How to display pages on mobile devices
• Load other files (css js)

4. What does the Body mark defend against?

• The div container box <div> anything </div> is commonly used to divide pages into multiple frame tags. The whole page body is divided into multiple div container boxes.
• Img image

You can also add the following two attributes to set the image size width: width = "100" height = "200"

Alt = "if the image cannot be found, the text here will be displayed"

• Hyperlink a <a herf = "URL of the webpage to open"> text displayed </a>

To open the page in a new window, add target = "_ black"

• Input field <input type = "text"/>

Type can also be another type, such as the password box, displayed as a star number or checkbox check box

• Show more tags
• Span without line breaks
• Newline br
• Title from big to small h1 ~ H6
• Section label p
• Ordered list ol and unordered list ul

4. What is CSS?

The Learning name of CSS (Cascading Style Sheet) is a stacked Style sheet.

• Style style <div Style = "background: red"> text </div>

Style Description: how to display the marked content, such as the color and background of the element, front-size, and border) position and margin (margin and padding.

Styles can be written in html tag attributes. <style = "style name: style value; style name: style value"/>

5. CSS selector to change the style of Multiple Elements

• Selector
  • The selector Selects all elements (tag pairs) that comply with a rule.

These rules can be:

• • • All are the same type of tags, such as div
    • Tags with the same attribute name or attribute value
  • The CSS selector can be written in the <style> </style> mark. The format is as follows:

　　　　　　

• • Common CSS selectors
    • Tag selector: you can modify all styles of elements with the same tag name.
    • . Class selector: you can modify the style of an element with the specified class attribute value.
    • # ID selector: you can modify the style of an element with the specified id attribute value.
    • [Attribute] selector: you can modify the style of an element with any attribute.
  • CSS selector combination
    • Select descendant element: All nested internal elements can be selected.

　　　　　　　　

• • • Select child layer elements: All nested child layer elements can be selected, excluding the child layer or lower offspring.

　　　　　　　　　

• • • Select adjacent sibling elements: You can select an element next to the same layer.

• • • Use the pseudo-class selector to select elements in a certain state: to change the style of elements in different States

　　　　　　　　　

5. Use CSS style for animation

• Design Animation
  • 　　

• Define Animation

　　　

• Specify the element to be animated

　　　　

6. Load css files in html files

• You can write css styles in three places
  • In the style attribute of the element of an html file

　　　　　　

• • Inside the style tag of an html file

　　　　　　

• In a separate css file

　　　　　　

• Use the <link> flag to load an html file.

　　　

7. What is js?

• JavaScript is a programming language and the most common web programming language.
• Js can directly direct html and css, so that webpages can be moved and interact with users.
• Relationship between html, css, and js
  • Html defines the content on the webpage, that is, what is on the webpage.
  • Css defines the appearance of elements on a webpage, that is, what it looks like.
  • Js can control everything and create dynamic results so that the webpage can respond to user operations, that is, how the webpage moves and how it is used.
• JavaScript code can be written in three places
  • Directly write in the tag's event property value, such as onclick = "js Code"
  • Directly written in the <script> <script/> mark of the html file
  • Write it in a separate js file, and then load it in the html file with <script src = "js file address">

8. Data and variables

• What is data?
  • Data is the value used to describe object attributes or action parameters.
  • Three basic types of data: Numbers, strings (text), and arrays (sets)
  • Allows you to operate on data.
  • Common formats

　　　　　　

• What is an object?
• Object used to describe the entire object
• Format

• Attribute values allow data to be another object.

• What is a variable?
  • A variable is a temporary nickname or alias for an object or data.
  • Format

　　　　　　　　

9. Use js to manipulate html and css

• Create html elements (tag pairs)

　　　　

• Add the created element to the page

If you want to add other elements

　　　　

• Get the elements on the page

　　　　

• Modify the text of an element

　　　　

• Modify attributes of an element

　　　　

• Modify the css style of an element

　　　　

• Delete Element

　　　　

10. Add click actions for Elements Using Functions

• Function
  • A function is a combination of multiple commands.
• Create a function

　　　　

• Run Functions

　　　　

• Specify a function to an element event

　　　　

11. Basic operations on numbers

• Number of decimal places and integer

　　　　

• Generate a random number between 0 and 1

　　　　

If you want a random number ranging from 0 to 10, remove the fractional part X 10.

• Convert non-numeric data or object to numeric object Number (any data type)

12. Basic string operations

• Single quotation marks and double quotation marks
  • Strings can be enclosed in single or double quotes, but cannot be mixed.
  • Strings nested in double quotes can only be enclosed in single quotes, and vice versa.
• Escape characters
  • To display a string with quotation marks, use \ ''or \'

　　　　　　

• • Carriage return line feed \ n indicates a new line; \ r indicates the end of the carriage return
  • The slash is represented \.
• Convert non-String data or object to String object String (any data type)
• Truncates a short string.

　　　　

Note that the subscript starts from 0.

• Search for strings

　　　　

If n is found, n is the number of the position of the substring in the string.

N = 0. It is found from the beginning.

N =-1, not found

• Replace string

　　　　

13. Operation Array

• An array is a collection of data or objects.

　　　　

• Array Length

Arr. length ();

• Obtain the members in the array.
  • Single Member arr [subscript]
  • Multiple members

　　　　　　

• Add new members

Arr. push (New Member)

• Insert or delete multiple members

　　　　

• Search members

Arr. indexOf (member );

• String to array

Str. spilt ("separator"); Splits a string into an array using a separator.

14. Date and Time Data

• Get current time and date

Var now = new Date (); Date is an object and a data format

　　　　

• Obtain each value

　　　　

• Modify time values separately

　　　　

15. js operation color data

• Color representation format
  • 'Rgb (Red value, green value, blue value)
  • Increase the opacity alpha value 0-1 'rgba (Red value, green value, blue value, opacity value)

　　　　　　

• Hexadecimal representation of colors
  • The format '# Red green blue' is a string. Here, the red green blue is hexadecimal, the red green is yellow, and the red half green is orange.
• Convert decimal to hexadecimal
  • N. toString (16 );
  • Color and random color value in hexadecimal notation

　　　　　　　　

16. js animation and Timer

• Use a timer to create an animation
  • Run the setInterval command to run the code once every time.

　　　　　　　　

• • Use the setTimeout command to wait for the code to be executed after a period of time (not repeated)

　　　　　　　　

• • Use clearInterval and clearTimeout to cancel a timer

　　　　　　　　

17. jq manipulating html and css

• Jquery is a widely used extension library of js. In simple terms, it is a js file.
  • Create an html element $ ('html tag right ')

　　　　　　

• • Get an element $ ('selector ')

　　　　　　　

• • Append and prepend added to an element on the page

　　　　　　

　　　　　　

• • Get and modify html text content. html () and. val ()

The execution results of these two statements are hello world!

18. Use jq to manipulate css styles and Classes

• Getting and setting css styles. css ()

　　　　

Operate on multiple attributes at the same time

　　　　　

• Obtains the width and height of an element, width (), and height ()
  • For the specified size

　　　　　　

　　　　　　

• Get and set the attribute value of an element. attr ()

　　　　

• Add and remove element class styles addClass and removeClass