HTML + CSS detailed tutorial, this article is enough, but also quickly save

Drinking wine into the heart 2021-02-22 22:42:59
html css detailed tutorial article


<link /> Import external resources

Block labels :<p>,<h1> To <h6>,<table>,<ul>,<div> wait <span>

In line labels : <a>,<img>,<span> wait

<br /> Line break

<hr align=" alignment " color=" Color " size=" thickness " width=" Width " /> Level

<b></b>,<strong></strong> bold

<i></i> Italics

Special characters

Used to display spaces


<form name=" Form name " action=" The path of the submitted server " method=" Method of submission "></form>

1)action Used to indicate who processes the form , The default is the current page

2)post The way is to package the data into a data package and send it quickly , So it's more secure and can send a lot of data ;

get Methods don't package data , Only a small amount of data can be sent , But fast ; The default is get;

Input control

<input type=" type " size=" Show width " name=" name " />

Be careful :

1) Radio boxes with the same name will automatically form a group , You can only choose one from a group

2) Check boxes in a group should also have the same name

Attribute specification :

1)type There can be multiple values ,eg:

text: The default value is , Single line text box

password: Password box

radio: Radio buttons

checkbox: Check box

file: File domain ( For uploading files )

button: General button

submit: Submit button

reset: Reset button

image: Image button

2)value: Submitted value

3)maxlength: The maximum length allowed to enter

4)readonly: Set to read only

5)disabled: Set to disable

<textarea name=" name " cols=" Number of columns " rows=" Row number ></textarea> Text field

<buttom></buttom> Define buttons

select A drop-down box

1) Format

<select name=" name ">

<option value=" value 1"> Options 1</option>

<option value=" value 2"> Options 2</option>



Be careful :

Options 1 and 2 Will not submit , What's really submitted to the server is value The value of the property ;

selected The option representing the drop-down box is selected ;

checked Indicates that a check box or radio box is selected ;

Form validation

1.required Required validation

2. Form matching validation

<input type="email"/>

<input type="date"/>

3. Verify the input range

<input type="number" min="18" max="35" step="5"/>

4. Set custom prompt information

<input type="email" oninvalid="setCustomValidity(' Prompt information ')"/>

Forms end

<img alt=“ Prompt information ” title=“ Prompt information ” src=” Picture path ”"align=" Alignment mode "

border=" The frame size " width=" Width " height=" Height " /> Insert a picture

Audio tags

1) Format :

<audio width=" wide " height=" high " src=" route " controls="controls">

Your browser does not support it audio label


Video Tags : take audio Switch to video that will do


<a href=” Link location ”target=" Target window " ></a>

Be careful :

_self: Means to open... In the current window ;

_blank: Indicates that it opens in a new window

a:link Unhooked hyperlink style

a:hover Mouse over hyperlink style

a:active Hyperlink styles that are not released when you click

a:visited Hyperlink style after access

<ul><li></li></ul> Unordered list

<ol><li></li></ol> Ordered list

<dl></dl> Custom list <dt></dt> title <dd></dd> Description of the title

<table></table> form

1)border: Frame

2)cellspacing: Set the distance between the grids

3)cellpadding: Set the border and content of the grid

<caption></caption> The total head

<tr></tr> That's ok

<td colspan=" Number of columns " rowspan=" Row number ></td> Cell

<thead></thead> Header

<tbody></tbody> Form and content

<tfoot></tfoot> Table notes

<style></style>css style



background Compound attribute

background-color: keyword | rgb()| #6 A hexadecimal number The background color

background-image:url( Picture path ) Background image

background-position: Parameters 1 Parameters 2; Background image location

Parameters 1 Control the horizontal direction x location

Parameters 2 Control the vertical direction y location

background-repeat:repeat | no-repeat |repeat-x | repeat-y How to repeat the background image

background-size Background image size

1. Linear gradient

1) No repetition

background:linear-gradient( Angle or direction , Color 1, Color 2...);

2) repeat


2. Radial Gradient ( Be careful : When the container is square , Radial gradients are always round )

1) No repetition radial-gradient(...)

2) repeat repeating-radial-gradient(...)


border Compound attribute

border-style: solid/dashed/none Border style

border-width: The width of the border

border-color: Color of border

border-bottom Under the frame

border-left The left margin

border-right Right margin

border-top On the border

border-radius Rounded rectangle

border-image Border picture

The box

box-shadow: Horizontal distance Vertical distance Blur radius Color ; Box shadow


opacity transparency


height Element height

max-height Maximum height

min-height Minimum height

width Element width

max-width Maximum width

min-width Minimum width


list-style A list of attributes

list-style-image:url( Picture path ) List image

list-style-position List item location

list-style-type List item shapes


margin Compound attribute

margin-bottom Bottom margin

margin-left The left margin

margin-right The right margin

margin-top From the above


padding Compound attribute

