HTML tags:
- `<figure>`, `<figcaption>`: Containers and captions for images, tables, codes, etc.
- `<audio>`, `<video>`: insert audio and video.
- `<canvas>`: used to draw graphics.
- `<svg>`: Draw vector graphics.
- `<details>`, `<summary>`: used to create collapsible content.
2. List and table tags:
- `<ul>`, `<ol>`, `<li>`: unordered list and ordered list.
- `<dl>`, `<dt>`, `<dd>`: definition list.
- `<table>`, `<tr>`, `<th>`, `<td>`: table tags.
- `<thead>`, `<tbody>`, `<tfoot>`: the head, body and bottom of the table.
- `<colgroup>`, `<col>`: used for style setting of table columns.
- `<caption>`: The title of the table.
3. Form and input tags:
- `<form>`: Create a form.
- `<input>`: Various input fields, such as text boxes, password boxes, etc.
- `<textarea>`: multi-line text input box.
- `<select>`, `<option>`: drop-down selection boxes and options.
- `<button>`: Button.
- `<fieldset>`, `<legend>`: used to organize form elements.
- `<label>`: used to identify input fields.
- `<datalist>`: Provide options for input fields.
- `<optgroup>`: Group options in the selection box.
4. Hyperlinks and media tags:
- `<a>`: hyperlink.
- `<img>`: Insert image.
- `<map>`, `<area>`: used for image mapping.
- `<audio>`, `<video>`: insert audio and video.
- `<source>`: The media resource of the multimedia element.
5. Text tags:
- `<br>`: line break.
- `<hr>`: horizontal separator line.
- `<em>`: emphasize text.
- `<strong>`: Emphasize the text more strongly.
- `<code>`: inline code.
- `<blockquote>`, `<q>`: block quotes and inline quotes.
- `<sub>`: subscript.
- `<sup>`: superscript.
- `<pre>`: Preformatted text.
CSS properties and selectors:
1. Selector:
- Class selector `.class`: selects elements matching the class attribute.
- ID selector `#id`: selects elements whose id attribute matches.
- Element selector `element`: selects elements of the specified element type.
- Universal selector `*`: selects all elements.
- Descendant selector `ancestor descendant`: selects descendant elements within ancestor elements.
- Child element selector `parent > child`: selects direct child elements.
- Adjacent sibling selector `element + element`: selects adjacent elements immediately under the same parent element.
- Pseudo-class selectors `:hover`, `:active`, `:nth-child`, ...: select elements matching specific status or conditions.
- Pseudo element selectors `::before`, `::after`: insert content before and after the element.
2. Basic attributes:
- `color`: text color.
- `background-color`: background color.
- `font-family`: font family.
- `font-size`: font size.
- `font-weight`: font weight.
- `text-align`: Text alignment.
- `line-height`: line height.
3. Box model attributes:
- `width`: width.
- `height`: height.
- `
margin`: outer margin.
- `padding`: padding.
- `border`: border.
- `box-sizing`: box model size calculation method.
CSS3 properties:
1. Transition and animation:
- `transition`: Specify the transition effect.
- `transform`: Transform elements.
- `animation`: Create animation.
2. Background and gradient:
- `background-image`: Set the background image.
- `linear-gradient`: Create a linear gradient background.
- `radial-gradient`: Create a radial gradient background.
3. Shadow and border:
- `box-shadow`: Set shadow effect.
- `border-radius`: Set border rounded corners.
- `border-image`: Set border image.
4. Flexible layout:
- `display: flex`: Create a flexible container.
- `flex-direction`: The main axis direction of the flexible item.
- `flex-wrap`: The line wrapping method of flexible items.
- `justify-content`: Align flex items on the main axis.
- `align-items`: Align flex items on the cross axis.
5. Grid layout:
- `display: grid`: Create a grid container.
- `grid-template-columns`: Define grid columns.
- `grid-template-rows`: Define grid rows.
- `grid-gap`: Set the gap between grids.
The above content covers the main tags, attributes and selectors in HTML, HTML5, CSS and CSS3, which can be used to build rich web page layout and style effects.