03-HTML tags used

写在前面，该博客是对黑马前端课程笔记的再整理，方便自己复习回顾，侵删

---

The first phase of 01 front-end basis .HTML commonly used tags

learning target

• understanding:
  • Three forms relative path
• application
  • Publishing label
  • Text formatting tags
  • Image tag
  • link
  • Use a relative path, absolute path

1. HTML tags used

HTML tags are many, here we learn the most commonly used, followed by some less used, we can look at the manual on it.

1.1 publishing label

Css layout and major labels with the use of display labels page structure, page layout is the most commonly used labels.

1) Title Tag h (memorize)

English abbreviations: head head title title title of the document.

In order to make a more semantic web, we often use the title tag on the page, HTML offers six levels of the title, that is,

Title Tag Semantics: the title to use, and decreasing order of importance

The basic syntax is as follows:

<h1>   标题文本   </h1>
<h2>   标题文本   </h2>
<h3>   标题文本   </h3>
<h4>   标题文本   </h4>
<h5>   标题文本   </h5>
<h6>   标题文本   </h6>

Display as follows:

Summary:

• Add the title text becomes bold, font size will increase in this order
• Line is only put a title

2) paragraph tag p (memorize)

English abbreviations: paragraph paragraph [pærəgræf] no need to remember the word

Semantic Role:

HTML documents can be divided into several paragraphs

The text on the page should be displayed orderly manner, is inseparable from paragraph tags, just as we normally write articles, the entire page can be divided into several paragraphs, and paragraphs label is

<p>  文本内容  </p>

HTML document is the most common label, by default, text in a paragraph wrap automatically based on the size of the browser window.

3) horizontal label hr (understanding)

English abbreviations: horizontal dash [ˌhɔrəzɑntl] Ibid.

Page often see some horizontal lines separating between paragraphs and paragraphs, so that the structure of the document clear, structured. These horizontal lines can be achieved by inserting a picture, it can simply be done by the label, <hr />that label across the page to create horizontal lines. The basic syntax is as follows:

<hr />是单标签

On a web page displays the default style horizontal lines.

4) Break tag br (memorize)

English abbreviations: break interrupted wrap

In HTML, a paragraph of text will be arranged from left to right, until a right end of the browser window, and then wrap. If you want to display a certain text to force a line, you need to use the Break tag

<br />

If you like this time hit the Enter key line feed directly in the word will not work.

5) div and span tags (Key)

div span is no semantic web layout is our main two boxes Surely you've heard css + div

div division is the abbreviation division, partition means in fact there are many div to combine pages.

span span span; ranges

Syntax:

<div> 这是头部 </div>    <span>今日价格</span>

They are two boxes, used to hold our page elements, but they are different, and now we mainly remember to use and features like

• div tags for layout, but now his party can only put a div
• label layout for span and to be put on a plurality of line span

Behind the back of the display mode of speaking time, I will tell you

Typesetting tag summary

Label name	definition	Explanation
<hx></hx>	Title Tag	As the title use, and decreasing order of importance
<p></p>	Paragraph tag	HTML documents can be divided into several paragraphs
<hr />	Horizontal label	Nothing to say, is a line
<br />	Break tag
<div></div>	div tag	For layout, but now his party can only put a div
<span></span>	span tag	For layout can be put on a plurality of line span

1.2 text formatting tags (memorize)

Web page, sometimes you need to set bold, italic, or underline text effects, then you need to use text formatting tags in HTML, the text displayed in a special way.

the difference:

b just bold, strong addition to still emphasize bold meaning, semantic stronger.

The remaining empathy ...

Ask someone important to remember two groups before bold and italic check back later two groups did not remember

1.3 Label properties

When using HTML to create web pages, HTML tag if you want more information, they can be set using attributes HTML tags. The basic syntax is as follows:

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸">  </手机>

1.4 image tag img (focus)

English abbreviations: image image
To display an image you need to use the image tag, image tag will next be described in detail in the web page as well as and other relevant attributes. (It is a single dog)

The syntax is as follows:

<img src="图像URL" />

The syntax src attribute is used to specify the image file path and file name, he is the img tag of the required attributes.

Behind the border we will use css to do, children's shoes are here to remember this word like a border

note:

1. Tags can have multiple attributes, you must be written at the beginning of the label, the name behind the label.
2. Regardless of the order between the properties, are separate spaces between tag names and attributes, properties and attributes.
3. Take the format of key value pairs = "value" format

such as:

	正常的<br />
    <img src="cz.jpg" width="300" height="300" /><br />
     带有边框的<br />
    <img src="cz.jpg" width="300" height="300" border="3" /><br />
	有提示文本的<br />
	<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" /><br />
	有替换文本的<br />
	<img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />

Master key points:

• Please state image tag attributes that are necessary to write?
• Please state image alt tag attribute differences and title?

1.5 Links tab (focus)

English abbreviations: anchor abbreviations [æŋkə®]. The basic explanation anchor, the anchor

Create a hyperlink in HTML is very simple, just use the label text to include up just fine.

Syntax:

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

Attributes	effect
href	url address specifies the link target, (must attribute) when the href attribute for the label applications, it has a hyperlink function
target	Specifies the link Open the page, its value has _self and _blank two of them _self is the default value, __ blank for the Open in a new window.

note:

1. External links need to add http: // www.baidu.com
2. Internal link Internal link directly to the page name such as <a href = "index.html"> Home
3. If you did not determine the link target, usually the href attribute value is defined as the link label "#" (ie href = "#"), indicates that the link is temporarily to an empty link.
4. Not only you can create a text hyperlink on the page in a variety of page elements, such as images, tables, audio, video, and so can add hyperlinks.

