1. Definitions

HTML tags are HTML language in the basic unit, HTML tags are the most important part of HTML (an application under the Standard Generalized Markup Language).
Feature：

Surrounded by angle brackets Keywords
Usually in pairs
The label on the label is the first start tag, the second tag is the end tag
Start and end tags are also called opening tags and closing tags
There is also a separate presentation of the label
Tags appear in pairs, the contents of an intermediate two labels. The label presented separately, then assign the label attribute.
Content of the page to be in html tag, title, character format, language, compatibility, keywords, description and other information displayed in the head tag, and the content of the page to be shown to be nested within the body tag. Sometimes not write code, although the standard may be normal, but as professionalism, or should cultivate the habit of regular writing.

2. The basic label website

1. Title Tag

<!--标题标签  h1 + tab键 -->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>

2. paragraph tag

<!--p：段落标签-->
<p>
    我们会来到这个世界，是不得不来；我们最终会离开这个世界，是不得不离开
</p>
<p>人是为活着本身而活着，而不是为了活着之外的任何事物所活着</p>
<p>死亡不是失去了生命，只是走出了时间</p>
<p>人是为了活着本身而活着，而不是为了活着之外的任何事物而活着</p>
<p>
    世界上没有一条道路是重复的，也没有一个人生是能够替代的
</p>

3. Break tag

 

4. The horizontal tab

hr/

The horizontal line labels

粗体
斜体

<!--字体样式-->
<strong>洋洋 </strong>
<p>
    <em>洋，女，汉族</em> <br>
    <em>18岁</em>  <br>
</p>

6. The special symbol tag

&nbsp 空格
> <大于小于
© 版权所有
&phone;

<!--空格 &-->
<p>1 Java</p>
<p>1              Java</p>
<p>1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Java</p>
<!--大于小于号-->
&gt;
&lt;
<!--版权符号-->
&copy; 版权所有：1
<!--万能的公式  &  ;-->
&phone;

3. The image tag

Common image formats: .png .jpg .jpeg .bmp .gif ...
png have browser compatibility problems, a little more general use .jpg .gif
imageIs a static resource, generally placed under a single folder, statics \ images
Relative path: the path refers to the relationship between the path of the file where the cause with other files (or folders)
../../
Absolute Path: refers to the absolute position of the directory, directly to the target location, usually the path from the beginning of the letter, the full path to the file with a domain name
https://150.109.117.44:443/usr/themes/PureLoveForTypecho/images/banner2.jpg

4. Hyperlinks

4.1 Basic Usage

<!--
超链接：表示从一个地方跳转到另外一个地方  hao123导航

href：要跳转地址
target： 目标打开的窗口，在自己这个当前页面打开，还是在新的页面打开
    _self : 在自己的窗口打开
    _blank： 在新窗口中打开

和图片嵌套使用
-->

<!--<a href="https://www.baidu.com/" target="_self">百度</a>-->

<!--图片标签-->
<a href="https://www.baidu.com/" target="_self">
    <img src="../statics/images/bd.png">
</a>

4.2 anchor link
- Jump between pages for the specified location: rapid positioning directory
- You can jump on the same page page
- Can also jump from page to page :( need to know)

Anchor :

<!--标记A-->
<a name="markerA">A</a>

Jump to anchor :

<a href="#markerA">A</a> <br>
<a href="#markerB">B</a> <br>
<a href="#markerC">C</a> <br>
<a href="https://www.cnblogs.com/TankXiao/p/9154085.html#dutte">D</a> <br>
<a href="2.基本结构.html#haha">E</a> <br>

4.3 Functional links
- mail
 <a href="mailto:**********@qq.com">联系我们</a>
- QQ

<!--QQ推广-->
<!--https://shang.qq.com/v3/widget.html-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=********&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:*******:53" alt="点击这里给我发消息"
title="点击这里给我发消息"/>
</a>

5. The block elements, inline elements

Block elements: both the content and how much are exclusive line (p, h1 ~ h6)
inline elements: only to extend the length of the content. (A, strong, em .... )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--块元素-->
<p>我是P标签</p>
<h1>我是H1标签</h1>

<!--行内元素-->
<a href="">我是a链接</a>
<strong>粗体</strong>
<em>斜体</em>

</body>
</html>

Ocean ocean ocean

发布了39 篇原创文章 · 获赞 1 · 访问量 551

私信关注

--- front-end label