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
- 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
- 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
- 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
10. Add click actions for Elements Using Functions
- Function
- A function is a combination of multiple commands.
- Create a function
- 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.
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
13. Operation Array
- An array is a collection of data or objects.
Arr. length ();
- Obtain the members in the array.
- Single Member arr [subscript]
- Multiple members
Arr. push (New Member)
- Insert or delete multiple members
Arr. indexOf (member );
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
- 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.
--- 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
- 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
- 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
- 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
10. Add click actions for Elements Using Functions
- Function
- A function is a combination of multiple commands.
- Create a function
- 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.
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
13. Operation Array
- An array is a collection of data or objects.
Arr. length ();
- Obtain the members in the array.
- Single Member arr [subscript]
- Multiple members
Arr. push (New Member)
- Insert or delete multiple members
Arr. indexOf (member );
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
- 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 ()
- Get and set the attribute value of an element. attr ()
- Add and remove element class styles addClass and removeClass