Personal summary - HTML articles

================================htmlOverview================== =============
What is web?

What is an app?

what is html?

what is html5?

How does the web work?
b/s
c/s
b:brower browser
c:client client
s:server server

web related technology?
server
php java asp

client
html css js

================================= Getting started with html======== =======================
1. HTML

Hyper Text Markup Language
web

pages are composed of haml and suffixed with .html or .htm The document files are organized together by hyperlinks

among .

Common tools for learning the web:
PS Notepad Browser (IE, Google Chrome, Firefox, Safari, Opera

)
Code editor (dw HBuilder webstorm)...

2. Basic html syntax

1. Tag is also called element
Syntax :

① Enclosed tag
<element></element>
Example: <div></div> <p></p> <b></b>...

② Examples of non-enclosed tags
<element/>
: <input/> <br/> <hr/>...

2. The nesting and indentation of tags

form a more complex syntax, Or let the function be superimposed and
indented make reading more ideal
<div>
<div>
<a>This is a hyperlink</a>
</div>
</div>

3. Attributes and attribute values
For example:
Nongfu Spring Mineral Water Its height is 20cm, then "height" is its: attribute "20cm" is

its : attribute value

Syntax:
① The declaration of the attribute must be placed in the beginning tag
② a An element can have multiple attributes, and the attributes are separated by spaces.
Attribute values:
① The attribute and the attribute value are connected by = to connect the attribute= value
② The attribute value should be enclosed in quotation marks as much as possible

Example (citing): <p align="center" id="font">text</p>
          <div style="background-color:red; width:200px; height:200px;">

this is a red block< /div>

Standard attributes:
In short, it is a common attribute, basically an attribute that every tag will have.
id: the unique identifier of the label in the page
title: the text displayed when the mouse moves over the label
class: defines (references) the class in the style sheet style
style: defines the inline style of the current label

citing: <p id="font " title="this is a font" class="section" style="color:red;">

font</p>

4. The function and syntax of comments
① Explain the code
② Arrange ideas

Syntax : 

3. HTML document structure 1. HTML

page composition

Document root tag: <html></html>
The structure in the root tag:

the head of the web page: <head></head>

meta: single tag, coding format, keywords, description... related global information
script: define or import javascript files
link: single tag, import external
style sheet style: define internal style sheet

② body element
main content, including a lot of display to Information viewed by users.
1. Special characters:
space:
>:>
<:&it
?: ©
2. Text markup collection:
<b></b>: bold
<i></i>: italic
<s></s>: Strikethrough
<u></u>: underline
<sub></sub>: subscript
<sup></sup>: superscript
<h1></h2>~<h6></h6>: heading element, Usually used for the title of the article
<p></p>: paragraph element
<br></br>: line break element
<div></div>: block-level element layout through css
<span></span>: inline Element
<hr></hr>

Inline elements: s, b, u, i, span...
Block-level elements: div, p, h1~h6...

The role of inline elements: Most of them are used to wrap text to implement text styles.
Block -level elements: Yes Nested inline elements, but inline elements do not allow nested block-level elements.

citing:
<div>
<span></span>
<i></i>
<div>

As a novice who has just entered it, he is still learning js and other languages. Due to the time problem, HTML will summarize so much today for other newcomers to refer to tomorrow. I will specifically post some small cases and HTML advanced hope that more white people will progress with me!

Due to travel for a few days, I haven't updated Wang Haihan...

================================htmlAdvanced==== ===========================

1. Image and link
URL: Uniform Resource Locator Uniform Resource Locator Resource
: Different types used in a web page
File: Image document, etc.
Locator :

A way to

find resources

citing:
D:\Program\aqy\vip\logo.png
If you access network resources:
http://www.baidu.com/vip_logo.jpg

2. Relative path: The search path of the resource file relative to the [current file]
① Same-level directory: directly use
②Sub-level directory: enter first, refer
to ③Parent directory: first return (../), and refer to

3. Root relative path:
/: Indicates the root path of the current web site on the server
/ images/vip_logo.jpg

