The entire front-end development workflow

1. The product manager proposes project requirements

2. UI design draft

3. Front-end personnel are responsible for developing static pages (backend personnel who are synchronized with the front-end are preparing data)

4. Interaction between front-end and back-end

5. Testing

6. Product launch (late project maintenance)

Internet principles

1. When the user is in the browser When you enter a URL, it will be sent to the corresponding server to request the web page information corresponding to the URL

2. The server will download the web resources corresponding to the URL to a temporary file on your computer Folder

3. The resources in the temporary folder are displayed through the browser (so when we request the website for the second time, the speed will be much faster)

Element

• Inline elements: There are n multiple inline elements in a row, and the width and height of inline elements cannot be set

• Block elements : A block element, occupying one line by itself;

• Inline block element: There can be multiple inline block elements in one line, but the width and height can be set

html skeleton structure

• !DOCTYPE..Document declaration header (html5, html4.01, XHTML)

• In html4.01 and XHTML each have 3 small specifications

1. strict strict

2. transitional ordinary

3. frameset Frame

• html: Hypertext Markup Language; all "tag pairs" used in it

1. head

• meta(charset:UTF-8,GB2312)

• <meta name="description" content="Content to be described"/>

• <meta name ="keywords" content="Keywords, keywords"/>
  (The above two metas are for SEO optimization)

• ##

Title
Paragraph p: Although p is a block element, it contains are also pictures and text;
span: is used to put text: pictures and text;
aLink
• >
Picture
• 

css: written in

• Inside

• The basic syntax of the style:
  Selector (div){
  key:value
  }

  p{
  height:40px;
  line-height:40px;
  background-color:red;
  }

  Copy after login

• Selector:

1. ## Tag selector: div,h,p,a,img,span

2. class selector:.xinxi

   
   (Never use Chinese characters or numbers starting with the class name, be sure to use English)

Jumps between various modules on this page

1. 
   2 Realize mutual jump between different pages and different modules
   
   
   ##List

<ul>
<li></li>
<li></li>
</ul>

<ol>
<li></li>
<li></li>
</ol>

<dl>
<dt>表头</dt>
<dd>详情介绍</dd>
</dl>

• Input text box

• Enter password

• Radio button: Radio button group, must add name, otherwise the radio selection effect cannot be achieved;

<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女

<select>
<option name="city" value="bj">北京</option>
<option name="city" value="sh">上海</option>
<option name="city" value="sz">深圳</option>
<select>

1. In the JS stage, used to obtain the element

2. id matches a link to set the anchor point;

Message box:

• Button

Normal button type=button

• Submit button type=submit

• Reset button type=reset

• Selector

• Steps to add a small icon:

1. ##Save the above image as to your computer

   
   

Note: Put the icon icon in the "root directory" of the folder;
Add in the html page:

The above is the detailed content of Summary of HTML+CSS knowledge points. For more information, please follow other related articles on the PHP Chinese website!