HTML basics learning notes

Abstract

\ Quad every time to write a document, there is always some idea of the layout of the article to implement, but due to their own poor understanding, so basically either the effect of discounted, or use repetitive simple sentences to achieve. After learning the basic knowledge of HTML, I feel that the biggest harvest is to learn more skills and methods of page design, and at the same time, I also understand some tag knowledge behind the page.

1. Basic concepts

1.1 HTML has two meanings

The latest version of the HTML language, with old tags and 32 new tags
HTML and CSS 3

1.2 HTML5 technology collection

New tags, new attributes
New communication technology: WebSockets, WebRTC, etc
Offline storage technology: LocalStorage, disconnection detection
Multimedia technology: video, audio
Image technology: Canvas, SVG, WebGL
Web enhancement: History API, full screen
Equipment related technology: camera, touch screen
New style technology: CSS3 new Flex, Grid layout

1.3 HTML manual:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge" /> <title>Document</title> </head> <body></body> </html>Copy the code

! DOCTYPE html– The common document types are HTML1.0-2.0, HTML3, HTML4, HTML4.0.1, and XHTML1.0 HTML5
html lang="en"– Indicates the language of the page: en-English/zh-cn Chinese
<head>– Configure basic information, which contains invisible content
<meta charset="UTF-8" />Character set adoptionUtf-8 (support for all languages)
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Preventing page zooming
<meta http-equiv="X-UA-Compatible" content="ie=edge" />– If the current page is generated in Internet Explorer, use Internet Explorer of the latest version

<title>Document</title>Page title

2. HTML tags

2.1 Chapter labels – Indicate the level of the article:

<h1~h6>– title
<header>– Content at the top of the page
<footer>– Content at the bottom of the page
<section>– section
<p>– paragraph
<main>Main –
<aside>– bypass
<div>– divided

2.2 Global Attributes – Attributes common to all tags:

class– Mark code blocks with class= XXX
.XXX– Select all code blocks with class name XXX, or use [class=XXX], which is inconvenient because the class name must be exactly the same as XXX. XXX can match portions of the keyword separated by Spaces.
contenteditable– Elements with this tag can be edited by the user.
hidden– Hide tags
id– Similar to class, but in principle id is unique and class is not. However, because the id is repeated, no error will be reported, so try not to use the ID. In addition, you can modify elements directly in JS using id namesh.style.border = "10px solid green";However, the name of the ID cannot be a keyword (Windows in Console). None of the names appearing in the
style– An HTML attribute with a higher priority than the <head> tag, but JS is higher than the style tag.

1.#h{border:10px solid red;

– In the body header 3.h.style.border=”10px solid black”; – The final effect is black in JS.

tabindex– Controls the order in which TAB responses are used, noting that 0 is the last one and -1 is not selected here.
title– For ellipses that are needed beyond the page:

This can be set in the properties of the H tag:

#h{ white-space: nowrap; // no newline text-overflow: ellipsis; // Overflow: hidden; // overflow is omitted}Copy the code

Then declare the title in the tag:

2.3 Default Styles

$\quad$ Since THERE was no CSS when HTML was new, default styles were provided in HTML to distinguish page elements. Right mouse button can be seen in the page: $\quad$ However, since this default style is generally not pleasing to the page, you need to use CSS Reset to override the browser’s default style.

$\quad$ Recommended default format:

*{margin: 0; padding:0; box-sizing:boder-box; }- Clear the inside and outside margins and make the box model *::after,*::before{box-sizing:boder-box; } h1,h2,h3,h4,h5,h6{font-size:48px; } h2{font-size:36px} a{color:inherit; text-decoration:none; boder-bottom:1px solid; }-a tag color inherits the current text color, remove the underline, replace the text border with ul,ol{list-style:none}- remove the default style table{- no gaps between the various elements of the table border-collapse:collapse; border-spacing:0 }Copy the code

2.4 Content Labels

ol+li– There are sequential lists
ul+li– No sequential list
dl+dt+dd– Descriptive listdt– elementdd– Statements describing elements
pre– Leave Spaces, enter, Tab. Because in HTML, multiple consecutive whitespace shrinks to a single space, in the Pre tag, these whitespace remain.
code– Code snippet
hr– line
br– press enter
a– linktarget="_black"– Open in a new window, for example:

< a href = "http://www.iciba.com/" target = "_black" > powerword < / a >

Href – Hyper Reference hyperlink

em– To emphasize
strong– bold
quote– reference
blockquote– Newline reference

2.5 Opening the HTML Page

Do not double-click the.html file to open the page, otherwise the root directory path will be wrong.
usenpm install npm -gCommand to install NPM-gRepresents installed globally and can be used in any directory. usenpm -vCommand to check whether the installation is successful.
usenpm i -g node-w3c-validatorCommand to install the code inspection tool.
usenpm install http-server -gCommand to install the HTTP server and use it in the same path as the HTML page you want to launchhs . -c-1Select an address and enter the file name in the web page addresshttp://192.168.56.1:8080/index.htmlThe page named index.html in the current path opens. Example:

Visit page:

Using the commandnpm install -g yarnInstalling YARN (NPM Package management Tool)
Note: If VS Code is already open during installation, you need to reboot to see the NPM -v command…
Or usenpm i -g parcel-bundlerCommand to install the parcel

Add to YARNyarn global add parcelThen use the commandparcel index.htmlOnce you get the address, you can achieve the same effect as before. Example:Open web page:

2.6 A Tag href value

Web site:

http://…
https://…
/ /… (Site without agreement)

/a/b/c and a/b/c(‘/’ indicates starting from the root directory)
Index.html and index. HTML

