Web Full stack----CSS

, images, and hyperlinks
1. URL (slightly)
2. Image (slightly)
3. Hyperlinks
1. What is a hyperlink
The user can click on the action to complete the page jump behavior
2. Grammar
Tagged:<a> content </a>
Property:
1. href
Represents the address of the file to be linked to
2. Target
Specify how new pages are opened
Value:
1, _self
Default value to open a new page in its own tab page
2, _blank
Open a new page in a new tab page
2. Forms
1. Syntax of the table
1. Marking
Form:<table></table>
Table row:<tr></tr>---table row
Cell (column):<td></td>---Table Data

        Ex: Create a 4 (row) (column) of table 2, attribute 1, table property 1, border Specify the width of the table border, in PX (can omit px)                2. Width Specifies the height of the table in PX 3, height, in px 4, align             Specifies the horizontal alignment of the table in its parent element: Left/center/right 5, cellpadding cell padding, and the distance between the content and the cell border 6, cellspacing cell extra margin, the distance between cell and cell 2, TR attribute 1, align control the current line of the content of the horizontal pair Alignment value: Left/center/right 2, valign controls the vertical alignment of the contents of the current line value: Top/mid            Dle/bottom 3, bgcolor specifies the value of the background color of the current row: the English word for the color 3, the TD attribute 1, the width            2, Height 3, align 4, valign 5, bgcolor 6, colspan: Cross-column/merge column 7. RowSpan: Cross-row/merge row 2, irregular table 1, cell cross-column starts at the specified cell position, horizontally merges several cells to the right (including itself), the merged cells are removed syntax: colspan= "n" 2, Unit The cross-row of the grid starts at the specified cell location, vertically merging several cells (including yourself), merged cells to remove syntax: rowspan= "n" 3, row grouping 1, what is row grouping allows several rows in a table to be divided into a group, convenient for unified management 2, Syntax 1, table header row            Grouping allows you to divide several rows at the top of a table into a group of <thead></thead> 2, footer row grouping allows you to divide several rows at the bottom of the table into a group <tfoot></tfoot> 3, table body row grouping In addition to the top and bottom rows, you can use the table body row grouping <tbody>< /tbody> Note: If you do not display the specified grouping for rows, then all rows are grouped by default in the Tbody row group

3, Form
1, the role of the form
to receive data from users and submit to the server
form two features:
1, form elements-forms, gather information about users
2, form Controls
provides a visual component that enables data interaction with users
2 , form element
1, function
collects user information and submits it to the server
form element is not visible in the Web page, but the function cannot be ignored
2, Syntax
1, tag
<form></form>
2, Property
1, Action
Specifies the address to be submitted to the server handler
default to this page
2, method
How to submit/Submit methods
1, get (default)
means use
features when you want data to the server:
1, the submitted data will be displayed in the Address bar
2, lower security
2, post
to submit data to the server for processing using
Features:
1, implicit submission, no data submitted
2, High Security
3, form controls
1, Effects & Notes
Function: Provides a visual component that can interact with the user
Note: Only form controls placed on the form are allowed to be submitted
2, form controls in detail (difficulty)
1, text box and Password box
text box: <input Type= "text";
Password box: <input type= "Password";
Property:
1, Name: Define control's names
is submitted to the server for use and cannot be submitted if there is no Name
2, Value:
3, MaxLength: Limit the maximum number of characters entered
4, ReadOnly: Read-only
This property does not set a value
5, placeholder: Placeholder
What the user displays when no data is entered
2, Button
1, submit button: <input type= "Submit";
submits the form's data to the server
2, reset button: <input type= "reset";
restores the contents of the form to the initialized state
3, Normal button: <input type= "button";
allows you to customize functions via JS

            Property: Value: Specifies the text on the button 4, <button> content </button> properties: Type Value: Submit/reset/button 3, radio button and check box radio button: <input type= "Radio" > check box: & Lt;input type= "checkbox" > Properties: 1, name in addition to defining the name, you can also play the role of grouping in a group of radio buttons or check boxes,        The Name property value must be the same as 2, value values, as far as possible in advance declaration good 3, checked set preselection, the property has no value 4, hidden fields and file selection box 1, Hidden domain role: Want to submit to the server but do not want to see the user data can be placed in the hidden domain syntax: <input type= ' hidden ' > Genus Sexual: Name: Control Name Value: 2, File selection box action: Use syntax when uploading a file: & Lt;input type= "File" > Properties: Name: Control 5, multiline text field tag: <textarea></te Xtarea> properties: 1, Name: Control Name 2, cols: Specifies the number of columns displayed by default for the text field (how many English characters can be displayed in one row, half Chinese) 3, rows: Specify text     Number of rows displayed by default field 6, drop-down selection box   Syntax: <select name= "" > <option value= "value 1" > Show 1</option> <opt Ion value= "Value 2" > Show 2</option> </select>

================================================
Css
1. Introduction to CSS
Css:cascading style Sheets-style sheet
HTML: Building a Web page structure
CSS: Retouching and beautifying Web pages
2. How to use CSS (emphasis)
1. Inline mode
Define CSS content in a separate HTML tag
Grammar:
<any style= "style declaration" >
Style declaration:
1. Style declarations are made up of style attributes and style values
2. Use between attributes and values: Connect
<any style= "Property: Value" >
3. Multiple style declarations are allowed in a style, and multiple style declarations are used; Separated
<any style= "Attribute 1: value 1; Property 2: Value 2;" >
Common Properties and values:
1. Text Size
Property: Font-size
Value: The number in PX units
Ex: Set the text size of an element to 18px
<any style= "FONT-SIZE:18PX;" >
2. Text color
Properties: Color
Value: The English word that represents the color
Ex: Set the text size of an element to 18px and the text color to red
<any style= "font-size:18px;color:red;" >
3. Background color
Property: Background-color
Value: The English word that represents the color
<any style= "Background-color:yellow;" >
Ex
1. Create a Web page 07-style.html
2, create a div tag, the content is arbitrary
3. Use inline mode to set the style as follows:
1, the text size is 24px
2. The text color is red
3, background color for XXX (yellow)
2. Internal style sheet
2. Use
Allows a well-defined style to be used on multiple elements in the current page
2. Grammar
<style>
Style Rule 1
Style Rule 2
....
Style Rule n
</style>

        样式规则语法：            由选择器 和 样式声明组成            选择器：规范了页面中哪些元素能够使用声明好的样式            选择器{                属性1:值1;                属性2:值2;            }            ex:                作用：设置页面中所有的div的样式                div{                    font-size:18px;                    color:red;                    background-color:yellow;                }                作用：设置页面中所有的h1的样式                h1{                    ... ...                }                p{                    ... ...                }                span{                    .... ....                }3、外部样式表    1、作用        将声明好的样式应用在多个网页中        将样式规则声明在独立的css文件中(***.css)        在使用的网页中对css文件进行引入即可    2、使用步骤        1、创建 .css 文件，并编写样式规则        2、引入 .css 文件            

File:///D:/%E8%B5%B5%E6%97%AD/01_WEB%20BASIC/Day02/04-form.html

Web Full stack----CSS