Master key points:

• Say link tag attribute that is necessary to write?
• Please state how the new window opens a link to this page?

1.6 Notes Tab

In HTML, there is a special tag - comment tags. If you need to add some easy to read and understand but do not need to display the comment text on the page in an HTML document, you need to use comment tags.

Simple explanation:

Notes content is not displayed in the browser window, but as part of the HTML content of the document will be downloaded onto the user's computer, you can see when you view the source code.

Syntax:

    <!-- 注释语句 -->     快捷键是：    ctrl + /       或者 ctrl +shift + / 

Notes the importance of:

Comments are posters, the purpose is to better explain this part of the code is doing, the program does not execute this code

Team agreement

Generally used for simple description, as described in some states, and other properties described

A space character before and after each annotation content, comments, located above the comment to the code itself on the line

recommend:

<!-- Comment Text -->
<div>...</div>

Not recommended:

<div>...</div><!-- Comment Text -->	
	
<div><!-- Comment Text -->
    ...
</div>

2. Path (major and difficult)

The actual work, we can not just misplacing documents, or to quickly find them difficult to use them, so we need a folder to manage them.

Directory folder:

It is an ordinary folder, which simply store the page we need to do related material, such as html files, pictures and more.

Root directory

Open the first layer is the root directory folder

Page will be very much in the picture, usually we then create a folder specifically for storing image files (images), the next time you insert an image, you need to use the "path" approach to specify the location of the image file. The path can be divided into: the relative and absolute paths

relative path

The position on the page where reference documents shall be the reference basis for the establishment of a directory path. Accordingly, when stored in a different directory page reference the same file, the path will not be used by the same, it is called a relative path.

Category path	symbol	Explanation
With a path		Simply enter the name of the image file can be, as <img src = "baidu.gif" />.
Under a Path	“/”	The image file is in HTML files sibling folder (e.g. folder name: images) such as <img src = "images / baidu.gif" />.
On a path	“…/”	Added before the file name "... /", and if the levels, you need to use "... / ... /", and so on, such as <img src = "... / baidu.gif" />.

Relative path, starting from the file where the code, we have to find the target file, and we call on the same level at a level simply, is the picture located the HTML page

Absolute path

Absolute path to the directory path to the Web site root directory for reference-based. It is called absolute, means that when all the pages referenced by the same file, the path used is the same.

"D: \ web \ img \ logo.gif", or the complete network address, such as "http://www.itcast.cn/images/logo.gif".

note:

Less use of absolute path, our understanding of it. Note, however, that the wording in particular symbol \ is not a relative path /

3. Summary Today

4. Further Reading @

4.1 Anchor Position (difficulty)

By creating an anchor link, the user can quickly navigate to the target content.

Create anchor links in two steps:

1. 使用相应的id名标注跳转目标的位置。 (找目标)
  <h3 id="two">第2集</h3> 

2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的） （拉关系）  
  <a href="#two">   

Fast memory method:

Like to find someone to work, to find him first, then Latin America, and finally see results.

4.2 base label

grammar:

<base target="_blank" />

to sum up:

1. You can set the overall link base open
2. Written between base
3. All connections are added by default target = "_ blank"

~ ~ All the links to all the set of all links open in a new window page is ~

4.3 pre preformatted text tags

<pre>Preformatted text tag may be defined.

Surrounded by the <pre>label text in the element is usually reserved spaces and line breaks. The text will be presented as a monospaced font.

<pre>

  此例演示如何使用 pre 标签

  对空行和 空格

  进行控制

</pre>

The so-called pre-formatted text is, according to our pre-written text format to display the page, reserved spaces and line breaks and so on.

With this label, inside the text, we will follow the writing mode display, paragraph and line breaks do not need a label. However, it is rarely used, because of the poor overall control.

4.4 Special characters (understand)

Some special symbols, which we then html difficult or inconvenient to directly use, at this time we can use the following alternate code.

Although there are many, but we usually use is relatively small, we focus in mind space is greater than the number is less than the number on it, the rest of the check back.

to sum up:

1. These special characters are operators& beginning to semicolon operator; end.
2. They are not labels, but symbols.
3. HTML can not be used less than the number of "<" and the greater-than sign ">" special characters, the browser will parse them as labels, to display the correct character entities used in the HTML source code

Team agreement

recommend:

   <a href="#">more &gt;&gt;</a>

Not recommended:

   <a href="#">more >> </a>

4.5 html5 development path

What is XHTML 4.6

XHTML is stricter and more pure HTML code.

• XHTML refers to the Extensible Hypertext Markup Language (EXtensible HyperText Markup Language).
• XHTML's goal is to replace HTML.
• XHTML and HTML 4.01 are almost identical.
• XHTML is stricter and more pure HTML version.
• XHTML is HTML as an XML application to be re-defined.
• XHTML is a W3C standard.

What is the difference between 4.7 HTML and XHTML?

• XHTML refers to the Extensible HTML

• XHTML and HTML 4.01 are almost identical

• XHTML is stricter and more pure HTML version

• XHTML is an XML application define the HTML

• XHTML was released in January 2001 W3C Recommendation

• XHTML is supported by all major browsers

• XHTML elements are written in XML format HTML elements. XHTML strict version of HTML, for example, it requires the label must be lowercase, the label must be properly closed, the label must be properly aligned order, for the attribute must be double quotes and the like.

  ​