javascript:; Implement click to do nothing (note the distinction from href=”#”)
Mailto: email
Tel: mobile phone number
Tel: the name of the class

2.7 Value of the target label

target="_blank"– Blank page
target="_self"– the default values
target="_top"– The top-level page (if there are two Windows in the page, such as using iframe tags to introduce other pages)
target="_parent"– Father window open
Target =" XXX "- if a window named XXX exists on the page, open it, otherwise create a new window named XXX
The target can also refer to the iframe in the page, for example:

2.8 Table Label value

only<thead>.<tbody>As well as<tfoot>(Not unique order)
<tr> - table rowA row in a table
<th> - table head cellTable header cell
<td> - table data cellTabular cell data
Table Layout - Table layout
1. Auto – Calculates the spacing automatically
2. Fixed – According to the set value, fixed width
3. Do not understand the rest
Set table borders

Simple case:

The < table > < thead > < tr > < th > spelling < / th > < th > translate < / th > < / tr > < thead > < tbody > < tr > < td > tr < / td > < td > table row - a column in the table < / td > < / tr > </tbody> <tfoot> </tfoot> </table>Copy the code

Style:

Add more attributes:

table { width: 800px; // Set width table-layout: fixed; // fixed width border-collapse: collapse; // Merge spacing between cells border-spacing: 0; Td, th {border: 1px solid RGB (0, 17, 255); }Copy the code

Effect:

2.9 img tags

Function: sends an HTTP GET request to display a picture
Properties:
1. Alt – Displays the content in Alt when the request behind the href tag does not load.
2. Height,width- Sets the height,width, and default units are px
3. Remember: Never distort a picture!
Listening event:onload.onerror

<div> <img id=" XXX "SRC ="/badgetway.png" Alt =" XXX failed to load "/ > <script> xxx.onload = function() {console.log(" XXX succeeded in loading "); }; Xxx. onerr = function() {console.log(" image failed to load "); xxx.src = "/404.png"; }; </script> </div>Copy the code

Adapt the image to the mobile page:

<style> * { margin: 0; padding: 0; Box-sizing: border-box; // box-sizing: border-box; } img { max-width: 100%; } </style>Copy the code

2.10 Form Label – Form label

Action – Initiates an HTTP GET or POST request and then refreshes the page.
Property –
1. Action – Controls which page is requested
2. Autocomplete – Automatic completion
3. method-GET/POST
4. Target – Should be submitted to that page, same as in the A TAB

<div> <form action="https://xxx.xxx.com" method="GET"> <input type="text" /> </div>Copy the code

The effect is as follows:

Autocomplete – Autofill example:

<div> <form action="/xxx" method="GET" autocomplete="on"> <input name="username" type="text" /> <input type="submit" </form> </div> </form> </div>Copy the code

Effect:

The differences:

2.11 Common Input labels

<input type="color" />- color picker

<input type="password" />– Enter password

Radio - radio

Sex selection (both have the same name so that they cannot be chosen at the same time)

<input name="gender" type="radio" /> male <input name="gender" type="radio" /> femaleCopy the code

The checkbox - multi-select

You need to group by name

<input name="habbit" type="checkbox" /> <input name="habbit" type="checkbox" /> />Rap <input name="habbit" type="checkbox" /> basketball <hr /> <input name="yuqian" type="checkbox" /> cigarette <input name="yuqian" Type ="checkbox" /> <input name="yuqian" type="checkbox" /Copy the code

File - Uploads files

– Select a single file – Select multiple files

Hidden - Used to hide something

2.12 other

Textarea - Multi-line text

Case 1:<textarea></textarea>

Users can drag and drop text box sizes freely.

Case 2: Use<textarea style="resize:none; width:80%; height:80px;" "> < p style =" max-width: 100%; clear: both; </textarea>You can fix the size.

Select - Selects from a range

<select> <option value=" ">- Please select -</option> <option value="1"> Monday </option> <option value="2"> Tuesday </option> <option Value ="3"> Wednesday </option> <option value="4"> Thursday </option> </select>Copy the code

The effect is as follows:

Require - cannot be empty option

<input name="username" type="text" required />

Matters needing attention:

Input click events are generally not listened for
The input in the form must have a name
The form must place a type=submit in order to start the Submit event
Input tags usually have onchange/onfoucs(mouse focus here)/onblur(mouse focus away)

3. HTML shortcuts

Ctrl + Shift + L format
Tab Automatic completion

4. Installation of related software

4.1 NPM install

\quad NPM is a package management tool for Node.js, which comes with it when you install Node.js. Official website to download

All the way to determine is, it is best not to change the installation path, or very Ken can not find. usenode-vVerify that the installation is successful. This time, although the built-in installation of NPM, but not global (casually find a place to use), usenpm install npm -gSet NPM to global.

4.2 Yarn installation

\ Quad Yarn, like NPM, is a package manager with the advantage of being faster than NPM. Run the NPM install -g yarn command to install YARN.

4.3 Node-WC-Validator code check tool installation

\ Quad Node-wC-Validator is an HTML Code check tool. Sometimes VC Code errors are not obvious, so you need to use some other tools to check Code errors. Run the NPM i-g node-wc-validator command to install the plug-in, or run the YARN Global add node-wc-validator command to install the plug-in, and run the node-wc-validator –version command to check whether the plug-in is successfully installed. \ Quad finally uses node-w3C-validator -i [filename] to check for errors in code:

This was mentioned earlier.

5. Reference materials

Github. Yarn Installation and Usage Details Switch to the source article
Github. Full Introduction to NPM jump to source article
Node-wc-validator redirects to the source article