1. What is HTML?
Html is a hypertext markup language, not a programming language
2. What is CSS?
CSS is a cascading style sheet, a language used to decorate documents, which can present documents to users in a more elegant form
HTML, CSS and JS are three elements of web pages HTML: construction structure of web page framework CSS: style setting page JS: event, dynamic behavior and corresponding user operation
4. Shortcut keys under vscode software:
Line feed: Ctrl + ENTER
Generate document structure: Shift +! Just press enter
Write HTML: 5 directly and press enter
5. Detailed introduction of HTML page structure
(1)<!DOCTYPE html> HTML 5 standard web page declaration, without this line, means that the page adopts the browser's own parsing standard, which may cause different display effects in different browsers. H5 document declaration that the current web page is written in accordance with the HTML5 standard. If you do not write a document declaration, some browsers will enter a strange mode. After entering the strange mode, the browser will parse the page and the page will not display normally. Therefore, in order to avoid entering this mode, you must write a document declaration. (2)<html lang="en"> a. Html is a root tag. There is only one root tag in a page. All content in a web page should be written in the HTML root tag b. Attribute Lang is the abbreviation of language, which means language. En stands for English and zh CN stands for Chinese c. There are only two sub tags in the HTML root tag, head: browser settings, and body: visual area display (3)<head></head> The content in the head tag will not be displayed directly in the web page. It is used to help the browser parse the page (4)<meta charset="UTF-8"> a. Meta tags are used to set some metadata of web pages, such as character sets, keywords and profiles b. Meta is a self closing tag. When writing a self closing tag, you can add one to the start tag c. Character encoding: the browser will parse according to the character encoding. The common character encoding includes GB2312, GBK, Unicode and UTF-8 (5)<meta name="viewport" content="width=device-width,initial-scale=1.0"> a. Viewport: screen of the device b. Width = device width: the width attribute controls the width of the screen device. If your website will be viewed by devices with different screen resolutions, setting it to device width can ensure that it can be correctly rendered on different devices. c. Initial scal = 1.0: ensure that when the web page is loaded, it is rendered in a ratio of 1:1 without any scaling. (6)<title></title> Name on browser tab (7)<body></body> Set the main content of the web page. All visible contents in the web page should be written in the body. The contents in the body are displayed in the view area of the browser.
Spaces: & nbsp; Less than sign: & lt Greater than sign: & gt Copyright: & copy Registered trademark: & reg
7. Block level elements
(1) Function: Build Web page structure (2) Common elements: HTM, body, div, P, ht~h6, ul - > Li, ol - > Li, DL - > DD / DT, header, footer, NAV, art, section, aside, adders (3) Features: a. Exclusive row space b. The default width is 100% (relative to the parent element if there is a parent element, relative to the browser if there is no parent element) c. Height is determined by child element or content (hold up) d. You can specify its width through CSS e. Block level elements can nest block level elements and inline elements
8. Inline elements
(1) Role: fill web page content in the structure (2) Common elements: span, a, IMG, strong, B, I, EM, sub, sup (3) Features: a. Share a row space with other inline elements b. The height is determined by itself c. Since there is no need to build a web page structure, there is no need to specify its width through CSS d. A label a: Link external or internal web address href = "relative path. /.. // absolute path: http://ip: Port number / project / file name "(HTTPS: //) Classic applications: anchor definition, link anchor 1. Give a jump button, that is, the button that triggers the jump, and return to the top < a href = "#" > return to the top</a> 2. Where to jump to: < div id = "center" > find me < / div > 3. < a href = "#center" > return to the top</a> Target: defines the default value of the page loading position after clicking_ self _ Blank open in new window / new tab e. IMG tag IMG: put pictures SRC picture address Width picture width Height picture height The content displayed to the user when there is a problem with ALT image loading Title text prompt when hovering
9. Difference between block level elements and in-line interview questions (80%)
(1). Classic: block level elements are exclusive to one row, and elements within a row share one row with other elements (2). Width and height: the width and height can be set directly at the block level, but not in the row. (3) IMG and input belong to special inline elements, also known as displacement elements. Img and input can be set in width and height, but for inline elements, you need to change the element attribute with display (4). Block level elements can contain block level and intra row elements, and intra row elements can only contain intra row elements
10. The first programming language of Web
11. List elements
(1) Unordered list: add list semantics to a pile of data, and all data in this pile of data have no order a. UL and Li are equivalent to the relationship between class and students and the city b.<ul type="value"> <li></li> </ul> c. Type value Disc solid default Circle center hollow Square solid square (2) Ordered list: add list semantics to the data and start all the data in this pile of data in order (ranking) a.<ol type="value"> <li></li> </ol> b. Type value: number capital Lowercase letters Roman capital letter Roman small letter (3) Definition list: DL DT / DD (less important) First define all the titles in the list through the DT tag, and then add description information to each title through the DD tag
12. Table labels
(1) A pair of table tags is a table (2) a pair of TR labels is a row in the table (3) a pair of TD tags is a cell in a row （4）<table> <tr> <td>Content < td > </tr> </table> (5) Note: a. The table label has a border border attribute, which determines the width of the border By default, the value of this property is 0, so you can't see the border b. Table labels, like list labels, are combined labels, so table / TR / TD either appear together or not together, and will not appear alone c. If the width / height attribute is set for the TD tag, the width and height of the current cell will be modified, and the width and height of the entire table will not be affected d. Width and height of the table: it is adjusted according to the size of the content by default. Manually change the width / height attribute of the table e. Cell width and height: TD width and height (inline style: style = "color: red; background color: Red";) (6) Horizontal and vertical alignment of cells in the table Horizontal: align table, TR, TD Vertical: valign TR / TD (vertical alignment of current cell contents) (7) Table outer and inner margin properties a. Cellspacing outer margin: the distance between cells is 2px by default b. Cell padding: the gap between the cell border and the text (adjust the distance between the table content and the border). By default, it is 1px (8) Cell merge a. ColSpan horizontal cell merge, merge columns b. Rowspan vertical cell merging, merging rows
(1) < form action = "submitted server interface address" > < form element > </form> Be sure to write elements in the form (2) Basic form elements a. Plaintext input box < input type = "text" name = "account" placeholder = "please enter user name" > Name: when the form is submitted, it will be used as the name of the parameter and matched with the entered value to form a structure of parameter name = parameter value Placeholder: prompt b. Secret text input box encryption operation < input type = "password" name = "password" placeholder = "please enter password" > c. Radio box <input type="radio" name="xx" value="xxx" checked> Mutually exclusive operation: set the same name attribute and the same value for each radio box Checked: selected by default d. Multiple selection box <input type="checkbox" name="xxx" value="xxx" checked> Checked: selected by default e. Submit button <input type="submit"> Function: submit the filled data in the form to the remote server Deliver to the server address (action attribute: server address) Note: if you want to submit the form data to the background, the form element needs to have a name attribute f. Normal button <input type="button" value="xxx"> g. Picture button <input type="image"> h. The reset button clears the filled data in the form <input type="reset" value="xx">