HTML label framework character entity global attribute CSS basic syntax structure

1 Review

1.1 list

ul
ol
li
dl
dt
dd

1.2 forms

table
caption
thead
tfoot
tbody
tr
th
td

2 form

2.1 overall form settings

<!--form -->
<form action="http://www.baidu.com/s" target="_blank">

    <!--Input box-->
    <input type="text" name="wd">

    <!--Submit button-->
    <button>Search</button>

</form>

Everything in the form needs to be wrapped in form In the label, form The label represents a form
form The tag has the following properties:
	action The address of the form can be set
	method Property to set the submitted request method
	target Property to set whether the submitted address is opened in this window or a new window. Value:_self,_blank

2.2 form controls

① Text input box

<input type="text">

You can set the maxlength property to limit the maximum input length.

② Password input box

<input type="password">

You can set the maxlength property to limit the maximum input length.

③ Radio button

<input type="radio" name="sex"> female
<input type="radio" name="sex"> male
<input type="radio" name="sex"> other

1. Multiple radio buttons need to set the value of the name attribute to the same to achieve the radio effect.
2. By setting the checked property, the radio button can be selected by default. There is no need to give a value to the checked property.

④ Check box

<input type="checkbox"> sleep
<input type="checkbox" checked> smoking
<input type="checkbox" checked> drink
<input type="checkbox"> have a perm

1. Set the checked property, which is selected by default. The checked property does not need to be given a value.

⑤ Submit button

<input type="submit" value="Submit button">
<button type="submit">Submit button</button>
<button>Submit button</button>

⑥ Reset button

<input type="reset" value="Reset button">
<button type="reset">Reset button</button>

⑦ Normal button

<input type="button" value="Normal button">
<button type="button">Normal button</button>

⑧ Text field

<textarea rows="10" cols="60"></textarea>

1. The rows property sets how many lines the text field displays by default, which affects the height of the text field.
2. The cols property sets how many words are displayed in a default line of the text field, which affects the width of the text field.

⑨ Drop down options

<select>
    <option>primary school</option>
    <option>junior high school</option>
    <option>high school</option>
    <option>secondary specialized school</option>
    <option>junior college</option>
    <option>undergraduate</option>
    <option selected>graduate student</option>
</select>

1. The first option is selected by default. Set the selected attribute to the option tag to make the option selected by default. The selected attribute does not need to be given a value.

2.3 form control properties

① name attribute

1. Each form control should set the name attribute, which specifies the data name. After the form is submitted, the back-end program can obtain data through the data name.

2. In the drop-down options, the select tag sets the name attribute, and the option tag is not required.

3. Multiple radio buttons have the effect of radio selection only when the name attribute with the same value is set.

4. As the form control of the button, the name attribute cannot be set.

② value attribute

1. Use the input tag to implement the submit button, reset button and normal button. The value attribute can set the text on the button.
2. For radio buttons and check boxes, the value value specifies the data actually submitted to the back end.
3. The option and value attributes of the drop-down options specify the data actually submitted; If there is no value attribute, the data actually submitted is the text in the option tag.
4. Text input box and password input box. The value attribute can set the text displayed in the input box by default. (Note: write between double labels)

③ disabled attribute

1. All controls in the form can set the disabled property, which can take effect without giving a value. After setting the disabled property, the form control cannot be used.
2. Both select and option can be set to disabled. The entire drop-down option set by select cannot be used. Only this option set by option cannot be selected.

2.4 use of label

<!-- 
	label Tags are associated with text input boxes, and password input boxes, text fields and drop-down options are also associated in this way
-->
<label for="addressInput">Address:</label>
<input type="text" id="addressInput">
<br>


<!--
	label Labels are associated with radio buttons, and check boxes are associated in this way
-->
Gender:
<label>
    <input type="radio" name="sex">female
</label>
<label>
    <input type="radio" name="sex">male
</label>
<label>
    <input type="radio" name="sex">other
</label>

2.5 use of fieldset tag and legend tag (understand)

<form action="1.php">
	<fieldset>
		<legend>Title of the form</legend>
        
        form control ....
    </fieldset>
</form>

2.6 form label summary

Tag name	Semantics and function	attribute	Single label and double label
form	form	action attribute: Specifies the address of the form submission Method attribute: Specifies the request method of form submission Target attribute: consistent with the function of hyperlink target attribute	Double label
input	Various forms of form controls	Type attribute: sets the type of the form control. maxlength property: sets the maximum length that can be entered, which is used for text and password input boxes checked attribute: selected by default, used for radio buttons and check boxes.	Single label
button	Button	Type attribute: sets the type of button.	Double label
textarea	Text field	Rows property: sets the number of rows displayed by default. cols property: sets the number of text displayed in a line by default.	Double label
select	Drop down box		Double label
option	Drop down options	Selected attribute: selected by default.	Double label
label	Associated with a form control	for property: specify the ID of the form control to be associated with through this property	Double label
fieldset	Table border		Double label
legend	Table title		Double label

