search

Home  >  Article  >  Web Front-end  >  Share a summary of basic knowledge of HTML

Share a summary of basic knowledge of HTML

零下一度
零下一度Original
2017-06-26 15:43:011194browse

　 Basic understanding of HTML

1. Introduction

　 1.HTML isHypertext Markup Language, an application under Standard Universal Markup Language, an interpreted language.

　2. "Hypertext" means that the page can contain pictures, links, and even non-text elements such as music and programs.

3. The structure of hypertext markup language includes the "head" part (English: Head) and the "main" part (English: Body). The "head" part provides information about the web page. of information, the "Main Body" section provides the specific content of the web page.

2. Language Features (Content excerpted from--Baidu Encyclopedia)

##　1 .Simplicity: The hypertext markup language version upgrade adopts a superset method, making it more flexible and convenient. 　

2. Scalability: The wide application of hypertext markup language has brought about requirements for strengthening functions, adding identifiers, etc. Hypertext markup language adopts subclasses The element approach brings guarantees for system expansion.

3. Platform independence: Although personal computers are popular, there are many people using other machines such as MAC. Hypertext markup language can be used on a wide range of platforms, which is also the case with the World Wide Web ( WWW) is one of the reasons for its popularity.

　4.Versatility: In addition, HTML is the universal language of the Internet, a simple and universal all-purpose markup language. It allows web page producers to create complex pages that combine text and images, and these pages can be viewed by anyone else on the Internet, regardless of the type of computer or browser used.

3. Overall structure

HTML standard file structure has a basic overall structure, that is, the beginning and end marks of the Hypertext Markup Language file and the header and entity parts of Hypertext Markup Language. There are three double tags used to confirm the overall structure of the page.

　

1. The overall file code

The

