HTML 基本认识

一、简介

　　1.HTML是超文本标记语言，标准通用标记语言下的一个应用，解释性语言。

　　2.“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

　　3.超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

二、语言特点（内容摘抄自--百度百科）

　　1.简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。　　

　　2.可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

　　3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行原因之一。

　　4.通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

三、整体结构

　　HTML标准文件结构有一个基本的整体结构，即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。

　　1.文件代码整体

　　　　标记符<html>,说明该文件是用超文本标记语言（本标签的中文全称）来描述的,<html></html>是超文本标记语言文件的开始标记和结尾标记。

　　2.头部内容

　　　　<head></head>；这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符，

　　　　其中标题标记符用于定义网页的标题，它的内容显示在网页窗口栏中，网页标题可被浏览器用作书签和收藏清单。

　　　　 HTML head 元素：

　　　　

　　　HTML当中的meta标签

 <!DOCTYPE html>

 <html>

     <head>

         <title>HTML当中的meta标签</title>

         <!--设置网页的编码-->

         <meta charset="utf-8"/>

         <!--设置网页的关键字-->

         <meta name="keywords" content="页面关键字"/>

         <!--设置网页的描述-->

         <meta name="description" content="网页相关描述信息" />

         <!--设置网页的更新信息-->

         <meta name="revised" content="更新信息,2017年3月2日09:55:00"/>

         <!--设置网页刷新频率以及跳转地址-->

         <meta http-equiv="refresh" content="3,http://www.bing.com" />

         <!--设置标题处的ico小图标-->

         <link rel="shortcut icon" href="./my1.ico" type="image/x-icon"/>

         <!--引入一个外部的css层叠样式表-->

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

     </head>

     <body>

     </body>

 </html>

HTML当中的meta标签

　　　head标签中的Script标签和Style标签

 <!DOCTYPE html>

 <html>

     <head>

         <title>head标签中的Script标签和Style标签</title>

         <meta charset="utf-8"/>

         <!--通常是写js用的标签-->

         <script>

             //在网页打开的同时弹出了一个对话框

             //alert('弹框内容');

         </script>

         <!--引入一个外部的js文件-->

         <script src="1.js"></script>

         <!--在当前页面来添加css样式-->

         <style>

             font{

                 color:red;

             }

         </style>

     </head>

     <body>

     </body>

 </html>

head标签中的Script标签和Style标签

　　3.主体内容

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

　　　 HTML当中的文本标签

 <!DOCTYPE html>

 <html>

     <head>

         <title>HTML当中的文本标签</title>

         <meta charset="utf-8"/>

     </head>

     <body>

         <!--标题标签-->

         <h1>让我们来看一下，<u>字体</u>字体的大小变化</h1>

         <h2>让我们来看一下，字体的大小变化</h2>

         <h3>让我们来看一下，字体的大小变化</h3>

         <h4>让我们来看一下，字体的大小变化</h4>

         <h5>让我们来看一下，字体的大小变化</h5>

         <h6>让我们来看一下，字体的大小变化</h6>

         <!--水平线标签-->

         <hr/>

         <!--b标签：普通的加粗标签-->

         <b>文字加粗</b><br/>

         <!--strong标签：加粗强调的作用，SEO可以着重抓取到的内容-->

         <strong>文字加粗（强调）</strong><br/>

         <!--斜体、强调标签-->

         <em>斜体（强调）</em><br/>

         <!--普通的斜体标签-->

         <i>让你随时<u>脉动</u>回来！</i><br/>

         <!--普通的斜体标签-->

         <cite>让你随时脉动回来！</cite><br/>

         <!--下标标签-->

         H<sub>2</sub>0<br/>

         <!--上标标签-->

         2<sup>2</sup>=4

         <!--段落标签-->

         <p>p标签代表段落，一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>

     </body>

 </html>

HTML当中的文本标签

　　文本标签页面展示效果：

 <!DOCTYPE html>

 <html>

     <head>

         <title>HTML当中的文本标签</title>

         <meta charset="utf-8"/>

     </head>

     <body>

         <h1>HTML当中的文本标签</h1>

         <!--定义文档的输出方向-->

         <bdo dir="ltr">正大光明</bdo><br/>

         <bdo dir="rtl">正大光明</bdo><br/>

         <!--定义一个短的引用-->

         沙僧说：<q>师傅，大师兄和二师兄被妖怪抓走啦~~</q><br/>

         <!--表示一个缩写的形式-->

         <abbr title="United States">US</abbr><br/>

         <!--删除线标签-->

         测试删除线测试删除线测试删除线测试删除线测试删除线<del>苍老师？</del>，<del>被删除了哈哈</del><br/>

         <!--定义一段被隐藏的文字,summary标签可以定义列表的标题-->

         <details>

             <summary>鬼吹灯系列丛书</summary>

             鬼吹灯之精绝古城<br/>

             鬼吹灯之黄皮子坟<br/>

             鬼吹灯之云南虫谷<br/>

         </details>

         <!--对话标签-->

         <dialog open>

             <dt>男：</dt><dd>我们分手吧~~</dd>

             <dt>女：</dt><dd>为什么？</dd>

             <dt>男：</dt><dd>我怀孕了~~</dd>

             <dt>女：</dt><dd>不，不可能，我不相信……</dd>

             <dt>男：</dt><dd>你看你，我们连最起码的信任都没有了，还谈什么？</dd>

             <dt>女：</dt><dd>…………</dd>

         </dialog>

     </body>

 </html>

HTML当中的文本标签

