Beginner HTML+CSS summary

I. Media attributes:

<link href="mobile.css" media="screen and (max-device-width:500px)">
Copy the code

Using the @media rule in CSS

Two, font style:

Font-family: ‘Times New Roman’, ‘times New Roman’, ‘times New Roman’, ‘times New Roman’. (2) Set by percentage (font size relative to parent element); (3) by keyword, such as xx – small, x – small, small, medium, large, x – large, xx – large; Font weight: set the font size normal/bold 5. Text-decoration: Text style Underline/overline/delete line line-through 6. Font style: Font style italic/oblique oblique 7.@font-face (built-in CSS rules) : Define font names and positions add @font-face rules to CSS files and place them at the top

@font-face{font-font-family :" custom name "; src:url("http://....." ), url("http://....." ); }Copy the code

In addition, common CSS built-in rules include @import / @media

Common abbreviations of CSS property values

1. The margin:

Padding /margin: top right bottom Left padding/margin: top right leftCopy the code

2. Border/background/font

border: thin solid #bfa
background : white url() repeat-x
font: [ font-style  font-variant  font-weifht ] font-size / [line-height]   font-family
Copy the code

Four, layout,

1. Stream definition: block elements from top to bottom, with newlines before and after each element; The inline elements are horizontally adjacent from top left to bottom right. 2. Layout Fluid layout: The page changes as it zooms in and out; Freeze layout: use

5. Link external files

1. Link external CSS files

<link type="text/css" rel="stylesheet" href=".. /loubge.css">Copy the code

2. Link to external JS files

<script src="./lounge.js"></script>
Copy the code

6. New HTML5 tags

1. The label

Header

2. Add a video

<video  controls  autoplay  loop  width="200px"  height="200px" 
src="video/ss.mp4"  poster="poster.png"  id="video"  preload="auto">
</video>
Copy the code

Autoplay and Controls and loop are Boolean properties with no values (Autoplay controls autoplay, Loop controls repeat, controls controls progress bar); Preload controls how the video loads: None/metadata/auto;

Seven, tables,

Structure:

<table> <caption>... </caption> <thead> <tr> <th>... </th> <th>... </th> </tr> </thead> <tbody> <tr> <td>... </td> <td>... </td> </tr> <tr> <td>... </td> <td>... </td> </tr> </tboody> </table>Copy the code

1. CSS Caption -side allows you to specify whether the caption should be above or below. 2. Border-collapse: Fold cell borders into a border; 3. Align with text-align and vartical align 4. Apply styles to odd/even rows of the table using pseudo-classes: :nth-child(even) / : nth-Child (odd) 5. Specify how many rows a cell spans:

Specify how many columns a cell spans:
6. List-style type: disc/circle/square/None

Eight, forms,

1. Create the form with

Text mask

<input type="password" name="secret">
Copy the code

Text input

<input type="text" name="fullname">
Copy the code

Attribute maxLength specifies the length of a character

Submit input

<input type="submit">
Copy the code

Use the value attribute to display other names

Radio button input

<input type="radio" name="hot or not" value="hot">
Copy the code

The Checked property causes this option to be selected by default in the browser

Check box input

<input type="checkbox" name="..." value=".." >Copy the code

File input

<input type="file" name="doc">
Copy the code

Text area

<textarea rows="10" cols="10" name="..." >Copy the code

Menu controls (drop-down list)

<select name="..." Multiple (multiple) > <option value="..." ></option> </select>Copy the code