2.HTML common label

A font tag

Font tag comprising: h1 ~ h6, <font>, <u>, <b>, <strong> <em>, <sup>, <sub>

Title Tag h1 ~ h6

Use the title <h1>to <h6>label definitions. <h1>Defines the maximum title, <h6>define the minimum title. Align attribute having attribute value may be: left, center, right.

Font tag <font> (obsolete)

• color="红色"Or color="#ff00cc"or color="new rgb(0,0,255)": Set the font color. Setting way: word # ff00cc rgb (0,0,255)

• size: Set the font size. The range can only be: 1-7. When the value, if the value is greater than 7 then 7 according to count, then if the value is less than 1 according to count 1. If you want a larger font, it can only be resolved through css styles

• face="微软雅黑": Set the font type. Note that when writing fonts, "Microsoft elegant black," the word can not be wrong.

Bold tag <b> or <strong> (abandoned)

Example:

Ma Ying-jeou
<B> Mr Ma </ b>
<Strong> as capable </ strong>

effect:

Underlined  <u> in the scribe line mark <s>(obsolete)

Italic  <i>or <em>(obsolete)

Superscript <sup> index <sub>

Small mark these two labels confusing, remember how it? This in mind: bmeanbottom：底部

example:

5<sup>2</sup>
8<sub>2</sub>

effect:

Special characters

symbol

•  : Space (non-breaking spacing, continue to play spaces)
• <: Number of less than (less than)
• >: No greater than (greater than)
• &:symbol&
• ":Double quotes
• ':apostrophe
• ©:copyright©
• ™:trademark™

They claim memorized special characters: & nbsp;, & lt;, & gt;, & copy

For example, you want <p>as a text displayed on the page, write directly <p>is certainly not, because it represents a paragraph tag, so there need to use the escape character . It would look like this:

This is an HTML language & lt; p & gt; tag

II. Typesetting tag

The paragraph tag <p>

Paragraph: is the abbreviation of the English paragraph.

Attributes:

• align = 'attribute value': alignment. Attribute value comprises: left, center, right

k, following these words, we must keep in mind. HTML tags are hierarchical. All HTML tags will be divided into two types:

• Text level tag: p, span, a, b, i, u, em. Text tag can only put text, images, form elements.
• Container-level tag: div, h series, li, dt, dd. Container-level tag you can put anything.

P from the first day of learning, we must remember tightly: p tag is a text-level tag, which can only be put p text, images, form elements . Other one is allowed to discharge.

Block-level tags <div> and <span>

div and span tags are very important, div semantics division "division"; span semantics that span "range span." CSS course you will know that these two things are the most important "box."

div: the contents of the label pieces as a treat (division). You must occupy a separate line.

div tag attributes:

• align="属性值": Set pieces position. Alternatively the attribute values: left, right, center

<span>And the <div>only difference is : <span>do not wrap, and <div>it wrapped.

If a separate insert these two elements in a web page, will not have any impact on the page. These two elements are defined specifically for the CSS style born. Or, DIV + CSS to achieve a variety of styles.

 

div in the browser, the default is not adding any effect, but the semantics changed, all the elements in the div is a small area.

div tag is a container-level tag, which can put anything, even put their own div.

span is also the expression "small area, small span" tag, but it is a text-level label.

That is, span which can only be placed text, images, form elements. span which can not be put p, h, ul, dl, ol, div.

Wrap label <br>

Horizontal label<hr>

Content is centered label <center>

At this point the representative center is a label, not the value of a property. As long as the content in this tag inside, will be living in the middle of the browser.

H5 to the inside, center tag is not recommended.

III. Hyperlinks

Hyperlinks in three forms:

1, external links :

Links to external files. For example:

<a href="new.html"> Click to go to a new page </a>

English is a anchor"anchor" means, if the page to another page threw an anchor. It is a text-class label.

href is the English hypertext referenceabbreviation of hypertext address. Read "Drink Sharif," do not read "drinking husband."

Of course, we can also directly click through links to access a Web site. For example as follows;

 <a href="http://www.baidu.com" target="_blank">进入百度</a>

2, anchor link :

It refers to a hyperlink a name, is to jump in a different position on this page or other pages of . For example, at the bottom of the page there is an upward arrow, click on the arrow to return to the top, this is the use to anchor links.
First we need to create an anchor point , that is, the use of nameproperty or idproperty to that particular location a name. Results are as follows:

The figure above explanation:

11 lines of code, said at the top of this anchor name is top.
Then set a hyperlink at the bottom, will return to the top of the clicks (At this point, the end of the url of the page also appeared #top).

Note that the figure above the red line part of the #No. Do not forget , represents a jump to a specific location named top, this is our policy. If less #number, then click, it will jump to the top of this file or folder to the top.

3, e-mail link : Code Example:

<a href="mailto:[email protected]"> Contact us </a>

Effect: After clicking, it will pop outlook, not very useful.

Prerequisite: Computer mail client must be installed and configured the mail-related information

Hyperlink properties

• href: The target URL
• title: Hover text.
• name: Mainly used to set an anchor name.
• target: The browser to use what way to open the target page. targetProperty has the following values:
  • _self: Display (the default value) on the same page
  • _blank: Open in a new window .
  • _parent: Displayed in the parent window
  • _top: In the top-level window display

blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是规定，没啥好解释的。
也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了target=”_blank”，就是在新的空白标签页中打开。

四.图片标签 <img />

img: 代表的就是一张图片。是单边标记。

img是自封闭标签，也称为单标签。

能插入的图片类型：

• 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。

• 不能往网页中插入的图片格式是：psd、ai

HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。

src属性：图片的相对路径和绝对路径

这里涉及到图片的一个属性：

• src属性：指图片的路径。
• img 是image“图片”的简写，src 是英语source“资源”的缩写。

在写图片的路径时，有两种写法：相对路径、绝对路径

 

1、写法一：相对路径

相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和父路径。

2、写法二：绝对路径

（1）以盘符开始的绝对路径。举例：

<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">

（2）网络路径。举例：

<img src="http://www.baidu.com/2016040102.jpg">

相对路径和绝对路径的总结

相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。
相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

问题：我的网页在C盘，图片却在D盘，能不能插入呢？

答案： 用相对路径不能，用绝对路径也不能。

注意：可以使用file://来插入，但是这种方法，没有任何意义！因为服务器上没有所谓c盘、d盘。

下面的方法是行的，但是没有任何工程上的意义，这是因为服务器没有盘符，linux系统没有盘符：

<img src="file://C:\Users\Danny\Pictures\明星\1.jpg" alt="" />

总结一下：

• 我们现在无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。

• 相对路径，就是../ image/ 这种路径。从自己出发，找到别人；

• 绝对路径，就是http://开头的路径。

• 绝对不允许使用file://开头的东西，这个是完全错误的！

img标签的常用其它属性

• width：宽度
• height：高度
• title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。
• align：指图片的水平对齐方式，属性值可以是：left、center、right

• alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）

文本级的标签显示在浏览器上时，不管你的图片多高，它总会底边对齐，这是一种现象，“高矮不齐，底边对齐”。

此时大家可以给图片设置align属性，来查看效果吧！

注意事项：
（1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。
（2）如果想实现图文混排的效果，请使用align属性，取值为left或right