tag character indicates that the file uses hypertext markup language (Chinese for this tag (Full name) to describe, is the start tag and end tag of a Hypertext Markup Language file.

　

2. Header content

　　

; These two tags represent the header information respectively. Beginning and end. The tags contained in the header are the title, preface, description and other content of the page. It is not displayed as content itself, but affects the display effect of the web page. The most commonly used tags in the header are the title tag and meta tag,

. The title tag is used to define the title of the web page, and its content is displayed in the window bar of the web page. Web page titles can be used by browsers as bookmarks and favorites.

HTML head element:

HTML The meta tag

##
 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <title>HTML当中的meta标签</title> 5          6         <!--设置网页的编码--> 7         <meta charset="utf-8"/> 8          9         <!--设置网页的关键字-->10         <meta name="keywords" content="页面关键字"/>11         12         <!--设置网页的描述-->13         <meta name="description" content="网页相关描述信息" />14         15         <!--设置网页的更新信息-->16         <meta name="revised" content="更新信息,2017年3月2日09:55:00"/>17         18         <!--设置网页刷新频率以及跳转地址-->19         <meta http-equiv="refresh" content="3," />20         21         <!--设置标题处的ico小图标-->22         <link rel="shortcut icon" href="./my1.ico" type="image/x-icon"/>23         24         <!--引入一个外部的css层叠样式表-->25         <link rel="stylesheet" href="./css.css?1.1.11" type="text/css"/>26     </head>27     <body>28     </body>29 </html>
The meta tag in HTML

Script tag and Style tag in the head tag

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <title>head标签中的Script标签和Style标签</title> 5         <meta charset="utf-8"/> 6          7         <!--通常是写js用的标签--> 8         <script> 9             //在网页打开的同时弹出了一个对话框10             //alert('弹框内容');11         </script>12         13         <!--引入一个外部的js文件-->14         <script src="1.js?1.1.11"></script>15         16         <!--在当前页面来添加css样式-->17         <style>18             font{19                 color:red;20             }21         </style>22     </head>23     <body>24         25     </body>26 </html>
Script tag and Style tag in the head tag

　　3.主体内容

　　　　；，网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

　　　 HTML当中的文本标签

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <title>HTML当中的文本标签</title> 5         <meta charset="utf-8"/> 6     </head> 7     <body> 8         <!--标题标签--> 9         <h1>让我们来看一下，<u>字体</u>字体的大小变化</h1>10         <h2>让我们来看一下，字体的大小变化</h2>11         <h3>让我们来看一下，字体的大小变化</h3>12         <h4>让我们来看一下，字体的大小变化</h4>13         <h5>让我们来看一下，字体的大小变化</h5>14         <h6>让我们来看一下，字体的大小变化</h6>15         16         <!--水平线标签-->17         <hr/>18         19         <!--b标签：普通的加粗标签-->20         <b>文字加粗</b><br/>21         22         <!--strong标签：加粗强调的作用，SEO可以着重抓取到的内容-->23         <strong>文字加粗（强调）</strong><br/>24         25         <!--斜体、强调标签-->26         <em>斜体（强调）</em><br/>27         28         <!--普通的斜体标签-->29         <i>让你随时<u>脉动</u>回来！</i><br/>30         31         <!--普通的斜体标签-->32         <cite>让你随时脉动回来！</cite><br/>33         34         <!--下标标签-->35         H<sub>2</sub>0<br/>36         37         <!--上标标签-->38         2<sup>2</sup>=439         40         <!--段落标签-->41         <p>p标签代表段落，一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>42         43     </body>44 </html>
HTML当中的文本标签

 　　文本标签页面展示效果：

 

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <title>HTML当中的文本标签</title> 5         <meta charset="utf-8"/> 6     </head> 7     <body> 8         <h1>HTML当中的文本标签</h1> 9         10         <!--定义文档的输出方向-->11         <bdo dir="ltr">正大光明</bdo><br/>12         <bdo dir="rtl">正大光明</bdo><br/>13         14         <!--定义一个短的引用-->15         沙僧说：<q>师傅，大师兄和二师兄被妖怪抓走啦~~</q><br/>16         17         <!--表示一个缩写的形式-->18         <abbr title="United States">US</abbr><br/>19         20         <!--删除线标签-->21         测试删除线测试删除线测试删除线测试删除线测试删除线<del>苍老师？</del>，<del>被删除了哈哈</del><br/>22         23         <!--定义一段被隐藏的文字,summary标签可以定义列表的标题-->24         <details>25             <summary>鬼吹灯系列丛书</summary>26             鬼吹灯之精绝古城<br/>27             鬼吹灯之黄皮子坟<br/>28             鬼吹灯之云南虫谷<br/>29         </details>30         31         <!--对话标签-->32         <dialog open>33             <dt>男：</dt><dd>我们分手吧~~</dd>34             <dt>女：</dt><dd>为什么？</dd>35             <dt>男：</dt><dd>我怀孕了~~</dd>36             <dt>女：</dt><dd>不，不可能，我不相信……</dd>37             <dt>男：</dt><dd>你看你，我们连最起码的信任都没有了，还谈什么？</dd>38             <dt>女：</dt><dd>…………</dd>39         </dialog>40     </body>41 </html>
HTML当中的文本标签

 

 　　HTML当中的列表标签

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <title>HTML当中的列表标签</title> 5         <meta charset="utf-8"/> 6     </head> 7     <body> 8         <h1>HTML当中的列表标签</h1> 9         <!--有序列表-->10         <ol type="A">11             <li>有序列表1</li>12             <li>有序列表2</li>13             <li>有序列表3</li>14         </ol>15         16         <!--无序列表-->17         <ul type="circle">18             <li>无序列表1</li>19             <li>无序列表2</li>20             <li>无序列表3</li>21         </ul>22         23         <!--格式化输出标签-->24         <pre class="brush:php;toolbar:false">25         *26         * *27         * * *28         * * * *29         
30     31 
HTML当中的列表标签

　　页面显示效果：

　　在

    标签中增加 type 属性，使其属性值为 A or a or 1 会显示不同的排序编码，可视情况而定

     

     　　HTML当中的超链接标签

    　　：超链接标签
    　　　　　　属性： 值：
    　　　　　　href： 路径或外部网站
    　　　　　　title： 鼠标移入链接时提示的内容
    　　　　　　target： _self (默认，从当前标签页打开链接)
    　　　　　　　　　　 _blank (在新标签页中打开链接)
    　　　　　　　　　　 _parent (在父级框架中打开链接)
    　　　　　　　　　　 _top (在顶级框架中打开链接)
    　　　　　　　　　　 framename(在制定框架名的位置打开链接)

     1 <!DOCTYPE html> 2 <html> 3     <head> 4         <title>HTML当中的超链接标签 a</title> 5         <meta charset="utf-8"/> 6     </head> 7     <body> 8         <!--相对路径链接到本地的文件--> 9         <a href="./1.html">链接本地HTML文件</a><br/><br/>10         11         <!--链接到了一个外部的网站-->12         <a href="http://lol.qq.com" target="_blank">英雄联盟官网</a>13         14         <!--使用绝对路径链接到本地文件-->15         <a href="D:\Wamp\www\test\lesson_HTML\test.html" title="超链接信息">5.html</a>16         17     </body>18 </html>
    HTML当中的超链接标签

     

    　　页面显示效果：

    　　a标签的锚点功能

    　　　　使 a 链接标签可跳转到页面指定元素的位置

     1 <!DOCTYPE html> 2 <html> 3     <head> 4         <title>a标签的锚点功能</title> 5         <meta charset="utf-8"/> 6         <style> 7             /*找到4个div添加了一些属性*/ 8             div{ 9                 /*设置一下div的宽度*/10                 width:500px;11                 12                 /*设置一下div的高度*/13                 height:500px;14                 15                 /*设置一下div的边框：1像素宽，实线，红色*/16                 border:1px solid red;17             }18         </style>19     </head>20     <body>21         <h1>a标签的锚点功能</h1>22         <a href="#one">第一章：三打白骨将</a><br/>23         <a href="#two">第二章：倒拔垂杨柳</a><br/>24         <a href="#three">第三章：火烧赤壁</a><br/>25         <a href="#four">第四章：刘姥姥进大观园</a><br/>26         27         <!--第一章-->28         <h2><a id="one"></a>第一章：三打白骨将</h2>29         <div>30             <p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。31             </p>32         </div>33         34         <!--第二章-->35         <h2><a id="two"></a>第二章：倒拔垂杨柳</h2>36         <div>37             <p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。38             </p>39         </div>40         41         <!--第三章-->42         <h2><a id="three"></a>第三章：火烧赤壁</h2>43         <div>44             <p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。45             </p>46         </div>47         48         <!--第四章-->49         <h2><a id="four"></a>第四章：刘姥姥进大观园</h2>50         <div>51             <p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。52             </p>53         </div>54     </body>55 </html>
    a标签的锚点功能

     

     

     　　

    　　HTML当中的常见实体内容：

     

     

The above is the detailed content of Share a summary of basic knowledge of HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：A brief introduction to CSS knowledgeNext article：A brief introduction to CSS knowledge

Related articles

See more