"Learning notes" HTML basics

Source: Internet
Author: User
Tags closing tag file transfer protocol

"The learning process has encountered questions and extended reading"

1. Text Encoding

In addition to the HTML markup text, you need to specify its encoding rules <meta charset= "Utf-8", to inform the browser,

Otherwise, the browser chooses the default encoding of the computer, or the settings are encoded according to the "auto-select/Detect" method.

Notice here that there is a concept, the browser automatically selects the settings, if set up after the first priority according to this setting.

is the 2.html markup language parsed by the browser's XXX? "Browser parsing HTML source code"?

Same concept: Web browser engine, browser kernel, typesetting engine, rendering engine

Reference understanding, the process of browser parsing HTML and the tree structure of the DOM

Http://www.qdfuns.com/notes/15102/7e915575d17fe8112c99f43b567b314a.html

3. Natural language and programming language

Which of the existing programming languages are closer to natural languages? From know

https://www.zhihu.com/question/19701701?sort=created

4. Can the picture be viewed as a character occupying the page?

The picture is the inline element.

Extended understanding: The arrangement rules of a Web page are standard streams when not using other special CSS rules related to alignment and positioning.

Elements in an HTML document can be divided into two main categories: inline and block-level elements.

(1) Inline elements do not occupy a single space, are attached to block-level elements, and the inline elements do not have their own area.

(2) block-level elements are always represented as blocks, and the sibling blocks are arranged vertically, left and right, until the boundaries of the elements that contain it, cannot be side-by-sides in the horizontal direction.

"New concept, important concept"

List: A very useful data arrangement tool that displays data in a clear and intuitive form.

Ftp:ftp is a file transfer protocol, the server has a large number of shared software and free resources, in order to transfer files from the server to the client or the resources on the client to the server, you must be in the two machines for file transfer, both sides must be together to comply with certain rules. FTP is the standard protocol used to implement file transfers between a client and a server. It uses the client/server mode, the client program tells the client's request to the server, and the server sends back the results displayed. The server side performs real work, such as storing, sending files, and so on.


"Practical knowledge of the context of the point"

1.html Foundation
1.1 What is HTML
Every day in touch with HTML
Hypertextmarkuplanguage
Page has links to other pages, these other pages also have links,
Connect all these pages together to form a network of content.
The content is composed of super-text.

HTML is the language that these pages grow into.
The original HTML evolved from the typesetting language.

Standard for 1.2.html
is maintained by the organization of the Consortium.
The actual standards are driven by larger browser vendors.
is the browser manufacturers in the process of improving the browser and constantly accept each other, and the formation of the fact of the standard.

In the end, they are written in the text. Be determined in the form of words.

HTML, HTML5 Relationship: Not fragmented, is the same strain of things. HTML5 is also being developed.

1.3.html editing software
Sublime Text2
Create a new HTML file that opens in the browser
Text encoding: UTF-8 encoding, does not support GB code GBK

1.4. Debugging function of the browser
Debug: Check the contents of the writing there is no problem
4.1 Write HTML file and open in browser, debug view



2.HTML file Framework
2.1 File Framework
Markup language, adding a flag to the text instead of the body
Html:
Head: Tell the browser what to pre-configure
Body: Tells the browser what to display, text visible information
2.2html character encoding issues
The computer is the GB code, the browser thinks the HTML is also GB code
In head, plus meta charset=utf-8 Unicode unified encoding
2.3html-Declaration HTML5
<! DOCTYPE html>

3. Paragraph marks
3.1<p> represents a paragraph
HTML and CSS Relationships
3.2<br> break breaks, do not need the corresponding </br>
and the distinction between <p>
3.3Head multilevel header, the higher the number, the lower the level
3.4The title tag is the first paragraph that tells the browser, the structure of the text content, an important mark.

4html format
HTML needs to express the content, expressing the structure rather than the format, but the early
HTML is still left with the expression format tag.
4.1 Basic formats
Text Format
<b><i><tt><small><del>
Note: To add the end of the slash tag, the format will be applied to all text after the marker begins
Suggestion: or use CSS to express the format

