Javaweb's HTML primer and common tags

Source: Internet
Author: User

Overview and role of html:html:

HTML is all called Hypertext Markup Language, which is a Hypertext markup language, not a programming language, and is a descriptive markup language used to describe how content is displayed in Hyper-text. such as font what color, size and so on.
HTML is shorthand for Hypertext Markup Language, which is the most basic web language.
HTML is a language defined by tags, and the code is made up of tags.

The basic format of HTML:
<HTML>    <Head>to place some property information or accessible information<title></title>the introduction of external files will first load</Head>    <Body>other labels where the content of the data is actually stored</Body></HTML>

A: By observing the format, discover
The HTML code starts with The first part is to add some auxiliary or attribute information to the HTML page, the content of which will be loaded first.
The body part is where the page data is actually stored.

B: Explanation of the format
HTML: Placed at the beginning of the HTML file, but there is no substantive function, even without this tag, the browser will encounter other HTML tags as well as parsing.
The browser has a parser built into the HTML language.
You can set the default open browser: Tools-Folder Options-file type
Head: A header tag that places information about this HTML file, such as providing an index, defining a CSS, and so on.
Title: The caption tag, contained within the head tag, is the function of setting the title of the page.
Body: The body tag, the content that the webpage needs to display is placed inside this tag.

* End With. html or. htm
* The browser can parse the HTML file.

HTML considerations:

The general label has the beginning and the end, only a single function, can end inside the label.
Change the properties to achieve a good display effect
Property values can use double quotes, single quotes, or no quotation marks, usually double quotes, or according to the company's specifications.


* MyEclipse
* Set the encoding of the workspace
* window-Preferences-general-workspace-Select UTF-8 encoding
* Window-preferences-myeclipse-files and editors-html-modified to UTF-8 encoding
* Window-preferences-general-editors-file associations-Select *.html-Select myeclipse HTML editor-select default-Select OK


* Tags for HTML
* Layout Label
* Line label <br/> (less used)
* Horizontal * Properties: Color: Colors
* The color of the wording: there are two ways: 1) color of the English word 2) RGB primary color (red green blue) #ffffff
* Properties: Width: Widths
* values are written in two ways: 1) pixel value (300px) 2) percentage (30%)
* Difference: The percentage will change with the size of the browser, the pixel will not.
* Space:&nbsp;
* Paragraph labels (relatively large number of use)
* <p></p>
* Features: At the beginning and end of the position, each produces a line of blank lines.
* Properties: Align: How to align

* <div></div>
* <span></span>
* The label is very simple, which is to declare an area on the browser.
* Difference: There is a newline behind the Div, span does not.

* Block-level elements and inline elements (learn)


* Font Label
<font></font> (important)
* Color: Colors
* Size: Sizes of fonts
* Maximum and minimum maximum value is 7 the minimum value is 1
* The default value is 3,size's notation and provides one (+2)
* Face: Type of font

* The label of the title (less used)
* ...
* * from 1 to 6 is gradually shrinking.

* tags in bold and italic
<b></b>
<i></i>

* Tags can be nested
<b><i></i></b>

* Special characters for HTML
<: &lt;
>: &gt;
&: &amp;

* Scrolling subtitles (forget it)
Marquee

* List Label
* Format the data in the specified format.

* List Label
<dl> (less used)
<dt> Top Projects </dt>
<dd> Lower level projects </dd>
<dd> Lower level projects </dd>
</dl>

* DD Tag Features: default indent and Auto align.

* There are sequence lists and unordered list
Orderly: (also more)
<ol>
<li></li>
</ol>
* Attribute: Type
Start from where?

Unordered: (very much used)
<ul>
<li></li>
</ul>
* Attribute: Type

* Whether ordered or unordered, intermediate data entries are used <li></li>


* Picture Label (IMPORTANT * * * *)

Properties
* Attribute: src= "image Address"
* Width of image display
* Height of picture display
* Alt image Description text


* Hyperlink Tags (IMPORTANT * * * * *)
* <a> text content </a>
<a></a>
* Link Resources
* Attribute: href= "Specifies the address of the linked resource"
* Note: If you link a network resource, you need to write the agreement. If there is no agreement, the default file protocol.
* Note: If the browser can parse the file, it opens directly.
* If the browser can not parse the file, pop up the download window.
* Custom Protocols
* If the browser cannot parse the protocol, the application on the operating system will be found.

* Target: Open position.

* Locate Resources
* Professional term Anchor
* Properties: Name

* Table Label (* * * * *)
Table Labels
<table>: Declaring the scope of a table
* Attribute: border= "1"
Width: widths of tables
Height: High
bgcolor: Color of background
cellpadding: Inner margin

<caption> title </caption>
<tr&gt: A row representing a table
* Properties: Align: the alignment of text

<td>: cell
Properties: Width: Widths
Height: High
Merge cells:
Row merge: rowspan= "2"
Column Merge: colspan= "2"
</td>
</tr>
<tr>
<th></th>: cell
</tr>
</table>

* Note: The difference between TD and TH: TH default Center and bold


* Form label (important **********)
<form&gt: Encapsulates a range of forms.
* Attribute: action= "request submission Path"

Method= "How to submit a form"
* Interview question: What are the forms submitted?
* A: There are many ways to submit a form, and there are two common ones, get and post.
* The difference between get and post submission methods:
* When the Get method is submitted, the data is displayed on the address bar.
* Post mode does not.

* When the Get method is submitted, the security level is low.
* Post mode security level is high.

* When the Get method is submitted, the data size is limited.
* Post mode does not.

* Input item's form component
<input/>
* Very Important properties: type, depending on the type value, provides a different input component.
* The following: <input type= "text"/>

Type=text Text Input Box
Type=password Password Entry box
Type=radio radio button
* Provides the property name (the value of name is the same)
* Default is selected: Checked=checked or True

Type=checkbox Multi-Select button
* Default is selected: Checked=checked or True

Type=file File Selection box
Type=hidden Hidden Components
Type=button button (the ugliest in history)
The Type=image and submit buttons are the same function.
Type=reset Reset
Type=submit Submitting data

* Select box
<select name= "City" >
<option value= "BJ" > Beijing </option>
<option value= "sh" > Shanghai </option>
</select>

* Text field
<textarea rows= "" cols= "" ></textarea>

</form>

* Note: After clicking the Submit button, the Address bar sends a change (? sex=on) *? username=haha&sex=on
* USERNAME=ZHANGSAN&AMP;PWD=123&AMP;SEX=NAN&AMP;LOVE=LQ

* Input tag needs to provide two attributes, one property name, and one is value
(* * * *) The name attribute must be specified, value depends on the condition specified.


* Frame label (less used)
* Use &LT;FRAMESET&GT;&LT;/FRAMESET&GT;: Note: This label cannot be used inside and below the body tag.





















Javaweb's HTML primer and common tags

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.