1. Image
Syntax : <img />
Attribute:
src: refer to the path mentioned above
width: width
height: height
title: ① the text displayed when the mouse is moved in ② the text replaced when the picture is not displayed
Try not to modify the width and height, which will cause the distortion of the image. If only one attribute is set, the image will be scaled proportionally

. 2. Links The
user moves in or clicks the mouse to complete the page jump or change the current state.
Syntax:
<a> This is a link</a>
attribute:
href: link URL (path)
target: how to open a new page _self is the default value if you want to open on the current page, set to _blank
name: define the anchor point
① link to ordinary page
<a href="http://www.baidu.con">Baidu</a>
② download document resource
txt, picture <a href="resource path">... </a>
③E-mail link
<a href="mailto:mail address">content</a>
④Link to js
<a href="javascript:js code">content</a> ⑤Return
empty at the top of the page Connect to
<a href="#">content</a>

anchors:
mark a position on the web page, so that you can jump to this position at any time ①Define
anchors
<a name="Anchor name"></a> Others The tag needs to be defined with an id
② link to the anchor
<a href="#anchor name"></a>
<a href="page url#anchor name"></a>

2. Form
Form is what we usually The said cells can effectively classify various information

1. Create a table
Syntax :
①Table< table></table>
②row <tr></tr>
③column <td></td> <th></th>

2. Table attribute
width: width
height: height
align: alignment value: left, center, right
valign: set row height
border: set border width px
cellpadding: set padding
cellspacing: set margin
bgcolor: set the background color of the table
colspan: cross-column
rowspan: Cross -line
3. Table title
Syntax : <caption>title</caption>

4. Table division
Table header: <thead></thead>
Table body: <tbody></tbody>
Footer: <tfoot></tfoot>
5. Nesting of tables
allows another table to be nested in td

3, list
1. List type:
ordered: <ol></ol>
unordered: <ul></ul>
list item: <li>< /li>

Attribute: type
Ordered value: 1, default value, number
a, lowercase
A, uppercase
I, uppercase Roman numeral
start: starting number

Unordered value: disc: default, filled circle circle
: hollow circle
square: implement rectangle
none: no nesting of

tags :
<ul>
<li>
<ol>
   <li></li>
</ol>
</li>
</ul>

2. Custom list:
Syntax: dl: Declare a custom list
dt: define the title
dd: define the content or an explanation of the title.
We often see this way on Taobao. Also called Illustrated

<dl>
<dt>
<dd>
</dd>
</dt>
</dl>

============================ =====html ending ================================

1. Structural mark
   1. The function is
      to improve the semantics of the code
   2. Structural tags
         1. Header element
     syntax: <header></header>
Function: Indicates the header content of the information part,

Function: Define the lower part of the page, the footer content, most of them will put copyright information, friendly links and other related content in this label. Equivalent to: <div id="footer"></div> 6. aside element

     Syntax: <aside></aside>
Role: Define some additional components of the page.
       In general, the sidebar can use this tag
equivalent to: <div id="aside"></div>

2. Form
   1, the function of the form to
      collect user information, and submit the user information to the server

      1, form element
      2, form Control
   2. Form element
      syntax: <form></form>
      attributes:
           1. Action
      : Define the action that occurs when the form is submitted. Mainly used to define the address of form submission by
      default to submit to this page
   2, method
      method, method
      function: form data submission method
      value: get and post
        get: get, get, get
post:
      Mail, send 1. get: The form will send the data to the server in the form of [clear text]. Less secure. There is a size limit, the size limit is 2KB.
      Common occasions: related to search and without security requirements.
      2. post: The form will send data to the server in an [implicit] manner. High security. There is no size limit.
      Common occasions: login operation, registration operation

      method If not written, the default value is get
   3, enctype
              function: the way of encoding the form data
      Value:
        1, application/x-www-form-urlencoded
default
2, multipart/form- Applicable occasions for data
   : If there is a [file] in the form that needs to be submitted, then enctype must be set to this value
   4, name
      defines the name of the form
   5, id
      defines the unique identifier of the form in the page
     3, the form controls
        use different appearance forms The content presented to accept user data.
Common form controls:
1. Input element
2. Multi-line text area (textarea)
3. Option box (select, option)

