Learn Web HTML (ii) tags, hyperlinks, special symbols, lists, music, scrolling, head, and more from scratch

Hello everyone, here is daotin from the beginning of the Web series tutorial. This article is starting in " daotin balderdash ", Welcome to subscribe to the attention. Here I will start with the Web front End 0 Foundation, step-up learning web-related knowledge points, during the period will also share some fun projects. Now let's go to the Web Front end learning Adventure tour!

One, label 1, single label

• Comment Tags:<!-- 注释 -->

• Line Wrapping Label:<br> 或 <br />

• Horizontal line Label:

2. Double Label

• Paragraph Tags:<p></p>

Features: Blank lines are generated up and down automatically. BR line wrapping does not generate blank lines.

• Title Tags:

H1 can only appear once on a page. (Function: Easy SEO search engine optimization)

• Text Tags:<font size="" color=""></font>

• Text formatting tags

text Bold :<strong></strong> <b></b>

Work to use strong, for the blind strong have semantic emphasis on the function.

Text skew:<em></em> <i></i> <!-- 工作里尽量使用em，原因同strong -->

Strikethrough Labels:<del></del> <s></s> <!--工作里尽量使用del -->

Underline Label:<ins></ins> <u></u> <!--工作里尽量ins-->

Picture Tags:

SRC: The source of the picture (required write attribute)
alt: Replace text, the text displayed when the picture is not displayed (importance: 1. SEO optimization 2. Blind reading needs)
Title: Prompt text, mouse on the picture to display the text
Width: Picture width
Height: Picture height

PS: Picture does not define when the width is high, the picture is displayed according to 100% scale, if only changes the width or height of the picture, the picture is scaled

Second, hyperlinks

<a href="" title="" target="">填写内容</a>

HREF: The path to go, the page to jump, the required write property
Title: Prompt text, mouse over link to display the text
Target= "Self" (default), opens on its own page (closes its page, opens the link page)

target= "Blank" to open a new page (its own page does not close, open a new link page)

PS: When the value of the href is javascript:void(0); or, it means that the javascript:; hyperlink does nothing and does not make any jumps.

1. Anchor Chain Connection

Let's figure out what the anchor chain is:

Anchor links are also known as anchors, named anchor links (also called Bookmark links) are often used for those large and cumbersome Web pages, by clicking on the named Anchor Point, automatically jump to the location where we set the anchor point, similar to when we read a book page number or chapter back hint.

The anchor link can jump to any location on the page. Usually used in the bottom of the page, click Back to the top. The name of the anchor link can be arbitrarily taken, and only acts as a marker.

<p id="AAA">  </p>...<a href="#AAA"></a>   // 超链接到锚点

2. Empty Chain

Do not know when linking to that page, with empty chain

<a href="#">空链</a>

PS: Empty chain equivalent to #top, the actual click on this link will jump to the top of the page position.

3, compressed file download

<a href="../../xxx.rar"></a>

PS: Not recommended for use

4. Hyperlink optimization

<base target="_blank">   // 让所有的超链接都在新窗口打开

PS: The position of writing is inside the head.

Third, special characters

Special Symbols	character Code
Spaces	 
<	&lt;
>	&gt;
&	&amp;
￥	&yen;
?	&copy;
?	&reg;
X	&times;
÷	&devide;

Reference Link: HTML special character encoding comparison table

Iv. list 1, unordered list

<ul type="">    <li></li>    <!-- 列表项 -->    <li></li>    <li></li>    ......</ul>

type="square": Small Squares
type="disc": Solid Small Circle
type="circle": Hollow Small Circle

2. Ordered list

<ol type="" start="">    <li></li>   <!-- 列表项 -->    <li></li>    <li></li>    ......</ol>

type="1,a,A,i,I", the value of type can be 1,a,a,i,i

start="3"Determines the position of the beginning.

3. Custom List

<dl><dt></dt>    <!-- 小标题 -->  <dd></dd>   <!-- 解释标题 -->  <dd></dd>   <!-- 解释标题 --></dl>

Five, music tags

<embed src="1.mp3" hidden="true"></embed>

hidden="true"Hide Music Tags

Vi. Scrolling Labels

<marquee width="" height="" bgcolor="" behavior="" direction="" loop=""></marquee>

Width: Wide
Height: High
bgcolor: Background color

Behavior: How to set scrolling
? Alternate: Scrolling back and forth between the ends
? Scroll: Scrolls from one end to the other, repeating
? Slide: Scrolls from one end to the other and does not repeat

Direction: Setting the direction of scrolling
? Left | Right | Up | Down
Loop: Scroll Count (-1: Scroll down)

Vii. related knowledge in head 1, CharSet code

<meta charset="UTF-8">

Ascii/ansi/unicode: English
GBK: Asian Universal Character Set
GB2312: Chinese Simplified
BIG5: Taiwan Ceresio Traditional
UTF-8: World Universal Character Set

2, name2.1, key words

<meta name="keywords" content="">

Tell the search engine your site's keywords. SEO optimized use

2.2. Description of the website

<meta name="discription" content="">

Tell the search engine the main content of your site. This description is for SEO and users to see.

2.3. Author

<meta name="author" content="名字">

Tell the search engine the creator of your site

2.4. Document Search

<meta name="robots" content="all | none | index | noindex | follow | nofollow">

Sometimes there will be some site content, do not want to be robots crawl and public. To solve this problem, the robots development community offers two options: one is robots.txt and the other is the robots meta tag.
The properties are described as follows:
All: (default) The file will be retrieved, and the link on the page can be queried;
None: The file will not be retrieved, and the link on the page cannot be queried;
Index: The document will be retrieved;
Follow: Links on the page can be queried;
NOINDEX: The file will not be retrieved, but the link on the page can be queried;
Nofollow: The file will not be retrieved and the link on the page can be queried.

3. Http-equiv Page Redirection

<meta http-equiv="reflesh" content="5; http://www.google.com">

Web page Auto Jump: page 5 seconds after automatically jump to Google home page

4. Link an external style sheet

<link rel="stylesheet" type="text/css" href="1.css">

rel="stylesheet": What is the link? Style sheet or icon
type="text/css" type="text/css": Specifies the MIME type of the linked file, that is, CSS or JS when linking the file
href="1.css": Linked file path

5. Set icon

<link rel="icon" href="1.ico">

Viii. Summary

Today's content is: tags, hyperlinks, special symbols, lists, music tags, scrolling labels, and head-related knowledge points.

The next step is to explain the form, form, and more.

Web-based HTML (ii) tags, hyperlinks, special symbols, lists, music, scrolling, head, etc.