HTML+CSS Study Notes summary article "carefully collection"

---restore content starts---

Part I HTML chapter I career planning and prospects

• Career direction planning and Positioning:

  • webFront-End Development Engineer
  • webWebsite architect
  • Start your own business
  • Transfer Management or other

• webOutlook for front-end Development:

  • Future IT industry enterprises need the most talent
  • Combined with the latest html5 market to seize the mobile end
  • Own business to be a boss
  • With the popularization of the Internet web has become the darling and core of enterprises

• webCareer Development Goals:

  • first, to comb the knowledge structure

    • Responsible for the content ofHTML
    • Responsible for the appearance css (cascading style sheets)
    • Responsible for the conduct ofjs
    • psTransduction

  • second, the decomposition target (initial stage, promotion stage, forming Stage)

    • Initial stage:

      • Master of Basic knowledge
      • The mastery of common tools
      • Mastery of communication skills (around the Customer's Needs)
      • Good development habits (annotation, Alignment)

    • Ascension Phase:

      • Be familiar with HTML basic tags and attributes
      • Master css The basic grammar and use
      • browser compatibility and Master of standards
      • Combine html + css + js to start System project development

    • Molding Stage:

      • Mastery DIV + CCS layout
      • Proficient in css style sheet control html labels
      • Familiar with js the effect of making dynamic website
      • Can independently develop and complete the website

Chapter II HTML BASIC structure

• Recognize Html:

  • htmlNot a programming language, it's a sign language
  • Markup language is made up of a set of identity tags
  • htmlUse tags to describe web pages

• htmlStructure:

　　

 

  
 
   
A label that doesn't appear to be right
<br> <meta>  <input..> <option..><link>
 
  
 
An explanation of the basic HTML tag:

 

  
 
   
 <body> Label
 
   
----  used only for title text, do not use them in order to produce bold text
 
   
<p>Label paragraph label
 
   
<strong><b>Label
 
   
Will make the text bold effect
 
    
 
     
<strong>For accent text, deeper intensity, representing important text---> for SEO optimization
 
     
<b>Just the visual bold effect---> simply to produce bold
 
    
 
  
 
 

  
 
   
<em><i>Label
    
 
     
emUsed to emphasize text
 
     
iJust visual italic effect
 
     
<strong>Stronger than <em> emphasis
 
    
 
   
Special Symbols:
    
 
     
&nbsp; ----> spaces
 
     
&gt; ---> greater than sign
 
     
&lt;---> less Sign
 
     
&quot;---> Quotes
 
     
&copy;--> Copyright Number
 
    
 
  
 
 
  
 Chapter three basic HTML tags
 
  
 
HTMlBasic Tags:

 

  
 
   
spanLabel
    
 
     
Pairs of inline elements that are used to combine documents
 
     
Note: span does not have a fixed format, and when you apply a style to it, there is a visual change
 
    
 
   
<pre>Label
    
 
     
The format of the text is displayed according to the layout of the source code, which we call preprocessing format
 
    
 
   
<a>Tags---> He has an essential attribute href
 
    
 
     
targetProperty:
 
     
_self(opens on original Page)
 
     
_blank(new window Opens)
 
     
_top(ignore all frames on open)
 
     
_parent(opens in the parent Window)
 
    
 
   
Create anchor points and anchor chains
 
    
 
     
An anchor is also a hyperlink, a hyperlink that jumps within a page.
      

        
First Step: Create an anchor point<a name="锚点名称"></a>
        
Step two: Use the created anchor name<a href="#锚点名称">内容</a>
 
    
 
   
marqueeLabel
    
 
     
You can create a content scrolling effect
 
    
 
  
 

 

  
 
   
directionIndicates the scroll direction, the value is (left,right,up,down, default Left)
 
   
loopIndicates the number of scrolling cycles, which is the default for infinite loops
Onmouseover=this.stop ()  onmouseover=this.start ()  scrollamout= "1" (scrolling speed)
 
   
Stop scrolling when the mouse moves over the area, move the mouse over to scroll
 
  
 
 
  
 Fourth IMG Picture label and Path
 
  
 
 

  
Picture tags and paths:
 
    
 
     
Common picture Formats jpg pnggif
 
     
Gif(full Transparency Only)
 
     
Jpeg/jpg
 
     
PngSemi/full Transparency Support
 
    
  
Picture Label Notation:
 
    
 
     
 
    
  
Picture Four Elements:
 
    
 
     
src=""Picture path
 
     
Image meaning
 
     
width=""The picture width and picture size remain the same
 
     
height=""Picture height is consistent with picture size
 
     
title=""
 
    
  
Path knowledge:
 
    
 
     
Relative path, Absolute Path:
 
      
 
       
Relative path: (Relative Path) relative to the path of the file;
 
       
Absolute Path: (Absolute Path) the path from disk;
 
      
 
     
alignProperties--set The position relationship of the picture to the following text
values--,,,, top bottom middle absmiddle left ,right
 
    
  
In a static page:
 
    
 
     
/The beginning indicates the root directory;
 
     
./Represents the current directory; (a point before the line is Drawn)
 
     
../Superior directory (two dots in front of oblique lines)
 
     
Directly with the file name without/also representing the same directory
 
    
 
    
 
     
These are relative to the location of the current file, if the absolute path is written in Full.
 
    
 
 
  
 Fifth three kinds of list explanation
 
  
 Three kinds of List of knowledge explained:
 

  
 
   
<ul>Unordered list
    
 
     
An unordered list is a list of items that are not ordered, and this list item is identified by the default bold dot
 
    
 
  
 


 

  
 
   
An ordered list of sequential tables is also a column of items, except that the list items are marked with Numbers. The sequence table starts with the <ol> label. Each list item starts with a <li> label.
 
  
 
List symbols

 

  
 
   
Unordered List-list Symbol:
 
    
 
     
type="circle"Hollow Round type=“disc” Solid circle default type="square" block character
 
    
 
   
List symbols with sequence table
 
    
 
     
type="A"A B C D
 
     
type="a"A B c D
 
     
type="1"1 2 3 4 default value type= "i" I II III type= "i" I II III
 
    
 
   
List nesting
 
   
Unordered list-nested
 
  
 

 

  
 
   
Ordered list-nested
 
  
 

 

  
 
   
Definition List
 
  
 
The definition list is not just a column of items, but a combination of items and their annotations. The definition list <dl> starts with a label. Each defines a list item to <dt> begin With. The definition of each custom list item to <dd> begin With.
ddIt's the right dt Explanation.

 

  
 
   
< dl>< /dl>Used to create a normal list,
 
   
< dt>< /dt>Used to create upper-level items in the list,
 
   
< dd>< /dd>Used to create the lowest item in the list,
 
   
< dt>< /dt>And < dd>< /dd> both must be placed < dl>< /dl> between the sign Pairs.
 
  
 

 

  
 
   
dlIt's efinition list the abbreviation for D.
 
   
dtis definition title the abbreviation
 
   
ddIt's efinition description the abbreviation for D.
 
  
 
 

  
 
   
list-styleA property has three attribute Components:
 
   
list-style-position: Sets the position of the list item icon in the text or outside the text
 
   
list-style-type: Sets the type of list item icon
 
   
list-style-image: Use image to set list item icon
 
  
 
 
  
 Sixth chapter form Elements (TOP)
 
  
 
Forms Tab:

 

  
 
   
<form>Form Labels
 
    
 
     
<form>A form is a region that contains form elements, including the contents of a form
 
    
 
  
 
HTML tag- Action and Confirm Button:

 

  
 
   
When the user clicks the Confirm button, the contents of the form are transferred to another file. The action properties of the form define the file name of the destination File. This file, which is defined by the action attribute, is usually processed in connection with the input data received.
 
  
 

 

  
 
   
HTMLTags-hide Fields Hidden Tags:
 
   
Hidden fields are not visible to the user in the page, and inserting hidden fields in the form is intended to collect or send information for use by the program that processes the FORM. When the browser clicks the Send button to send the form, the hidden field information is also sent to the server
 
  
 

 

  
 
   
<input>The control of the label
 
    
 
     
Common type Types:
 
      

        
<input type="" name="" value="" />
        
type="text"Single line text input box
        
type="password"Password ( maxlength="" )
        
type="radio"Single Selection ( checked="checked" )
        
type="checkbox"Multiple options
        
type="button"Button
        
type="submit"Submit type="image" Photo Submission
        
type="file"Uploading files
        
type="reset"Reset
        
type="hidden"Hide
 
    
 
   
About setting default values in a form:
 
  
 

 

  
 
   
textareaNo default value
 
   
<label>Use of tags
 
    
 
     
<label></label>
 
      

        
labelThe element does not present any special effects to the User.
        
however, It improves usability for the user of the Mouse.
        
If you click on the label text within an element, the control is Triggered.
        
That is, when the user selects the label, the browser automatically shifts the focus to the label-related form Controls.
 
     
<label>The property of the label for should be the same as the property of the related element id .
 
     
Example: (important---registration form-user experience-must do)
 
    
 
  
 

 
  
 Seventh form and Form (bottom)
 
  
 
 

  
 
   
Forms and Table Labels:
    
 
     
<textarea>Text field labels
 
     
<textarea>Label:
 
     
<textarea></textarea>is a text field label in which you can insert a text content that has two common properties rows andcols
 
    
 
   
Attention:
 
    
 
     
rowsIndicates how many lines are in this text field
 
     
colsIndicates how many columns are in this text field
 
    
 
   
In addition to these two properties it also has readonly (read-only, text field content cannot be changed, equivalent to Protocol) and title (mouse on Cue)
 
   
<select>The control of the label
 
    
 
     
Note: when a form is submitted, the browser submits the selected item, or collects multiple options separated by commas, synthesizes it with a separate argument list, and <select> includes properties when submitting the form data to the server name
 
    
 
  
 

 

  
 
   
Properties that are commonly used:disabled=“disabled” name="sel" size="2"
 
  
 
 

  
 
   
<table>Table Labels
 
   
<table>Table Label: <table> is a table label that you can use to define a Table.
 
  
 

 

  
 
   
Note: <table> The border properties cannot be less
 
  
 
 

  
 
   
<tr><td>Use of tags
 
    
 
     
<tr>Row Label:
 
      

        
<tr>You can define a row in a table, and a < tr></tr> represents one ROW.
 
    
 
  
 
<td>Cell Label:

 

  
 
   
<td>You can define a cell in a table to <td></td> represent a Cell.
 
  
 

 

  
 
   
border-collapseproperty to set whether the table border is collapsed to a single border:
 
   
border-collapse:collapse;
 
   
colspanMerge around
 
   
rowspanMerging up and down
 
  
 
the First part summarizes :

 

  
Non-visual tags: head meta style scrpit. .
  
Visualize tags: img div span a ul li ...
  
Only visual labels can be used to css change it.
  
Single label meta link base img : input brhr
  
Double label: html head body div a p span ... ul li ol dl
  
Common visual labels
 
    
 
     
div 
      
 
       
It's usually used for Layout.
 
      
 
     
a Hyperlink label
      
 
       
href* Properties: Set the page address of the jump
 
       
targetProperties: set the destination of the jump
 
       
Conclusion: All things page can click Jump or form submitted text, all with a tags
 
      
 
     
img 
      
 
       
src* Property used to set the URL data of the picture
 
       
altAvailable to search Engines.
 
       
width
 
       
height
 
       
Conclusion: Show Pictures
 
      
 
     
UL Li 
      
 
       
List
 
       
Conclusion: as long as there are fixed style lists in the future design page, use UL and Li
 
      
 
     
tablecaption trtd (th) 
      
 
       
Slowly has been eliminated by UL Li instead of
 
       
Merge Rows () If you are merging a vertical row rowspan
 
       
Merge Columns () If the merge is horizontal colspan
 
      
 
    
 

 
  
 
HTML Section Map Summary

 
  
 
 

  
 
   
HTML5 Tag Collection
 
  
 
Wen/poetries (author of Jane's Book)
Original Link: HTTP://WWW.JIANSHU.COM/P/8EBEBB84B1C1
Copyright belongs to the author, please contact the author to obtain authorization, and Mark "book author".


HTML+CSS Study Notes summary article "carefully collection"