1. Input element
     syntax: <input />
     Common attributes:
1. Type: Create different input element
2, value: value, the value of the current control (default value)
3. name: the name of the control
   Use occasion: server
4, id: the unique identification of the control
   Use occasion: the current page
5, disabled: disable

             specific elements in the input
     1, text box and password box
       Text box: type="text"
       < input type="text" />
       Password box:type="password"
               <input type="password" />
       Attribute:
             name:
     value:
     maxlength : limit the number of characters entered
     readonly : set the element to read-only
     2, radio button , Check box
        radio button: <input type="radio" />
Attribute:
     name: In addition to defining the name, it can also group the radio button
     checked: set the default to be selected Check
box : <input type="checkbox" />
Attributes:
     name: defines the name and grouping
     checked: The setting is selected by default
     3. Button
        1. The submit button
   has the function of submitting, and the data in the form is submitted to the server
   <input type="submit" />
2. The reset button
   has the default value function, and all the All form elements are restored to the initialized state
   <input type="reset" />
3. Common button
   function: no function, user-defined function (js)
   <input type="button" />
     4. Hidden field, file selection Box
        1. Hidden fields
   are very important to the server. If you don’t want to show users something, you can put them in hidden fields.

   Hidden fields are controls that cannot be seen on the page, but can be submitted to the server along with the form

   <input type ="hidden" />
   name : Define the name
   value : Define the value
2. The file selection box
   opens the "Open" dialog window of the local machine, and selects the file and uploads it to the server
   <input type="file" />
   Attributes:
      name : Defines the name
   Note:
     1. The method must be post
     . 2. The enctype must be changed to multipart/form-data

              . 2. The function of the label element
         : to associate text and controls. Clicking on the text is equivalent to clicking on the control to which it is associated.
Syntax: <label>Associated text</label>
Attribute:
     for : [ID] value of the control associated with the current text
      3, option box
         classification:
    1, drop-down option box
    2, scroll list
1, drop-down option box
    <select ></select>
    attribute:
       name : name
       id : unique identifier
       size : greater than 1, it is scroll list
       multiple: set multiple selection, (valid for scroll list)
    <option>displayed text</option>
            attribute:
       value : option The value of
       selected: pre-selected

      4, multi-line text area textarea
         multi-line text box
Syntax: <textarea></textarea>
Attributes:
      readonly: set to read-only
      cols: set the number of columns of the text field, how many characters can be displayed on a line, set the width in disguise
      rows: set the number of lines of the text field, the entire text field is displayed by default A few lines, disguised to set the height.          5. Grouping syntax
      for controls :    <fieldset></fieldset> : Grouping    <legend></legend> : Specify title 3, other tags    1, floating frame iframe       syntax: <iframe></iframe>       attribute:            src : The URL of the imported webpage    width: width    height: height    frameborder: the border width of the imported webpage    2. Summary and details       You can expand and contract some information on the webpage       Syntax:        <details></details> : define the details <summary ></summary> :

      Syntax:
       <meter></meter>
      attribute:
         min: the minimum value of the measurement range, the default is 0
max: the maximum value of the measurement range, the default is 1
value: the current measurement value, the default value is 0
   4. Time element
      syntax:
        <time>text</time>
      attribute:
        datetime: specifies the date and time of the current element to be divided by T
      eg:
         this year <time datetime="2016-2-14T15:00">Valentine</time>, I am with you pass!

Control name: applicable to name and id
name attribute value, can be the same as id attribute value
1, naming convention
     Hungarian notation
     control abbreviation as prefix
     Text box: type="text" ==> txt
     Password box: type= "password" ==> txt
     radio button: type="radio" ==> rdo
     checkbox: type="checkbox" ==>

     Hidden fields and file selection boxes: ==> txt

     prefix, followed by the [action name] of the current control.
     Action name: the first character of each word is capitalized, and the rest are lowercase.

     <input type="text" id="txtUsername" />
     <input type="radio" id="rdoFemale" />
     <input type="submit" id="btnSubmit" /
>
     txtLoginName
3. Try to avoid repetition

Personal summary - HTML articles

Guess you like