Home > Developer > Web Develop
---restore content starts---
Part I HTML chapter I career planning and prospectsCareer direction planning and Positioning:
webFront-End Development EngineerwebWebsite architectwebOutlook for front-end Development:
IT industry enterprises need the most talenthtml5 market to seize the mobile endweb has become the darling and core of enterpriseswebCareer Development Goals:
first, to comb the knowledge structure
HTMLcss (cascading style sheets)jspsTransductionsecond, the decomposition target (initial stage, promotion stage, forming Stage)
Initial stage:
Ascension Phase:
HTML basic tags and attributescss The basic grammar and usehtml + css + js to start System project developmentMolding Stage:
DIV + CCS layoutcss style sheet control html labelsjs the effect of making dynamic websiteRecognize Html:
htmlNot a programming language, it's a sign languagehtmlUse tags to describe web pageshtmlStructure:
<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 textiJust visual italic effect<strong>Stronger than <em> emphasis
- Special Symbols:
----> spaces> ---> greater than sign<---> less Sign"---> Quotes©--> 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 loopsOnmouseover=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/jpgPngSemi/full Transparency Support
Picture Label Notation:
Picture Four Elements:
src=""Picture pathwidth=""The picture width and picture size remain the sameheight=""Picture height is consistent with picture sizetitle=""
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 Dtype="a"A B c Dtype="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 abbreviationddIt'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 textlist-style-type: Sets the type of list item iconlist-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 boxtype="password"Password ( maxlength="" )type="radio"Single Selection ( checked="checked" )type="checkbox"Multiple optionstype="button"Buttontype="submit"Submit type="image" Photo Submissiontype="file"Uploading filestype="reset"Resettype="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 fieldcolsIndicates 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 aroundrowspanMerging 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 jumptargetProperties: 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 picturealtAvailable to search Engines.widthheight- 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"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