　　HTML当中的列表标签

 <!DOCTYPE html>

 <html>

     <head>

         <title>HTML当中的列表标签</title>

         <meta charset="utf-8"/>

     </head>

     <body>

         <h1>HTML当中的列表标签</h1>

         <!--有序列表-->

         <ol type="A">

             <li>有序列表1</li>

             <li>有序列表2</li>

             <li>有序列表3</li>

         </ol>

         <!--无序列表-->

         <ul type="circle">

             <li>无序列表1</li>

             <li>无序列表2</li>

             <li>无序列表3</li>

         </ul>

         <!--格式化输出标签-->

         <pre>

         *

         * *

         * * *

         * * * *

         </pre>

     </body>

 </html>

HTML当中的列表标签

　　页面显示效果：

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

　　HTML当中的超链接标签

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

 <!DOCTYPE html>

 <html>

     <head>

         <title>HTML当中的超链接标签 a</title>

         <meta charset="utf-8"/>

     </head>

     <body>

         <!--相对路径链接到本地的文件-->

         <a href="./1.html">链接本地HTML文件</a><br/><br/>

         <!--链接到了一个外部的网站-->

         <a href="http://lol.qq.com" target="_blank">英雄联盟官网</a>

         <!--使用绝对路径链接到本地文件-->

         <a href="D:\Wamp\www\test\lesson_HTML\test.html" title="超链接信息">5.html</a>

     </body>

 </html>

HTML当中的超链接标签

　　页面显示效果：

　　a标签的锚点功能

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

 <!DOCTYPE html>

 <html>

     <head>

         <title>a标签的锚点功能</title>

         <meta charset="utf-8"/>

         <style>

             /*找到4个div添加了一些属性*/

             div{

                 /*设置一下div的宽度*/

                 width:500px;

                 /*设置一下div的高度*/

                 height:500px;

                 /*设置一下div的边框：1像素宽，实线，红色*/

                 border:1px solid red;

             }

         </style>

     </head>

     <body>

         <h1>a标签的锚点功能</h1>

         <a href="#one">第一章：三打白骨将</a><br/>

         <a href="#two">第二章：倒拔垂杨柳</a><br/>

         <a href="#three">第三章：火烧赤壁</a><br/>

         <a href="#four">第四章：刘姥姥进大观园</a><br/>

         <!--第一章-->

         <h2><a id="one"></a>第一章：三打白骨将</h2>

         <div>

             <p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。

             </p>

         </div>

         <!--第二章-->

         <h2><a id="two"></a>第二章：倒拔垂杨柳</h2>

         <div>

             <p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。

             </p>

         </div>

         <!--第三章-->

         <h2><a id="three"></a>第三章：火烧赤壁</h2>

         <div>

             <p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。

             </p>

         </div>

         <!--第四章-->

         <h2><a id="four"></a>第四章：刘姥姥进大观园</h2>

         <div>

             <p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。

             </p>

         </div>

     </body>

 </html>

a标签的锚点功能

　　

　　HTML当中的常见实体内容：

HTML学习笔记《一》 ---- HTML基本认识的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  3. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  4. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  5. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  6. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  9. DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记

    今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...

  10. ucos实时操作系统学习笔记——任务间通信（消息）

    ucos另一种任务间通信的机制是消息(mbox),个人感觉是它是queue中只有一个信息的特殊情况,从代码中可以很清楚的看到,因为之前有关于queue的学习笔记,所以一并讲一下mbox.为什么有了qu ...

随机推荐

  1. 基于jeesite+android开发 电子商务系统免费教程

    下载地址: jeesite免费教程 基于jeesite+android开发 电子商务系统免费教程 基于jeesite+android开发 电子商务系统免费教程 这个教程已经录制完很久了,一直没有公开, ...

  2. ReentrantReadWriteLock源码分析（一）

    此处源码分析,主要是基于读锁,非公平机制,JDK1.8. 问题: 1.ReentrantReadWriteLock是如何创建读锁与写锁? 2.读锁与写锁的区别是什么? 3.锁的重入次数与获取锁的线程数 ...

  3. Oracle性能问题sql调优脚本集

    ---------------------------------------------------------------------------------------------------- ...

  4. 简单HOG+SVM mnist手写数字分类

    使用工具 :VS2013 + OpenCV 3.1 数据集:minst 训练数据:60000张 测试数据:10000张 输出模型:HOG_SVM_DATA.xml 数据准备 train-images- ...

  5. function参数

    expr_without_variable { Z_LVAL($$.u.constant) = ; zend_do_pass_param(&$, ZEND_SEND_VAL, Z_LVAL($ ...

  6. (转)支持Multi Range Read索引优化

    支持Multi Range Read索引优化 原文:http://book.51cto.com/art/201701/529465.htm http://book.51cto.com/art/2016 ...

  7. (转)MySQL数据丢失讨论

    原文地址:http://hatemysql.com/tag/sync_binlog/ 1.  概述 很多企业选择MySQL都会担心它的数据丢失问题,从而选择Oracle,但是其实并不十分清楚什么情况下 ...

  8. 原生JavaScript的DOM操作方法总结

    什么是DOM? DOM即文档对象模型,Document Object Model.  是HTML和XML文档的编程接口.它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从 ...

  9. 使用vue模拟购物车小球动画

    使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...

  10. Android 开发工具类 15_ MyAsyncTask

    AsyncTask 对于生命周期较短且需要在UI上显示进度和结果的后台操作是很好的解决方案.然而,当 Activity 重新启动时,这种操作将不会持续进行,也就是说,AsyncTask 在设备的方向变 ...