4.2 Paragraph format
Use the format in a piece of content to tell the browser what it's like to express the content
<em> emphasizes that it is important
<strong> says focus
<dfn> Express Definition
<code> represents code code that is easy to mark some function names in technical articles in the English language
<samp> represents the Samp example code
<kbd> Express KBD User input
<var>variable variable
<cite>cite references
Practice

4.3 Other formats
Some of the structure, but also with a certain format tag
<address> can be used as a part of the search by placing multiple lines of content or being recognized by the browser.
<blockquote> indent, can be nested
<q> Quote Number Wrap Text
<pre>premated, displayed in the original format

5 in-depth format
5.1.HTML tagged properties
5.1.1HTML Properties
In addition to the HTML markup itself, you can also add something, HTML properties
HTML tag properties, variables equal to the value of the formula, can form different visual effects
Once attribute values need to be quoted, HTML5 can not be added, all browsers currently support without
<abbr title= " People's Republic of China ">PRC</ABBR>
<p title=" ">...</P>

<bdo Dir=rtl>...<bdo>
<bdi>...<bdi>
5.1.2HTML escape character
to express less than sign < in the text; And this symbol is just the beginning of the HTML tag,
What to do?
&lt;
&gt;
character entities, variable-number fonts, and also some special symbols (that is, &lt;) to express that individual symbol (<)
What else?
&: &amp;
: &nbsp;none breakable space
plus two dots in: &uuml;&uuml
Of course there are many.

5.2 List and picture
5.2.1 list
<ul>unorder list, denoted by a dot before each list item
<ol>order list, denoted by a number before each list item
<li>list Item, the contents of each item for each list
Note: The browser does not work with indentation between HTML tags, and the indentation is just for better reading of the source file.
<ol> has an attribute start, which adjusts the starting value of the number.
<dl>defination list, consisting of two parts: <dt>defination term,<dd>defination description
5.2.2 pic
How to put pictures in the page?
Tag

Note: For HTML, the picture is a character. With the other words on the page connect prompt together, row over.
Their baselines are on the same horizontal line. This is the default alignment, and there are other alignments, and after the HTML5 standard, the
is generally determined by CSS.
Properties Width,height, position browser pre-left position, alt hint Text
SRC can take internal picture, also can take external picture. The
Browser can support the image format, there are three kinds of gif,jpeg,png.
5.2.3iframe
is close to IMG and also occupies a character and is also a resource from outside. The
has a closing tag.
Effect: In the current Web page opened a small window to the content of other sites to take over.

5.3 Hyperlinks
5.3.1 Hyperlinks
How to put a link in the page, and then click on the link, go to the linked page
<a href= "http://news.163.com" > NetEase news </a>
Open another page under the current directory
<a href= "a.html" > Page </a>
Target property, value _blank, etc.
5.3.2 in-page connections
There is also a link to the destination
First, you need to add the id attribute to the destination where the link can be
The value of the href attribute of the link is "#id值"
5.3.3 Image Location Link
The once popular mark
<map name= "map image Name" >
<area shape= "Click area Shape" coords= "area coordinates" href= "link Address" >
</map>
Need to set map name usemap= "map image name" under img

5.4 Table
A more complex structure of HTML
<table border= "1" >
<caption> table title </caption><!--is located in the first row of the entire table--

<thead>
<tr>
<th>OS</th><!--the header in the table, for the cell, the font is a little thicker than the TD.
<th>Chinese</th>
<th>French</th>
</tr>
</thead>

<tbody>
<tr><!--Table row-->
<td>iOS5</td><!--a row of squares--
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<TD colspan= "3" >Windows</td><!--columns combined--
</tr>
</tbody>

<tfoot>
</tfoot>

Note: A table is also a character for HTML.
The characters before and after the table are in the upper row and last row of the table area, respectively.

Structure of the table: Thead,tbody,tfoot

"Learning notes" HTML basics

Related Article

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.