padding-bottom Bottom margin

padding-left The left margin

padding-right The right margin

padding-top From the above

Location attribute

bottom Down the distance

top Up the distance

right Right distance

left Left distance

cursor The cursor shows the shape

display Change element type

1)block: Lump

2)inline: Row level

3)none: nothing ( Hiding and not occupying position )

float:left/right/none float

overflow An event occurs when an element overflows

position Location type

1.static Static positioning ( The default value is )

1) Keep the default location in the standard document stream , No movement

2)left,top The wait attribute is invalid

2.relative Relative positioning

1) Offset from the original position , It can be used left,top,right,bottom Set offset

2) Does not deviate from the standard document stream

3.absolute Absolute positioning

1) By default, the upper left corner of the browser is the coordinate origin , Horizontal to the right is X Positive axis , Vertically down is Y Positive axis

2) Will break away from the standard document stream

3)z-index Determine the stacking order of elements , The higher the value, the higher it is

4.fixed Fixed position

1) Out of the standard document stream

2) Always take the upper left corner of the browser as the coordinate origin

vertical-align Vertical alignment

visibility Set whether the element is visible

z-index Stacking order of elements


font-family typeface

font-size font size

font-weight The font size

color: The font color

Text attribute

direction Direction of writing

letter-spacing Between characters

line-height Row height

text-align Horizontal alignment of text

text-decoration Set text modifiers ( Underline )

text-indent The first line indentation

text-shadow: Horizontal distance Vertical distance Blur radius Color ; Text shadow

text-transform Case of text
本文为[Drinking wine into the heart]所创,转载请带上原文链接,感谢

  1. vue.js项目win10 npm install的时候报错
  2. springboot 开启http2
  3. Vue事件总线(EventBus)
  4. jQuery EasyUI使用教程:自定义数据网格分页
  5. 使用OkHttp和OkHttpGo获取OneNET云平台数据
  6. Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件
  7. Python belongs to back-end development or front-end development? Introduction to Python!
  8. HTTP 1.x 学习笔记 —— Web 性能权威指南
  9. Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件
  10. HTTP 1.x 学习笔记 —— Web 性能权威指南
  11. Javascript中的事件冒泡与捕获
  12. The root element is missing 解决方法
  13. Javascript中的事件冒泡与捕获
  14. 010_ HTML5
  15. 020_ CSS3
  16. 030_ JavaScript
  17. Anti shake and throttling and corresponding react hooks package
  18. Using CSS in JS in svelte
  19. Pure CSS free website with dark mode switching function
  20. Front end interview daily 3 + 1 - day 678
  21. How to insert an element into the specified index of an array?
  22. 配置证书使得ngnix能够发布https的可信网站
  23. HTTP接口调试利器!4.8万Star的HTTP命令行客户端!
  24. 前端url链接带的参数加密
  25. HTTP接口调试利器!4.8万Star的HTTP命令行客户端!
  26. Is react server components OK?
  27. Summary of front end basic knowledge (4) - webpack
  28. Sass nesting rule
  29. 前端三大框架:数据绑定与数据流
  30. axios 源码阅读(一)--探究基础能力的实现
  31. Javascript中的事件冒泡与捕获
  32. #研发解决方案#易车前端监控系统
  33. 【JS】877- 35 个 JavaScript 的奇葩知识,长见识了!
  34. #研发解决方案#易车前端监控系统
  35. 高性能 Nginx HTTPS 调优 - 如何为 HTTPS 提速 30%
  36. Front end, school recruitment, Taobao, guide
  37. Front end, social recruitment, Taobao, guide
  38. javascript 十大经典排序
  39. Draw a mellow cactus with the boneless technique of Meticulous Brushwork
  40. HTTP 1.x 學習筆記 —— Web 效能權威指南
  41. Vue3元件(九)Vue + element-Plus + json = 動態渲染的表單控制元件
  42. 我的 HTTP/1.1 好慢啊!
  43. Vue為何採用非同步渲染
  44. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for
  45. Front end monastery
  46. How to quickly understand a new front end project?
  47. webpack4.X核心工具库之tapable实例对象Hook
  48. webpack4.X核心工具库之tapable实例对象Hook
  49. C++使用libcurl进行http通讯
  50. Can be directly used in HTML special character table Unicode character set
  51. C++使用libcurl进行http通讯
  52. Java traverses list < string > and takes out the string elements in it, and splices them with ","
  53. Self taught web front end more than two months, talk about my harvest and progress, learning summary
  54. vue 中使用 css 变量
  55. 深入了解React中state和props的更新
  56. 百度分享不支持https的解决方案
  57. [practical] ABAP mail sending (HTML + attachment)
  58. [practical] ABAP mail sending (HTML + attachment)
  59. Teach you how to select products with less profit and competition in Amazon Product Development (1)
  60. 【微前端】微前端最终章-qiankun指南以及微前端整体探索