Summary:

1. The values of the input tag type attribute: text, password, radio, checkbox, submit, reset, button. The default value is text.
2. The value of the type attribute of the button tag: submit, reset, button. The default value is submit

3 frame label

Tag name	Function and semantics	attribute	Single label or double label
iframe	Framework, you can introduce other pages to obtain other types of resources	src attribute: Specifies the address of the page or other resource to be imported. Width attribute: Specifies the width of the frame **Height attribute: * * specifies the height of the frame. frameborder property: set whether there is a border. Value: 0 or 1	Double label

4 HTML character entity

Space		 
<		 &lt;
>		 &gt;
&		 &amp;
¥		 &yen;
©        &copy;
×        &times;
÷        &divide;

5 global attributes

Global attributes are attributes that all tags have.

class Properties:	Specify a class name for css
id Properties:		appoint ID Name that uniquely identifies an element.
style Properties:	For direct setup CSS style
name Properties:	Assign a name to the tag
title Attribute: the text prompt when the mouse hovers over the element. In most cases, only pictures and hyperlinks will set this attribute.
lang Properties:	Specifies the language used by the text in the label. Generally, this property is set to html On the root label, the value is: cn,en,fr etc.

6 meta information

<!--Character set encoding-->
<meta charset="utf-8">

<!--Page Keywords:-->
<meta name="keywords" content="8-12 Words separated by English commas/terms">

<!-- Page description information -->
<meta name="description" content="80 A paragraph within words is related to the content of the website">

<!-- Page timing jump:(10 Jump to Baidu page in seconds) -->
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">

7 use of vscode

7.1 VSCode related configuration

Jump to default font size:   	Lower left pinion -> Select settings -> Common settings -> Edit:Font Size

Jump directory structure level distance:	  Lower left pinion -> choice"set up" -> workbench -> appearance -> Tree:Indent

Avoid compact display of directory hierarchy: pinion in the lower left corner -> choice"set up" -> function -> Resource Manager -> Compact Folders Remove the front tick

Automatic saving of settings: lower left pinion  -> Select settings -> Common settings -> Files:Auto Save

Modify the color theme of the editor: lower left pinion -> Select color theme

Modify file icon theme:		Lower left pinion -> choice"File icon theme"

7.2 recommended extensions

1. Chinese (Simplified) Language Pack for Visual Studio Code Chinese extension

2. Live Serve

8 basic syntax of CSS

8.1 relationship between HTML and CSS

CSS sets a style for an element or multiple elements, and the style acts on the element.

8.2 HTML element tree

Ancestral element
 Parent element
 Child element
 Descendant element
 Sibling elements (elements with the same parent element)

The expression of the relationship between elements is only related to the position of the element, not to the tag name of the element.

8.3 using CSS in HTML

① Inline

<p style="CSS style.."></p>

② Inline

<html>
    <head>
        <style>
        	CSS style....
        </style>
    </head>
    <body></body>
</html>

③ External chain

The CSS style is written in a separate CSS file, and the HTML file is associated with the CSS file using the link tag

<link rel="stylesheet" href="css Address of the file">

1.4 basic syntax structure of CSS

① Grammatical structure of embedded and outer chain

selector {
    CSS Attributes: Values;
    CSS Attributes: Values;
    CSS Attributes: Values;
}

Selector: used to select the element to be styled.

Declaration block: the declaration block is wrapped in braces after each selector. A declaration block consists of multiple declarations.

Declaration: a declaration consists of a CSS attribute and the value of the attribute. Each declaration ends with a semicolon.

② Grammatical structure of inline

<label style="CSS attribute:value; CSS attribute:value"></label>

③ HTML attributes and CSS attributes

<!-- use img Tagged width And properties height Property to set the picture size -->
<img src="Fangfang.jpg" alt="Fangfang" width="300" height="300">

<!-- use css attribute width and height Set picture size; style yes HTML Attribute! -->
<img src="Fangfang.jpg" alt="Fangfang" style="width:300px;height:300px">

8.5 cascading of CSS

Through various forms, multiple selectors set the style of an element, and all styles will act on the element, which is cascading.

If the styles set in multiple forms have duplicate styles, the priority of inline type is higher than that of inline type and outer chain type. There is no difference between the embedded type and the external chain type. Refer to the priority of the selector. The priority of the selector is the same, and the later style has higher priority.

8.6 CSS comments

/* CSS notes */

/*
    CSS notes
    CSS notes
    CSS notes
*/